@bevel

Light, depth, materials, motion and shape tokens, plus the utilities components use to apply them.

Switch light and dark as a change in lighting: the room dims, or the lights come up. Uses View Transitions.

Brass, bakelite and anodized aluminium. Set data-bevel-theme on <html> or any container; build your own at /themes.

Opt-in sound and haptics for Bevel controls: <BevelFeedback sound haptics> and useBevelFeedback(). Synthesised with Web Audio; silent outside the provider.

A button made as a keycap: a cap with a lit top edge on a visible side, which travels down by the side's depth when pressed by pointer, Space or Enter. While i…

A square keycap for a single icon: copy, close, toolbar actions. It must be given an aria-label, and is secondary by default so a row of them stays quiet.

A keycap printed in a line of text, for shortcuts and docs. Symbols such as ⌘ are read aloud by name. With listen, the cap goes down when the reader presses th…

A small printed plate with an indicator lamp, for status in tables, lists and headings. Five tones; a lamp is lit while its condition holds and dark when it do…

A customer's stored balance, shown as a leather wallet. Saved cards sit in it, and picking one pulls it out of the pocket.

A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet.

A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these.

Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first.

A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down.

A rubber-stamp impression in ink for statuses, and an embossed seal for the moment something becomes official.

Thermal paper with torn edges. Lines print in as they're added; a stamp or seal lands when it's paid.

A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath.

A needle on a brass-bezelled scale. Gauge reads a value; Dial sets one, turned by drag or keyboard.

A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags.

A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook.

An API key on a plastic card that slides into a brass reader. For bring-your-own-key and credential screens.

Who someone is: an agent, a person, a guest. The “HELLO my name is” sticker, a visitor badge for outside collaborators, and a plain tag for lists.

An exhibit sticker in the text that opens the exact passage it cites, with a stamp saying whether the source checks out.

An agent's plan on a legal pad. Finished steps are ticked in ink, the current one is underlined in red pen, the rest are still in pencil.

A docket of what an agent did: thoughts, actions, questions, responses and errors, each timed. Questions waiting on you are highlighted.

An action an agent wants to take, waiting for a person. Say what it does and what can't be undone; press and hold the brass seal to approve.

Pigeonholes for delegated work, one per subagent: its task slip, a lamp and a word for its status, and its progress. Finished work rises out of its cubby.

Proposed edits in proofreader's red ink, each with a sign-here flag to accept or reject it. Nothing is applied until someone decides.

A black marker bar over withheld text, read as “Redacted” with the reason. Hidden text is never rendered; revealed text keeps a trace of the marker.

A critical switch under a flip-up cover, as in a cockpit. Lift the cover, then flip it; closing the cover returns it to safe, and the cover closes itself if le…

A train cab's vigilance control for supervised agent runs: the run keeps going only while someone checks in. Miss the window and it warns, then pauses.

A lockout-tagout hasp: everyone working on something hangs their own padlock and tag, and it can't start until the last lock comes off. For freezes and holds.

A ticket dispenser and a Now Serving sign: your place in the queue is the number in your hand. For support queues, waitlists and jobs waiting their turn.

A ship's engine order telegraph: you set an order, the other side answers by moving its own pointer to match. Both show on one dial, so a pending order is visi…

A panel of alarm lamps from a control room. A new alarm flashes until someone acknowledges it, then stays lit while its condition lasts; one that clears unseen…

A rotary switch that clicks into fixed positions and stops hard at both ends. For a few ordered settings where the order matters: reasoning effort, quality pre…

A radio's push-to-talk key: it listens only while held, and letting go stops it. Nothing records by accident. For voice input to agents, walkie-talkie chat and…

A console fader with a motor: when someone else sets it, the cap travels there on its own and says who moved it. Grab it and it's yours. For settings an agent,…

One channel of a mixing console per agent or source: its name, mute and solo keys, and a motorized fader that an orchestrator can move and you can take. For ba…

A bank of tiny numbered slide switches, ON at the top, as on a circuit board. Every flag is visible at once and the bank reads as one value. For feature flags,…

A rack of jacks joined by patch cables: every route from a source to a destination is a cable you can see and pull. For webhook events to handlers, agent tools…

