Act III design system
Style guide
Every primitive in the system, rendered from the tokens in app/tokens.css. Nothing on this page uses a hard-coded colour or size.
All three themes, side by side
Day is extracted from the design export. Night and High contrast are derived proposals and need client sign-off. Every colour pair in all three is verified against WCAG 2.2 AA by npm run check:contrast.
Day
Extracted from the design export.
Headings and body text
Here is what your answers tell us
Some of the protections that matter most aren’t in place yet.
The whole plan, nothing withheld
Eleven things are worth doing. Three of them soon. Below you’ll find all of them, what each one protects, and where to begin. 18px is the floor — nothing smaller carries meaning.
Tap any one to see which of your answers produced it.
Start here
Buttons, all states
Green, then ink, then outline — in that order of weight, once each per screen. Disabled sits at Line.
Hover and pressed states darken to ink rather than to a second green. Focus rings are Highlight blue — tab through to see them.
Form controls
A first name is enough.
60px rows, the whole row is the target. Selection is a fill, a 2px blue border and the dot — never colour alone. “I’m not sure” is always offered.
Progress indicator
The count is stated in words, not only in the fill.
Question 3 of 12
Question 12 of 12
RAG state treatments
Every status is a colour, a word and a number together. A reader who sees no colour loses nothing.
Needs attention
The Body
Needs attention
The Home
Some gaps
The Order
Needs attention
The Spirit
On track
Cards and panels
A card is a surface and a Line border
No shadows — separation comes from the Line colour.
Start here
Name your healthcare agent
If no one is named, the decision falls to whoever is available, and that may not be who you would choose.
First move: write down one name. Nothing is filed today.
Task rows
Completed tasks stay visible — the record of progress is the reassurance.
Locate the deeds
Done 4 Aug · +2 points
Name your healthcare agent
Due in the first 30 days · The Body
Consolidate the two old pensions
Days 31–60 · The Order
Night
Derived — proposal, needs sign-off.
Headings and body text
Here is what your answers tell us
Some of the protections that matter most aren’t in place yet.
The whole plan, nothing withheld
Eleven things are worth doing. Three of them soon. Below you’ll find all of them, what each one protects, and where to begin. 18px is the floor — nothing smaller carries meaning.
Tap any one to see which of your answers produced it.
Start here
Buttons, all states
Green, then ink, then outline — in that order of weight, once each per screen. Disabled sits at Line.
Hover and pressed states darken to ink rather than to a second green. Focus rings are Highlight blue — tab through to see them.
Form controls
A first name is enough.
60px rows, the whole row is the target. Selection is a fill, a 2px blue border and the dot — never colour alone. “I’m not sure” is always offered.
Progress indicator
The count is stated in words, not only in the fill.
Question 3 of 12
Question 12 of 12
RAG state treatments
Every status is a colour, a word and a number together. A reader who sees no colour loses nothing.
Needs attention
The Body
Needs attention
The Home
Some gaps
The Order
Needs attention
The Spirit
On track
Cards and panels
A card is a surface and a Line border
No shadows — separation comes from the Line colour.
Start here
Name your healthcare agent
If no one is named, the decision falls to whoever is available, and that may not be who you would choose.
First move: write down one name. Nothing is filed today.
Task rows
Completed tasks stay visible — the record of progress is the reassurance.
Locate the deeds
Done 4 Aug · +2 points
Name your healthcare agent
Due in the first 30 days · The Body
Consolidate the two old pensions
Days 31–60 · The Order
High contrast
Derived — proposal, needs sign-off.
Headings and body text
Here is what your answers tell us
Some of the protections that matter most aren’t in place yet.
The whole plan, nothing withheld
Eleven things are worth doing. Three of them soon. Below you’ll find all of them, what each one protects, and where to begin. 18px is the floor — nothing smaller carries meaning.
Tap any one to see which of your answers produced it.
Start here
Buttons, all states
Green, then ink, then outline — in that order of weight, once each per screen. Disabled sits at Line.
Hover and pressed states darken to ink rather than to a second green. Focus rings are Highlight blue — tab through to see them.
Form controls
A first name is enough.
60px rows, the whole row is the target. Selection is a fill, a 2px blue border and the dot — never colour alone. “I’m not sure” is always offered.
Progress indicator
The count is stated in words, not only in the fill.
Question 3 of 12
Question 12 of 12
RAG state treatments
Every status is a colour, a word and a number together. A reader who sees no colour loses nothing.
Needs attention
The Body
Needs attention
The Home
Some gaps
The Order
Needs attention
The Spirit
On track
Cards and panels
A card is a surface and a Line border
No shadows — separation comes from the Line colour.
Start here
Name your healthcare agent
If no one is named, the decision falls to whoever is available, and that may not be who you would choose.
First move: write down one name. Nothing is filed today.
Task rows
Completed tasks stay visible — the record of progress is the reassurance.
Locate the deeds
Done 4 Aug · +2 points
Name your healthcare agent
Due in the first 30 days · The Body
Consolidate the two old pensions
Days 31–60 · The Order
The current theme, full size
The same primitives in whichever theme is selected above.
Headings and body text
Here is what your answers tell us
Some of the protections that matter most aren’t in place yet.
The whole plan, nothing withheld
Eleven things are worth doing. Three of them soon. Below you’ll find all of them, what each one protects, and where to begin. 18px is the floor — nothing smaller carries meaning.
Tap any one to see which of your answers produced it.
Start here
Buttons, all states
Green, then ink, then outline — in that order of weight, once each per screen. Disabled sits at Line.
Hover and pressed states darken to ink rather than to a second green. Focus rings are Highlight blue — tab through to see them.
Form controls
A first name is enough.
60px rows, the whole row is the target. Selection is a fill, a 2px blue border and the dot — never colour alone. “I’m not sure” is always offered.
Progress indicator
The count is stated in words, not only in the fill.
Question 3 of 12
Question 12 of 12
RAG state treatments
Every status is a colour, a word and a number together. A reader who sees no colour loses nothing.
Needs attention
The Body
Needs attention
The Home
Some gaps
The Order
Needs attention
The Spirit
On track
Cards and panels
A card is a surface and a Line border
No shadows — separation comes from the Line colour.
Start here
Name your healthcare agent
If no one is named, the decision falls to whoever is available, and that may not be who you would choose.
First move: write down one name. Nothing is filed today.
Task rows
Completed tasks stay visible — the record of progress is the reassurance.
Locate the deeds
Done 4 Aug · +2 points
Name your healthcare agent
Due in the first 30 days · The Body
Consolidate the two old pensions
Days 31–60 · The Order