The Sidera Design System

Sidera

A design system built to create consistency, scalability and clarity across digital products. Foundations, tokens and components engineered so design and engineering build the same thing — the first time.

v2.0
Current release
22+
Components
200+
Tokens & variants
WCAG
AA baseline
Design principles
01

Clarity

Every component states its intent. No decoration that doesn't carry meaning.

02

Consistency

One token, one decision, applied everywhere. Predictability is a feature.

03

Scalability

Built to grow — from one screen to five user types without rework.

04

Accessible

AA contrast, keyboard paths and clear states are requirements, not extras.

Foundations

The building blocks

Colour system
Ink
#050505
Slate 800
#1A1A1A
Slate 600
#3A3A3A
Slate 400
#5A5A58
Slate 300
#8A8A88
Silver
#C9C9CC
Paper
#F4F4F2
Typography scale
DisplayGeneral Sans · 96 / 0.86
Heading 164 / 0.9
Heading 240 / 1.0
Body — Inter Tight keeps long-form reading calm and legible.16–20 / 1.5
Caption / label13 · 0.16em
Spacing scale · 4pt base
4 · xs
8 · sm
16 · md
24 · lg
48 · xl
96 · 2xl
Layout grid · 12 columns
Fluid 12-column grid · 80px max gutters · 1440 reference width.
Iconography · 1.5px stroke
Radius & elevation
sm 4 · md 10 · lg 18 · full. Elevation expressed through hairlines, not heavy shadow.
Components

The library

Primary Ghost
Button
Email
you@studio.com
Input
Portfolio value
£2.4M · +6.1% MoM
Card
Full component index
Textarea Select Dropdown Tabs Modal Tooltip Toast Checkbox Radio Switch Avatar Badge Table Pagination Navigation Sidebar Breadcrumb Date Picker Accordion
Patterns

Composed flows

Forms, empty states, data tables, role-based dashboards and onboarding — documented as repeatable patterns, not one-off screens.

Accessibility

AA by default

Minimum 4.5:1 text contrast, visible focus rings, full keyboard operation and semantic roles ship with every component.

Motion

Calm & intentional

Durations 120–480ms, easing cubic-bezier(.22,1,.36,1). Motion guides attention; it never performs.

Built once.
Used everywhere.

Open a component Work with me