How Thorbis looks

Do, and don’t

These are ours. The homework is on Research. This is what we ship.

Design for recovery

Thorbis is a system of people, records, money, queues, devices, and vendors. Serious failures happen when small conditions align. The interface must tell the truth in degraded operation and leave the operator a way back.

• Show the real state. Pending, stale, partial, conflicted, failed, and offline are product states. Never paint success because one request returned successfully.
• Preserve a safe useful path. Keep core work available when a dependency is slow or unavailable. Bound retries. Make duplicate work safe. Give a person an interrupt, an override, and a recovery path.
• Review the system, not the last click. Name the proximate trigger, contributing conditions, defenses, operator context, containment, and recovery. “Human error” is not an ending.
• Scale the defense to the harm. Money, dispatch, tenant data, customer sends, AI actions, and migrations get layered defenses. A reversible visual adjustment does not need incident ceremony. Research · Resilience skill.

Three faces

Marketing sells the product. iOS is a tech in a crawlspace. The workbench is a dispatcher at 7 a.m. Do not mix them on one view. Showcase itself has four modes: homepage routes, a family explores, a product page is a film, pricing is a store.

Brand

Linear taught us the product is the brand. Karri’s reset: chrome recedes, one accent, a sweep not a costume. The mark is a door, not wallpaper.

• The mark sits once. Mark and word at the door. Inter Medium, tight tracking. Then it recedes. Not on every row. Not as an empty-state illustration. An invoice may carry a small letterhead, like a shop would. Arrive does not.
• Electric blue is a pointer. accent oklch(55.8% 0.188 264.4) Selected, focus, the one live thing. Never a wash on the rail. Never every button. If the whole screen is blue, nothing is Thorbis.
• The board is the ad. Marketing shows the product, huge, on the dark greys. One claim. Framer air. Not a grid of feature icons with the logo in the corner. The product supplies the color in the shot. The chrome stays grey.
• Linear grammar. Not Linear dress. Inverted L. Dark greys. Inter. Opinionated. We do not ship their purple or their issue row. Homework lives in Linear is the base.

Surfaces

• The dark greys do the work. canvas oklch(14.5% 0 none), panel oklch(20.5% 0 none), type oklch(96.8% 0.009 84.6), body oklch(65.2% 0.013 259.8). Linear’s dark greys. Dark is the first drawing. Light is a cream sheet, not a white void.
• A border is a use case, never a separator. A field, a commit, a chip, a photo, a canvas-colored frame on canvas: a 1px rim that follows the radius, so the thumb can find it. Never a line between jobs, under a heading, or between rooms. Never an inset shadow as the outer corner of a clipped radius. Overflow clips content, not the stroke. D-017. Tone, type, and space do the pause. The page is one pour.
• A well or a lift. A field is one step darker, inset, with a 1px rim. A commit is ink. Same fill as the sheet is illegal. A well or a lift.

Depth

Shopify taught us the bevel. Linear taught us to whisper it. Rest, sink, lift, overlay. No fifth.

• Rest. Sink. Lift. Overlay. The sheet is planar. A field sinks. A commit lifts: 1px inset light from above, 1px drop. A menu floats with a real shadow. Do not invent a card stack. Three depths.
• Fields sink. Commits lift. A field never gets a drop shadow. A commit never looks inset. Mixing them is a costume. A well or a lift.
• Hover is not a lift. Hover is a quieter fill. Press sinks. Overlay is the only thing that floats. Hover is not a lift.
• Focus sits outside the bevel. A 2px ring. It does not replace the light from above. It does not paint the commit blue.
• Depth means you can press it. Shopify’s law: lift is an affordance. Sheets stay planar. Fields sink. Only a commit, a chip, a photo, or an overlay may rise. Depth means you can press it.

Type

• Inter for the work. Geist Mono for the code. Sentence case in the product. Title Case only on a Showcase headline.
• Chrome is 13. Content is 14. A compact commit is about 32px. A chip is about 28. Fields and their actions share a density. If the button is louder than the sentence, shrink its visual size while preserving its hit target. Controls sit with the type.
• The measure is 65–75ch. Header, this page, and the sign-off share it. Only the board, the feed, and a mirror go wider. Display type is tracked tight. The root is antialiased.

Space

• Tight inside a group. Generous between groups. More space above a heading than below it. A 4px icon gap is not a 16px row pad. Two rimmed controls keep 12px. A field does not kiss its commit.
• Commits are 10. Sheets are 14. Chips are pills. Icons are circles. If it looks melted, pull the radius back. Rounded, not soft.

