Index Style Guide

Style Guide

Colors

Primary Text

-brown

#26180F

Secondary Text

-warmbrown

#3A2820

Tertiary Text

-warmbrown/80

#3A2820 / Opacity 80%

Inactive States

-beige

#E2DBCE

Button Border

-brown/40

#26180F / Opacity 40%

Card Border

-brown/10

#26180F / Opacity 10%

Dashboard Background

-beige/40

#E2DBCE / Opacity 40%

Primary Background / Light Text

-offwhite

#F4F4EA

Primary Button Color - Yellow Color

-yellow

#FDD17c

Sage Color

-sage

#828A7A

Sky Color & Biological Age Color

-sky | -bage

#B1D6D7

Optimal Range Color

-opti

#4C8C66

Normal Range Color & Quality of Life Color

-norm | -qual

#E39909

Rust Color & Out of Range Color & Longevity Risk Color

-rust | -outo | -risk

#9C4B3A

Errors Color

-uxred

#D14A26

Link Hover Color - Dark Teal

-darkteal

#385F60

Fonts

Dashboard Header

bradford text-3xl lg:text-5xl text-brown

Card Header

bradford text-2xl text-brown

Card body copy looks like this.

neue-haas-unica text-base text-warmbrown

More copy with a hyperlink looks like this.

font-medium underline hover:text-darkteal

Small body copy looks like this.

neue-haas-unica text-sm text-warmbrown

Extra-small text that is used a supplemental information looks like this.

neue-haas-unica text-xs text-warmbrown/80"

Buttons

Full Width Buttons (With loading example)

Regular Buttons (Variation are icon, background & border)

Small Button (Variation from regular button is padding)

Unique Smaller Buttons

Dropdowns