>soren hale — frontend developer
// Case study
Halden Design System
Sixty-two components, one token file and no accessibility exceptions.
Lighthouse accessibility, product averagefrom 71→to 100
- Client
- Halden
- Year
- 2023
- Role
- Design systems lead
- Kind
- Tooling
The problem
Halden builds scheduling software for clinics. Five product teams had drifted into five slightly different products.
The approach
- Tokens are the single source: colour, type and spacing are generated for web, iOS and the Figma library from one file.
- Every component ships with keyboard behaviour, focus order and a written usage note. Nothing merges without them.
- A weekly office hour instead of a rulebook.
The result
The product average on Lighthouse accessibility went from 71 to 100. The time to build a new settings screen dropped from four days to one.
Built with
ReactTypeScriptStorybookRadix
// Case study
Halden Design System
Sixty-two components, one token file and no accessibility exceptions.
Lighthouse accessibility, product averagefrom 71→to 100
- Client
- Halden
- Year
- 2023
- Role
- Design systems lead
- Kind
- Tooling
The problem
Halden builds scheduling software for clinics. Five product teams had drifted into five slightly different products.
The approach
- Tokens are the single source: colour, type and spacing are generated for web, iOS and the Figma library from one file.
- Every component ships with keyboard behaviour, focus order and a written usage note. Nothing merges without them.
- A weekly office hour instead of a rulebook.
The result
The product average on Lighthouse accessibility went from 71 to 100. The time to build a new settings screen dropped from four days to one.
Built with
ReactTypeScriptStorybookRadix
// Case study
Halden Design System
Sixty-two components, one token file and no accessibility exceptions.
Lighthouse accessibility, product averagefrom 71→to 100
- Client
- Halden
- Year
- 2023
- Role
- Design systems lead
- Kind
- Tooling
The problem
Halden builds scheduling software for clinics. Five product teams had drifted into five slightly different products.
The approach
- Tokens are the single source: colour, type and spacing are generated for web, iOS and the Figma library from one file.
- Every component ships with keyboard behaviour, focus order and a written usage note. Nothing merges without them.
- A weekly office hour instead of a rulebook.
The result
The product average on Lighthouse accessibility went from 71 to 100. The time to build a new settings screen dropped from four days to one.
Built with
ReactTypeScriptStorybookRadix
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.
// Start a project
Tell me what you are building.
Three quick picks so the first reply is useful. You finish the message on the contact page.