Picture

How the eye reads a screen, and how a film of the product is framed. A board is not a poster. A reel is not a board.

• One focus. The sheet is figure. Chrome is ground. Size, then position, then weight. Color last. If two things shout, neither is read. One focus.
• The inverted L is the composition. Sidebar, location, view, sheet. Do not break it with a second header, a hero, or a card grid. Tight inside a group. Generous between groups. The inverted L is the composition. How a screen is composed.
• Video uses the rule of thirds. One object, named. Subject on an intersection. Horizon on a third. Lead room in the direction of the face or the move. A little headroom. Match the line across a cut so the object does not jump. Caption in the empty third, never larger than the product. Center is legal when the object is the poster — name it. 16:9 and 9:16. Safe area is the middle 80%. Video uses the rule of thirds. Frame.
• A board does not get a thirds overlay. F-pattern on a list. Street first. Showcase may be a film. The workbench is a machine.
• One idea per scene. Intent sets the mode: router, explore, film, or store. Disclose in order: what it is, why it matters, how it looks, proof, price. Establish the object, then crop. Scroll may explain a join; it may not steal the wheel. The film is optional. Price is findable. About 60–70% calm product, 20–30% evidence, 10–15% cinema. D-022. One idea per scene. Chapters.
• The hole is reserved. A photo, a map, a video: aspect-ratio before it loads. A horizontal list shows 16–32px of the next card. Where a list continues, fade the edge. Nothing jumps. D-019. Reserve the space.
• Attention orders media. The canonical delivery contract is DESIGN.md D-024.

Color

• Electric blue is the brand. accent oklch(55.8% 0.188 264.4) Identity, focus, selected. Not a wash on a quiet panel.
• These are the status colors. success oklch(62.7% 0.17 149.2) error oklch(62.6% 0.193 23) info oklch(62.3% 0.188 259.8) warning oklch(82.7% 0.171 80.5) Copied, failed, a note, a warning. Words first. Color second. Never color alone.
• Olive, forest, pumpkin, burnt are extras. olive oklch(47.9% 0.05 115.3) forest oklch(38% 0.052 147.2) pumpkin oklch(59.4% 0.152 47.5) burnt oklch(49.6% 0.143 34) Fun. Not a status system. Their real job is quiet color on chrome: a place mark, a menu icon, a command glyph.
• Chrome likes soft color. Phosphor Regular, 16px. The mark may be olive, forest, pumpkin, burnt, or accent mixed down until it sits with those. The word stays cream or body. You notice the hue after the word, not before. Selected fills the mark and lifts the word, not a wash on the row. Directional marks flip in RTL. Nudge when the geometry is a lie. D-020. Quiet marks. Outline, then fill.
• OKLCH. Lightness, chroma, hue. Fix contrast on lightness. Never by saturating. Hue is identity. Chroma is how loud. Lightness, chroma, hue.
• Warm cream on a cool void. Type is warm. Canvas is achromatic. Body is cool grey. Accent is cool blue and points. Do not warm the canvas. Do not cool the type. Light is a retune of lightness, not an invert. Warm cream on a cool void.
• One family of greys. One accent. 60 / 30 / 10, then quieter. Accent is a pointer, not 10% of the screen. Status hues are reserved words, not a triad and not a rainbow of node types. Showcase uses the same palette. No teal-and-orange grade. A fill is one mix: never a gradient, mesh, or fade unless we named that wash. Never a solid colored border on the leading or trailing edge of a row, a card, a quote, a callout, an alert, a sheet, or a guidance column. Live is a word, a mark, or the accent on the thing. D-018. Color theory.

Customize

Prefer a preference when the work varies person to person. The default still has to be the product.

• Let them change what is theirs. Theme. Density. This list’s columns, sort, and group. Saved views. Default place. Pinned places. Persist it. The URL holds what is shareable. D-015. Prefer a preference.
• Display lives on the view bar. Shop-wide facts live in Settings. Each section saves itself. Immediate settings say they are immediate. Do not bury density behind five topics and one Save.
• They may not rewrite the grammar. No hex picker. No second brand. No card-grid layout. An invoice, a portal, and evidence do not wear one person’s theme as the document. Arrive is one action, not a preferences panel. Showcase is ours.
• The default ships finished. If the board is unusable until they open Display, you built a kit, not a product.

