Themes / 17
Gauge
A plain, exact theme for hardware, parts and spec sheets. Nine steel greys, dense tables, and no accent color at all.
npx shadcn@latest add https://strictthemes.com/r/gauge.json- DESIGN.md The spec
- tailwind.css Tailwind CSS v4
- shadcn.css shadcn variables
- nuxt-ui.css Nuxt UI
- app.config.ts Nuxt UI config
- tokens.json W3C design tokens
01 / Preview
Stock shadcn components, this theme.
Ship the page, keep the system.
Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.
96%88%100%02 / Page prompts
Paste one into your agent. Get that page.
Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.
Catalogue
One category of a parts catalogue, with filters in a narrow column and a dense table of parts with their dimensions, load rating, stock state and unit price.
36.9k characters
Strict Check 100%
Part
One part's page as a spec sheet, with a drawing of the part in outline with its dimensions, its part number, stock and lead time, price breaks by quantity, a quantity field with Add to quote, and a full specification table.
40.3k characters
Strict Check 100%
Compare
Three parts side by side in one comparison table, a column per part and a row per property, with the values that differ marked in words and weight and a switch to show only those rows.
36.0k characters
Strict Check 100%
Quote
A request for a quote, with the lines already added in a table whose quantities can be changed, company and delivery details in a form checked in code, and a confirmation with a quote reference.
39.2k characters
Strict Check 100%
Downloads
The documents for one product range, data sheets, CAD files and certificates, in a table with type, format, revision, date, file size and a download link each, filtered by a button group.
35.2k characters
Strict Check 100%
03 / Colors
Every color the theme allows.
primary
#212529 / #F8F9FA
on-primary
#F8F9FA / #212529
secondary
#E9ECEF / #495057
on-secondary
#212529 / #F8F9FA
tertiary
#ADB5BD
on-tertiary
#212529
neutral
#495057 / #ADB5BD
background
#F8F9FA / #212529
surface
#FFFFFF / #343A40
foreground
#212529 / #F8F9FA
border
#CED4DA / #495057
error
#B3261E / #FF8A80
success
#1E7B4B / #5CCB8F
Left: light mode. Right: dark mode.
04 / Typography
Five sizes. Nothing in between.
display
Chivo · 48px · weight 800 · line 1.05
The quick brown fox
h1
Chivo · 32px · weight 700 · line 1.15
The quick brown fox
h2
Chivo · 20px · weight 700 · line 1.3
The quick brown fox
body
Libre Franklin · 15px · weight 400 · line 1.55
The quick brown fox
label
Roboto Mono · 12px · weight 500 · line 1.3
The quick brown fox
05 / Shape and space
Corners and spacing.
sm
2px
md
4px
lg
8px
xs
4px
sm
8px
md
12px
lg
16px
xl
24px
2xl
48px
06 / Rules
What the strict block enforces.
- Contrast
- WCAG AA
- Colors
- Tokens only, within 0.02 of a token
- Spacing
- Scale only, plus 0, 1px, 2px
- Corners
- Scale only, full rounds up to 12px
- Type
- Scale only, declared fonts only
- purple gradient
- Not allowed
- emoji icons
- Not allowed
- nested cards
- Flagged
- glow shadows
- Not allowed
07 / Guidance
What your agent reads.
Overview
Gauge is for things that are specified before they are bought: fasteners, bearings, tools, machines, electronic parts. It reads like a good catalogue page or a data sheet. There is no accent color: nine greys from steel white to graphite carry everything, and a product's own brand color can take the place of the primary without anything else changing.
Colors
- Primary (
#212529) is graphite, for the one main action in a view: "Add to quote", "Request a quote". Links are the text color, underlined. - Secondary (
#E9ECEF) is pale steel, with graphite text on it, for every other button. - Tertiary (
#ADB5BD) is mid steel, with graphite text on it, for a badge: "New", "Made to order". - Neutral (
#495057) sets units, part numbers and captions. - Background (
#F8F9FA) is steel white. Surface (#FFFFFF) is the white of a panel or a table. - Success (
#1E7B4B) marks "In stock", always with the word. Error (#B3261E) is for "Discontinued" and form errors, always with a message.
Typography
Chivo sets headings, heavy and compact. Libre Franklin sets body text at 15px, because these pages carry a lot of it. Roboto Mono sets labels: part numbers, dimensions, tolerances, units, prices. Every number in a table is mono and tabular, and right-aligned when it is a quantity.
Layout
A 12-column grid, 1280px at its widest, with 16px gutters. Pages are dense on purpose: filters in a narrow column, a table in the rest. Spacing comes from the scale (4, 8, 12, 16, 24, 48): 16px inside a panel, 48px between sections. A table may be wider than a phone and scroll inside its own box.
Elevation & Depth
Flat. A panel is white on steel white with a 1px border. Tables use 1px row borders and no zebra stripes. Menus and dialogs float on one short, neutral shadow.
Shapes
Machined: 2px for badges and checkboxes, 4px for buttons and inputs, 8px for panels. A status dot is the only circle.
Components
- Buttons: graphite for the one main action in a view, pale steel for the rest. Sentence-case mono labels.
- Cards (panels): white, 8px corners, 16px padding, a 1px border.
- Badges: mid steel with graphite text, one or two words.
- Tables: a mono header row, 1px row borders, numbers right-aligned with their unit in the column header, not in every cell.
- Drawings: a part is drawn in outline, 1px lines in the text color on the panel's white, with its dimensions in labels.
- Icons: 1.5px stroke line icons. Never emoji.
Do's and Don'ts
- Do give every number its unit, once, where the eye finds it.
- Do keep the page grey: a state color appears only beside its word.
- Do let a table be a table: no cards for rows of comparable figures.
- Don't add an accent color, a gradient or a tinted panel.
- Don't round a figure the buyer has to rely on, or hide a part number behind a click.
- Don't introduce a color, size or radius that is not a token above.