Skip to main content

Get Started
- About Orbit
- AI Layer
- Library files
- Component lifecycle
- Component status
- Roadmap
- Changelog
Foundations
- Design tokens
  
  All tokens
- Colour
- Typography
- Spacing
- Radius
Guidelines
- Accessibility
- UX Guidelines
- Content & Writing
  
  Overview
  Voice & tone
  UI text
  
  Action labels
  Empty states
  Error messages
  Form labels & helper text
  Notifications & alerts
  Confirmation dialogs
  
  Formatting
  
  Capitalisation
  Numbers & dates
  Punctuation
  
  Inclusive language
  Writing for accessibility
Components
- Accordion
- Alert
- Avatar
- Badge
- Buttons
  
  Button
  ButtonGroup
  CloseButton
  IconButton
  SplitButton
  Sticky Button
  Toggle Button
  Toggle View
  TooltipButton
- Containers
- Data Display
- Forms
  
  Checkbox
  Colour Picker
  Combobox
  Date and Time Picker
  Dropdown
  File Upload
  Form Control
  Input
  Matrix
  Multi-Select
  Radio Button
  Range Slider
  Ranking
  Rich Text Editor
  Search
  Selector
  Switch
  Text Area
- Loading Status
- Modal
- Notification Modal
- Pagination
- Pill
- Placeholders
- Popover
- Progress Stepper
- Sentiment
- Spinner
- Stepper
- Surfaces
- Table
- Tabs
- Tag
- Tag Group
- Tooltip
Patterns
- Forms & multi-step flows
- Empty states
- Destructive-action confirmation
- Notifications & feedback
Data Visualisation
- Overview
- Accessibility
- Colour in charts
- Chart types
  
  Bar chart
  Line chart
  Area chart
  Pie and donut
  Scatter plot
- Maps

Orbit

One shared language for every design and engineering decision across Open Point and Social Point — from colour tokens to component behaviour to accessibility standards. Built to scale with the platform.

Explore foundations →

Browse components

[01]

Built different

A11Y / 01

Accessibility-first

Every token, component, and pattern meets WCAG 2.1 AA as a minimum. Contrast ratios are chosen before colours are finalised; keyboard behaviour is documented before a component is marked Stable.

AI / 02

AI-optimised

Layer names, token conventions, and documentation are structured so AI tools can parse, reference, generate against, and quality-check the system. A deliberate structural choice, not retrofitted.

[02]

Where do you want to start?

FND

Foundations

Colour, typography, spacing, and the token system that underpins every component.

CMP

Component library

Browse the full library with usage guidance, code examples, and accessibility docs.

AI

Using Orbit with AI

How to use Claude alongside the design system — docs, QA, tickets, and more.