← Back to gallery

Malm Design Tokens

Single source of truth for the colors, spacing, typography and components used across Malm's static templates. All sizes are rem-based; no px values are mixed in. Both light and dark palettes follow the user's OS preference, with a manual override above.

Colors

Same semantic token names in both palettes. Chips below show the literal hex value for each mode regardless of the active theme.

Dark palette

--bg#0a0a0a
--surface#141414
--surface-alt#1a1a1a
--text#f0f0f0
--text-muted#888
--text-faint#555
--text-disabled#333
--border#2a2a2a
--border-strong#333
--accent#3b82f6
--error#ef4444
--critical#f59e0b
--warn#eab308

Light palette

--bg#ffffff
--surface#fafafa
--surface-alt#f1f1f1
--text#111111
--text-muted#666
--text-faint#999
--text-disabled#cccccc
--border#e5e5e5
--border-strong#d4d4d4
--accent#2563eb
--error#dc2626
--critical#d97706
--warn#ca8a04

Spacing

Scale used for padding, margin and layout gaps.

--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-61.5rem
--space-82rem
--space-123rem

Radius & Borders

Border radii and the single hairline border width used everywhere.

--radius-sm
0.375rem
--radius-md
0.5rem
--radius-lg
0.625rem
--border-w
0.0625rem

Font

Two stacks - body sans-serif and a monospace for code, paths and tabular values.

--font
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
The quick brown fox jumps over the lazy dog
--font-mono
ui-monospace, SFMono-Regular, Menlo, monospace
malm deploy ./site --name demo

Typography

Sizes scale with root font-size.

--text-xs / 0.8The quick brown fox
--text-sm / 0.875The quick brown fox
--text-base / 1The quick brown fox
--text-md / 2Section heading
--text-lg / 3Hero
--text-xl / 4404

Forms

Inputs, checkbox and full-width primary button as used on the login template.

Invalid username or password

Components

Reused building blocks across the templates.

Button

Return Home

Card

404 / 4xx
Client errors served when a path is missing.

Info row

Sitetemplates-showcase

Userjane.doe

Path/admin/secret

Code block

X-API-Key: <your-key>