Scribd
Upload
21 views1 page

Style Guide

The UI Style Guidelines for the Tracto App focus on simplicity, accessibility, and trust for low-literacy, rural users. It outlines design elements including color palettes, typography, iconography, text fields, buttons, and cards, providing specific rules for each component. The guidelines aim to create a user-friendly healthcare app that is visually appealing and easy to navigate.

Uploaded by

football.testing.ai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views1 page

Style Guide

The UI Style Guidelines for the Tracto App focus on simplicity, accessibility, and trust for low-literacy, rural users. It outlines design elements including color palettes, typography, iconography, text fields, buttons, and cards, providing specific rules for each component. The guidelines aim to create a user-friendly healthcare app that is visually appealing and easy to navigate.

Uploaded by

football.testing.ai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

UI Style Guidelines

Tracto App
Healthcare App Designed for low-literacy, rural users

Design Goal 01. Simplicity

02. Acessibility

03. Trust

01. Colors

P rimary

#407C E2 #6FA5 EB #3869D8 #9F BDF0

Secondary

#07A996 #0CC0A7 #00897 B #77D EB9

State

Success a
W rning Emergency
#27AE60 #E2 B93B #EA2C18

Background

#FFFFFF #F3F4F6 # E5E7EB

T ext

#000000 1 2937
# F #4 B5563 #9CA3AF

02. Typography
er

a
Int
G oogle Fonts

Name Font size Font weight

A Heading 1

Heading 2
32 px

28 px
Bold

Bold
Heading
Line height and paragraph Heading 3 24 px Semi Bold
spacing for heading is
1.1 x font size
Button 16 px Bold
Body 1 14 px Regular
Body 2 12 px Regular

03. Iconography

icons

04. Textfields
Input Rules: 

Padding Left -> 2 x font size

Padding Top-Bottom -> 1 x font size
Padding Right(icon) -> 2 x font size

Label , Status & Placeholder Input State

Label
Input Text
Placeholder
Success !
Status
Input Text

Active Warning !

Input Text Input Text

Status Error !

05. Buttons
Button Rules: 
 Full-width Button : 

Padding Left Right -> 5 x font size
 Left Right -> determined by the device width

Padding Top Bottom -> 1 x font size Top Bottom -> 1 x font size

Color Variants

Primary Normal Outline

Button Sample Default


Button Sample Button Sample

Secondary
Hover
Button Sample Button Sample Button Sample

Active
Button Sample Button Sample

06. Cards
Cards

Card Title Status

Some quick example text to build on the card title and make up
the bulk of the card's content. make up the bulk of the card's
content.

Link

You might also like