System / Components
Components
The components the site already uses, at the sizes approved in the redesign: 44 and 52px buttons, 44px inputs in Manrope, transparent secondary buttons.
01Buttons and links
| Variant | Height | Type | Use |
|---|---|---|---|
| Primary large | 52px | 16/600 | Hero and close band |
| Primary | 44px | 15/600 | Forms, header |
| Secondary | 44 / 52px | 15/600 | Hero only, beside a primary |
| Small | 32px | 14/600 | Dense tables, never alone on mobile |
| Text link | n/a | 16/600 + → in the link colour | Every other action |
- One primary per view. At most four on a long page (header, hero, offer section, close). The primary action counts as one Forest use per viewport however many times it appears.
- Link arrows inherit the link colour and are never Forest.
- Secondary is transparent with a
--muteborder (4.9:1). Never white on cream. - Buttons go full width below 560px when they are the main action.
- The primary button reads “Book a call”: the one primary CTA wording, on every button (R5). “Scope the 30-day POC” is retired as a CTA.
02Inputs
Free. Unsubscribe in one click.
Focus: Forest ring, 2px offset.
Check your email address. It should look like name@example.com.
Selects use the same 44px box.
Subscribe row
Free. Unsubscribe in one click. See how we use your details in our privacy notice.
- Labels are visible, sans 15/600, above the field. Never placeholder-only.
- Typed text is Manrope 16px (prevents iOS zoom); placeholders are mono 14px.
- Error text says what to do, in
--danger, linked witharia-describedby. - On phones the subscribe row stacks and the input keeps 44px (the F2 fix).
03Cards
The decision
Defined with a baseline and a test, agreed before the proof starts.
Rent breadth. Own the decision.
How to compare a specialised system with a general model.
Read the noteDecision record
The data used, the model and configuration, the evaluation results.
- White card, 1px line, 10px radius, 20 to 24px padding.
- A link card lifts 2px on hover and ends with an arrow link; the arrow inherits the link colour.
- The owned tint marks the owned element only. Card labels and headings are ink or mute, never Forest text.
04Section patterns
One decision, tested in 30 days.
We review the decisions worth improving, rank the possible use cases and test one against criteria agreed before the build.
The old deal
Quiet intelligence beats loud platforms.
05FAQ
Do we need perfect data before we start?
No. We need enough access to assess a useful problem and understand the limits of the data behind it.