Design system

Design System

Portfolio — Tokens & Foundations

Color — Neutral Scale

color-0

color-05

color-10

color-20

color-30

color-40

color-50

color-60

color-80

color-90

Color — Accent

color-yellow-70

color-yellow-60

success

Color — Semantic Aliases

Backgrounds

color-bg

→ color-0

· Page background

color-bg-card

→ color-05

· Card surface

color-bg-muted

→ color-10

· Hover / muted

color-bg-surface

→ color-20

· Raised / active surface

color-bg-graphic-muted

→ color-60 (warm), custom overrides (cool/light)

· Decorative graphic accents

color-cta-primary

→ color-yellow-70

· Primary CTA background

color-cta-primary-hover

→ color-yellow-60

· Primary CTA hover background

Borders

color-border-inset

→ color-10

· Structural dividers

color-border-subtle

→ color-20

· Subtle

color-border

→ color-30

· 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

Typography — Geist Sans

.type-h1

48px · weight 500lh 1.1 · ls -0.03emcolor-text-primary

Heading One

.type-h2

40px · weight 500lh 1.1 · ls -0.03emcolor-text-primary

Heading Two

.type-h3

32px · weight 500lh 1.1 · ls -0.03emcolor-text-primary

Heading Three

.type-h4

24px · weight 500lh 1.3 · ls -0.03emcolor-text-primary

Heading Four

.type-body-lg

18px · weight 400lh 1.6 · ls 0emcolor-text-secondary

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

.type-body

16px · weight 400lh 1.6 · ls 0emcolor-text-secondary

Body — standard UI text, descriptions, general content.

.type-body-strong

16px · weight 500lh 1.6 · ls 0emcolor-text-primary

Body strong — emphasized inline text, active states.

.type-body-sm

14px · weight 400lh 1.45 · ls -0.03emcolor-text-secondary

Small body — captions, metadata, secondary UI text.

.type-body-sm-strong

14px · weight 500lh 1.45 · ls -0.03emcolor-text-primary

Small body strong — emphasized small text.

.type-body-xs

12px · weight 500lh 1.45 · ls 0emcolor-text-secondary

XS body — badges, tooltips, inline annotations.

Typography — Geist Mono

.type-label

14px · weight 500lh 1 · ls 0.04emUPPERCASE · 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 (#151310)

border: 1px color-border (#272921)

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 (#151310)

border: 1px color-border-subtle (#23221B)

radius: radius-lg (20px)

padding: space-xl (24px)

card-ghost

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

bg: color-bg (#100F0C)

border: 1px color-border-inset (#1B1F17)

radius: radius-lg (20px)

padding: space-xl (24px)