1 — Typography

H1 via semantic tag — 3.5rem / 700 / primary color

H2 via semantic tag — 2.75rem / 700 / primary color

H3 via semantic tag — 2.25rem / 700 / primary color

H4 via semantic tag — 1.75rem / 700

H5 via semantic tag — 1.25rem / 700

H6 via semantic tag — 1rem / 700

o_eaxee_h1 on a div — same as h1

o_eaxee_h3 on a div — same as h3

Paragraph — $eaxee-font-body / $eaxee-p-size (1rem) / $eaxee-body-weight (400) / $eaxee-body-line-height (1.65) / $eaxee-text-main (#393a3a). This is the default body copy.

Muted paragraph — .o_eaxee_text_muted applies $eaxee-text-muted (#7a7b7b). Use for captions, meta info, helper text.

2 — CSS Custom Properties

Gradients

gradient-brand
var(--eaxee-gradient-brand)

gradient-hero
var(--eaxee-gradient-hero)

gradient-cta
var(--eaxee-gradient-cta)

gradient-card-glow
var(--eaxee-gradient-card-glow)

Shadows

shadow-sm

shadow-md

shadow-lg

glow-green

glow-blue

Glass

Glass card

glass-bg + glass-border + glass-blur + glass-shadow. Always use all four together.

class="o_cc o_cc1"

cc1 — White background, charcoal text

Body text. A link. Green primary button, blue secondary.

btn-primary btn-secondary

class="o_cc o_cc2"

cc2 — Surface light background (#f7f8f9)

Body text. A link. Use for alternating sections.

btn-primary btn-secondary

class="o_cc o_cc3"

cc3 — Charcoal dark background

White body text. Green link. Use for dramatic sections.

btn-primary btn-secondary

class="o_cc o_cc4"

cc4 — Royal blue background

White body text. Green link. Use for accent/CTA sections.

btn-primary btn-secondary

class="o_cc o_cc5"

cc5 — Brand green background

Dark body text. Blue link. Use sparingly for strong CTA.

btn-primary btn-secondary

4 — Motion tokens (hover each box)

dur-fast / ease-out

150ms — buttons, links

dur-normal / ease

300ms — cards, panels

dur-normal / ease-spring

300ms — badges, icons