[ Design system · direction H2 · serif on every heading ]
Lab Overflow style guide
Reads like a reference publication crossed with instrument software. Warm paper, hard rules, a serif for every heading, mono for every number. One accent. Green means “this checks out” and nothing else.
01 · Colour
Eleven tokens. Use the semantic name, not the hex.
Paper
#F7F6F2 · paper
Page background
Card
#FFFFFF · card
Panels, rows, inputs
Fill
#EDEAE2 · fill
Map fills, wells, code
Rule
#E4E1D9 · rule
Default 1px rule
Rule strong
#D2CEC3 · rule-strong
Console borders, chips
Ink
#14181C · ink
Headings, primary text
Body
#4B5563 · body
Paragraph copy
Muted
#5F6672 · muted
Eyebrows, meta
Action
#C2410C · action
The one accent
Action hover
#9A3412 · action-hover
Hover on action
Pass
#15803D · pass
Accredited / verified ONLY
RULE 01 — ONE ACCENT
Action orange carries CTAs, links, the live eyebrow and the “your facility” marker. Nothing else is orange. No gradients anywhere.
RULE 02 — GREEN IS A VERDICT
Pass green appears only on accreditation tags, LOD bars, “live” dots and success notices. Never as decoration, never on a button.
RULE 03 — PAPER, NOT WHITE
The page is paper. White is reserved for raised things: panels, rows, inputs, the console. That contrast is the whole depth model — there are no shadows.
02 · Type
Three faces, each with one job.
Newsreader
Headings · h1 500 · h2–h6 600 · opsz auto
Every heading level. Optical size is on, so it tightens at display sizes and opens up at 20px.
Instrument Sans
Body + UI · 400 / 500 / 600 / 700
Paragraphs, nav, buttons, lab names, form values. Base 15px, lede 17px.
Roboto Mono
Data + labels · 400 / 500 / 600 / 700
Every number, LOD, turnaround, count, eyebrow, tag, breadcrumb and table header. No exceptions.
The reference index for cannabis analytical testing
One brief. Every lab that fits.
Detection limits, side by side
Matching labs near Denver, CO
Brightside Scientific
Search every accredited lab by the assays they actually hold scope for.
A lab whose detection floor sits above your state action limit cannot clear your batch, however fast it is.
Runs pesticide residue on flower
Lab query
[ 222 labs indexed · 12 assays · US / CA / EU ]
Turnaround Pesticide LOD
03 · Spacing & radius
A 4px grid. Gutters are 20 on mobile, 44 on desktop.
4
8
12
16
20
24
32
44
60
68
Where they go
- 44 section padding, row-index width, gutter
- 68 / 56 hero top / bottom
- 60 CTA band padding
- 20 / 18 card padding / row padding
- 16 card grid gap
- 14 / 12 stat gap / inner rule gap
- 3 / 5 radius: buttons, chips / panels
- 999 radius: dots and bars only
05 · Chips, tags, dots
All mono. Chips filter. Tags state a fact.
Refine chips · 11px · clickable
Status tags · 10px bold caps
Dots · 6–8px
06 · Panels
White on paper, 1px rule, 5px radius, no shadow.
.panel
Default card. Rule #E4E1D9. Used for assay cards, guides, FAQ blocks.
Stronger rule, overflow hidden. Wraps consoles, forms, anything with a bar.
[SAMPLE — turnaround and LOD values shown per lab are illustrative]
.panel-dashed — caveats and sample-data notes. Always bracketed.
07 · Search console
The hero instrument. Bar, cells, refine foot.
08 · Numbered rows
The lab list. Index rail, name + meta, tag, 3-up stat grid.
Labs-Mart
Turnaround
2–4 d
Pesticide LOD
10 ppb
Assays held
6 / 12
Brightside Scientific
Turnaround
3–5 d
Pesticide LOD
5 ppb
Assays held
7 / 12
Keystone Labs
Turnaround
5–7 d
Pesticide LOD
20 ppb
Assays held
7 / 12
09 · Stat cards & bars
Mono 28 bold for the value, 13 muted for the unit, 4px bar.
Myclobutanil
5 ppb
Best available LOD
ACTION LIMIT [VERIFY]
Total yeast & mould
10 cfu/g
Best available LOD
LIMIT [VERIFY]
Lead
0.1 ppm
Best available LOD
ACTION LIMIT [VERIFY]
Aflatoxin B1
2 ppb
Best available LOD
LIMIT [VERIFY]
Labs indexed
222
Holding accreditation
164
Assays tracked
12
Offer pickup
58
10 · Forms
Mono labels, white fields, rule-strong borders, action focus ring.
11 · Notices & empty states
Quiet. Bordered, not filled.
Lab data is compiled from public sources. Labs can claim and correct their listing.
SENT — your brief is on its way to 6 labs.
FAILED — we couldn't reach the server. Try again.
No labs match that combination.
Try removing a filter, or send one request and we'll route it to labs that can help.
Request quotes12 · Tables
Mono caps headers on paper. Numbers right, mono.
| Assay | Method | LOD | Turnaround | Status |
|---|---|---|---|---|
| Pesticides | LC-MS/MS | 10 ppb | 2–4 d | In scope |
| Heavy metals | ICP-MS | 0.1 ppm | 3 d | In scope |
| Mycotoxins | — | — | — | Not held |
14 · Map & legend
Data is the imagery. Fill, rule-strong strokes, dashed action radii.
Runs pesticide residue on flower
Accredited, different scope
Your facility
15 · The rules
What keeps it from going Bootstrap.
01 — DATA IS THE IMAGERY
Maps, LOD bars, coverage counts, sparklines. Drawn as SVG. No stock photography, no illustrations of beakers.
02 — EDGE-TO-EDGE STRUCTURE
Full-bleed sections separated by 1px rules. Split panels share a vertical rule. Nothing floats in a centred column of cards.
03 — MONO FOR EVERY NUMBER
Counts, percentages, LODs, turnarounds, distances, dates, prices. One rule, applied everywhere.
04 — SERIF FOR EVERY HEADING
h1 through h6 are Newsreader. Lab names and card titles are sans 600 — they're labels, not headings.
05 — NO SHADOWS, NO GRADIENTS
Depth is white-on-paper plus a rule. Motion is colour and border only, 120ms.
06 — BRACKETS FOR CAVEATS
Live eyebrows and sample-data notes sit in [ square brackets ]. It reads as instrument output, and it's honest.