Edge-notched cards from the 1950s office: each hole along the top is an attribute, notched open if the card has it. Push needles down the columns and the cards…

A Kardex visible-index tray: each record shows only its edge, and coloured signal clips slide along it to mark where it stands, so a whole tray reads at a glan…

A photographer's contact sheet: every frame at once on a strip of film, marked with a grease pencil. Circle the keepers, cross out the rest. For reviewing gene…

A station departure board: each character is a pair of flaps that falls to the next value, column by column. The text is the truth and changes are announced on…

A punch clock's time card: each session is a row with its date, time in, time out and how long it ran, and the key stamps the time now onto the next line. For …

The library card in the back of a book: each loan or renewal stamps the next ruled line, and the last date is when it's due. Overdue dates are stamped red. For…

A text input cut into the panel as a slot, with a printed label above and description and error lines below. Focus lights the slot's edge amber, the colour of …

An everyday on/off switch, as a bat-handle toggle on a small plate. The lever swings through its bushing toward the side that's on and settles with a little sp…

A checkbox as a latching push-key. Press it and it sinks and stays down with its mark lit amber; press again and it springs back up. Mixed holds it half-down w…

Tabs and segmented controls as interlocked preset keys, like a car radio's: press one and it latches down while the one that was down springs back up. Only one…

A label-maker strip: dark embossing tape with raised pale letters and a tab pointing at the trigger. It feeds out a short way from the trigger's side; in a gro…

A sheet of panel stock lifted off the page on the shared light, with a folded tab at its trigger. It lifts toward you and settles; Escape or a click outside pu…

A selector plate: items engraved into brushed metal, the highlighted one pressed in, a lamp for checked settings, engraved rules between groups and keycaps for…

The lights go down and a panel rises onto the desk, screwed or stitched at its corners. Content has no padding of its own, so it hosts forms and command palett…

Supervise a coding agent and its subagents: set its autonomy, balance effort between subagents, hold the dead man's switch, and lift the cover to ship. A whole…

A usage-based account page: the balance in a wallet, spend running on a meter, caps on breakers, the ledger, and API keys that expire on a library slip. A whol…

A release board for a team: regions on a split-flap board, services moving through stages, a deploy queue, a freeze everyone must lift, and the promote switch.…

A lawyer's desk with an AI assistant: pull contracts with needles, mark up a clause, check the answer's sources, redact, and seal before it leaves. A whole scr…

Cancel and Save at the foot of a settings form. Save latches down with its lamp lit while the request runs, then pops back up. An example of Key.

Primary, secondary, ghost and danger at sm, md and lg, with icons, and disabled. An example of Key.

Ghost keys in a formatting toolbar, and a copy key that latches while it writes to the clipboard. An example of Icon key.

A shortcuts sheet whose caps go down as you press them. Try ⌘K or Esc. An example of Kbd.

A deployments table: the lamp is lit while a build runs or a release is live, and dark once it's superseded. An example of Badge.

Pay from stored balance. Pay once to drain it, then pick the card that covers the rest. An example of Wallet.

Account credit and saved cards. Add a card and it slides into the wallet. An example of Wallet.

Prepaid credits running down over a billing cycle. Low balance turns the light and meter amber. An example of Wallet.

Cards as a radio group, without a wallet. The chosen card lifts; arrow keys move between them. An example of Payment card.

Digits are tabular so columns line up; separators keep their natural width in any font. An example of Amount.

Change the value and the drums roll to it. Sized by font size. An example of Number wheel.

The cost of a chat turn, ticking while the model writes. Run it, stop it, clear it. An example of Meter.

Like a postage meter: each call stamps a little off; add credit to refill. An example of Meter.

Stamps replace badges: Received, Refunded, Held, Auto. The seal marks something verified. An example of Stamp and seal.

Pick a pack and the receipt reprints; pay and it's stamped. Ticket sheet, receipt and stamp together. An example of Receipt.

Plans as tickets. Arrow keys move between them; a sold-out one is disabled. An example of Ticket sheet.

The sheet driving a receipt. An example of Ticket sheet.

Days of credit left, with the auto top-up level marked. An example of Gauge and dial.

