Retourne Design System
Components, tokens, and rules for the Retourne product.
Logo
The recording light and the word it opens.
Surfaces & motion
How things sit on the page and how they move. Hover the motion tiles to play them.
Corner radius
Spacing · 4px base
Easing
cubic-bezier(.2, .8, .2, 1)
Duration
220ms · most state changes
Slow moments
660ms · loop closing
Effects
Grain + hero
Colour
Every swatch is a token; every token is read by a component.
- Brand#e5382d
- Brand hover#f04a30
- On brand#ffffff
- Accent#ff4a2e
- Canvas#0d0a09
- Surface#171211
- Border#201c1a
- Border strong#332e2b
- Ink#f6efea
- Ink muted#b3a69f
- Success#52c98c
- Error#ff6b7a
- Warning#e2a54a
Typography
One display face, a quieter body partner, and mono for numbers, timestamps and labels.
Geist 700
Precise, neutral, engineered — the safest to live with, and the easiest to run one family across headlines and interface.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 → ✓ @ & ?
Pairing · Display Geist 700 · Body Geist 400/500 · Mono Geist Mono
Theme controls
Live token overrides on top of the selected theme.
Dimensions
Card colors
Text on background: 16.3:1 AA
Nav
Navigation items — the active item carries the brand tint.
Button
The action hierarchy, from the CTA to the effect variants.
Dropdown
A select menu for picking one option.
Team selected: none
Combobox
A searchable picker for long lists.
Folder selected: none
Badge
Loop states and status, as tinted pills.
Input
One plain input and one search, with their states.
Card
A surface that groups one question or decision.
Sprint Planning Recap
Weekly sprint review recorded this morning — 12:34.
Table
Dense rows under a muted header, figures tabular.
Recent recordings
Everything that needs attention today.
| Title | Folder | Duration | Views | Status |
|---|---|---|---|---|
| Sprint Planning Recap | Product demos | 12:34 | 184 | Ready |
| Design Review — Q3 | Product demos | 24:07 | 96 | Processing |
| Onboarding Walkthrough | Onboarding | 8:51 | 312 | Recording |
| Bug Triage — Auth Flow | Engineering deep dives | 15:22 | 47 | Draft |
| Client Demo — Portal | Customer stories | 31:10 | 229 | Error |
Chips
Status, video and people chips.
Status
Videos
People
Tooltip
A short hint on hover and on focus.
Views
Shows on hover and on keyboard focus.
Modal
A centred dialog for confirmations.
A modal dialog for confirmations and alerts.
Side panel
A drawer that slides in from the left.
A navigation drawer that slides in from the left — the app's modules stay one tap away.
Video Card
A 16:9 thumbnail that is the play button.
Sprint Planning Recap
Design Review — Q3
Onboarding Walkthrough
Bug Triage — Auth Flow
Client Demo — Portal
Standup Notes — Jan 9
Toggle
A switch for on/off settings.
Checkbox
A checkbox for independent choices.
Tabs
Views within one panel.
Segmented control
A pill group for picking one of a few.
Avatar
Initials, alone or stacked.
Filter chips
Selectable filters.
Toast
A brief confirmation that auto-dismisses.
A brief confirmation that auto-dismisses after five seconds.
Hover & active states
Each component frozen in every state, so the difference is judged at a glance.
| Component | Default | Hover | Pressed | Focus | Disabled |
|---|---|---|---|---|---|
| Primary button | |||||
| Secondary button | |||||
| Ghost button | |||||
| Text input | |||||
| Filter chip | |||||
| Clip card | answered Onboarding review2:41 | answered Onboarding review2:41 | answered Onboarding review2:41 | answered Onboarding review2:41 | answered Onboarding review2:41 |
In context
Where most people meet the brand: a link pasted into Slack, and the list of clips waiting on an answer.
Quick repro before standup 👇 retourne.app/c/8fk2x