--- author: "Umesh Malik" canonical: "https://umesh-malik.com/design" description: "The consolidated design language for umesh-malik.com: ember-on-black tokens, Space Grotesk + Hanken Grotesk + JetBrains Mono type, five core primitives, and the signature motion moves." title: "Design System — Umesh Malik" tokens: 590 generator: "scripts/generate-page-markdown.mjs" --- Design System · Audit v1 # One system. Unmistakably yours The single source of truth for the site's look and motion — tokens, five primitives, and the signature moves. Everything here is theme-aware; toggle light/dark in the header to see both. Color — one warm palette \--void Page background \--surface Cards, panels \--raised Inset / hover fill \--border Default hairlines \--border-strong Emphasis edges \--text Primary text \--text-muted Secondary text \--text-faint Labels, meta \--accent-ember The signature. Primary buttons, one hero accent per view, the U. cursor, active states. \--accent-sage Secondary only — positive metrics, "shipped / live" states. Accent = scarcity. If everything glows, nothing is memorable. Aim for one ember focal point per viewport. Typography — three roles display Space Grotesk 600 · clamp 40-96 I build intelligent systems. h2 Space Grotesk 600 · 32px Selected work h3 Space Grotesk 600 · 22px AI & GenAI Engineering lead Hanken Grotesk 500 · 20px Show what I build, how I think. body Hanken Grotesk 400 · 17px/1.65 Turning foundation models into production-grade products. label JetBrains Mono 500 · 12px · .16em Start here Spacing & radius — 4px base Space scale \--s-1 4px \--s-2 8px \--s-3 12px \--s-4 16px \--s-6 24px \--s-8 32px \--s-12 48px \--s-16 64px Radius \--r-sm 6px \--r-md 10px \--r-lg 14px \--r-xl 20px Core components — five primitives Button — 3 variants [Start a Conversation](https://umesh-malik.com/contact) [Explore Projects](https://umesh-malik.com/projects) [Read the Blog](https://umesh-malik.com/blog) Card — one primitive, variants [ PROOF ### Case studies Project, path, focus, and blog cards are all this one component with a different eyebrow and body. ](https://umesh-malik.com/projects) [](https://umesh-malik.com/projects)[See the work](https://umesh-malik.com/projects) Chip & Stat PythonLangChainClaude APISvelteKitTypeScript 52+ Articles $10M+ At scale Signature moves — live 01 · Blinking U. cursor U 02 · Diamond connective tissue Bullets Dividers & ticks Loading state 03 · Magnetic arrow & underline-grow [Read the Blog ](https://umesh-malik.com/blog) 04 · One hero moment Umesh \--dur-fast: 120ms \--dur-base: 220ms \--dur-slow: 420ms \--ease: cubic-bezier(.16,1,.3,1)