The ReadyState system, and how to use it.
Two typefaces, one red, hairline rules and nothing else. Every page, product screen and document is assembled from the patterns below. The written specification, the one to paste into an agent's context, is brand.md.
Stacked wordmark, solid piece
Two lines of type, ReadyState over systems, with a solid red puzzle piece to the right of the first line. Its bottom edge sits on that line's baseline. Nothing goes inside the piece. Clear space on all sides equals the width of the piece.
Favicon, app icon and avatar. The tabs stay legible down to about 16px, which is why the piece is drawn solid rather than outlined.
Keep the piece to the right of the first line, its bottom edge on that line’s baseline. Scale the lockup as one object. Place it on flat #0C0C0D, #F3F2F2 or a solid plate. Clear space equal to the width of the piece. Below roughly 90px of lockup width, drop to the piece alone.
Move the piece to the left of the word, sit it beside line two, or set the two lines side by side. Rotate or flip the tabs. Interlock it with a second piece. Put type or anything else inside it. Recolour it. Add gradients or shadows. Stretch the wordmark. Set it over photography without a plate.
Near-black, warm off-white, one red
Two background values per page, maximum. Red carries labels, calls to action and the logo mark. It never fills a large area and never sets body copy.
ink on bg 15:1. dim on bg 7:1, body only. Red on bg 4.3:1, use at 11px mono and above or large text. White on red 3.6:1, uppercase button labels only.
accent-tint rgba(236,48,19,0.05) fills the positive side of a comparison. accent-line rgba(236,48,19,0.30) divides rows inside it. Nothing else is tinted.
Coral #C6402F is the only sanctioned substitute for the brand red, used when #EC3013 clashes with client material. Status colours are not part of the brand.
Tight headings, wide labels
Archivo sets everything readable, with negative tracking that increases as the size increases. IBM Plex Mono sets everything that names, numbers or references something, always uppercase with wide tracking. The contrast between the two is the identity.
Comply captures records as work happens. Competency sittings, supervision checks and training completions are logged immediately.
Display 20 to 24 characters per line, body 52 to 70. Minimum 15px on screen, 12pt in print, 24px on a 1920x1080 slide. Always text-wrap: pretty on headings.
Sentence case in prose, including headings. Uppercase only in mono labels, tags, buttons and reference codes. No title case, no all-caps headlines.
Four patterns cover everything
Container 1240px, section padding 96px by 40px, hairline between every section. Content is assembled from the section header, the hairline grid, the rule-labelled divider and the pull quote. No shadows, no rounded cards, no gradients.
Pull quote variant: 2px accent rule, 18px indent. Used once per section at most.
Mono label, then body copy. Padding 26 to 36px, internal gap 12 to 20px, align-content start.
Product cell variant: name, tag, body.
Negative side: hairline border, 0.72 opacity, struck titles.
Positive side: accent border, 5% tint, accent dividers.
Buttons, fields, pills, modals
Radii are 3px for controls, 5px for modals, 999px for floating pills. One shadow exists in the system and only floating elements use it.
Primary 15px 26px, compact 9px 16px. Hover brightness 1.08, active translateY(1px), focus 2px accent outline with 2px offset. These are live, try them.
Label above in mono 10px 0.16em, gap 7px. Field 13px by 14px padding, Archivo 15px. Error and focus both use the accent border, error adds a mono 10px accent message.
Fixed right 26px, bottom 26px, z-index 60. Below 720px it drops the label and becomes a 52px circle. The only shadow in the system: 0 10px 30px rgba(0,0,0,0.45).
Overlay rgba(6,6,7,0.78) with 6px blur, dialog max-width 620px, padding 40px. Closes on overlay click, close button and Escape. Body scroll locked, focus trapped.
How to build a ReadyState document
Profiles, proposals, audit reports, SOPs and register exports all use the same frame: light theme, mono running head, numbered section openers, hairline data blocks, sourced figures.
Body copy sets in Archivo at 11 to 12pt with 1.55 line height and a 65 to 75 character measure. One idea per paragraph. Two-column body only for dense reference matter.
Tracks obligations at rep and FSP level.
Onboarding, PST and CPD logged as work happens.
Statutory registers with time-stamped entries.
Letter or A4 portrait, 20mm margins, light theme. Running head in mono 8pt at 0.18em: brand, document type, reference code. Foot carries the page number as 07 / 13.
RS/CP profile, RS/PR proposal, RS/AR audit report, RS/SOP procedure, followed by the year. The code appears on every page.
Numbered mono eyebrow at 9pt 0.20em accent, then the section statement at 26 to 32pt, weight 700, tracking -0.03em, measure 24ch. Covers and dividers may run dark.
Hairline grids at 1pt, three columns maximum on portrait. Tables use mono uppercase headers, hairline row rules, no fills or vertical rules, right-aligned tabular numbers. No pie charts, no 3D, no chart junk.
Quote instruments exactly. Every figure carries a source line. Register rows are time-stamped, append-only and show who logged them. Status words in mono uppercase: COMPLETE, OUTSTANDING, AT RISK, OVERDUE.
Minimum 12pt body. No text within 15mm of the trim. Hairlines no thinner than 0.5pt. Fixed page boxes fit Letter and A4 without reflow.
Voice, and what the system never does
Matter-of-fact and specific. Name the regulation, the deadline, the amount. Short declaratives: state the mechanism, then the consequence. Client copy is used verbatim, never reworded. Regulatory figures always carry a source line. No em dashes anywhere, section labels use a slash. South African English.
Gradient backgrounds. Emoji. Rounded cards with a left accent stripe. Stock-photo collages. Inter, Roboto or Arial. Shadows other than the one floating shadow. Red as a large fill or as body text. Invented statistics. Marketing inflation: revolutionary, seamless, empower, unlock.