v0.2 · Primitives reference

Trifork Design System

The foundations — type, color, spacing, surface — that every component in this library draws from. Built for the Trifork presentation design system. Reference values live in assets/tokens.js.

Type

Headline scale

type.display → type.h3 · @ 1920×1080

Built for 1920×1080 slides. For product UI, divide sizes by ~1.6. Sentence case, never title case.

display · 60/700From documents to data.

h1 · 52/700Read every lease before lunch

h2 · 30/600Surface only the exceptions

h3 · 20/600A clear, careful, real workflow.

Body & eyebrow

type.bodyLg → type.eyebrow

Plainspoken, declarative. Em-dashes carry attached clauses. Avoid hype words.

eyebrow · 12/600Section header

bodyLg · 22/500From 101,000 documents to actionable data.

body · 18/400The system reads every contract before lunch and flags only the exceptions — a workflow we can sustain over years, not weeks.

bodySm · 16/400Smaller surfaces where 18px doesn't fit but legibility still matters.

caption · 14/400Illustrative example — not based on actual customer data.

Poppins specimen

9 weights · sans

Single sans family. UI uses 400–700 most often; 800/900 reserved for display moments.

300 lightThe quick brown fox

400 regularThe quick brown fox

500 mediumThe quick brown fox

600 semiboldThe quick brown fox

700 boldThe quick brown fox

800 extraboldThe quick brown fox

900 blackThe quick brown fox

Caveat script

type.quote · familyScript

Reserved for pull quotes and attribution. Never UI. The em-dash before the attribution is part of the convention.

Move at the speed of trust.

— Charlie Reese, Trifork

400 regularThe quick brown fox jumps over the lazy dog

500 mediumThe quick brown fox jumps over the lazy dog

600 semiboldThe quick brown fox jumps over the lazy dog

700 boldThe quick brown fox jumps over the lazy dog

Colors

Brand colors

primary & text

Two colors do most of the work. Orange is the single accent; teal is the only text color.

Trifork orange

#E87722 · orange-500 · accent

Buttons, eyebrows, list markers, blockquote rule, slide bottom bar, focus rings, <em> emphasis.

Teal

#2C3A41 · teal-800 · fg-1

All body text, all headlines. Single text color across the system.

White

#FFFFFF · surface

Cards on top of the radial gradient. Disc fills when paired with orange or teal rings.

Background gradient

backgrounds.sandToBlue

One pattern across the whole system: warm sand top-left, cool blue-gray bottom-right.

1920 × 1080

from #EDE6DD to #D5E0E8 radial-gradient(ellipse at top left, sand 0%, soft-blue 100%)

Shade scales

Each base color expands to an 11-stop scale (50 → 950). Used to pick same-family text contrast (slate-50 on slate-800) and adjacent-shade gradient stops. T.shades.<family>[idx]

Spacing

8pt grid

T.space.<n>

Spacing values are integers (px), keyed by step number. Skip 7, 9, 11, 13–15, 17–19 — there's no use case dense enough to need them.

Radii

Border radii

T.radius.<name>

Cards default to md (8px). Use lg (12px) for hero cards and large containers. pill for capsule buttons.

Shadows

Elevation

T.shadows.<name>

Six levels. Cards default to card. Hover lifts to md. Never stack multiple layers.

Motion

Durations & easings

T.motion.*

Restrained. No springs, no bounces, no parallax. Reduced-motion users get nothing animated.