Blitz Brand Lab · Foundations

Every value below is read from tokens.css

Color, type, spacing, rhythm, grid and motion are one file, parsed at build time. Change a token and this page changes with the site. Nothing here is typed by hand.

146 TOKENS3 BREAKPOINTS · 991 / 767 / 479GEIST · INTER DISPLAY · GEIST MONONO RED, NO SHADOW, NO RADIUS ON MATRICES

01Named by role

Never by appearance: the blue is --color-accent, not dark-silver. A token says what it is for.

02Type in rem, space in px

Sizes scale with the user setting (WCAG 1.4.4); spacing keeps pixel fidelity with the validated UI.

03Desktop first

Three max-width breakpoints, 991 / 767 / 479. Only the tokens that change are redefined per breakpoint.

04The red is gone

The rust accent left the charter on 2026-09-03. Hovers use the accent with an underline; warnings use amber, never red.

Color

Five groups, one accent

Chips are painted with the CSS variable itself; the hex is read from the file. Contrast targets: AA for text, 3:1 for the rules of form controls.

23 COLOR TOKENS

Ink and text

Headings, body, secondary and subtle text. text-subtle was darkened to pass AA on light surfaces.

--color-ink#201e1d

--color-ink-soft#2e2b29

--color-ink-deep#1b1918

--color-text-muted#686564

--color-text-subtle#6f6d6b

Accent and status

One blue. Verified = green, uncertain = amber. The -text variants are the only ones allowed as text.

--color-accent#0055fe

--color-viz-success#218a48

--color-viz-success-text#1d7a40

--color-viz-warning#b66a12

--color-viz-warning-text#9d5a0f

On dark surfaces

The pairs to use on ink and ink-deep. Never the light-surface tokens on a dark panel.

--color-accent-on-dark#84a3ff

--color-text-muted-on-dark#aaa9a9

--color-border-on-darkrgba(255, 255, 255, 0.16)

Surfaces

The page ground is surface; cards and matrices are white; surface-alt is the gray of the cards and the team band.

--color-surface#f5f5f4

--color-surface-alt#f1f0ee

--color-surface-softwhitesmoke

--color-whitewhite

--color-blackblack

Borders

border is the default rule. border-input is reserved to form controls (3:1 on white).

--color-border#e2e0df

--color-border-soft#ebebea

--color-border-softer#eeeeed

--color-border-strong#cdcccb

--color-border-input#8a8886

ON SURFACE

Ink on surface, muted for the second voice, accent links underline on hover. Verified reads verified, uncertain reads to review.

ON INK

White on ink, muted-on-dark for the second voice, accent-on-dark for links. Rules use border-on-dark, 16 % white.

Typography

Geist for headings, Inter Display for reading, Geist Mono for the machine

Weights stop at 600: no bold anywhere. Negative tracking grows with the size. The mono face carries every technical label, from asset captions to the [ 65M+ COMPANIES ] eyebrows.

11 STYLES

HEADING'Geist Variable', Geist, Arial, sans-serif

BODY'Inter Display', 'Inter Display Fallback', Arial, sans-serif

MONO'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace

WEIGHTSregular 400 · medium 500 · semibold 600

TRACKINGs -0.01em · m -0.02em · l -0.03em · xl -0.04em · xxl -0.05em

Style	Token	Desktop	≤ 991	≤ 767	≤ 479	Tracking
Heading 1	`--text-h1`	`56/64`	`56/64`	`48/48`	`38/46`	`-0.05em`
Heading 2	`--text-h2`	`48/56`	`40/48`	`32/40`	`26/34`	`-0.04em`
Heading 3	`--text-h3`	`40/48`	`34/42`	`28/36`	`22/30`	`-0.03em`
Heading 4	`--text-h4`	`28/36`	`28/36`	`24/32`	`24/32`	`-0.02em`
Heading 5	`--text-h5`	`24/32`	`24/32`	`22/30`	`22/30`	`-0.02em`
Heading 6	`--text-h6`	`20/28`	`20/28`	`18/26`	`16/24`	`-0.01em`
Body large	`--text-body-lg`	`18/28`	`18/28`	`18/28`	`16/24`	`0`
Body	`--text-body`	`16/24`	`16/24`	`16/24`	`14/23`	`0`
Tag	`--text-tag`	`14/20`	`14/20`	`14/20`	`14/20`	`0`
Counter	`--text-counter`	`80/90`	`70/78`	`60/68`	`50/58`	`0`
Counter small	`--text-counter-sm`	`72/80`	`62/70`	`52/60`	`42/50`	`0`
Micro (mono labels)	`--text-micro`	`10`	`10`	`10`	`10`	`.06 to .08em`

