Biswarup Mondal
Bengaluru
Component

Primitives

Seven pieces, grouped by what they are for. Pages compose these; a page may lay them out but may not restyle them.

Actions

ButtonThe only control that commits a change or navigates.LinkInline navigation inside a sentence.

Labelling

KickerMono, uppercase. The system's label voice.ChipA non-interactive tag: a role, a year, a stack item.

Containment

TileA raised surface, optionally a whole-card link.NoteAn annotation beside the argument, not part of it.

Navigation

TabsOne surface, several mutually exclusive panels.Top navigationThe site's one global bar: who this is, where to go, and where they are.

Canvas

RulerMeasurement chrome that frames a canvas and follows the pointer.Selection frameA drawing-tool frame around selected text or the control being addressed.

Shared guarantees

Every primitive on these pages holds to the same four things, so a page never has to check.

  • No literal values. Each one is built entirely from tokens.
  • Hover is gated behind @media (hover: hover).
  • Focus is styled via :focus-visible, and never removed.
  • Targets clear 44px at phone width.