Design System

Suzuka

Concept: Suzuka Circuit, Japan — where precision engineering meets kinetic restraint.

A design system extracted from home.zuens2020.work. Every token and component traces back to one source: the Suzuka Circuit's DNA — tight-radius geometry, measured acceleration, and the singular clarity of a racing line cut through noise.

Speed Line · 1px · Accent

Design Pillars

One racing line. A single accent green (#006941) carries all interactive meaning. Supporting surfaces are near-neutral so the accent never competes with itself.
Pit-lane precision. Space Grotesk labels mirror the technical readouts on a pit wall — compact, uppercase, zero decoration. Inter carries the prose.
Measured motion. Every transition is 150 ms. Acceleration in, deceleration out. No bouncing. No overshoot.
Night-capable. The Night theme inverts semantic surface tokens only. The accent stays constant — the circuit looks the same under floodlights.

Quick Reference

Accent: #006941 (Suzuka Green) · Dim: #005c38 · Soft: #7bfeb8

Backgrounds: #f6f6f6 · #ffffff · #f0f1f1

Type: Inter 400/700/800 + Space Grotesk 500/700 (labels)

Spacing base: 4 px · 10-step scale up to 64 px

Motion: 150 ms · cubic-bezier(0.4, 0, 0.2, 1)

Color

Semantic tokens — accent, fg-0/1/2, bg-0/1/2, line — flip cleanly between light and night.

Typography

12-step rem scale. Inter for display and body; Space Grotesk for precision labels.

Spacing

10 steps from 4 px to 64 px. Every padding, gap, and margin is a named token.

Motion

Easing cubic-bezier(0.4, 0, 0.2, 1) at 150 ms. Press scales to 0.97 at 100 ms.

· 01 · Foundations

Color

Brand & Semantic

Accent

--accent #006941

Accent Dim

--accent-dim #005c38

Accent Soft

--accent-soft #7bfeb8

Surfaces (Light)

BG-0

--bg-0 #f6f6f6

BG-1 · Surface

--bg-1 #ffffff

BG-2 · Container

--bg-2 #f0f1f1

Foregrounds

FG-0 · Primary

--fg-0 #2d2f2f

FG-1 · Secondary

--fg-1 #5a5c5c

FG-2 · Tertiary

--fg-2 #9a9c9c

Line

--line zinc-200

Night theme flips only the semantic tokens — bg-0/1/2, fg-0/1/2, line. The accent green stays fixed at #006941. Swap tokens by setting data-theme="night" on <html>.

Typography

Type Scale

--fs-96800

Suzuka

Display

--fs-60800

Sector 1

H1

--fs-36700

Pit Lane Entry

H2

--fs-24700

Hairpin Corner

H3

--fs-18700

Degner Curve

H4

--fs-16400

Body text — clear, unhurried prose for longer explanations and descriptions.

Body

--fs-14400

Small body — supporting copy, captions, helper text.

Body S

--fs-12700

LABEL · SPACE GROTESK

Label

--fs-12400

mono · data readout · code

Mono

Spacing

10-Step Scale · 4 px base

--sp-1

4 px

--sp-2

8 px

--sp-3

12 px

--sp-4

16 px

--sp-5

20 px

--sp-6

24 px

--sp-7

32 px

--sp-8

40 px

--sp-9

48 px

--sp-10

64 px

Shape & Elevation

Border Radius

--r-0 · 0

--r-1 · 4px

--r-2 · 8px

--r-full · ∞

Shadows

--shadow-lift

--shadow-card

--shadow-focus

· 02 · Components

Speed Line

A 1 px horizontal rule at 15% of container width. Used to introduce sections and punctuate transitions — the visual analogue of the pit-lane line on the track.

<div class="speed-line"></div>

.speed-line {
  background-color: var(--accent);
  width: 15%;
  height: 1px;
}

Suzuka Accent Block

A 4 px left border in accent green anchors callouts, highlights, and featured copy. Named directly after the track — the stripe is unmistakably Suzuka.

The first corner at Suzuka — a long, sweeping right — requires maximum commitment. Braking too late is recoverable. Braking too early costs a second per lap.

<div class="suzuka-accent">...</div>

.suzuka-accent {
  border-left: 4px solid var(--accent);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
}

Button

Primary

Main CTA. One per view.

Ghost

Secondary action. Accent border.

Surface

Neutral action. Blends into surface.

Disabled

50% opacity. Non-interactive.

<button class="btn btn-primary">Get Started</button>
<button class="btn btn-ghost">Learn More</button>
<button class="btn btn-surface">View Project</button>

Chip / Tag

Active Design Systems In Progress Draft New

<span class="chip chip-accent">Active</span>
<span class="chip chip-surface">In Progress</span>
<span class="chip chip-inverse">New</span>

Card

Project · 2025

Suzuka Design System

A precision-engineered component library extracted from real product usage. Every token traces to a decision.

Research

Sector Analysis

Measuring lap time deltas across the three sectors to identify where performance is being left on track.

Engineering

Downforce Model

How we model aerodynamic balance changes with fuel load across a 53-lap race distance at Suzuka.

<div class="card">
  <div class="card-eyebrow">Category · Date</div>
  <h4>Title</h4>
  <p>Description.</p>
</div>

Input

Email address

Message

<div class="input-wrap">
  <label class="input-label">Email address</label>
  <input class="input" type="email" placeholder="you@example.com"/>
</div>

· 03 · Motion

Easing & Duration Tokens

--ease-std:   cubic-bezier(0.4, 0, 0.2, 1)  /* default — in-out */
--ease-decel: cubic-bezier(0, 0, 0.2, 1)    /* entering — ease-out */
--ease-accel: cubic-bezier(0.4, 0, 1, 1)    /* exiting — ease-in */

--dur-fast:   100ms   /* press feedback */
--dur-base:   150ms   /* hover, focus transitions */
--dur-slow:   300ms   /* panel open / theme change */
--dur-glide:  500ms   /* page-level entrances */

Speed line · 500 ms · ease-decel

Pulse · 2 s · ease-std

Press scale · 100 ms · ease-std

Fade-up entry · 500 ms · ease-decel

Sector complete.

Principles

Fast feedback, measured transitions. Interactive press is 100 ms so it feels mechanical. Panel entrances are 300–500 ms so they feel controlled.
Directional, not bouncy. All easings use standard cubic-bezier curves. Springy overshoot belongs on consumer apps, not a precision interface.
Never animate layout. Animate opacity and transform only. Width, height, and position changes are instant.
Respect reduced motion. Wrap decorative animations in @media (prefers-reduced-motion: no-preference).

· 04 · Iconography

Icon Style

Icons follow the site's geometric restraint: 24 × 24 px viewBox, 1.5 px stroke, round linecaps and joins. No filled icons. Recommended library: Lucide or Heroicons Outline — both share the same geometric vocabulary as Inter and Space Grotesk.

arrow-right

user

home

search

message

check

plus

x

info

mail

bar-chart

link

Usage rule — Icons should always appear at 16, 20, or 24 px. Never scale between those sizes. Stroke color must be a semantic token (var(--fg-0), var(--accent), etc.) — never a hardcoded hex.

· 05 · Voice & Tone

Voice

Suzuka's voice is the engineer at the pit wall — precise, direct, no filler. Every word earns its position. The system speaks the way an F1 strategist communicates a call: clear enough to act on immediately.

Precise over clever. Say exactly what the thing does. Skip metaphors.
Active voice, present tense. "Connect your account" not "Your account can be connected."
Labels are uppercase Space Grotesk. Uppercase signals structure, not shouting.
No exclamation marks in UI. Confidence doesn't need punctuation.

Do

"View project" · "Send message" · "Connect" · "Done"

Don't

"Click here to view your project!" · "Please send us a message" · "Let's connect!"

Label Patterns

Labels use Space Grotesk 700, ALL CAPS, letter-spacing 0.08 em. They name sections, categories, and metadata — never decorative headings.

Section Label

RECENT WORK

Card Eyebrow

PROJECT · 2025

Button Label

Empty States

Empty states use the same voice — no cheerful placeholder copy. State the fact, offer the action.

Do

"No projects yet. Add your first."

Don't

"Wow, it looks like you haven't added any projects yet! Get started by clicking the button below to create your very first project!"

Error Messages

Errors name the problem and the fix. Never blame the user.

Do

"Invalid email address. Check the format and try again."

Don't

"You entered an invalid email address. Please fix this error."