heyrav.in
The heyrav
The heyrav
design system
Every token, component and pattern behind heyrav.in - with live examples, the code that makes them, and the reasoning for each decision.
Input
Shown on the case card.
Typography
Designs that convert.
Tooltip
Font family Redaction 35
Impact metrics
3.2Xconversion rate
₹399average order
31Xreturn on ad spend
Toast
Live
What is in here
Foundations12 pages: brand, colour, type, spacing, layout, radius, elevation, motion, icons, imagery, accessibility, voice.
Components33 primitives, from accordion to tooltip. Each one is live, themed and keyboard-ready.
MediaFigures, device frames, the video player and the lightbox.
Patterns17 compositions the portfolio is built from: hero, case rows, metrics, evidence, the closing grid.
ToolsThe generators that make heyrav's brand assets: lines, pens, dots, stagger, glitch.
AuditWhere heyrav.in drifts from this system today, and what to fix first.
Status, at a glance
Every component carries one of three labels, shown on its page and as a dot in the sidebar.
ShippedLive on heyrav.in. The CSS here is ported verbatim from the page that ships it, and the page links to where you can see it.In toolsLive in the heyrav tools UI (control rails, sliders, toggles). Same tokens, denser sizes.SpecDefined here first, built from the same tokens, ready for the next page that needs it. Not on the site yet.