BoostIdeal 2.0 styleguide

Every color, size, and space below resolves through the semantic token layer. Flip the theme or append ?theme=<id> and the whole page re-colors with no rebuild.

Semantic color tokens

Swatch color and value both read live from the token layer, so ?theme= and &mode=dark keep them honest, with no hardcoded hex and no drift.

--ground

…
--surface

…
--surface-2

…
--sunk

…
--ink

…
--muted

…
--faint

…
--line

…
--line-soft

…
--brand

…
--brand-ink

…
--score

…
--score-soft

…
--warn

…
--warn-soft

…

Type scale

One row per step, rendered at size. Display face is Familjen Grotesk; body is Public Sans.

--fs-display

clamp(36→58) · Hero h1

Scoring your team trusts

--fs-h1

clamp(34→52) · Page / section opener

Page opener

--fs-h2

clamp(30→46) · Section headings

Section heading

--fs-h3

clamp(26→36) · Sub-section

Sub-section title

--fs-h4

clamp(24→32) · Card titles

Card title

--fs-xl

22px · Wordmark, large lead

Large lead line

--fs-lg

19px · Subhead, lead paragraph

A lead paragraph that sets context.

--fs-body

17px · Body base

Body base, the default reading size for running text.

--fs-md

16px · Dense body, nav

Dense body and navigation text.

--fs-sm

15px · Links, nav, secondary

Links and secondary UI.

--fs-xs

14px · Buttons, UI controls

Button label

--fs-2xs

13px · Captions, meta, table cells

Caption / meta / table cell

--fs-3xs

12px · Micro-labels (caps)

MICRO LABEL

Spacing scale

4px base ramp for intra-component gaps and padding, varied by component, never one pad everywhere.

--sp-0-5 2px
--sp-1 4px
--sp-1-5 6px
--sp-2 8px
--sp-2-5 10px
--sp-3 12px
--sp-3-5 14px
--sp-4 16px
--sp-4-5 18px
--sp-5 24px
--sp-6 32px
--sp-7 48px
--sp-8 64px

Section rhythm

Three deliberate rhythms. The category step uses the largest so it reads as the biggest thing on the page.

--section-y-sm

Tight / utility sections

--section-y

Default section rhythm

--section-y-lg

Category step (biggest on page)

Core components

Tokens only, no stock component surfaces. Live hover and focus states.

Buttons & link

Build my score Small action Animated underline link

Chips & pills

Draft Ready Pill S Pill M Pill L

Card / panel

Account health

A card uses --surface, --line, --shadow, and --r.

Open details

Score ring & category bars

Firmographic 92
Technographic 78
Engagement 64
Intent 41

Account / data table

Account	Owner	Fit	Engagement	Status
Northwind Trading	A. Reyes	87	72	Hot
Atlas Logistics	M. Chen	64	55	Warm
Cedar & Bloom Co.	J. Okoro	41	38	Cold

Demo data: fictional accounts.

Form field + submit

Radius & shadow

rounded --r (16px)

rounded --r-sm (10px)

A CTA band, full-bleed

Uses --brand ground, --brand-ink text, and breaks out of the centered column.

Primary action

Palette switcher (internal)

Append ?theme=<id> to any URL to re-color the whole page with no rebuild; add &mode=dark for dark mode. There is no public control; this is obscured, internal review only.