Colours of the app and the site
Loadbudget is Swiss red. The app and loadbudget.com follow the light or dark setting of the device. This page draws each colour of the app and the site, in light and in dark, on each background that it sits on.
You can change every colour on this page. The previews follow each change.
1. Action colour
Links and chevrons, the token link-red: Edit how ready you feel, Edit lifting answers, Daily feedback, and the chevron of each link row on the ledger. On Apple's screens: Language, Privacy policy, Export workouts and Save. On loadbudget.com: each link.
2. Destructive red
Buttons that delete something: Delete race on the race form, and Delete comment on a session.
Your red must stay red: a hue from 350° to 10°, and a saturation of 50% or more. Apple's four reds sit between 353° and 359°.
3. The palette
You can change every value. Point at a row to mark where its token appears in the previews.
icon-red (#E63022) stays on the icon tile. White text on it reaches 4.37 to 1, and text needs 4.5 to 1. So no colour of the app can be icon-red. A screen draws card-red instead.
| Token | Light | Dark | Use |
|---|---|---|---|
icon-red | | | The icon tile alone. No screen draws it. Changed |
ink | | | The last step of the icon, and the ground of the DEV and BETA bands. Changed |
white | | | Two steps of the icon, the text of a band, and text on the red card and on the dark card. Changed |
ground | | | The ground of the ledger and the Health primer, and of each page of loadbudget.com. Changed |
text | | | Text, and the ground of the Continue button. Changed |
card-red | | | The ground of the main card and of the header of the Health primer. On loadbudget.com, the card that holds the name on the landing page. Changed |
link-red | Links and chevrons. It is the action colour, so you pick it at Action. | ||
grey-text | | | Card labels and second lines. Changed |
dark-card | | | The ground of the dark card. Changed |
grey-on-dark-card | | | Labels on the dark card. Changed |
chart-band-on-dark-card | | | The aim band of a step in a chart on the dark card. Changed |
chart-over-on-dark-card | | | The line of a chart on the dark card above its aim band. Changed |
zone-low | | | Heart-rate zone 1, and the low end of the blend of zones 2 to 4. Changed |
zone-high | | | Heart-rate zone 5, and the high end of the blend of zones 2 to 4. Changed |
hairline | | | Card borders and row dividers. It is decoration, so no check reads it. Changed |
note | | | The ground of a note inside a card. Changed |
Where each token appears
The ledger, the Health primer, loadbudget.com and the icon draw these roles. Each role draws a token of the palette, so a change to the token changes the role. "Use this" changes the token.
Text
Screen titles, card titles, numbers, the name of each link row, and the text of a note, on the ledger and the Health primer. On loadbudget.com: headings, body text, and the text of the support and privacy cards.
Token text
on ground and note.
Grey text
Card labels such as How ready you feel, second lines, and the descriptions of the Health primer. On loadbudget.com: the date of the last change of a page, and the line under the title of the development index.
Token grey-text
on ground.
White text
The label, the title, the numbers, the steps and the Hide workout steps link of the main card. The title of the header of the Health primer. On loadbudget.com: the name and the words In development. on the landing page.
Token white
on red card.
White number
The load of Last seven days on the ledger. On loadbudget.com: no place yet.
Token white
on dark card.
Grey label
Last seven days, and the line under its number. On loadbudget.com: no place yet.
Token grey-on-dark-card
on dark card.
Zone 1
A heart-rate zone of a finished run: its part of the bar, and the square beside its row. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token zone-low
on list or form row.
Zone 2
A heart-rate zone of a finished run: its part of the bar, and the square beside its row. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
A mix of zone-low and zone-high, 25% of
the way to zone-high. Change either token to move it. It sits
on list or form row.
Zone 3
A heart-rate zone of a finished run: its part of the bar, and the square beside its row. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
A mix of zone-low and zone-high, 50% of
the way to zone-high. Change either token to move it. It sits
on list or form row.
Zone 4
A heart-rate zone of a finished run: its part of the bar, and the square beside its row. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
A mix of zone-low and zone-high, 75% of
the way to zone-high. Change either token to move it. It sits
on list or form row.
Zone 5
A heart-rate zone of a finished run: its part of the bar, and the square beside its row. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token zone-high
on list or form row.
Red line
The heart rate above the aim of its step, in the chart of a finished run. A line that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token chart-over-on-dark-card
on dark card and aim band.
Easier part
The part of an aim bar where a step of a finished run sat easier than its aim. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token grey-text
on list or form row.
In-aim part
The part of an aim bar where a step of a finished run sat in its aim. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token text
on list or form row.
Harder part
The part of an aim bar where a step of a finished run sat harder than its aim. A shape that is not text needs 3 to 1. On loadbudget.com: no place yet.
Token card-red
on list or form row.
Continue label
The label of the Continue button of the Health primer. The label draws in ground, on a button in text.
Token ground
on continue button.
White steps
The two white steps of the icon. A shape that is not text needs 3 to 1.
Token white
on icon tile.
Ink step
The last step of the icon. A shape that is not text needs 3 to 1.
Token ink
on icon tile.
4. Text of the screens with Apple's look
Session detail, Races, About and the journey screens keep Apple's look. You can change their text in each appearance.
Apple text
Main text on the screens that keep Apple's look: the titles and the fields of the race form, and About.
Apple secondary text
Quieter text on the screens that keep Apple's look: the footers of About, and the version number.
It starts see-through, so its colour on a screen depends on the background under it. Its field shows the colour on the page background. Nobody measured it in dark with Increase Contrast on. Where this grey fails, "Use this" puts a solid grey in its place.
5. Check
Text needs a contrast of 4.5 to 1 or more. A shape that is not text, such as a step of the icon, needs 3 to 1. The ratios follow WCAG 2.1, and each one shows two decimals.
Toolbar (Liquid Glass): Cannot be checked. Glass has no single colour, and Apple keeps text on glass legible: the label turns darker or lighter with the content behind it.
Apple's backgrounds come from iOS 27.0 screenshots. Nobody measured them in dark with Increase Contrast on, so the page uses the dark values there.
| Colour | Appearance | Ground The ledger and the Health primer, and an outline card on them. On loadbudget.com: each page, and the support and privacy cards. | Page A plain screen that keeps Apple's look | List or form row A row of About, of the race form, and of a session | Grouped page The page behind the rows of About and the race form | Toolbar (Liquid Glass) The Save button of the race form |
|---|
| Colour | Appearance | Ground The ledger and the Health primer, and an outline card on them. On loadbudget.com: each page, and the support and privacy cards. | Note A note inside a card, such as the note on sleep data in How ready you feel. On loadbudget.com: the note at the top of the privacy policy. | Red card The main card of the ledger, and the header of the Health primer. On loadbudget.com: the card that holds the name on the landing page. | Dark card Last seven days on the ledger, and the card at the top of a finished run. | Aim band The aim of a step in the heart-rate chart of a finished run. | Continue button The Continue button of the Health primer. It draws in text. | Icon tile The app icon, and the mark beside the name on loadbudget.com. | List or form row A row of About, of the race form, and of a session |
|---|
| Colour | Appearance | Page A plain screen that keeps Apple's look | List or form row A row of About, of the race form, and of a session | Grouped page The page behind the rows of About and the race form |
|---|
6. Send your colours
"Send to GitHub" opens a new issue on GitHub with your colours filled in. Sign in to GitHub, then choose "Create". Or download the file and attach it to your message. Or use your device share sheet. You can also copy the result into a message.
These buttons do not apply your colours to the installed app.
This is the result that the button copies:
Restore earlier colours
Paste an earlier result to restore its preview colours. A result from before the Swiss red identity loads too. This does not send a choice. Your installed app stays unchanged.