Heading 1, Geist medium, accent segment

Heading 2, the section title of the site

Heading 3, the split title

Heading 4 alt, Inter Display 28/36, the card and prose section title

Heading 6 style, Inter Display 20/28 medium, the card title

Heading quote, 20px italic on the h5 leading, for a testimonial

Body large, 18/28: Search, enrich, validate, monitor and activate B2B data from a single infrastructure layer.

Body, 16/24: Company Search, Find People, Waterfall ICP, identity resolution, enrichment and job postings belong in the same platform.

Body muted, the second voice of every paragraph.

TAG 14/20 MEDIUM · SECTION LABEL

[ 65M+ COMPANIES ] · MONO MICRO, .08EM · THE TECHNICAL EYEBROW

A vertical-bar bullet, the list style of every split

Spacing and rhythm

A strict 4px scale, and a section scale on top

Gaps use --space-*, components use --pad-inner-*, sections use the five --pad-16xl to --pad-20xl steps, which decrease monotonically on every breakpoint.

19 GAPS · 5 SECTION STEPS

s8px

m12px

l16px

xl20px

xxl24px

xxxl28px

4xl32px

5xl36px

6xl40px

7xl44px

8xl48px

9xl52px

10xl56px

11xl60px

12xl64px

13xl68px

14xl72px

15xl76px

16xl80px

Section padding	Desktop	≤ 991	≤ 767	≤ 479	Role
`--pad-16xl`	`64px`	`48px`	`40px`	`32px`	Compact section
`--pad-17xl`	`72px`	`56px`	`48px`	`40px`	Standard section
`--pad-18xl`	`80px`	`68px`	`56px`	`44px`	Canon after a divider
`--pad-19xl`	`88px`	`72px`	`60px`	`48px`	Hero, opening
`--pad-20xl`	`104px`	`84px`	`68px`	`56px`	Closing, CTA

Component padding

--pad-inner-s16px
--pad-inner-m20px
--pad-inner-l24px
--pad-inner-xl32px
--pad-button-s8px
--pad-button-m20px

Radii

--radius-s4px
--radius-m6px
--radius-l8px
--radius-xl12px
--radius-xxl16px
--radius-xxxl20px
--radius-card24px
--radius-4xl36px
--radius-pill100px

Matrices, cards of the destination grammar and proof frames have no radius. Buttons are pills (--radius-4xl, --radius-pill), dark code panels use --radius-l, the legacy card uses --radius-card.

Rhythm rules

Two neighbouring sections cumulate their paddings: 130 to 175px on desktop.
A colored section that closes on a rule takes an asserted asymmetry: bottom at --pad-11xl.
No text block is vertically centered; cells equalize by the grid, text follows its title.
Nothing important hides behind an interaction: below six entries, everything is unfolded.

Grid

Rails, gutter, and the invariants that keep them

Four points invisible in the source and found by measuring: they hold the whole site on the same verticals.

4 LAYOUT TOKENS

.container · max 1278px · padding-inline 20px

section wrapper · --container-inner 1112px

content · pulled back by --pad-inner-s 16px

--grid-gutter 79px

The rail is the inner edge of .container. Content never sits on it: every wrapper pulls back by --pad-inner-s, on both sides, on every breakpoint.

--container-max1278px--container-inner1112px--grid-gutter79px--nav-offset101px

01Page rails, drawn once

Two continuous vertical rules live in BaseLayout (.page-rails), aligned on .container. Never redrawn in a component; content pulls back from the rail by at least --pad-inner-s.

02One canonical gutter

--container-inner (1112px) for a section wrapper, --grid-gutter (79px) for a gutter cell. A hard-coded width produced four competing widths and rules 1px apart.

03A vertical scale for sections

