Whole screens, palettes and living effects for developers who do not design, each with the psychology behind its shape and a rule for when not to use it.
Stacked rows that open in place, so a long page of answers stays short until someone asks for one.
Appears when items are selected, with the count, the actions and a way to clear, floating over the page, docked to its edge or sitting in the flow.
A deterministic SVG face for an agent: the same seed always draws the same overlapping blobs, in theme colours.
An in-page message with a title, description, action and dismiss, in neutral, success, warning and error tones and four layouts.
A question that has to be answered before anything else, with focus on the safe answer, a typed confirmation for the worst cases and a bottom sheet on phones.
A dial for rotation and other circular values: drags one to one under pointer capture, steps by keyboard, wraps past 360, with a ring, a marked compass, a small knob and a 270 degree gauge.
A line of light running between two real elements, measured so it follows every reflow: straight, bowed, stepped like a circuit or many sources into one hub.
The frame of an app: sidebar, top bar, list and detail, or one reading column, with a skip link and landmarks, following its own width rather than the viewport.
Holds the space for media before it arrives, so the page does not jump, with a mat, an overlaid caption or an empty slot.
Light with height and direction: curtains from the top, a glow from the bottom edge, a ring behind the centre or one diagonal ribbon, with an optional slow drift.
A face or initials that identifies a person at a glance, alone or as an overlapping group with a +N.
Small status chip in five variants; the warm mise variant is reserved for the one item that must stand out.
One beam of light travelling the border of the surface the model is working on, so the eye knows where to wait.
Straight lines of light behind a section: a fan, lights on a grid, one slow band or soft shafts, quiet enough to keep the sentence on top first.
Two versions of one thing, compared with a divider you drag or a lens that follows the pointer. A real slider, keyboard included.
A trail from the root to the current page, with a nav landmark, a current marker and a middle that collapses into a menu.
Press target that answers on pointer-down: a 3% dip in 100 ms, so the click feels acknowledged.
Related actions joined under one border, across or down, including a main action with a menu of its alternatives.
A full-size calendar for showing what is on: month grid with labels, a seven day strip, a grouped agenda or a whole year, with a keyboard grid and any locale.
Bordered surface with header, content and footer slots that reads as one region before anyone reads the text.
A one-at-a-time deck for an argument told in order: a swipeable strip, a pile, story tap zones or titles beside the slide, with an optional rewind.
A pile of things with no order: a scattered heap to drag through, a fan that spreads, a swipe to decide on each or notification rows that open into a list.
Slides on native scroll snapping with no library: swipe, buttons and arrow keys, as a single slide, visible neighbours, a stacked deck or a thumbnail strip.
Pick from nested options: columns on wide screens, one level at a time on phones, with search, full keyboard, lazy children and the path shown in the trigger.
Bar, line, area and donut charts from one data shape, hand-drawn in SVG with nice-number axes, keyboard points and a real data table for assistive tech.
An AI chat that shows the model working, as a full screen, a panel docked beside the work, or a launcher that opens a small window.
Square toggle that fills and draws its check within 150 ms of the press, and announces the change through aria-checked.
A wrapper that answers a press with a small burst from that point: lines, falling bits, one soft ring or a little confetti, on one canvas that only draws while something is alive.
One-press copy with a clear result: a lone icon, a code line, a read-only field or a labelled block, and a safe way out when the browser refuses.
Saturated blue. Trustworthy, for finance and B2B. Complete tokens, motion included.
Readable code without a highlighting library: a small tokenizer for ts, json and bash, line numbers, marked lines, wrap, copy, file tabs and diffs.
One disclosure: a label that opens the detail under it, for the one thing most readers can skip.
A saturation square, hue and opacity sliders, typed hex and presets, in a popover, inline, as presets only, or as a compact field, with a thumb that never lags behind the hand.
Shows a colour with its name and value, alone or as a palette, with a label that stays readable on any fill and a checker under transparency.
A searchable select for long lists, single or multiple, with people rows, section headers, chips and loading built in.
A command palette with its own fuzzy search: groups, shortcuts, recent items, an empty state, full combobox and listbox semantics and a Mod+K helper.
The menu that opens where you press: right-click, long press or the Menu key, with sub menus, check and radio items and shortcuts.
A number that counts to its value without moving what sits beside it, formatted by Intl, with rolling digits, tiles or a meter line.
One clear thing to do, in three decisions: a plate that ends the page, text beside a piece of the product, or a slim row inside a long page.
A product dashboard in three decisions: one number first, one large chart first, or the work list first with the numbers as one line.
Hand it rows and columns and get sorting, a filter box, selection, column visibility, pages, loading rows and bulk actions, with rows that turn into cards in a narrow container.
A calendar with no date library: single days or ranges, limits, a full keyboard grid and any locale, as a popover, inline, a typed field or two months with a band.
A record of decisions: the question, what was chosen, what lost and why, for case studies, design docs and postmortems.
Text that starts unreadable and is decoded in place, on first view or behind a real button, with the sentence out of the accessibility tree until it opens.
Labels and values on a real dl, as ruled rows, two columns, single lines or tiles, with a slot for a copy button and long values that wrap.
Modal surface that dims everything else and holds focus until the user answers one question.
A row of icon buttons that swell near the pointer and rise without moving the page: a glass bar, bare tiles, a side rail or words under every icon.
A documentation screen from a list of pages: nav, page and table of contents, one column for a short guide, or text beside its code. Collapses on phones.