Assay

Best for

• Pharmaceutical and medicinal manufacturers, including Australian medicinal cannabis companies whose public sites must not promote their products (see "Regulated health in Australia" below)
• Contract testing and analytical laboratories, CDMOs, compounding and specialty manufacturers
• Biotech and clinical-stage companies, medical device makers, research institutes
• Audiences: business partners, regulators, healthcare professionals, investors and job seekers, mostly on desktop, reading carefully

Less suited to: consumer retail or lifestyle (Atelier, Pebble), community pharmacy (Remedy, which is warmer and local), or any brand that sells on feeling rather than evidence.

Personality and voice

Measured and plain, like a well-written quality report. Claims come with a number, a unit or a standard. No hype, no superlatives, no promises about outcomes.

• Headlines: "Medicines made to a standard you can check." · "Nothing leaves until every result is in." · "Air that only flows one way."
• Buttons: "How we release a batch" · "Partner with us" · "See open roles" · "Healthcare professionals"
• Microcopy: "Price-sensitive announcements are marked." · "Product codes and results on this page are illustrations." · "Replies within two working days."
• Words to avoid: "best", "leading", "breakthrough", "miracle", "cure", "safe and effective", "natural", "plant", any product, brand or ingredient name on a public page of a regulated-health site.

Colour

Measured contrast (WCAG): ink on paper 17.1:1 · muted on paper 5.7:1 (on well 5.3:1) · cobalt on card 7.7:1 · white on cobalt 7.7:1 · alert 6.6:1. Night shift: ink 16.8:1 · muted 6.9:1 (on card 6.4:1) · cobalt 7.8:1 · text on cobalt 7.9:1 · alert 8.0:1. Amber (3.9:1 in light) is never used for text.

No green. It reads as "natural" or "plant" and as pass/fail at the same time; Assay's pass colour is cobalt.

Typography

• Display: Newsreader 400–600 with optical sizes: a journal serif with authority, never stiff.
• Body: Albert Sans 400–700: clear, technical, quiet.
• Data: JetBrains Mono 400–700: every number, unit, code and eyebrow.

The signature move: the headline states the standard and ends in a cobalt italic clause that names the evidence: "Medicines made to a standard you can check." Numbers are never set in the serif's old-style figures: big figures use lining numerals, units drop into small mono beside them (2,600 m²).

Layout

• 1240px wrap, gutter max(20px, 4vw). Spacing scale --s-1…--s-8 (4 to 104px).
• The hero and page heads sit on graph paper (--grid, 28px), fading out downwards or to the left.
• Hero: copy on the left, an instrument panel (the chromatogram) on the right; it stacks below the copy on phones.
• Sections alternate paper and well; heads stack or split (headline left, lead right). Figures run in a ruled strip of four.
• Tables are first-class: anything with a limit gets a spec bar.

Shape

• Squared and exact: buttons and inputs --r-s 6px, cards --r-m 10px, panels --r-l 16px. No pills except the switch track.
• Hairline borders do the work; shadows are short and cool. One shadow (--shadow-lift) for instrument panels and records.
• The eyebrow mark is an axis corner (└), the brand mark an integrated peak in a square.

Motion language

• The run: the chromatogram draws left to right under an amber cursor over 5.6s, the time and signal readouts tick with it, each peak is labelled as the cursor reaches it and shaded (integrated) as it passes; the peak table fills in row by row. "Run again" repeats it.
• The release: the batch record ticks each test 380ms apart, then the RELEASED stamp lands (a short overshoot, then still).
• Spec bars: each result slides into its window (1.1s).
• The process line draws across its stations; figures count up; the air flow on the facility plan moves from high to low pressure.
• Reveals: 12px rise and fade, 700ms. The phone menu opens like an instrument drawer, links indexed 01, 02, 03.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm shows the finished run, the released record and the final values; nothing is hidden.
• Night shift switch ([data-theme-toggle]): the dark mode, remembered as site-theme; the trace glows faintly; theme-color follows.

