Parvez Kose — Design System

An anti-template design system for parvezkose.com. Material and culture on the surface; A2UI / generative / agentic rigor underneath. Constraints come from volcanic terrain, wine taxonomy, terminal interfaces — not from the statistical average of SaaS landing pages.

01 · Brand

Logo, hero imagery, voice

The volcanic shader as primary brand image. Manifesto copy. OG lockup. Voice rules: declarative, first-person, no SaaS verbs.

Open → 02 · Colors

Wines · accents · neutrals

Three families plus dual-mode surfaces. The red spine (15 wines), warm earth accents (terracotta, golden, mulberry), wood borders, ivory/linen creams.

Open → 03 · Type

Mono-first, restrained weights

JetBrains Mono headings; Fira Code subtitles; IBM Plex Sans prose; IBM Plex Serif for blog H1 only. Weights 300 / 400 / 500. Never default to 700.

Open → 04 · Spacing

4px grid · understated radii

Spacing 1–20 on a 4px grid (matches Tailwind v4 default exactly). Radii 4 / 6 / 8 / 12 / 999. Hairline rules over boxes. Corner brackets over rounded chrome.

Open → 05 · Components

Nine reusable atoms

TopBar · HeroFrame · NavCapsLink · Divider · LinkRow · Pill · Philosophy · Footer · Project Card. Three buttons (ghost, framed, terminal) — no filled primary.

Open → 06 · UI Kit

The system, end-to-end

Four surfaces composed: immersive hero, classic card, blog post, about page. The system in context, not in isolation.

Open → 07 · AtomsLive

Live React render

The atoms above, running as server-rendered React on the same Next.js stack as the site. Same tokens, executable. Read-only preview.

Open ↗

The pages above are checked-in HTML specimens — no build pipeline, no Storybook, no Chromatic. They render the live tokens from colors_and_type.css. The same tokens drive parvezkose.com via Tailwind v4 @theme and a DTCG-format tokens.json — one source, three surfaces (CSS, utilities, future Figma variables).