Controls

• Prefer a mark. Add a word only when the action would be guessed wrong without it. Search, theme, command, close, back, overflow: icon-only. A commit keeps a word when it is destructive, when two commits sit together, when the mark is not a household verb, or when it is the one Guided action. Save invoice. Cancel job. Arrive. A value chip stays a word. Every icon-only control has an accessible name. D-016. Prefer a mark.
• A commit is ink. Type-color fill, inverse type, 10px corners, a 1px rim, a short Shopify bevel. Press sinks. Linear quiet. Not a candy pill.
• Role owns prominence. The group owns geometry. The canonical action-neighborhood contract is DESIGN.md D-023.
• A chip is a pill. An icon is a circle. Filters and Keep stay quiet. The kit is shadcn, dressed in these tokens. Credit (@shadcn).
• Nothing shifts. The control keeps one hole. If it has a word, the word stays while the mark morphs. Nothing shifts.
• State icons morph. Idle becomes a loader, then a check. Morphicons (opens in a new tab), snappy spring. Still icons stay Phosphor Regular at 16. Icons morph.
• Loading turns. The glyph becomes a loader and the loader spins. Not a fading icon. Not a bare spinner that ate the word. Loading turns.
• Disabled needs a reason. If Dispatch is off, say why next to it. A grey commit with no sentence is a locked door. Disabled needs a reason.
• Destructive is a tone, not a second language. Same 10px commit. Danger color. The word names the consequence. Not a red outline kit. Cancel job, void invoice, send to the customer: a modal. Not a toast. Destructive is a tone. Confirm destructive actions.
• Desktop is 40. Touch is 44. Isolated mobile 44. Hit areas never overlap. A full-width Arrive sits in the sheet’s pad, not flush to the phone edge. Match visual and hit targets.
• The overlay is a mix. Collect payment sits on a solid scrim. Not a blurred board. A popover grows from the control that opened it. A menu fades; it does not fly. D-021. Overlay is a mix.

Forms

Shopify’s cleanliness, in a shop. The field is a well. The words around it have jobs. Nothing we already said about labels and paste is repeated here.

• Help sits under the field. Error takes its place. One slot. The sentence says how to fix it. A red rim alone is not an error. Error replaces help.
• Affixes live inside the well. $ and /hr sit in the field, not as a second box beside it. Affixes in the well.
• A cluster is space, not a card per field. Related fields share a heading and a gap. Do not wrap each input in its own sheet. A cluster is space.
• A select is a well. Same sink as a text field. Not a candy button. Not a second control language.
• Validate on blur or commit. Not on every key. Let them type the permit number.
• A placeholder is an example. Mike Reyes. Not “Enter name.” The label already said name. Placeholders are examples.
• Mark optional, not required. A star on every field is noise. The rare skip gets the word. Mark optional.
• Don’t lock the commit. Let them press Dispatch. Then show what is missing, under the field. Don’t pre-disable submit.
• A banner is a page problem. Offline. The truck already left. A missing name stays under Name. A banner is a page problem.

Words

• We talk like a shop, not a SaaS. Job, stop, tech, truck. A ticket is a support email. An agent is software. A resource is a spreadsheet.
• Second person. Sentence case. A verb. “Add a technician.” Not “You will need to add a technician.” Not “New Resource.” Title Case is a Showcase headline only. Sentence case.
• The sheet is the work, not a modal. We say sheet, board, inspector. We do not say dialog unless the browser is showing one.

How we show the work

• Address first. 114 Oak, then the trade, then the status. The street is what the tech is driving to.
• Time is 7:40. Not 07:40 AM. Not a clock widget. Tabular lining so 7:40 and 11:15 share a column. Tabular numbers.
• Money is $186.00. Always two decimals in a money view, or always none. Never mixed. A non-breaking space before the unit.
• Status is a word. Open. En route. On site. Done. Color sits with the word. A green blob is not a status.

Platforms

Four products. One job. Tokens and words are shared. Chrome is not. Pictures of the three faces live above.

