Borneo Design System
Build interfaces with one shared language.
Foundations, components, motion, and accessibility guidelines for creating consistent product experiences across teams.
- Components
- 36
- Components
- Tokens
- 382
- Tokens
- Accessibility target
- WCAG 2.2 AA
- Accessibility target
Foundations
The decisions everything else is built on
Colour, type, layout, motion and accessibility are settled once, written down with their reasoning, and then reused everywhere.
Color
A near-monochrome canvas with one accent, and status hues muted enough to sit beside it.
208 color tokens- AaAaAaAa
Typography
Inter at eleven steps, with negative tracking reserved for large text.
11 type steps Layout
Six breakpoints, four containers, and layouts designed at each size rather than scaled down.
6 breakpointsMotion
Five durations, five curves, and a strict rule about what reduced motion means.
10 motion tokens- Focused4.6:1
Accessibility
WCAG 2.2 AA enforced by the component APIs, not audited on afterwards.
12 review checks
Token architecture
A raw value becomes an intent, and an intent becomes a contract
Three layers. Components name roles rather than values, which is what turns a rebrand into a one-line change instead of a search across the codebase.
Primitive
A raw value
Semantic
What it means
Component
Where it applies
Hover or focus a row to trace how a raw value reaches a component.
Components
Fifteen components, documented to the same depth
Every preview below is the production component. Nothing on this site is a mockup, so what you see cannot drift from what ships.
Five variants, three sizes, full state coverage.
The resting, focus and error states every control follows.
Typeahead, arrow keys, and correct listbox semantics.
The WAI-ARIA tabs pattern, with roving focus.
Opens on focus as well as hover; Escape dismisses it.
Focus trapped, Escape closes, focus restored on close.
Motion
Movement that explains something
Motion here confirms a press, shows where a surface came from, and connects one state to the next. Nothing loops, nothing parallaxes, and reduced motion removes movement rather than speeding it up.
Enter
240ms · ease-enter
Fade with a short travel. The surface arrives from the direction it belongs to.
Transition
360ms · ease-emphasized
One element moves between states rather than two crossfading past each other.
Exit
150ms · ease-exit
Faster than the entrance. Leaving does not deserve the same attention as arriving.
Prefers-reduced-motion removes the travel and keeps the fade.
Stagger
60ms apart, and only where the sequence aids comprehension.
Workflow
One path from a named value to a shipped pattern
Each stage consumes the one before it. That is what keeps a design decision and its implementation from becoming two separate things.
- 01
Design tokens
A named value with a documented meaning.
brand-primary - 02
CSS variables
Published on :root, overridable at any scope.
--brand-primary - 03
Tailwind utilities
Mapped through @theme inline, resolved at use.
bg-brand - 04
React components
Variants built on the tokens, never on raw values.
<Button /> - 05
Product patterns
Components composed into solved problems.
Confirmation dialog
Accessibility
Part of the system, not a checklist applied afterwards
Where a requirement can be enforced by an API, it is. IconButton refuses to render without a label, DialogTitle is mandatory, and FormField assembles the aria-describedby chain itself — because a rule that depends on remembering will eventually be forgotten.
Focus visibility
One treatment everywhere — a 2px brand outline offset by 2px, at 4.6:1. Never removed for pointer users.
- 17.5:1
Contrast
Every colour checked against the surface it appears on. Body text clears 4.5:1; focus indicators clear 3:1.
- Tab↑↓Esc
Keyboard navigation
Everything the mouse can do, the keyboard can do — including the command menu, every menu, and every dialog.
label=“Delete project”Screen-reader labels
Icon-only controls carry their name in the API. IconButton will not compile without one.
prefers-reduced-motion: reduceReduced motion
Movement is removed, not shortened. A 20ms slide is still a slide, and still triggers the symptoms it causes.
Enter a complete address.
Colour is never alone
Every state is carried by at least two of colour, shape, icon and text — so it survives greyscale.
Start building with a shared foundation.
Install the package, import the tokens, and every component works — with the accessibility, motion and responsive behaviour already decided.