Hawky · Live Reference

The Hawky design language

Generated live from app/globals.css. Edit the tokens or type scale there and this page updates on reload. Sizes shown are desktop / tablet / mobile(breakpoints: ≥1200 · 810–1199 · <810); the “current” readout reflects your viewport right now.

Headings — Nohemi 500

Every heading is Nohemi 500. The .h1–.h6 classes resize at each breakpoint.

ClassDesktop / Tablet / Mobile · currentSample
.h1
56 / 48 / 36px
The big idea
.h2
44 / 38 / 30px
Section title
.h3
32 / 28 / 24px
Subsection title
.h4
24 / 22 / 20px
Card heading
.h5
20 / 18 / 18px
Inline heading
.h6
16 / 16 / 16px
Smallest heading

Paragraphs — Inter 400

Body text is Inter 400. The .p1–.p6 classes resize at each breakpoint.

ClassDesktop / Tablet / Mobile · currentSample
.p1
20 / 18 / 17px
Lede paragraph for hero sections.
.p2
18 / 17 / 16px
Section intro and large body copy.
.p3
16 / 16 / 15px
Default reading text for articles.
.p4
14 / 14 / 14px
Card and supporting copy.
.p5
13 / 13 / 13px
Captions and labels.
.p6
12 / 12 / 12px
Footnotes and metadata.

Primary

Coral / orange scale. 500 is the brand base.

primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
primary-950

Neutral

Grey scale. Light tints for surfaces and borders, dark shades for text.

neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950

Semantic tokens

Intent aliases layered on the scale — prefer these in component code.

foreground
foreground-secondary
foreground-subtle
foreground-muted
brand
surface
surface-alt
border

Buttons

The real .btn variants from globals.css.