Style Guide

Shared marketing system reference.

Use this page as the naming source for the current marketing design system, including typography, buttons, cards, colors, and reusable layout patterns.

Body font

Inter, a sans-serif font used for body copy, UI text, and supporting content.

Body/UI: Inter 400/500/600. font-family: var(--font-body);

Inter body sample. Clear, readable, and built for interface text.

Heading font

Poppins, a sans-serif font used for headings and premium marketing hierarchy.

Headings: Poppins 600/700. font-family: var(--font-heading);

Poppins heading sample for premium marketing headlines.

Buttons

Shared CTA styles.

Primary CTA

AppButton tone="primary"

Orange accent CTA button

Primary CTA CTA

Secondary Dark

AppButton tone="secondary"

Deep slate action for stronger emphasis

Secondary Dark CTA

Tertiary Neutral

AppButton tone="tertiary"

White utility button with border

Tertiary Neutral CTA

Soft

AppButton tone="soft"

Cool muted utility action

Soft CTA

Type hierarchy

Heading and text variants.

Eyebrow / Kicker

AppHeading variant="eyebrow"

level=1 variant="hero"

Hero / H1

level=2 variant="page"

Page title / H2

level=3 variant="section"

Section title / H3

level=4 variant="card"

Card title / H4

Lead text used for page intros and strong supporting copy.

Body text used for standard paragraphs and marketing descriptions.

Meta text used for labels, system notes, and annotations.

Small text used for secondary details and captions.

Inverse text styles

This is `text-inverse` for high-contrast text on dark backgrounds.

This is `text-inverse-muted` for softer supporting text on dark surfaces.

Surfaces

Card and section patterns.

Default card

AppCard tone="default"

Primary card

AppCard tone="primary"

Secondary card

AppCard tone="secondary"

Muted card

AppCard tone="muted"

Standard divider

Soft divider

Default section

White section background

Section tone="default" uses white.

Muted section

Muted section background

Section tone="muted" uses the muted surface.

Primary section

Primary section background

Section tone="primary" uses the primary color.

Secondary section

Secondary section background

Section tone="secondary" uses the secondary color.

Color tokens

Shared brand and UI color references.

Primary

--brand

Preview

#586A86

Primary Hover

--brand-hover

Preview

#4B5C75

Primary Active

--brand-active

Preview

#3F4F67

Primary Soft

--brand-soft

Preview

#E9EDF3

Accent Orange

--accent

Preview

rgb(236, 103, 7)

Accent Soft

--accent-soft

Preview

#FFF1E7

Secondary Dark

--secondary

Preview

#1E293B

Page Background

--bg-page

Preview

#ffffff

Surface

--bg-surface

Preview

#ffffff

Muted Surface

--bg-muted

Preview

#F8FAFC

Border

--border

Preview

#E2E8F0

Text

--text

Preview

#0F172A

Text Secondary

--text-secondary

Preview

#334155

Text Muted

--text-muted

Preview

#64748B

Text Meta

--text-meta

Preview

#94A3B8

Text Inverse

--text-inverse

Preview

#FFFFFF

Text Inverse Muted

--text-inverse-muted

Preview

rgba(255,255,255,0.76)