← Voltar

Design System v15 — Type in Motion

Where every letter has a life of its own.

VERSIONS
TYPE SCALES
COMPONENTS
LINES OF CSS

Type Is Never Still.

Kinetic Type treats the letterform not as a passive vessel for language, but as a charged particle. Each character carries velocity, memory, and intention. Words don't simply appear — they ARRIVE.

This system defines typography as choreography. The Bebas Neue display face cuts like a press plate — sharp, industrial, deliberate. Instrument Serif breathes beneath it, adding the warmth of a hand-composed paragraph. Together they perform.

The page is ALIVE. Nothing rests. Hover anything. Scroll everything. Watch.

The Nine Scales.

200PX Aa
128PX Headline
80PX Display Text
56PX Section Title Here
40PX Subsection Heading
28PX Article Title Block
20PX Body text set in Instrument Serif, comfortable reading at scale six.
14PX Caption text — small details, big precision.
10PX MICRO LABEL — SYSTEM NINE

Built From Type.

01 — BUTTON
CTA

Kinetic call-to-action. Letter-spacing expands on hover, creating a sense of breath.

02 — BADGE
TAG

Micro-typographic identifiers. Bebas Neue in tight tracking creates dense information blocks.

LIVE DRAFT BETA
03 — QUOTE
PULL QUOTE

"The best typefaces are the ones that disappear — and then the good ones come back and demand to be seen."

SOURCE
04 — DISPLAY
HERO UNIT

Full-bleed typographic statements. The word is the image. Size is the hierarchy.

EXPLORE
05 — NAV
WAYFINDING

Navigation as typographic composition. Each label a micro-headline.

06 — CARD
ARTICLE

Content cards defined entirely by type hierarchy. No decorative imagery needed.

MAR 16 READ →

Five Inks.

CREAM PAPER #F5F0E8
INK BLACK #1A1A1A
PRESS RED #D4380D
COBALT #2563EB
AMBER #F59E0B