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.
Small marks behind your content: an even dot field, a fading one, plus marks or a halftone growing toward one corner, with an optional colour around the pointer.
A panel that slides in from an edge for a side task, so the page you came from stays where you left it.
Compact menu of actions that opens from a button and closes on choice, with arrow-key navigation and a destructive variant.
Text that turns into a field in place without moving the page: Enter commits, Escape reverts, leaving commits or reverts by prop, with validation and optional buttons.
Hot rose. Bold, for consumer and creative products. Complete tokens, motion included.
What a list or a search shows when it has nothing: an icon, a plain reason and the next step, centred, in a dashed slot, on a card or in one row.
A first screen that gives people somewhere to start: worked examples, the first three things to do, or a ghost of the filled screen with sample data.
A 404, 500 or offline screen with honest wording and a way out that can work: one sentence, beside places that still work, or a plain readout for developer tools.
Answers before someone has to ask: a short list on one plate, a longer list beside a heading that stays in view, or a filter box with an empty state.
A features section in three forms: an asymmetric grid of mixed cell sizes, alternating picture and text rows, or a list of features driving one large panel.
Gives any control a label, description, error and required mark, and wires the ids and aria attributes so nobody has to remember them.
A real drop zone and file input with type, size and count limits, clear errors and a progress list. It never touches the network: you upload and pass the state back.
Filters a list you already have: chips with result counts, an all chip, a clear button, dead ends disabled and the result count announced.
Navigation that floats over the page: a pill with a sliding highlight, a capsule that opens into a panel, a bar that shrinks on scroll or a bottom tab bar.
A movable window that stays on screen: drag with pointer capture, resize, minimise, close and move by keyboard, as a titled panel, tight chrome, a side dock or a tool palette.
A process drawn from data with no diagram library: a step-by-step walkthrough, boxes and arrows that wrap, a numbered rail or one inline line.
Deep green. Calm, for health, money and climate. Complete tokens, motion included.
A glass object for the centre of a hero, with no WebGL: a shaded knot on a small canvas, a CSS sphere or frosted panes. Respects reduced motion and reduced transparency.
A short stepped burst that ends in clean text: colour fringes, shifting bands, dropped letters or a jumping line, and it never loops.
A turning dotted earth on one canvas with no 3D library: land dots, a wire ball, a shaded disc or routes with a light along them, plus markers and drag to spin.
Status dots that merge into one body and split apart again like a liquid, so the eye tracks one thing changing.
A headline painted with a gradient from theme tokens, legible in every palette, with solid fallbacks for high contrast and forced colours.
Hairlines behind your content: an even grid, a fading one, a floor receding to a horizon or a few filled cells, with an optional brightening around the pointer.
A mark drawn over text that is already readable, line by line, as a marker band, an underline or a hand-drawn stroke or outline.
A preview that appears over a link when the pointer rests on it, laid out for free content, a person, a page or a number.
A preview that follows the pointer over a list of links. Off on touch, reachable by keyboard, and never the only way to anything.
A glyph-only button that cannot be shipped without a name, with four surfaces, a pending state that keeps focus and a 40 px hit area on touch.
Drag, pinch or wheel to frame a picture, with keyboard nudges and an aspect lock, returning a crop rectangle that can never leave the image.
Pictures appear along the pointer's path and fade in order, pile up, fan out or slide past, with a still arrangement on touch so the box is never blank.
A small count, dot, ring or word pinned to the corner of what it describes, gone at zero and spelled out for screen readers.
No colour at all. Serious, for tools and documents. Complete tokens, motion included.
Single-line text field, 36 px tall to match Button, that moves the invalid state onto its border and ring.
One field with text, icons, buttons or a select attached to it, sharing a single border and focus ring, in four layouts.
One-time code entry drawn as boxes but built on one real input, so SMS autofill, paste, backspace and screen readers all work.
A slow light around the screen edge while the assistant listens or thinks, visible from anywhere on the page.
Keyboard keys as hairline caps, physical keys, tight chips or plain text, with chords, a platform-aware modifier and a cap that dips on the real key.
Caption bound to a control: clicking it focuses the field, and it dims when the field is disabled.
A marketing hero with one message and two actions, in four layouts: beside a live preview, over a wide product plate, beside two overlapped fragments, or type alone.
A magnifier over any content: a round lens, a lifted loupe, a zoomed panel beside it or a full-width band, with a second copy that focus and assistive tech never reach.
A WebGL metal surface behind a button or chip, with reflections that drift so the control reads as a real, premium material.
A list you choose from, always open: single or multiple, type-ahead, Home and End, groups and disabled options, written to the full ARIA pattern.
Covers its parent while work runs, and only its parent. Waits before showing so fast answers never flash, and keeps layout and focus in place.
A login with labels that stay visible and inline errors, in three forms: beside a calm brand panel with a password you can reveal, one card on a grey ground, or email only with a check-your-inbox screen.
Logos you have permission to show, in three decisions: a quiet row, a plate for each, or a marquee for more than fit. Includes dashed placeholders to build with until you have them.
A wrapper that pulls any child toward the pointer from past its own bounds: the whole element, inner layers, a row by distance, or a soft ring that trails.
An endless CSS-driven row that stops when someone reaches for it, and turns into a still, scrollable row for people who turned motion off.
Formats dates, phone numbers, cards and your own patterns as you type. The caret stays put in the middle and on paste, and deleting across a dash works.
A surface that arrives like a material coming into focus: slightly smaller, softer, from its anchor, and leaves the same way.