• Web is the workbench. Inverted L. Keyboard. URL as state. shadcn dressed in our tokens. Emil’s mobile list is for the browser on a phone. A native phone does not get a squeezed sidebar.
• iOS is a tab bar and a stack. Jobs, Arrive, Inbox. Sheets from the bottom. Swipe-back is sacred. 44pt. Dynamic Type. A haptic when Dispatch lands. The system tab bar may use Apple’s glass. Our sheet does not. SF Pro on chrome. Inter on the job.
• Android is not a reskinned iPhone. Material navigation. Predictive back. 48dp. Edge to edge. A rail on a tablet. No Material You wallpaper tint. Electric blue stays ours. Device type on chrome. Inter on the job.
• Desktop follows the host. macOS keeps the lights and the menu bar. Windows keeps the caption and snap. The inverted L is legal. Hover is legal. Density is legal. Do not paint one OS onto the other.
• System chrome is not ours. Share sheet, date picker, biometric, IME. Use the platform. A fake iOS switch on a Pixel is a costume.

Shell

• Inverted L. Canvas, then a dim sidebar, then the sheet. The sheet is the job. Chrome recedes. The shell is an inverted L.
• Location, then view, then the work. A 44 location bar. Quiet ancestors, a strong title. View pills sit on the sheet. Pages fill those slots. They do not invent a second header.
• The sheet floats. Four pixels off the canvas. Full rounding. Tone is the separator. A 1px box around the room is a costume.
• Sidebar is a destination. Workspace, then Jobs. Not a sitemap. Not every object in the shop.
• Four profiles. Workbench is dense and keyboard-first. Guided is one action. Evidence is paper. Showcase is the product, cinematic, not a card grid. Do not mix them on one view.
• Pages fill patterns. They do not rebuild geometry. If the pattern is missing, stop and name the gap.

Places

Linear is not anti-modal. It is anti-ambiguous surface. A page is a place. A modal is a transaction. A popover is a choice. An inspector is context. Peek is inspection. We took that discipline because a dispatcher lives in the work, not in a stack of overlays. We did not take a ban on sheets. Sheet, here, is the work surface. A drawer is an overlay that slides over it. Those are not the same word.

• Why we like Linear’s model. Every surface has to earn its role. They do not drop extra UI in a convenient drawer because a page felt like too much work. Search is a route because comparing fifty records is a workspace. Create is a modal because you should finish and still see the board. Properties sit in a panel that participates in the layout. Peek lets you look without leaving. Command goes somewhere or does something. That is the grammar we wanted: the job stays dominant, chrome recedes, Back and the URL tell the truth. A page is a place.
• We are a tiny bit different. Linear ships issues and documents. We ship jobs, invoices, estimates, equipment, and payments. A dispatcher often needs the customer in view while they write a stop. So the inspector is first-class, resizable, in the layout — not a last-minute drawer. On a phone, a bottom sheet may hold that inspector or one secondary action. That is the field. Desktop does not get the same slide-over as a fake page. A long create may grow from a modal into a place, the way Linear lets a quick issue stay a modal and a long one go fullscreen. We are not religious about one component. We are religious about the role.
• A route earns a URL. Job, customer, invoice, estimate, equipment, report, search. Share it. Revisit it. Filter it. Open a related record beside it. If it needs history, tabs, or more than one next action, it is a place.
• A modal is done or not. Collect payment. Assign a tech. Add a note. Invite. Confirm a void. One task. Save, Create, Confirm, or Cancel. You should still see the page behind it. No navigation deeper than one level.
• A popover is one choice. Status, priority, tech, date, tags, payment method. Little typing. No form. No second page hiding inside the menu.
• An inspector stays. Job properties, invoice math, the customer while you schedule, the activity feed. It is in the layout. It does not cover the board. On a phone it becomes a bottom sheet.
• ⌘K goes. Search finds. Command is an action system. Instant. No animation. You roughly know what you want. Search as a route is for when you do not: refine, filter, sort, split-preview, walk fifty jobs. / may still filter this view. They are not the same tool.
• A desktop drawer is an escape hatch. It is not a page, so the URL lies. It is not a modal, so Escape and Back become a guess. It covers the thing they were comparing. One record opened from another becomes a stack. If the content is important enough to hold navigation or several next actions, build the route. Do not slide a page over a page.
• Never a transient surface for a durable workflow. Never a durable page for a momentary transaction. That is the whole rule. D-013. D-014. The numbers live in Thorbis × Linear pattern matrix.

Rooms

These are the layouts we actually ship. Same chrome. Different occupant. The view changes. The operator does not relearn the app.

