Components

The website's components, live.

Rendered from the code the site runs. Build new pages from these before adding anything new.

Buttons

Pills, one primary per view.

Primary: Highlight with a Black label, Dark Purple when pressed. Secondary: Dark Purple with a White label. Outlined: a Black hairline that fills Black on hover. Labels are written in sentence case and set in Inter Bold capitals by the style. Sizes 36, 44 and 56 px.

Button in components/ui/button.tsx

Section labels

A small label, then a Newsreader heading.

What comes back

Three signals that grew since last quarter.

SectionLabel and SectionShell in components/blocks/section-shell.tsx

Numbered list

Two to four parallel points.

01
Sona8 interviews your people, by phone or in the browser.
02
Every answer is coded, and a theme counts when the coders agree.
03
You read the Insights, with the words behind each one.

NumberedList in components/blocks/numbered-list.tsx

Findings

An example result, one finding per row.

Example only, not a client result.

41%

from 19%

Deals are lost on delivery time. Reps quote nine weeks. A new competitor quotes three.

OPERATIONS

Check delivery times on the last 20 lost deals.

of 120

Next week's shift plan comes out on Thursday, so people cannot plan childcare.

PLANNING

Publish shift plans two weeks ahead.

FindingList in components/blocks/finding-list.tsx

Quote card, here as a client result

Most of the wait sits at the second sign-off, for orders above €5,000. Example only, not a client result.

Quote strip

Short quotes, running sideways.

Grace “Give sales teams earlier visibility into product changes.”
Head of Product “We now brief sales before every release, not after the first complaint.”
Daniel “We hear about product changes from customers before we hear about them internally.”
Shift lead “The night shift works around the same fault every week.”
COO “Had we known about that fault, we would have fixed it before the rollout, not after.”
Store manager “Head office never hears what works in our store.”
Head of Strategy “One week of interviews changed the order of our rollout.”

Grace “Give sales teams earlier visibility into product changes.”
Head of Product “We now brief sales before every release, not after the first complaint.”
Daniel “We hear about product changes from customers before we hear about them internally.”
Shift lead “The night shift works around the same fault every week.”
COO “Had we known about that fault, we would have fixed it before the rollout, not after.”
Store manager “Head office never hears what works in our store.”
Head of Strategy “One week of interviews changed the order of our rollout.”

QuoteStrip in components/blocks/quote-strip.tsx