Design

Design

• Quiet chrome. Precise work. The product principle. Structure should be felt, not drawn. Regions stay liquid, see No borders on the page. The work leads, see Work dominates chrome.

  114 OakLeak · open

• One accent, used with intention. Same law as Electric blue is the brand. The greys do the rest. Extras stay extras.

  7:30114 OakLeak8:1522 PineNo heat

• A border is a use case, never a separator. Borders are specific. A field, a commit, a chip, a photo sitting on a matching canvas gets a 1px whisper rim so it does not melt. That is the only job a border has. Never a line between items. Never under a heading. Never around a panel. Never between rooms. If the eye already had a pause, a line makes the thing feel boxed. Tone, type, space, a short shadow. The page is one pour. Byron Wade (@Byronwade).

  114 Oak StreetLeak · dispatched

• A well or a lift. Never the same fill as the sheet. If a control shares its parent’s color, it disappears. A field is a well: one step darker, inset, and a 1px rim. A commit is a lift: ink fill, 10px corners, a 1px rim, a short Shopify bevel. Same-on-same is illegal. The rim is not a box around the page. It is how a glove finds the phone box.

  Customer phone

  Phone

• Short shadows, not hairlines. Depth is Shopify-short: a 1px inset highlight and a 1px drop, not a card stack. Linear-quiet: the sheet is barely lifted. Hard offset shadows are costume. Dark canvases still get a whisper of warm light from above, that is the bevel, not a ring. Polaris shadows (opens in a new tab), studied for elevation. We do not ship on Shopify.

  Save job

• Three depths. No fourth. Rest is planar. A commit lifts: 1px inset light from above, 1px drop. A menu, popover, or sheet is an overlay with a real shadow. That is the whole ladder. Shopify Polaris names this bevel versus elevation. We keep the grammar, not the costume. Polaris shadows (opens in a new tab).
• Hover is not a lift. Hover is a quieter fill, or a slightly stronger bevel on a commit that already lifts. It does not add a drop shadow. Press sinks. Overlay is the only float. A field that lifts on hover is a costume.
• Depth means you can press it. Shopify’s depth rule: elevation signals interactivity. A sheet stays planar. A field sinks. A commit, chip, or photo may lift. A menu floats. Do not lift a heading, a row of copy, or a quiet panel to make it “pop.” Polaris depth (opens in a new tab).
• Disabled needs a reason. A grey Dispatch with no sentence is a locked door. Say why next to the control: “Assign a truck first.” Polaris: merchants stay in control. Shortcut-only disable is a defect.
• Destructive is a tone, not a second language. Same 10px commit. Danger color. The word names the consequence: Void invoice, not Delete. Not a red outline kit. Not a second radius. Confirm with the consequence stated.
• Rounded, not soft. Buttons are 10px. Panels are 14px. Icon-only controls are circles. Chips are pills. Corners are friendlier than a square and tighter than a squircle. If it looks melted, the radius is too big.

  SaveFilter

• Commits are ink. Chips are pills. A form commit is a small physical thing: filled with the type color, cream or dark grey on the inverse, 10px corners, a 1px rim, a 1px inset light, a 1px drop. Press sinks. Shopify fill, Linear quiet. Not a candy pill. Not a banner. Text in a document stays a link. Chips and filters stay pills. Icon-only stays a circle.

  Save job

• Controls sit with the type. Chrome is 13px. Content around it is 14px. A pill is about 28px. A search field may be a hair taller and stays 14px type. If the button is louder than the sentence next to it, shrink the button.

  Collect

  Collect $186.00

• Photos get a rim, not a box. A dark shot on a dark canvas disappears. Give it a 1px inset of the type color at 9%, and a short lift. Pure black at 10% in light, pure white at 10% in dark. Never a tinted near-black; it reads as dirt. The rim flips if the theme flips. That is the edge of a print on the table, not a stroke around a card.

• Motion is flat and fast. The interface is flat. Motion is the life in it, and it is short. 120ms, ease-out, transform and opacity only. New feed items may fade 8px. The first screen stays still. Keyboard-initiated actions never animate.

  The keyboard does not wait.

  Enter and Space open the current Dialog instantly. A pointer activation can use its entrance recipe unless reduced motion is requested. Unknown or programmatic opening is instant.

  Inspect the keyboard result

  Step through a still diagram. Both states remain visible; this is not a timed animation.

  1. Start

     Focus is on Edit sample job. Enter or Space activates the same visible action.

  2. Result

     Focus is inside the open editor immediately. Escape closes it and returns focus to its trigger.

  Show startShow result

  Inspecting start: Focus is on Edit sample job. Enter or Space activates the same visible action.

  This lesson is readable without JavaScript. To inspect a state or read your browser preference, enable JavaScript and reload.

  Browser motion preference

  Not read yet

  Fast token

  --motion-fast

  Overlay token

  --motion-overlay

  Curve token

  --ease-out

  Read the Motion ownerTry the Dialog example and source

• Nested radii. Child radius ≤ parent radius & concentric so curves align: outer = inner + padding. No arbitrary page-local radii. Pills and circles are the exception, not a third scale.

  114 Oak

• Hue consistency. Neutrals are cool dark greys. Shift lightness, not fashion. One accent. No ice-blue chrome. No olive walls.

  114 Oak StreetLeak · dispatched

• Minimum contrast. Same law as Measure contrast with APCA. Interactions increase contrast. Hover, active, and focus are stronger than rest.

  114 Oak StreetLeak · dispatched

• Browser UI matches your background. Set <meta name="theme-color"> to the resolved canvas, and color-scheme: light dark. The OS chrome follows the theme they picked, or the system if they left it alone.

  darklight

• Avoid gradient banding. Fading content to dark colors with CSS masks can band. Use a background image when it does.
• Image outlines. Same law as Photos get a rim.
• One SVG, recolored per state. Icons are Phosphor, regular, 16px. Use currentColor. Fill only marks the active state, a kept bookmark, a live heart. Never ship separate assets per hover or disabled. Never an icon without a name. phosphoricons.com (opens in a new tab).
• Flip the theme when stuck. Rauno Freiberg (@raunofreiberg): if a surface looks wrong and you cannot say why, switch dark ↔ light and look again. Contrast, weight, and accidental hue all show up on the other canvas.
• Design the device you have. Rauno again: mobile-first as a religion is how desktop workbenches get thin. Spend energy where the job lives. Dispatch, books, and the schedule are desktop-first. The van is mobile-native. Do not shrink one into the other.