UI kit
Base components built from the Figma frames. Geometry comes from the component set; radii are the one thing still eyeballed, since the file exposes no radius variables.
Button
Variant × size, plus icon slots and the disabled state.
lg
md
sm
Tabs
A tablist: arrow keys move the selection, Tab skips the group.
Input & Select
Figma's Selects&Inputs matrix: Input / Search / Dropdown, label on or off, with a leading icon or a trailing CTA. Placeholder, value and focus are all CSS states — a filled field keeps the accent underline.
Label on
Enter a company name
Label off, and dropdowns
Badge
Platform card
The current channel picker. Brand marks are monogram placeholders — the real artwork still has to come out of Figma.
Scope option
Radio-backed, so only one window applies and arrow keys move through the set.
Scope option — every state
Hover, focus and pressed are forced with data-preview so all of them are visible at once; in the product they come from the real pseudo-classes.