Colour
Every colour on this page is read live from the app’s index.css. Each swatch
shows its light and dark value side by side.
How colour works in Jaunt
Section titled “How colour works in Jaunt”- Action coral: clickable, never decorative. Buttons, links, the logo’s pin, anything you can tap. If it isn’t doing something, it shouldn’t be this colour.
- Green and teal: structure, not status. Cards, borders, surfaces, chrome. The quiet colours that hold everything else together.
- Error, warning, success, info: status only. These four always pair with their own background (never mixed with another family) and always mean exactly what they say. Never reused for brand decoration.
- Option 1, 2, 3: labels, not judgements. For telling apart alternatives that are all equally valid (route A, B or C). Not a ranking, not a status.
Colour has two levels:
| Level | What it is | Example |
|---|---|---|
| Palette | The raw colours, grouped by hue | Green Light #E6F5F5 |
| Roles | The job a colour does | Info card background |
One palette colour can do several jobs. Pick by the job first, then use that job’s token.
Palette
Section titled “Palette”Action
Green & teal
Neutrals
Status colours
Every dark value here was hand-picked, not generated by inverting the light value with a formula.
Task categories
Dark values are brightened versions, chosen so each still reads clearly against the near-black page.
Option chips
Which token to use depends on the job and on what it sits on.
Backgrounds
Section titled “Backgrounds”Borders
Section titled “Borders”Dark mode: seven border tokens (card, avatar and selected item, ID card,
stat tiles, title pills, photo cards) all brighten to the same teal,
#639C9C. If you’re building a dark-mode card in Figma, this is almost
certainly the border colour to use.
Action
Section titled “Action”The palest three coral steps (Action 2, 3 and 4) are the calendar’s busy-day heat map. See the palette above.
Which colour a piece of text uses depends on what it’s sitting on, not on what kind of text it is. The same “Admin” label, or a count like “4 of 7 voted”, can use a different colour on a different card. Switch the theme to see each one change. Some colours repeat ones in the palette on purpose: this section is organised by where text sits, the palette by hue.
Primary / body text
#184242#e6f5f5The most common text colour in the app: the default body copy on every info-card surface (JauntForm sections, sign-in cards, VotersCard, dropdown items).
Numbers and stats
#FFFFFF (fixed)#FFFFFF (fixed)#184242#e6f5f5#7b4fbf#9a78ceThere is no single "numbers" colour; it follows the card or chip. Flight times, prices and temperatures on the dark hero and route cards stay White in both themes. Calendar day numbers and a count like "4 of 7 voted" on the Voters card use Info Text. A stay's price and rating use Option 1 / 2, inside their own chips.
⚠ A count like "4 of 7 voted" (Voters card) and "0 of 1 checked" (Docs card) are the same kind of message in different colours: Info Text on one, White on the other, because the cards differ. Correct for each card, just not one "counter" colour everywhere.
Secondary / caption text
#2c7a7b#7fa39f#d4e4e4#a6cecb#d4e4e4#d4e4e4Same job (a quiet line under a heading), three tokens depending on the card. Ink Faint on a plain info card (timestamps, "Admin" tags, "Select date"). Photocard Caption on a photo card (country under a city). Teal Light on a solid teal card (the same "Admin" tag, amenities under a stay).
⚠ The same "Admin" tag uses Ink Faint on VotersCard but Teal Light on the Docs checklist: driven by the card it sits on, not by what the label means.
Status text
#bf3226#f0a59d#2e7a44#7fc7a3#916627#e0b163#2f738d#7cc2ddChip text only ("Voted", "Not voted", "Quickest", the nudge-cooldown banner). Always with its own matching background and border; never plain paragraph text.
Category and option labels
#b2306f#e58ab6#2456c9#7fa0ee#1f7a52#5cc292#7b4fbf#9a78ce#ad5129#d5774e#0d7681#13aab9Chip text only. Admin, Adding and Voting label a task's category on "Your tasks". Option 1, 2 and 3 label which alternative a chip belongs to.
Link / clickable text
#f26c63#f26c63#9a3b33#9a3b33Jaunt is icon-button driven, not link driven: Action appears more as an icon colour (edit pencil, chevrons, close) than as inline links. As text: row actions ("Remove", "Re-invite") and the tertiary button. A primary button's label is White in light mode and Action Light (near-black) in dark.
Placeholder text
#184242 @ 50%#ffffff @ 50%A muted version of the field's own text colour, so a placeholder always reads as empty, never as a real value.
⚠ The plain Input field uses Green Dark at 50% instead of Field at 50%. Identical in light mode, but in dark mode its placeholder is a very dim dark green instead of soft white. Worth a small app fix.
Icon glyph text
#ffffff#e6f5f5#e6f5f5#e6f5f5Two jobs in the same title pill. Titlepill Icon FG colours the glyph in the round badge (white in light, pale mint in dark). Titlepill Text is the pill's label ("Where", "Price"), one of the few tokens identical in both themes.
Pairing rules
Section titled “Pairing rules”The default card
Status chips: each keeps its own fill, border and text
Option 1 + Option 2: the approved pair
- The default card. A green-light surface always pairs with its own border colour and its own body text. This trio is the single most-used combination in the app. Don’t swap in a border or text colour from another family.
- Status chips are sealed units. Error, warning, success and info always keep their own background, border and text together. Never mix, for example error text on a warning background.
- Purple and rust are an approved pair. Option 1 and Option 2 chips ship side by side on purpose (price and rating). Reuse that pairing for a similar “two small facts side by side” layout, rather than inventing a new one.
Dark mode
Section titled “Dark mode”Dark mode is designed, not generated. Each dark value was picked by eye, not made by inverting the light one.
| What | In dark mode |
|---|---|
| Info cards | Flip from a pale wash to near-black: a recessed dark pocket, not a lighter floating card |
| Borders | Seven border tokens brighten to one teal, #639C9C |
| Status, task and option colours | Brightened, each with its own dark fill |
| Primary button label | Near-black instead of white |
| Stays the same | Action coral, Teal Light, the title pill label, white numbers on hero and route cards |
| Shadow | A soft white glow instead of a black shadow (see Elevation) |
Do and don’t
Section titled “Do and don’t”Coral means tap me
Your trips
Use Action for things you can tap. Don't use it to decorate a heading or a card.
Status chips are sealed
Keep each status's own fill, border and text together. Don't mix families.
Keep the card trio together
An info card uses its own border and text colour. Don't swap in a colour from another family.