Set like a thermostat: the level to keep above, and how much to add. An example of Gauge and dial.

The per-person cap has tripped; switch it to reset. Overage is locked to owners. An example of Breaker.

Numbered entries with the balance after each, and stamped statuses. An example of Ledger.

Switch the breaker and the key goes into the reader: usage bills to it instead of credits. An example of Keycard.

Drag the card through the reader, or flick it. A short drag springs back. Keyboard: focus the card, press Enter. An example of Keycard.

Rename the agent by writing on its sticker. Guests get a visitor badge; lists use the plain tag. An example of Name tag.

Open a sticker to read the cited passage. The third source has been appealed. An example of Citation.

The plan advances on its own. Each step is ticked in ink as it finishes. An example of Task plan.

Entries arrive as the agents work. Who acted is a plain Name tag. An example of Activity log.

Hold the seal until it presses. Let go early and nothing happens. An example of Approval.

Four agents working in parallel. Drafting stops to ask you a question; answer it to unblock Review. An example of Delegation board.

Three suggested edits. Decide each one, or all at once. An example of Redline.

A privileged memo, stamped. Switch who's reading: opposing counsel sees the redactions. An example of Redaction.

Lift a cover, then flip the switch. Leave it and the cover closes, turning it off. An example of Guarded switch.

Check in every 12 seconds to keep it going. Stop checking in and watch it warn, then pause. An example of Dead man's switch.

Three locks hold the migration. Remove yours; the others come off as their work finishes. An example of Lockout.

Take a number; the sign rolls on every two seconds until it's your turn. An example of Take a number.

Set how much the agent may do alone. It answers once its current step is done. An example of Engine telegraph.

Conditions come and go on their own. Acknowledge them one by one, or all at once. An example of Annunciator.

Turn the knob to trade speed and cost for how hard the model thinks. An example of Detent knob.

Hold the key, or Space, to record a note. Let go to send it. An example of Push to talk.

The agent adjusts its own temperature; grab the fader to take over, then hand it back. An example of Motorized fader.

A lead agent rebalances effort as it goes. Take a fader to override it; mute pauses a subagent, solo runs one alone. An example of Mixer strip.

Flip a workspace's flags; the bank is also the config value you ship. One is locked by the organisation. An example of DIP switches.

Patch a billing provider's events to your handlers. One event can feed several handlers. An example of Patch bay.

Push needles through to find the contracts with every attribute. An example of Keysort filter.

Signals slide along each card as its task moves through the stages. An example of Visible file.

Eight variants of one prompt. Circle the keepers, cross out the rest. An example of Contact sheet.

Each region's status flips over as its rollout moves on. An example of Split-flap board.

Three sessions on the card already. Punch in, then out, and watch the clock stamp each time. An example of Time card.

The key lapsed four days ago. Renew it, and again, until the renewals run out. An example of Due-date slip.

Fields validate as you leave them and again on save; the server's answer comes back on the field it's about. Save as is: the URL is taken. An example of Text f…

An icon and a key hint in the slot. ⌘K or / focuses it from anywhere on the page. An example of Text field.

A lever per row, and a master lever that pauses them all. An example of Toggle lever.

Which tools an agent may use. The top key presses them all, and sits half-down while only some are on. An example of Latch checkbox.

The tabs over a docs example, at the small size. An example of Preset keys.

A segmented range picker over a usage chart. An example of Preset keys.

An editor toolbar. Hover one button and slide along: each label prints at once. An example of Tooltip.

Each label feeds out from its own side. Red and blue tape are for the label that must stand out. An example of Tooltip.

A link to copy and who can see it. An example of Popover.

The menu on a docs page with a Markdown version: copy it, view it, or open it in ChatGPT or Claude. Pass markdownUrl. An example of Menu.

Shortcuts as keycaps, a submenu, a setting with a lamp, a sort order and a destructive item. An example of Menu.

An alert dialog with a red key. Cancel takes focus, and a stray click outside does nothing. An example of Dialog.

Rename a document. Enter saves; Escape, × or Cancel leave it. An example of Dialog.

⌘K opens a palette in the dialog: top-aligned, no padding, no fasteners. An example of Dialog.