Rotiera design system

One page, built section by section

Keep this page open and refresh it. Each section gets a status in the menu: Locked or Decided means agreed; For review means it is waiting for you.

What's new · 15 October
  • Fields decided (40 high, 12 corners).
  • Choices ready for review: switch, checkboxes, choice cards, segment, tabs, filter chips, and a table of which to use when.
Foundations

Colour Locked 15 Oct

Decided first, because everything else is built from it. Five families, each a full scale, and a short list of roles. Screens use the roles, never a colour picked by eye.

Changed 15 October: the red is cleaner (#DC2F3B, was a brick #B52F36) and the amber is warmer and more alert (#B04E00, was a muddy #8B6200). Both still pass the readability standard.
Before
2 min lateDidn't comeDelete client
After
2 min lateDidn't comeDelete client

The five families

The dot marks the main shade of each family. Numbers run light to dark.

Roles

What screens actually use. If something needs a colour that isn't a role here, it doesn't get one.

The sky

Only from the blue scale. Three strengths, each with one job.

SkyBlue 100 → 50 → canvas, soft blue light at the top left. Stages, previews, the right half of log in.
Sky, boldA little more blue. Page tops and big moments.
Sky, softBlue 50 → white. Empty states and quiet panels.

Can people read it?

Every text-on-background pair Rotiera uses, measured. "AA" is the international readability standard for normal text (4.5 or more); "Large" passes only for big or bold text (3 or more).

Locked · 15 October 2026

Buttons, fields and every other section use only these. Changing a shade later changes it everywhere at once, which is the point.

Foundations

Corners Decided 15 Oct

Round: friendly like Revolut and Wise, still grown-up. Things of the same kind always share a corner size. Refined 15 October: 12 (was 10) on fields and buttons, which are 40 high.

12Fields, buttons, tabs, chips, menu rows · on a 40px box
14Menus and small tiles
20Cards and the sky stage
26Dialogs, drawers, phone sheets

Tags and the time ring are fully round.

Components

Buttons Decided 15 Oct

How people make things happen. One clear main action per screen, plain verbs on every button, the same shape everywhere. The main button is black, so blue keeps meaning time, selection and links.

Why: the app today is a salad

A count of the current app (15 October, approximate):

Different button looksabout 25–30should be 4
Heights in use28 · 30 · 32 · 36 · 38should be 32 · 40 · 48
Buttons built by handabout 315vs 174 using the shared one
Worst areasTeam chat · Today · autheach invented its own buttons

Moving to these four kinds means replacing every one of those with the one shared button, area by area.

Four kinds, nothing else

Every button in Rotiera is one of these four. If a screen seems to need a fifth, the screen is wrong, not the system. Two buttons side by side are always different kinds.

Sizes

Medium is the default. Small lives inside rows and cards. Large is for the one action that ends a page, like Log in or Create my business, and for phones.

With icons

An icon goes before the word when it says what will appear (+ New), after it when it says where you'll go (→). Icon-only buttons always have a tooltip.

Next day

Placing them

The main button is always last, on the right (full width on a phone). Switching between views of one thing is not a button: that is the segment control, in the Choices section.

At most three buttons together. More than that goes in the ⋯ menu.

Measurements

The same numbers in the app, the website and emails.

Height32 · 40 · 48small · medium · large
Corners12pxevery size
Text14 / 60015 on large · never capitals
Inside16px · gap 8icon 16px

One button in the code

This is what stops the salad: every screen uses this one component and nothing else. No screen gets its own button style.

<Button>Save changes</Button>
<Button kind="secondary" icon={Download}>Export</Button>
<Button kind="quiet">Cancel</Button>
<Button kind="danger">Delete client</Button>
<Button size="small"> · <Button size="large" full> · <Button busy>Saving</Button> · <IconButton label="Next day" icon={ChevronRight} />

Kinds: primary (default), secondary, quiet, danger. Sizes: small, medium (default), large. That is the whole list.

Rules

Short, so they actually get followed.

Do

Sofia Almeida · 15:30

One black button per screen or card. A verb that says exactly what happens: "They're here", "Book 15:30", "Send link".

Don't

Sofia Almeida · 15:30

Several black buttons fighting, vague words like "OK" or "Submit", capitals, coloured buttons invented for one screen.

Removing things

There is no red button on a page. "Delete" lives in the ⋯ menu as red text, and opens a question with the one red button. Two steps, so nobody deletes by accident.

Waiting and failing

While working, the button keeps its size and says what it's doing. If it fails, the message appears beside it in plain words, never as a code.

Couldn't save. Check your connection and try again.
Components

Fields Decided 15 Oct

Where people type and pick. One field component with a label above, a 40px box that lines up with buttons, a blue focus, and errors in plain words under the box.

Why: the fields are a salad too

A count of the current app (15 October, approximate):

Different field looksabout 12–14should be 1 box
Heights in use32 · 34 · 36 · 38 · 42 · 44 · 48should be 40 · 48
Search boxes8+ versionsshould be 1
Boxes built by handabout 7528 with no label or error wiring

Sign-up, setup and the side panels each have their own copy of price, stepper and dropdown boxes; date and time pickers look different from the dropdown next to them.

Email
Email
Email
Email

Add the ending, like .com.

Email

Two ways to lay out a form

Only these two. Never a long column of boxes one under another.

Label above

Sign up, log in, setup, and every form on a phone. Related fields share a row.

Label on the left

Create windows and settings on a computer: the labels make a clean column, the boxes start on one line.

Name
Sessions and price
sessions
£
Good for

Measurements

Height40 · 4848 on sign-up and phones
Corners12pxsame as buttons
Text15 / 40016 on phones, so iPhone doesn't zoom
Label12.5 / 600above, 6px gap

Rules

Do

For reminders by text.

Add the ending, like .com.

A label you can always see. "optional" on the rare optional field. Problems say exactly what to do.

Don't

Error: invalid_email

The label only as grey text inside the box (it vanishes when you type), red stars, error codes, the browser's own grey dropdowns.

One field in the code

<Field label="Client name" />
<Field label="Phone" optional hint="For reminders by text." />
<Field label="Price" prefix="£" /> · <Field label="Length" suffix="min" />
<Field label="Password" type="password" /> · <Search />
<Select label="Kind of business" options={…} /> · <DayField /> · <TimeField /> · <TextArea label="Notes" optional />
error="Add the ending, like .com." · size="large" · disabled

Every box in the app comes from these. A screen never draws its own input.

Components

Choices For review

Ways to pick. Each control answers one kind of question, so people always know what will happen when they tap. Blue always means "this is chosen".

Why: about 28 different choice controls today

A count of the current app (15 October, approximate):

Chip and pill stylesabout 106 heights, 4 corner sizes
Segment controlsabout 6copied from each other
Switch sizes340×24, 38×22, 36×22
Ready-made ones usedalmost nonethe app rebuilt them by hand

Which one to use

Pick by the question being asked, never by looks.

The questionUseExample
On or off, takes effect at onceSwitchOnline booking · Waiting list
Any number from a listCheckboxesWhich services this person does
One of a few, each needs explainingChoice cardsHow clients pay: nothing, a deposit, full price
One of two to four short optionsSegmentDay · Week · Month
Parts of one pageTabsUpcoming · Past · Cancelled
Narrow a list, several at onceFilter chipsHere today · Plan members · Nervous
One of five or moreDropdown (Fields)Kind of business

The six controls

All live: tap them.

Switch · 40 × 24

Online bookingClients can book from your page
Waiting listOffer freed times automatically

Checkboxes · 20

Choice cards · one of a few

Segment · 40 high

Tabs · parts of a page

Tabs never move or reload the rest of the page.

Filter chips · 32 high

Square-ish at 12, so they never look like status tags.

States

Off, on, and what happens around them.

Control
Off
On
Hover
Keyboard focus
Can't change
Switch
Checkbox
Choice card
A deposit
A deposit
A deposit
A deposit
A deposit
Chip
Nervous
Nervous
Nervous
Nervous
Nervous

Measurements

Switch40 × 24knob 18, blue when on
Checkbox and radio20corners 6 · radio round
Segment and tabs40 highsegment corners 12, inside 9
Chips32 highcorners 12 · count in grey

Rules

Do

RemindersA text the day before

Switches act at once, no Save button. The label says what is on, the line under it says what that means for clients.

Don't

Enabled
DayWeek

A switch that still needs Save, labels like "Enabled", chips used to switch views (that is a segment).

In the code

<Switch label="Online booking" hint="Clients can book from your page" />
<Checkbox label="Check-up" /> · <Checkboxes options={…} />
<ChoiceCards options={[{label:"A deposit", hint:"£20 when they book"}, …]} />
<Segment options={["Day","Week","Month"]} /> · <Tabs items={…} /> · <FilterChips options={…} />

Six components. A screen never builds its own toggle.

Coming next

Still to build

One at a time, in this order. Each one: count what the app uses today, cut it down, one shared component, on the locked colours.

Tags, people, timeStatus tags, faces, the ring
Cards and the stageCards, the sky stage, facts
Lists and tablesRows, tables
CalendarAppointment blocks
NavigationSidebar, menus, tooltips
Dialogs and sheetsDialogs, drawers, phone sheets
Feedback, empty, loadingToasts, banners, empty states