Design system

Design System

Portfolio — Tokens & Foundations

Color Scale

Neutral

color-0

color-05

color-10

color-20

color-30

color-40

color-50

color-60

color-80

color-90

Accent

color-accent-70

color-accent-60

success

Color — Semantic Aliases

Backgrounds

color-bg

→ color-0

· Page background

color-bg-card

→ color-05

· Project card surface

color-bg-card-tinted

→ color-05

· Experiment card surface

color-bg-muted

→ color-10

· Hover / muted

color-bg-surface

→ color-20

· Raised / active surface

color-bg-label

→ color-20

· Label / badge background

color-bg-graphic-muted

→ color-graphic-muted

· Decorative graphic accents

color-grid-line

→ color-10

· Project card background grid

color-overlay

rgba(2,2,2,0.5)

· Modal / overlay scrim

CTA

color-cta-primary

→ color-accent-70

· Primary CTA background

color-cta-primary-hover

→ color-accent-60

· Primary CTA hover

color-cta-primary-text

→ color-0

· Text on primary CTA

Borders

color-border-inset

→ color-10

· Structural dividers

color-border-subtle

→ color-20

· Subtle

color-border

→ color-20

· Main border

color-border-secondary

→ color-40

· Hover border

Text

color-text-primary

→ color-90

· Headings, body, active

color-text-secondary

→ color-80

· Labels, descriptions

color-text-tertiary

→ color-60

· Decorative / disabled

Interaction

color-interactive-hover

→ color-30

· Generic hover state

color-nav-item-bg-hover

→ color-10

· Nav item hover background

color-nav-item-bg-active

→ color-10

· Nav item active background

color-nav-item-fg

→ color-80

· Nav item foreground

color-nav-item-fg-active

→ color-90

· Nav item active foreground

Buttons — Secondary

color-button-secondary-bg

→ color-0

· Secondary button background

color-button-secondary-bg-hover

→ color-20

· Secondary button hover

color-button-secondary-border

→ color-30

· Secondary button border

color-button-secondary-fg

→ color-90

· Secondary button text

Form

color-input-bg

→ color-05

· Input background

color-input-border

→ color-30

· Input border

color-input-border-hover

→ color-40

· Input border hover

color-input-placeholder

→ color-60

· Placeholder text

color-success

→ success

· Success state

Type Scale

Font Size

font-size-xxxs

12px

Labels, badges

font-size-xs

14px

UI text, body-sm, meta

font-size-base

16px

Standard body, general UI

font-size-sm

18px

Editorial / case-study body

font-size-md

20px

Testimonial quotes

font-size-lg

24px

h4, card titles

font-size-xl

32px

h3, notes quote

font-size-2xl

40px

font-size-3xl

48px

h1, hero

Line Height

line-height-none

Single-line labels, badges

line-height-heading

1.1

All display / heading text

line-height-snug

1.3

Card titles, medium headings

line-height-ui

1.45

UI text, captions, short content

line-height-body

1.6

Long-form body copy

Letter Spacing

tracking-tight

-0.03em

Headings

tracking-normal

0em

Body text

tracking-expanded

0.02em

Labels, mono uppercase

Font Weight

font-weight-regular

400

Body, captions, descriptions (450 on light theme)

font-weight-medium

500

Headings, strong, active states (550 on light theme)

Typography — Geist Sans

.type-h1

font-size-3xlfont-weight-mediumline-height-headingtracking-tightcolor-text-primary

Heading One

.type-h2

font-size-2xlfont-weight-mediumline-height-headingtracking-tightcolor-text-primary

Heading Two

.type-h3

font-size-xlfont-weight-mediumline-height-headingtracking-tightcolor-text-primary

Heading Three

.type-h4

font-size-lgfont-weight-mediumline-height-snugtracking-tightcolor-text-primary

Heading Four

.type-body-lg

font-size-smfont-weight-regularline-height-bodytracking-normalcolor-text-secondary

Body large — editorial and case study body copy. Used for long-form reading.

.type-body

font-size-basefont-weight-regularline-height-bodytracking-normalcolor-text-secondary

Body — standard UI text, descriptions, general content.

.type-body-strong

font-size-basefont-weight-mediumline-height-bodytracking-normalcolor-text-primary

Body strong — emphasized inline text, active states.

.type-body-sm

font-size-xsfont-weight-regularline-height-uitracking-tightcolor-text-secondary

Small body — captions, metadata, secondary UI text.

.type-body-sm-strong

font-size-xsfont-weight-mediumline-height-uitracking-tightcolor-text-primary

Small body strong — emphasized small text.

.type-body-xs

font-size-xxxsfont-weight-mediumline-height-uitracking-normalcolor-text-secondary

XS body — badges, tooltips, inline annotations.

Typography — Geist Mono

.type-label

font-size-xsfont-weight-mediumline-height-nonetracking-expandedcolor-text-secondary

Section Label / Category Tag

Spacing Scale

space-xs

4px

Micro gaps, icon nudges

space-sm

8px

Tight element spacing

space-md

12px

Default component gaps

space-base

16px

Standard base unit

space-lg

20px

Layout gutter

space-xl

24px

Card padding

space-2xl

32px

Component section gaps

space-3xl

40px

Page shell padding

space-4xl

56px

Hero gap (desktop)

space-5xl

64px

Large content separators

space-section

120px

Major section dividers

Border Radius

radius-sm

rounded-sm

8px — Small elements, labels, inputs

radius-md

rounded-surface

12px — Surface elements, inner cards

radius-lg

rounded-card

20px — Cards, major components

radius-full

rounded-pill

9999px — Pills, buttons, tags

Component Tokens — Surfaces

card-interactive

Clickable card surface. Hover changes bg to color-bg-muted.

bg: color-bg-card

border: 1px color-border

radius: radius-lg (20px)

padding: space-xl (24px)

transition: bg 0.18s ease

card-tinted

Lightly tinted card. Non-interactive content container.

bg: color-bg-card-tinted

border: 1px color-border-subtle

radius: radius-lg (20px)

padding: space-xl (24px)

card-ghost

Outline/ghost card. Non-interactive, structural use.

bg: color-bg

border: 1px color-border-inset

radius: radius-lg (20px)

padding: space-xl (24px)