Parvez Kose · Design System
Palette — wines, earth, ivory, black
01 · Accent system — V2 dark variant
White / warm-white carries 70% of text on dark. These five tokens handle the remaining 30%. Each has a specific job — never swap roles.
#E2725B
--accent-primary
Signal color. Active states, hover lines, selected nav indicators, CTA borders, thin accent rules above headings. The loudest color in the system.
#C4A000
Golden
Highlight · 1 per view
--accent-golden
Microscopic highlights only. Terminal cursor, “new” badge, one underline per screen max. Reserved to avoid the red+gold “luxury hotel” problem.
#C8AD8F
--accent-muted
The glue. Metadata text (dates, captions, read times), card borders at 15% opacity, section divider lines. Warm neutral that replaces every cold gray.
#A9333C
--accent-crimson
Medium wine. Overlay card borders, protection gradients over the shader, pullquote side-rules. Visible against dark where burgundy disappears, but not as loud as terracotta.
#800020
--accent-structural
Spatial warmth only. Hover fill backgrounds, thick gradient dividers, bullet dots. Never for text or thin lines — too low contrast. Creates depth, not signal.
Proportion in a typical view
Base · 3×
Terra · 1×
Gold .5×
Latte .8×
Crimson .6×
Burgundy .7×
Contrast ladder · against #0A0A0A
TokenSampleRatioStatus
Terracotta
The quick brown fox
4.5 : 1
✓ Text-safe
Golden
The quick brown fox
4.1 : 1
✓ Text-safe
Latte
The quick brown fox
5.2 : 1
✓ Text-safe
Crimson
The quick brown fox
3.2 : 1
Structural only
Burgundy
The quick brown fox
2.1 : 1
Structural only
02 · Wines · the red spine
Derived from the volcanic shader's valleys and peaks. The wines drive atmosphere; they are rarely used as fills. Expect them in the shader, in the `oxblood → port → noir` gradient behind hero cards, and in editorial underlines.
Crimson
Garnet
Wine
Burgundy
Claret
Cabernet
Oxblood
Port
Noir
Abyss
03 · Warm earth · accent swatches
White / warm-white carries 70% of text on dark. These handle the remaining 30% — tags, rules, hover states, CTA borders. Terracotta is primary. Golden is reserved (one per screen). Never fill pills solid.
#E2725B
Terracotta
--accent-terracotta
#C54B6C
Mulberry
--accent-mulberry
04 · Wood tones
05 · Neutrals · the ivory/linen terrain
Warm, paper-like. Replaces cool gray. Latte is the secondary muted color on dark (metadata, card borders at 15%). Ivory/linen/cream appear as hero-card fills and blog body tint.
#F7E7CE
Champagne
--neutral-champagne
06 · Anchor
#000000 · --neutral-black
Black is the structural anchor. Immersive page body sits on --im-bg (#0a0a0a) — not pure black — so the shader can dip into truer black in its valleys. Borders use --im-border (#2a2520), warm-tinted, not cool gray.
07 · Accents in use
Section header · Terracotta rule
Selected works
A short terracotta bar above a heading signals sections without needing color-heavy backgrounds.
Tags — 12% fill + same-color text
React
WebGL
Design systems
Low-opacity fills. Never solid pills on dark.
Overlay card on shader
Generative UI prototype
2025 — Design engineering
Terracotta hairline + latte metadata add warmth. Never a solid-black pill.
Single-use golden underline
Poetry in the shell, rigor in the stack.
One golden underline per screen, max.
08 · Color tokens from shader background
A second, complementary naming layer — material-indexed tokens that describe the terrain itself. Used at the stylesheet layer; the Accent system above drives UI.
| Swatch | Token | Value | Role |
|---|
| --bg | basalt-950 | Page background |
| --surface | obsidian-900 | Cards, panels |
| --border | charcoal-800 | Dividers, card borders |
| --fg-strong | linen-100 | H1 / display |
| --fg | linen-200 | Primary prose |
| --fg-muted | linen-300 | Secondary |
| --fg-meta | ash-400 | Meta, captions |
| --accent | crimson-600 | One per view |
| --focus-ring | crimson-500 | Focus / hover accent |
09 · Rules of engagement
- White / warm-white carries 70% of text on dark. Accents are the remaining 30%.
- Terracotta = interaction. A 40px underline above a heading, a hover rule, a CTA border — not a fill.
- Golden is reserved. One underline or one badge per screen, maximum.
- Latte replaces cool gray. Use it for metadata, dates, captions. At 15% opacity for card borders over the shader.
- Never use solid filled accent pills on dark. Always 10–15% opacity fill with matching-color text.
- Wines are rarely fills. They live in the shader, in deep-gradient card backs, and as editorial underlines.
- No purple, indigo, teal, or neon glow. Ever.