Parvez Kose · Design System
Spacing, radii, elevation
01 · 4px spacing grid
Every layout metric rounds to 4px. Card padding is --space-6 (24px). Topbar height is --space-12 (48px). Page gutter on `/classic` is --space-20 (80px).
--space-14
Pill / tag inner padding
--space-28
Icon gap, small inline gap
--space-312
Paragraph bottom, tag margin
--space-416
Section-internal gap
--space-624
Card padding · divider inset
--space-832
Section spacing
--space-1040
Terracotta rule width (above headings)
--space-1248
Topbar height
--space-1664
Major section break
--space-2080
`/classic` top gutter
02 · Radii — understated
Avoid heavy `2xl / 3xl` rounding. The immersive hero uses zero radius and corner brackets instead.
03 · Elevation — ink on paper
Most surfaces are a 1px border, no shadow. The only functional shadows are text shadows — stacked, to cut through the WebGL terrain without a surrounding pill.
--shadow-card-light
Hairline over bone-paper
Classic card elevation — just a 1px border, a whisper of shadow.
--shadow-text-hero · over shader
Parvez Kose
Designing interfaces for intelligence
0 1px 3px rgba(0,0,0,.95) · 0 0 28px rgba(0,0,0,.65) · 0 0 56px rgba(0,0,0,.35)
04 · Layout — classic card anatomy
The 640px card is the canonical light layout. Note that dividers are inset 24px from both sides — they never run edge-to-edge.
Parvez Kose
Parvez Kose
Staff Software Engineer
AI Native Full Stack · Front-End
I design and build AI-powered systems that automate complex workflows and optimize costs at scale.
SubstackMediumLinkedInGitHub
TOPBAR 48 · HERO 260 · DIVIDER 1 · BIO ~80 · DIVIDER 1 · LINKS ~60 · FOOTER ~40