Stylebook

Typefaces

Display carries hierarchy, body carries reading, mono marks anything referring to code, data, or a label.

Display (Space Grotesk)

“Space Grotesk”, “Segoe UI”, ui-sans-serif, sans-serif

Body (Lato)

“Lato”, “Segoe UI”, ui-sans-serif, sans-serif

Mono (IBM Plex Mono)

“IBM Plex Mono”, “SFMono-Regular”, ui-monospace, monospace

Type Scale

Scales from label text up to the hero. The largest sizes are fluid, interpolating against the viewport with clamp() instead of jumping at breakpoints.

mono-sm Label small 0.6875rem

label Label 0.75rem

body-sm Body small 0.875rem

body Body 1rem

body-lg Body large 1.125rem

display-sm Heading small 1.5rem

display-md Heading 2rem

display-lg Page title clamp(2.25rem, 4.2vw, 3.25rem)

display-xl Hero clamp(2.8rem, 7vw, 4.5rem)

Palette

The working colors, listed in the order the theme declares them. Several slugs share a value on purpose — blocks are written against the semantic names, paper, ink, signal, field, not against literal hex. Change a value once and every block that meant that thing follows. A block written against #F4EDDC wouldn’t.

Black

black

#000000

White

white

#FFFFFF

Light

light

#E8EEF1

Dark

dark

#2A2A2A

Base

base

#F4EDDC

Primary

primary

#4F46B5

Secondary

secondary

#BBFF27

Accent 1

accent-1

#8ECDF4

Accent 2

accent-2

#F37DF9

Separator

separator

#E5E5E5

Info

info

#63A5C9

Success

success

#00D17B

Danger

danger

#FF2F1F

Warning

warning

#EED700

Placeholder

placeholder

#CED4DA

Background

#F4EDDC

Content

content

#2A2A2A

Muted

muted

#2A2A2A

Highlight

highlight

#FCB900

Paper

paper

#F4EDDC

Ink

ink

#2A2A2A

Panel

panel

#2A2A2A

Signal

signal

#BBFF27

Field

field

#4F46B5

Rule

rule

#C9BEAA

Paper Dim

paper-dim

#5F5648

Panel Dim

panel-dim

#E8EEF1

Fail

fail

#FF2F1F

Pass

pass

#00D17B

Spacing Scale

A fixed ratio, 0.44rem to 5.06rem. Layout uses these steps, not arbitrary values.

Step 0.5 0.44rem

Step 1 0.67rem

Step 2 1rem

Step 3 1.5rem

Step 4 2.25rem

Step 5 3.38rem

Step 6 5.06rem

UI Elements and Depth

Restrained Shadows

Hard offsets are reserved for high-emphasis calls-to-action so they command attention without polluting layout structure.

Inverted Containers

Used for high-contrast moments including intake context and partner disclosure sections.

Highlight Label

Card Components

Informational

Neutral Card

Default informational panel used for long-form explanatory copy and low-risk messaging.

Inverted

High Contrast Card

Use this for critical contrasts like disclosures, warnings, and pricing highlights.

Emphasis

Accent Rail Card

Use a single accent rail to elevate outcomes, metrics, or operator actions without over-styling.