Imagery and illustration

The pictures are evidence: chromatograms, batch records, spec tables, a drawn facility plan, a process line. Line icons at 1.6px stroke on a cobalt-soft tile. Real photography only of real facilities and people (labs, suites, teams) in daylight, desaturated slightly, 10px radius. Never stock imagery of pills, leaves, droplets, flowers or smiling patients.

Signature components

• .chroma[data-run]: the chromatogram (.chroma-head, .chroma-plot with .axis-y, .axis-x, .chroma-foot with [data-rt], [data-au] and [data-rerun], and table.peaks). The run is JSON in data-run (see below).
• .lot: the batch record (.lot-head, .lot-checks li with .tick, .res, .lot-foot with .stamp).
• .spec (--lo, --hi, --v as percentages): a result inside its specification window; .spec.fail for out of limits.
• .figures ([data-count]), .cap capability cards, .process (--n stations), .plan facility plan with .room.g7/.g8 and .flow, .ann announcements with .badge.ps, .gate audience chooser, .notice / .notice.safety, .close-card with a trace.

A run, in data-run (retention time and width in minutes, height 0–1):

{"t": 12, "duration": 5600, "peaks": [
  {"rt": 1.42, "h": 0.09, "w": 0.06, "n": "Imp. A"},
  {"rt": 6.12, "h": 0.92, "w": 0.16, "n": "Active"}
]}

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (an indexed drawer); Escape, outside click and links close it; focus stays inside while open.
• Current page: aria-current="page" (cobalt underline).
• Inner pages: .page-head with .crumbs, a .tag and a smaller .h1, on graph paper.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .select, .form-card; form[data-template] shows "This is a template" on submit.
• Tiles: .choices › label.choice > input + span.
• Segmented control: .seg with button[aria-pressed]; add data-filter="#list" and data-value on buttons to filter items with data-tags (count in [data-filter-count="#list"]).
• Gate: [data-gate] with button[data-show="panel-id"]: shows one panel, hides the others.
• Slider, switch, tables: input.range, .switch[role=switch], .table / .table.stack, td.r, td.m.
• Rendered later: Assay.refresh(root); Assay.run(el) reruns a chromatogram.

Regulated health in Australia

Assay was written for companies whose public websites are tightly limited. For medicinal cannabis and other prescription medicines in Australia, the TGA's advertising rules apply to the whole public site:

• No promotion of prescription medicines to the public, including indirect references (product names, ingredients, "THC", "CBD", "plant medicine", strains, imagery of leaves or flowers), condition or treatment claims, and anything that steers people towards asking for a product.
• No eligibility quizzes, symptom checkers or "do I qualify" flows, and no testimonials or reviews.
• Product information for healthcare professionals sits behind a gate (.gate) and, on a real site, behind verified sign-in. The public side says plainly that it can't help patients choose a medicine and points them to their doctor or pharmacist.
• Corporate content is fine: the company, its quality system, facilities, people, investors, careers and contact details, written factually.
• Every page carries a footer line saying the site doesn't advertise or promote any medicine, and how to report a side effect.

These notes are design guidance, not legal advice; a real launch needs a review against the current TGA guidance and the client's own regulatory advice.

Do and don't

• Do give every claim a number, unit, standard or date.
• Do label sample data as an illustration on template and demo pages.
• Do use spec bars whenever a result has limits.
• Don't use green, leaves, droplets, pill stock or "natural" language anywhere.
• Don't put product names, ingredients or conditions on public pages of a regulated-health site.
• Don't set text in amber, magenta or teal; they're for data.

Accessibility

AA contrast throughout (measured above). Skip link, visible amber focus ring, real buttons for reruns and gates, the chromatogram's table carries the same data as the picture (the plot itself is aria-hidden), the facility plan has a title and focusable rooms. Forms label every field. Tables stack with labels on phones. Responsive to 360px; tested with motion on and off, in Bench and Night shift.

How to make it yours