STYLE GUIDE AS OF 1/1/26

Colors

Blue

Blue-900
#23418D
hero overlays, footer backgrounds, institutional moments
Blue-700
#355A9F
section headers, navigation states
Blue-500
#4F76B8
card headers, dividers, emphasis text
Blue-300
#9BB1DA
subtle section backgrounds
Blue-100
#E7ECF6
rarely used; background tint only

Cyan

Cyan-600
#00AED9
primary CTAs and links only
Cyan-400
#4FC6E5
hover states, secondary actions
Cyan-200
#B8E7F4
accents, highlights, badges (sparingly)

Neutral

Neutral-900
#000000
body text
Neutral-700
#3A3A3A
body text
Neutral-500
#6E6E6E
metadata and captions
Neutral-300
#DBDBDB
backgrounds, cards, separators
Neutral-100
#F5F5F5
backgrounds, cards, separators

Typography

Heading 1

The quick brown fox jumps over the lazy dog.

Heading 2

The quick brown fox jumps over the lazy dog.

Heading 3

The quick brown fox jumps over the lazy dog.

Heading 4

The quick brown fox jumps over the lazy dog.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Text Link (inline), mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link

Buttons

MembershipswelcomeButton Text