/// hugo.cli / system

The system manual.

Every color, type scale, duration, and component the site runs on. Each card is one var(...) call away.

CLI-native OKLCH palette Fluid type scale 8pt grid

01 Palette

Raw OKLCH-tuned grays and the brand + status accents. Theme-agnostic, consumed by semantic tokens.

gray-0#ffffff

gray-1oklch(0.98)

gray-2oklch(0.94)

gray-3oklch(0.87)

gray-4oklch(0.75)

gray-5oklch(0.60)

gray-6oklch(0.47)

gray-7oklch(0.35)

gray-8oklch(0.25)

gray-9oklch(0.17)

gray-10oklch(0.10)

gray-11oklch(0.04)

orange-400#ff8533

orange-500#ff6a00

orange-600#e05a00

green-500#2ed573

green-600#26b462

01·live Color mixer

Drag the sliders to mutate --color-brand across the page in real time. It cascades through every component that already consumes the brand token.

Lightness 63% Chroma 0.26 Hue 44°

oklch(0.63 0.26 44)

02 Semantic colors

Semantic layer consumed by every component. Change any one of these and the whole system shifts.

--color-bgPage background

--color-surfaceSubtle surface

--color-surface-hoverHovered surface

--color-surface-elevatedFloating panels

--color-text-strongMaximum contrast

--color-text-primaryBody copy

--color-text-secondaryParagraph 70%

--color-text-mutedLabels, meta

--color-text-faintWhisper

--color-borderSubtle rule

--color-border-strongEmphasised rule

--color-brandAccent orange

--color-status-availableAvailable pill

03 Foreground opacity scale

Theme-aware alpha steps from --color-fg: white on dark, black on light. Replaces every hand-rolled rgba(255,255,255,X) that used to live in the codebase.

fg-2

fg-4

fg-6

fg-8

fg-10

fg-15

fg-20

fg-30

fg-40

fg-50

fg-60

fg-70

fg-80

fg-90

04 Typography

Manrope (variable, 200-800) for prose and headings. JetBrains Mono for labels, metadata, and the TUI lane.

Aatext-4xlclamp(3.5rem, 3rem + 2.5vw, 5rem)

Scaling the experiencetext-3xlclamp(2.5rem, 2rem + 1.5vw, 3.5rem)

Design as a strategic levertext-2xlclamp(1.8rem, 1.5rem + 1vw, 2.3rem)

Preserving the exact standardstext-xlclamp(1.4rem, 1.2rem + 0.6vw, 1.75rem)

Industrializing design is not a surrender of soul.text-lgclamp(1.1rem, 1rem + 0.4vw, 1.3rem)

The quick brown fox jumps over the lazy dog.text-baseclamp(0.95rem, 0.9rem + 0.25vw, 1.05rem)

The quick brown fox jumps over the lazy dog.text-smclamp(0.78rem, 0.74rem + 0.2vw, 0.88rem)

The quick brown foxtext-xsclamp(0.6rem, 0.58rem + 0.1vw, 0.68rem)

04·live Type tester

Push Manrope's variable weight axis. Change the copy, size, tracking — the font renders live.

Scaling the experience.

Weight 300 Size 64px Tracking -0.03em Family

05 Spacing scale

8pt grid. Use for padding, gap, and margin — keeps rhythm consistent across sections and components.

space-10.25rem · 4px

space-20.5rem · 8px

space-30.75rem · 12px

space-41rem · 16px

space-51.5rem · 24px

space-62rem · 32px

space-73rem · 48px

space-84rem · 64px

space-96rem · 96px

space-108rem · 128px

06 Radius

Corner rounding scale. Pill for tags / buttons; XL for elevated panels; SM for inputs and microsurfaces.

radius-sm4px

radius-md8px

radius-lg12px

radius-xl16px

radius-pill9999px

07 Motion

Click any card to play its timing live. Durations use ease-out by default; the ease cards use duration-base.

08 Components

Live examples taken straight from the site. Every style here references the tokens above — nothing is bespoke.

Section label

01 / About

09 TUI palette

The retro-terminal lane has its own color system, three themes deep. Switch with /theme default, /theme matrix, or /theme retro inside the TUI.

default /theme default

bg

text

accent

green

cyan

yellow

matrix /theme matrix

bg

text

accent

green

cyan

yellow

retro /theme retro

bg

text

accent

green

cyan

yellow