# Thorbis Design System Rules > Quiet chrome. Precise work. The public interface constitution for Thorbis, the operating system for the trades. Canonical page: https://design.thorbis.com/ ## When to use these rules - Building or reviewing a Thorbis interface for a dispatcher, technician, owner, or customer. - Choosing the surface profile, page family, component, interaction state, motion, or recovery behavior. - Dressing a ShadCN source primitive with Thorbis tokens and density. - Validating accessibility, mobile behavior, copy, degraded states, and production readiness. Do not use this site as a runtime product API or as generic styling guidance for an unrelated brand. ## Core laws - Build in order: tokens → primitives → components → patterns → pages. - Search before creating. Reuse the Thorbis-wrapped ShadCN primitive before adding a local control. - Match the profile to the job: Evidence, Showcase, Workbench, or Guided. - A field is a recessed well. A commit is ink. A chip is a pill. An icon-only control is a circle. - Show loading, success, error, empty, disabled, offline, stale, partial, and conflict states truthfully. - Keep async words stable and centered; morph the state mark and honor reduced motion. - On mobile, use at least 16px input type, 44px touch targets, safe areas, and no disabled zoom. - Preserve source credit, recovery paths, and safe useful work when dependencies fail. - No gradients. No ornamental blur. Real borders follow rounded surfaces. ## Read next - [Research](https://design.thorbis.com/research) - [Resources and skills](https://design.thorbis.com/resources#skills) - [Components](https://design.thorbis.com/components) - [Inspiration](https://design.thorbis.com/inspiration) - [DESIGN.md](https://design.thorbis.com/design.md) - [AGENTS.md](https://design.thorbis.com/agents.md) ## Applied bookmark research Reviewed 2026-09-06. These are Thorbis applications and review exercises, not replacements for DESIGN.md, COMPONENTS.md, or the owning skill. Linear remains the operational baseline. External advice that conflicts with the constitution stays out. These worked examples are not a claim that the product behaviors have been implemented or verified. ### A control keeps its meaning through every state Owning skill: [ui](https://design.thorbis.com/skills/ui). A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise. Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path. **Thorbis example:** Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it. **Verify:** Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion. **Do not import:** No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017. Evidence: [Web Interface Guidelines](https://vercel.com/design/guidelines); [Invisible Details](https://invisibledetails.com/); [components.build](https://www.components.build/); [Details that make interfaces feel better](https://interfaces.dev/magazine/issues/details-that-make-interfaces-feel-better). [Source access limits](https://design.thorbis.com/research/bookmarks#application-ui). ### Immediate acknowledgment is not confirmed success Owning skill: [resilience](https://design.thorbis.com/skills/resilience). A fast animation can falsely tell a person that money moved, a message arrived, or an assignment was saved. Distinguish initiation, pending work, confirmed outcome, failure, and uncertain outcome. Show what is known. A repeated request needs a deliberate recovery path, not a second untracked business action. **Thorbis example:** Collect payment keeps its label while the request is pending. A timeout says the result is not yet known and provides a way to check it; it does not invite an unconditional second charge. Confirmation names the actual result. **Verify:** Review pending, explicit rejection, timeout after submission, reconnect, and repeat activation. Confirm that copy does not claim settlement from mere request acceptance and that a recoverable draft is preserved. **Do not import:** No optimistic completion for consequential work, invented delivery guarantee, or success decoration that hides uncertainty. Evidence: [7 Principles of Rich Web Applications](https://rauchg.com/2014/7-principles-of-rich-web-applications); [Philosophy](https://resend.com/philosophy); [Web Interface Guidelines](https://vercel.com/design/guidelines). [Source access limits](https://design.thorbis.com/research/bookmarks#application-resilience). ### Frequent work stays immediate; allowed motion can be interrupted Owning skill: [motion](https://design.thorbis.com/skills/motion). A small delay repeated through a working day becomes friction, and a transition that restarts from the wrong position disconnects feedback from input. Apply the existing profile first: Workbench is press-only, Evidence has no motion, and other profiles remain constrained by their owner. Where a transition is already permitted, preserve continuity and the state footprint when input interrupts it. **Thorbis example:** Command-menu selection follows the key immediately. A permitted popover opens from its trigger and survives open-close-open without snapping, losing focus, or changing the action label. **Verify:** Repeat the interaction rapidly, switch between input methods, and test reduced motion. Compare with the nonanimated version at ordinary task speed. Use existing tokens rather than copying durations or curves from an article. **Do not import:** No row stagger in routine work, delayed keyboard highlights, ornamental blur, minimum success delay, or automatic spring-library adoption. Evidence: [You Don't Need Animations](https://emilkowal.ski/ui/you-dont-need-animations); [7 Practical Animation Tips](https://emilkowal.ski/ui/7-practical-animation-tips); [Train Your Judgement](https://emilkowal.ski/ui/train-your-judgement); [Details that make interfaces feel better](https://interfaces.dev/magazine/issues/details-that-make-interfaces-feel-better). [Source access limits](https://design.thorbis.com/research/bookmarks#application-motion). [All 26 sources and review limits](https://design.thorbis.com/research/bookmarks).