Core Components
Foundational building blocks -- buttons, inputs, cards, toggles, and selects.
Button
Four variants (primary, secondary, ghost, destructive) across three sizes (sm, md, lg). All use 6px radius, Sen font at weight 500, and 100ms ease-out transitions.
Input
Text inputs with default and error variants in three sizes. Border lightens on hover, glows teal on focus, red on error.
Text Area
Multi-line input sharing the same styling as Input. Min-height 120px with vertical resize. The scratchpad variant adds extra padding (24px) and a larger radius (10px).
Card
Surface container with three variants: default (static), interactive (hover lifts), and selected (teal border glow). All have an inset top highlight.
Toggle / Switch
A 44x24px switch with an 18px thumb. Uses a spring easing for the transition. Built on a native checkbox for accessibility.
Dropdown / Select
A custom select with a trigger styled like an input. Click to open the menu. Items highlight on hover; the selected item shows a teal background with a checkmark.