Consistency
Every piece a Plavon build is made of, in one way only. Each has its page: what it is, when it is the answer and when another piece is, every way it is drawn, its code and its rules.
Foundations
The tokens everything reads: colour, type, corners, shadows and motion.
- ColoursThe palette: one near-black ink in five softer steps for text, warm off-white grounds, fills of the ink at a few percent, and four state colours.
- TypeThe type scale: Inter in seven steps, from a 44px display to an 11.5px caption, with tabular figures for numbers.
- Corners and shadowsThe corners and shadows: 10px menu rows, 11px keys and small chips (rounded-md), 14px fields and menus, 20px cards, 28px stages and dialogs, pills for what is pressed, and three shadows (rest, lift, float).
- MotionOne curve, the glide (--ease-glide, no overshoot), and a few durations, applied to every piece by its data-slot in consistency/motion.css; a box whose content changes follows it with useGlide.
Buttons
Everything pressed: buttons, toggles and the bars they sit in.
- ButtonA pill-shaped button for an action, in seven variants (default, secondary, outline, ghost, destructive, destructive-outline, link) and five sizes, with a loading state.
- Icon buttonA Button holding only a glyph, round, in five sizes (icon-xs to icon-xl); the glyph grows a little on hover and sinks on press.
- Button groupButtons side by side as one control: attached into one pill sharing a hairline, or split a hair apart for an action and its options.
- ToggleA button that stays down: a quiet pill that fills while on, for one on or off choice made in place.
- Toggle groupToggles in a row on one track, letting several be on at once (multiple) or one at a time.
- Segmented controlA few labelled options on a pill track, with a white thumb that glides to the one chosen.
Inputs
Everything typed into, with its label, hint and error.
- InputA single-line text field with a soft edge that darkens and takes a grey halo on focus, in three heights (sm, default, lg).
- Search fieldA pill-shaped search box with the glass, the words and a ⌘ K hint while empty, and a clear button once something is typed; Escape clears it.
- Text areaA multi-line text field that grows with what is typed, from a 96px minimum, with the same edge and focus as the input.
- Input groupAn input (or text area) with addons inside its edge: an icon, a fixed text such as https:// or .ca, a unit, or a small button.
- Number fieldA number with minus and plus buttons on either side, centred tabular figures, and min, max and step limits.
- One-time codeA row of cells, one per digit, for a one-time code sent by email or text, with paste filling every cell and an optional separator.
- Field, label and formThe frame around one form control: Field ties a FieldLabel, a FieldDescription and a FieldError to it, and Fieldset groups fields under a legend.
Checkboxes, switches and sliders
Every on and off, alone and in groups, and a value along a track.
- CheckboxA small box that is ticked or not, alone or beside its words, with a mixed state for a box standing for several.
- Checkbox groupSeveral checkboxes answering one question together, holding the ticked ones as one list of values.
- Radio groupA short list of options where exactly one is picked, each a round button beside its words.
- SwitchAn on and off control that takes effect the moment it is flipped.
- SliderA value, or a range between two values, picked by dragging a thumb along a track.
Dropdowns and selects
Everything that opens a list: selects, comboboxes, menus, the team selector, the command bar.
- SelectA field that opens a list of fixed options and holds the one picked.
- ComboboxA field you type into to narrow a list and pick one of its items (or several), never free text.
- AutocompleteA text field that suggests values as you type and keeps whatever is typed, suggestion or not.
- Team selectorA pill showing the current team or company that opens a menu to switch to another, create one or open its settings.
- Dropdown menuA button that opens a list of actions, with shortcuts, submenus, checks and a destructive end.
- Context menuA menu of actions that opens at the pointer on a right click, or a long press on a touch screen, over an area.
- Command barThe ⌘K bar: a dialog with one search field that finds pages, records and actions in groups and runs the one picked.
Dates
A month to pick from, alone or in a field, and a period for a report.
- CalendarA month of days to pick one day, or a range of days, from, drawn in the page.
- Date pickerA field-like button that opens a calendar in a popover and shows the picked day in words.
- Date range pickerA pill that says a period in words and opens named periods, "the last N", two typed ends and two months to pick any range from.
Dialogs, sheets and popovers
What opens over the page, how it opens and how it closes.
- DialogA card that opens over a dimmed page and holds one short task: a header, a panel that scrolls, and a footer of actions.
- Alert dialog and confirmA dialog that asks one question before something happens; `ConfirmDialog` is its ready form for a destructive action, where the thing's name must be typed first.
- SheetA panel that slides in from an edge of the window over a dimmed page, with a header, a scrolling panel and a footer.
- DrawerA panel that rises from the bottom (or comes in from any edge), follows the finger and closes with a swipe, the way a phone's sheets do.
- PopoverA small floating card anchored to a button, with no backdrop, that closes on a click outside or on Escape.
- TooltipA small dark label that appears beside a control on hover or keyboard focus, after a short wait.
- TermA word with a dotted underline whose meaning shows in a tooltip on hover or focus.
- Preview cardA card that opens when the pointer rests on a link, previewing what the link leads to.
Navigation
How a person moves through a tool.
- SidebarThe tool's main navigation down the left side: the team selector at its head, each place a `NavItem` row, the current one white and lifted off the warm ground.
- TabsA row of tabs that switches between panels of one page, drawn as pills with a sliding white thumb or as an underline.
- BreadcrumbThe path from a list down to the record being shown, each level a link and the last one the current page.
- PaginationPrevious and Next with page numbers between them, for moving through a long list one page at a time.
- ToolbarA floating pill that groups related controls, such as formatting buttons, into one stop for Tab with the arrow keys moving between them.
- AccordionA stack of headings that each open their panel below, one at a time unless `multiple` is set.
- CollapsibleOne trigger that shows or hides one panel below it, its height animated.
Badges, avatars and cards
What content sits on and what labels it.
- BadgeA small pill that labels something with a word or a number: a status, a count or a tag.
- AvatarA person's round picture, or their own colour gradient when there is no photo.
- CardA white surface with rounded corners and a soft shadow that holds one subject.
- FrameA grey tray that holds one or more white panels under a quiet heading.
- Keyboard keyA keycap that shows a key or a keyboard shortcut.
- SeparatorA one-pixel line that divides content, across or upright.
- Scroll areaA box that scrolls its content behind a thin scrollbar and fades the edge that has more to show.
Tables and figures
Rows of data and how far along something is.
Charts
Numbers drawn: over time, in parts, ranked, toward a goal, by hour. Every one answers the pointer and glides to new data.
- StatOne figure that matters: its label, its value, how it moved against a named period, and an optional sparkline under it.
- SparklineA trend drawn as a small line beside or under a figure, with no axis: the past in grey, the latest stretch and its point in blue.
- Area chartA value over time: one 2px line per series, the first washed underneath, the period before as a quiet dashed line, a crosshair that finds the nearest date.
- Bar chartAmounts as columns from one baseline: one series, several side by side, or stacked as the parts of each period.
- Bar listA ranking: one row per name, longest first, a thin bar of its share of the first, the value in text, its share of the whole on hover.
- Donut chartThe parts of one whole as a ring, five at most (more fold into Other), the total in the middle and a legend with each value and share.
- Progress ringHow far toward a goal: a ring whose track is a lighter blue, filled in blue from the top, the share in the middle.
- HeatmapWhen things happen: a grid of cells, one blue from light to dark for how many, the empty cell grey, the scale under it.
Feedback and empty states
What tells a person something happened, is loading, or that nothing is here yet.
- ToastA short message that slides in at the corner to say something just happened, then goes away on its own.
- AlertA block in the page, tinted by its meaning, that states a condition and what to do about it.
- Empty stateA centred message that says a place has nothing in it yet and offers the way to fill it.
- SkeletonA grey shape with a soft shimmer that stands where content will appear while it loads.
- SpinnerA small spinning circle that says something is working.