Arjuna is a design system that turned fragmented, one off screens into a consistent, scalable product language.
Colors, type and spacing were decided screen by screen, so nothing carried across teams or products.
Every design to dev handoff reopened the same decisions, adding delays and drift between design and code.
Without tokens there was no clean path to light/dark or brand theming, so each variant was a manual rebuild.
84 primitive colors across 8 ramps (50 → 950), aligned to HP's brand and themed across Light, Dark and Red.
Roboto across the board, on a 13 step size scale (14 → 72) with roles for Heading, Headline, Title, Body and Label, 150 type styles in all.
A radius scale from crisp edges to fully rounded, so every surface feels part of the same family.
A consistent stroke icon set with dedicated stroke size tokens, so icons stay legible at every scale.
127 primitives feed 208 themed semantic roles, which feed component state layers, so a single change ripples across Light, Dark and Red.
Raw brand values · 84 colors across 8 ramps, plus numeric scales.
Roles under Arjuna/sys · themed across Light, Dark & Red.
Semantic roles applied to a component and its states.
Every component ships in the HP Toolkit with variants, states and applied tokens, plus usage and do / don't guidance, documented once and trusted everywhere.
A short line of supporting body text inside the card.
Every component in the HP Toolkit ships with anatomy, specs, states and clear do / don't guidance, so any designer or engineer can use it correctly.
Each part measured and tokenised.
Rules that keep the hierarchy intact.
Tokens authored as variables, the single source of truth.
Every token and component documented in the HP Toolkit.
Style Dictionary builds platform specific outputs.
Web, iOS & Android consume the same values.