← Back to SLAB
SLAB

Typography
System

Archivo · Space Mono
9 sections · responsive
01 · Typefaces

Two families, one system

Display & UI
Archivo
A grotesque sans-serif built for bold statements. Used for all headlines, CTAs, and navigation — always heavy, always tight.
Ag 700Ag 800Ag 900
Labels, Code & Data
Space
Mono
Fixed-width mono for labels, badge text, code, data values and system voice. Always uppercase with tracked spacing.
LABELv2.0$128→
02 · Display Scale

Archivo — headlines & UI

clamp(48px,7vw,96px)
Make it loud.
clamp(40px,5vw,64px)
Ship it fast.
40px
Section heading
30px
Subsection title
22px
Component label
16px CAPS
META LABEL
03 · Body Scale

Archivo — reading & UI copy

20px
The quick brown fox jumps over the lazy dog.
Lead paragraph, intros, feature copy
16px
The quick brown fox jumps over the lazy dog.
Primary reading copy, UI text
14px
The quick brown fox jumps over the lazy dog.
Secondary info, table cells, hints
12px
The quick brown fox jumps over the lazy dog.
Captions, timestamps, fine print
04 · Mono Scale

Space Mono — labels, code & data

COMPONENT / LABEL
$ slab build --watch
JFK → SFO · 13:10p
v2.4.1
05 · Weights

Archivo — weight scale

Thick black borders never apologize.
Body copy, long-form reading
Thick black borders never apologize.
Lead paragraphs, emphasized body
Thick black borders never apologize.
UI labels, secondary actions
Thick black borders never apologize.
Strong emphasis, h3 headings
Thick black borders never apologize.
H2, nav items, card titles
Thick black borders never apologize.
Hero, H1, wordmarks, CTAs
06 · Tracking

Letter-spacing tokens

-0.02em
Display headline, tight
-0.01em
Buttons & nav items
0
Base body text, zero tracking
+0.08em
UPPERCASE MONO LABELS
+0.14em
VERY WIDE TRACKING
07 · Leading

Line-height tokens

0.95
Display headlines run tight — no air between lines when stacking big type.
Hero, h1, display
1.08
Snug leading for subheadings and callout text that still feels dense.
H2–H3, callouts
1.5
Body copy needs breathing room. A comfortable reading rhythm for longer passages of text.
Paragraphs, lists
08 · Semantic Elements

HTML elements — styled

Bold, rebellious, and highly structural. It looks deliberate, even when it breaks the rules.SLAB Design Brief
  • Thick ink borders everywhere
  • Hard offset shadows, zero blur
  • Saturated flat fills only
  1. Define the token
  2. Apply it consistently
  3. Never soften it

Use the --slab-lime token for the signature accent color. Pair it with --slab-black for ink borders and --shadow-md for depth.

/* SLAB card pattern */
.card {
  background: var(--slab-white);
  border: var(--border-base) solid var(--slab-black);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

This is ExtraBold at 800 for strong emphasis. Here's italic Archivo for softer stress. And this is marked / highlighted with yellow. Links look like this violet underline.

Standard body text at 16px / 400 for comparison.

Small 14px — secondary detail, hints, helper text below a form field.

Caption 12px — timestamps, image credits, fine print. Color: --slab-smoke.

Dashed hr rule above using --divider.

09 · Type on Color

Legibility on saturated fills

LABEL / LIME
Ship it. Make it loud.
Ink text on light fill. Body 400.
WARNING / YELLOW
Heads up. Read this.
Ink text on light fill. Body 400.
ACTION / VIOLET
Primary action. Click now.
White text on dark fill. Body 400.
PROMO / PINK
Limited offer. Today only.
White text on dark fill. Body 400.
DARK / INK
Dark surface. Inverted.
Ink text on light fill. Body 400.
DANGER / CORAL
Danger zone. Be careful.
White text on dark fill. Body 400.
SLAB Design System · Typography · Click any token to copy