Agni
Design System
A token-first design system built from first principles — not adapted, not borrowed. Designed from scratch.
Most design systems inherit their colour logic from existing products. Agni was different: the colour architecture came first, the product came second. Named after the Sanskrit word for fire, it's anchored by a warm amber brand palette that scales from near-white to near-black — with WCAG AAA compliance at every step.
Adapting an existing system
was the wrong answer.
The product needed a visual identity that felt distinctly Indian — warm, grounded, culturally aware — without relying on clichés. Every major design system (MUI, Carbon, Ant, Radix) starts from Western-neutral palettes. Agni needed to start somewhere different.
Indian digital products often use Western-neutral colour systems and layer Indian aesthetic over it. Agni reversed that — the warmth and the Indian cultural accent are baked into the foundation, not added on top.
Most teams retrofit accessibility. Every palette step in Agni was defined with its contrast ratio as a constraint, not an afterthought. WCAG AAA (7:1 minimum) meant the system is usable for users with low vision — and simply more readable for everyone.
Primitive variables define what a colour is. Semantic tokens define what it means. Day/Night mode isn't a "dark theme" — it's a single token layer switching the semantic meaning of each primitive at runtime.
7 palettes.
81 primitive variables.
One system.
(Mono, Brand, Error, Success,
Warning, Info, Rose)
across all palettes
(7:1 contrast ratio — highest standard)
13 steps instead of the standard 11 gives finer control at the critical near-black end — essential for dark mode where small differences in background shade matter most. The key design decision: these are warm neutrals (#FAF8F5 leans cream, not grey) — making the system feel human rather than clinical.
Amber-gold. Fire. The step-500 (#F6A020) is the default interactive action colour. Step-600 (#D97706) provides depth for hover states. The name "Agni" and the amber brand colour are inseparable — this wasn't an arbitrary colour choice, it's the product's identity.
Deliberate choice to use warm terracotta for errors rather than a cold red. In the context of Indian UX, warm reds read as urgent without the clinical harshness of pure red. Distinct enough from the Brand amber to never be confused, but harmonious enough to feel like the same family.
The most distinctive decision in the entire system. Most enterprise design systems have no cultural accent palette — they use semantic colours only. Rose is explicitly labelled "Indian accent" in the Figma documentation: used for badges, notifications, and cultural celebrations. This is design systems work acknowledging the cultural context of its users, not pretending to be neutral.
Primitives define what.
Semantics define why.
The two-layer token architecture separates colour definition from colour intent — making theme switching (Day/Night) possible without duplicating any design decisions.
Layer 1 — Primitive Tokens
Each colour in each palette is defined as a primitive. These never appear in components — only in semantic tokens.
Layer 2 — Semantic Tokens
Semantic tokens reference primitives and carry intent. Day mode and Night mode use the same semantic tokens but resolve to different primitives.
interactive/default automatically gets the right amber in day mode and a lighter or adjusted amber in night mode — without any developer touching the component. The theme switch happens entirely at the token resolution layer.
Not WCAG AA.
WCAG AAA.
WCAG AA (4.5:1 contrast ratio) is the minimum standard. Agni was built to WCAG AAA (7:1) — which is 55% higher. This wasn't the easiest constraint to work within, but it was non-negotiable.
India has approximately 8 million people with visual impairments. Products built for India — and designed to WCAG AAA — are accessible to a meaningfully larger audience than those built to AA. Accessibility isn't a Western concept applied to Indian products. It's a basic design responsibility.
The AAA requirement forced step-level decisions that made each palette better. Colours that "looked good" but failed 7:1 were adjusted. The warm terracotta for errors was chosen partly because it maintained AAA compliance at step 600 in both day and night modes — something pure reds struggle with.
Every swatch in the Figma documentation is bound to its colour token, not a local colour fill. This means the documentation stays in sync with the system automatically. If a token value changes, the documentation updates — preventing the common drift between design system docs and implementation.
The choices that
defined the system.
The standard approach for neutral palettes uses cool (blue-tinted) or true-neutral greys. Agni uses warm greys (#FAF8F5 has a slight cream undertone). This was a deliberate departure — warm neutrals feel more human, age more gracefully, and pair naturally with the amber brand colour without requiring compensation.
Standard Radix/Tailwind-style palettes have 11 steps. Mono has 13 (adding steps 1150 and expanding near-black coverage). Dark mode requires finer control in the near-black range — the difference between a sidebar background and a card background in dark mode is often just one palette step. More steps gave developers more precision without requiring custom colour values.
No major design system I reviewed had a palette explicitly named and documented for cultural accent use. I added Rose — not because the product needed more colours, but because honest documentation of intent matters. When a designer uses Rose for a Diwali celebration notification or a festival badge, the system should acknowledge that this is what the colour is for.
See the full system
in Figma.
The Agni Design System is publicly viewable in Figma. The colour system documentation page alone shows all 7 palettes with their full step ranges, semantic descriptions, and WCAG compliance notation.
Public view access · No login required