Getting Started
Introduction
A shared language for building clear, consistent, and accessible interfaces.
What this isPermalink to this section
A design system for building product interfaces that hold together — across teams, across surfaces, and across the years in which a product gets rewritten around them.
Borneo covers the parts of an interface that are decided once and then used everywhere: what a colour means, how far apart two things sit, what a button looks like when it is loading, and what happens when someone is navigating with a keyboard. Making those decisions once — and writing down why — is most of what a design system is for.
It is built for modern web products: SaaS applications, dashboards, e-commerce surfaces, internal tools and the marketing pages that sit alongside them. The visual language is deliberately restrained, so it gets out of the way of whatever is being built with it.
36
Components
14
Patterns
382
Tokens
AA
WCAG 2.2 target
How it is organisedPermalink to this section
Four sections, in the order they build on each other.
Colour, typography, spacing, motion and accessibility — the decisions everything else is built on.
Read moreFifteen production components, each documented with variants, states, API and accessibility notes.
Read moreHow components work together — forms, filtering, empty states, confirmation and settings.
Read moreWhat makes this system opinionatedPermalink to this section
Five decisions that shape everything downstream. They are stated here so that disagreeing with one is a deliberate choice rather than a surprise.
- Borders, not shadowsStructure comes from 1px lines. Shadow is reserved for surfaces that genuinely float above the page — dialogs, menus, tooltips — so that elevation keeps meaning something.
- One accent, spent sparinglyThe brand colour marks the primary action, active navigation and the focus ring. A screen with five accented things has no primary action.
- Semantic tokens, alwaysComponents name roles, not values. That is what makes a rebrand a one-line change instead of a search-and-replace across the codebase.
- Accessibility is structuralWhere a rule can be enforced by the API, it is. IconButton requires a label; DialogTitle is mandatory; FormField wires the aria-describedby chain itself.
- Motion is functionalMovement explains where a surface came from and confirms that a press registered. Nothing loops, nothing parallaxes, and reduced motion removes movement rather than shortening it.
How to read a component pagePermalink to this section
Every component page has the same four tabs, in the same order, answering the same four questions.
| Tab | Answers |
|---|---|
| Overview | What it looks like, what variants and states exist, and what its parts are called |
| Usage | When to use it, when not to, how to write its content, and how it behaves responsively |
| API | The props, their types and defaults, and how to compose it |
| Accessibility | What it guarantees, and how it responds to a keyboard |
The previews are the real components
Every interactive example on this site imports the same component the package exports. Nothing here is a mockup, so a preview cannot drift from what actually ships.
Finding thingsPermalink to this section
Three ways in, depending on what you already know.
Command menu
Press ⌘K or Ctrl+K anywhere. It searches page titles, component names and every token name.
Sidebar
Groups collapse and remember their state. On narrower desktops, filter it from the field at the top.
Table of contents
On the right of every page above 1280px, tracking your position as you scroll.