Bench
A workshop bench: tools grouped down a sidebar, settings beside the cutting sheet, and laser orange for the one button that matters.
Manrope
Tool interfaces
Working apps, not brochure sites
The tool a business works in every day: navigation by tool, a workspace in the middle, a settings panel beside it and figures that update with every change. For cutting workshops, dashboards, booking systems, kitchens and any software that is used more than it is browsed.
12 designs
What defines this style
- Typography
- One clear typeface in medium weights for the whole interface, small precise sizes (13–15px for text) and tabular figures for values and measurements.
- Colour
- A neutral app background with lighter panels, one accent for the most important action on each screen, and calm status colours (green, amber, red) for tags only.
- Layout
- A full-screen app shell: fixed navigation (sidebar, icon rail or top tabs), a workspace header with title and actions, the workspace, and a fixed-width settings panel; on phones the panel becomes a bottom drawer.
- Shapes
- Fields and buttons at one height (about 36px), hairline borders instead of heavy shadows, real switches, sliders and segmented controls.
- Imagery
- The work itself is the picture: a cutting drawing, a plan, a calendar, cards, a table or product photos; line icons at one stroke weight.
- Motion
- Quick and functional (120–200ms): highlighting the active item, opening panels and updating figures; no decorative motion.
- Details
- Count badges beside navigation items, a status bar, keyboard shortcuts, and "saved" and "runs on your device" indicators.
- Avoid
- Landing-page sections (big hero photos, testimonials, long footers), marketing copy and many accent-coloured buttons.
12 designs
Blueprint
An engineering blueprint: white linework, typewriter figures and a narrow icon rail that leaves the drawing the whole screen.
IBM Plex Mono · IBM Plex Sans
Graphite
A dark project board with a violet edge: cards move between columns and a detail panel slides in from the side.
Inter
Docket
A case register on ivory paper in a serif and a judge's oxblood; a quiet table that reads like a ledger.
Libre Baskerville · Source Serif 4
Calm desk
A clinic calendar in mint with soft edges: appointments coloured by dentist and a booking form always beside them.
Plus Jakarta Sans
Night audit
A hotel front desk in navy and brass: rooms are rows, stays are bars, and headings in a luxe serif.
DM Serif Display · DM Sans
The pass
A kitchen screen you read from two metres: high-contrast black, chalk yellow for rush and giant order numbers.
Bebas Neue · Work Sans
Rack
A shop admin without colour: product photos fill the grid, black ink and fashion-magazine details.
Inter Tight · Inter
Metric
A clean data dashboard with an indigo sidebar, big figures and a two-line chart with soft curves.
Figtree
Loupe
A culling room in a neutral grey that leaves colours alone, amber stars and flags, and a slim icon rail.
Manrope
Notebook
A lesson editor like a warm notebook: a friendly serif for headings, draggable content blocks and a short quiz at the end.
Fraunces · Lexend
Stage plan
A conference planner in a bold style: thick black borders, pure coral and blue, and halls as lanes across the screen.
Space Grotesk