• List is the default room. Command, filter, dense rows, a bar while things are selected. The street leads. Bulk actions are visible, never hover-only.
• A job is a record workspace. Identity, status, the primary action, the feed, the inspector. Location stays still while the selected job changes. On a phone the inspector is a bottom sheet, not a squeezed desktop drawer.
• Dispatch is a timeline. Time is the spine. Trucks are rows. Horizontal scroll is the work. A month grid is a costume.
• Board, inbox, guided, evidence share the chrome. Board is columns. Inbox keeps the thread. Guided is one action. Evidence leads with the question and the number. Canvas is Workflow and Brain. Portal is the customer.
• Search is a room. Find, filter, compare. Split preview. Not a bigger ⌘K. Command still goes somewhere or does something.
• Settings is a column. The sidebar becomes Back to the shop. Each section saves itself. Immediate settings say they are immediate. Danger sits apart. Display for this list lives on the view bar. Theme and density are this person. Prefer a preference.

States

A room is not done when the happy path looks right. Empty, error, permission, and loading are the room.

• Empty names the one action. What belongs here, and how to start it. Not an illustration. Not “Nothing here yet.”
• Error says what was refused. Shop words. The reason. The next move. Not “Oops.” Not “Something went wrong” alone. Confirm with the consequence.
• Permission does not leak. Name what you lack. Do not describe the invoice you cannot see.
• Loading is the same shape. Skeleton the list, not a spinner in a void. Hold the state long enough to read.

Keys

The workbench is a keyboard product. The phone is a thumb product. Do not mix the laws.

• J and K move the row. X selects. Enter opens. Space peeks. Escape closes the top layer. Keyboard works everywhere.
• ⌘K is instant. No open animation. One registry feeds the palette, the buttons, and the menus. Command center.
• The URL is the view. Today, the selected job, the filter. A refresh lands you back. URL as state.
• Hover is not the only path. Dispatch cannot live only on hover, right click, or a shortcut. A visible path is required.

Motion

• 120ms. Ease-out. Transform and opacity. Keyboard is instant. The first screen stays still. Motion is flat and fast.
• The delight budget lives on Showcase. A dispatch board is a machine. A marketing page may be a film, if the product is the picture. Thirds, not a card grid. Frame.

Tooling

• The kit is shadcn. Copy the source in. Dress it with these tokens. Default shadcn is a starting point, never the look. (@shadcn).
• Icons are Phosphor Regular at 16. Still ones. State ones go through Morphicons. Only the ones we need. Not a second language. Morphicons (opens in a new tab).
• Linear is the source of truth for the work. linear.app (opens in a new tab). We do not ship on Linear. We do not dress like Linear.
• The app is TanStack. The edge is Cloudflare. Not Vercel. Not Shopify. Not Radix. TanStack (opens in a new tab) · Cloudflare (opens in a new tab).
• Skills live in this repo. Name them to an agent. They are not on skills.sh (opens in a new tab). See Skills.

Linear is the baseline

Linear is not one optional Thorbis style and it is not a separate skill. Its operating philosophy sits underneath every Thorbis profile, rule, pattern, primitive, and specialist skill. Outside research may refine a domain, but it cannot introduce another product grammar.

• Quiet chrome. Dominant work. Navigation and supporting metadata recede after orientation. The current job, customer, invoice, schedule, report, form, or agent action earns the strongest contrast.
• Structure is felt before it is outlined. Geometry, alignment, tone, rhythm, stable ordering, and proximity establish hierarchy before borders, cards, elevation, or accent are introduced.
• Remove noise before information. Thorbis remains dense because operational context matters. Calm comes from disciplined emphasis and progressive disclosure—not from hiding the facts needed to act.
• Same action, same neighborhood. Location, view controls, create, filter, display, share, overflow, inspector, and commit behavior stay predictable across Jobs, Customers, Money, Inventory, Sites, Brain, and every future module.
• Surface roles do not drift. A route is a place. A modal is a transaction. A popover is a local choice. An inspector is context. Peek is inspection. Inline is a small edit. A new feature does not renegotiate those roles.
• State is part of the interface. URL, Back, focus, selection, filters, scroll, drafts, uploads, agent lifecycle, offline work, and cross-device handoff are designed and recoverable rather than treated as incidental implementation detail.
• Specialists add constraints, never a costume. Ecosystem adds depth, Cloudflare-informed UI clarifies forms, Shopify-informed flows strengthen administration and payment, Vercel strengthens contracts, Apple sharpens Showcase, and Native adapts to the device. All remain recognizably one Thorbis system.

Operational ambiguity is routed through Thorbis × Linear pattern matrix. It is a selective reference—not another skill, another shell, or permission to copy a screenshot.