--pad-16xl to --pad-20xl serve section padding only. Two neighbours cumulate: the scale keeps the sum around 130 to 175px, a chapter interval, not a void.

04Self-sufficient sections

A section owns its padding-top; the canon after a divider is --pad-18xl. Adjacency compensation (:global(.A + .B)) is forbidden as a default mechanism: those rules die in the cascade.

DESKTOP≥ 992

Full hierarchy, controlled asymmetry.

TABLET768 to 991

Simplified grids, text still first.

MOBILE480 to 767

One linear story, no artificial order.

COMPACT≤ 479

Full-width actions, stacked cells, zero overflow.

After any layout change, measure again: rails aligned, one gutter, intervals under 205px, scrollWidth equal to clientWidth at 1440 / 991 / 767 / 375. The harness lives in scripts/rhythm-harness.mjs (Chrome via CDP, no dependency); capture with scripts/capture.mjs, never with the headless --window-size flag, which composes at 500px and crops.

Motion and viz tokens

Durations and easings are brand contracts

No page configures a keyframe. The four movement durations, the two easings and the opacity ladder of the visual system are tokens; the Motion page shows what they drive.

16 TOKENS

Motion

--motion-pulse-duration3.6s
--motion-progress-duration5s
--motion-flow-duration8s
--motion-flux-duration7.2s
--motion-signature-duration6.4s
--motion-ambient-duration12s
--motion-ease-softcubic-bezier(0.4, 0, 0.2, 1)
--motion-ease-entercubic-bezier(0.22, 1, 0.36, 1)
--motion-shift-xs4px
--motion-shift-s8px
--motion-scale-soft1.12

Visual system

--viz-opacity-ghost0.05
--viz-opacity-track0.16
--viz-opacity-disabled0.33
--viz-opacity-label0.64
--viz-opacity-active1
--shadow-accent0 8px 24px rgba(0, 85, 254, 0.15)

Opacity levels order the SVG voices: ghost for grids and hairlines, track for rails, disabled for off states, label for secondary icons, active for the accent. See the Motion page →

UI primitives

Six atoms, no page knowledge

Button, Tag, Field, Checkbox, InfoTip, Icon. Plus the breadcrumbs of the directories. Every one of them is the production component.

7 PRIMITIVES

Button

ui/Button.astro

Rolling label on hover and focus. variant primary (alias dark), light, outline; size md or sm; arrow for the button-04 pattern without a pill.

Get 1,000 credits free Learn more API Docs Sign up Explore the API

Astro

<Button href="https://app.blitz-api.ai" variant="dark">Get 1,000 credits free</Button>
<Button href={docsUrl} variant="outline" size="sm">API Docs</Button>
<Button href="/products/company-search" arrow>Explore the API</Button>

Tag

ui/Tag.astro

The section label, 14/20 medium, muted. uppercase for eyebrows.

Company Search

By use case

Astro

<Tag uppercase>Company Search</Tag>

Field and Checkbox

ui/Field.astro · ui/Checkbox.astro

Visible label (never sr-only), one focus signal (the accent border), optional is marked and never required. Variant boxed by default, underline kept for the legacy port. The whole label is the checkbox target.

Astro

<Field name="email" label="Work email" type="email" placeholder="you@company.com" required autocomplete="email" />
<Field name="message" label="Message" as="textarea" hint="A few lines are enough." />
<Checkbox name="terms" required>I have read and accept the Terms and Conditions</Checkbox>

InfoTip

ui/InfoTip.astro

A real button, 24×24 target for an 18px ring, opens on focus and tap. Positioned by inherited variables, never by override.

Data coverage

Astro

<InfoTip label="data coverage" text={plan.coverageHint} id={`cov-${plan.id}`} />

Icon

ui/Icon.astro

Lucide, vendored in full, inlined at build; only used icons ship. Stroke 1.5, five opacity levels. Business roles come from the icon registry, not from free picks.

ghosttrackdisabledlabelactive

Astro

<Icon name="send-horizontal" size={20} level="active" />

Breadcrumbs

seo/Breadcrumbs.astro

Trail plus BreadcrumbList structured data, on products, use cases and teams. It does not use a bare .container: its text would sit on the rail.