Design system
This is the source of truth for how Jaunt looks and sounds. Every example is
the real component from the app, styled by the app’s own index.css. If
it disagrees with a mockup somewhere, this is right.
Use the theme switch at the top right to see light and dark mode.
What Jaunt is
Section titled “What Jaunt is”Jaunt is where a friend group plans a trip together: voting on where to go, when to go and where to stay, then keeping documents, tickets and tasks in one shared place instead of scattered across a group chat.
The one rule above all the others
Section titled “The one rule above all the others”Colour, weight and shape all mean something in Jaunt. Nothing is decorative. Before adding a new colour or shadow, check whether an existing one already means what you’re trying to say. It almost always does.
How it’s organised
Section titled “How it’s organised”Three layers, the same way mature design systems (Atlassian, Shopify Polaris, IBM Carbon) organise theirs:
| Layer | What’s in it | The test |
|---|---|---|
| Foundations | The basic rules: colour, type, spacing, icons, motion, voice | Applies to everything |
| Components | Small pieces reused across many screens | Would another screen use it as it is? Yes |
| Patterns | Bigger pieces made for one job, built from components | It belongs to one job or area |
Every example is live, so each page changes when the app does.
Foundations
Section titled “Foundations”| Page | What’s in it |
|---|---|
| Logo | The mark, its two sizes, colours and what not to do |
| Colour | The palette, colours by job, pairing rules, dark mode |
| Typography | Manrope, the type scale and the weight rule |
| Spacing and radius | The four gaps and the two corner sizes |
| Elevation | The one shadow, and why only one |
| Motion | Every animation, live, with its timing |
| Voice and tone | How Jaunt talks, from real copy, including every “Are you sure?” message |
| Icons | Every icon, how they take their colour, and the weather icons |
| Layout | The one column every screen sits in, and its spacing |
Components
Section titled “Components”| Page | What’s in it |
|---|---|
| Buttons | Five button styles, icon buttons and action pills |
| Cards | Card styles, avatars, the ID card, the Welcome card, photo cards, placeholders |
| Carousels and lists | The two carousels, their dots, list views and swipe to delete |
| Chips | Status, option, poll, vote, nudged and alert chips |
| Feedback | Toasts, banners, the loading bar and error screens |
| Form fields | Text, pickers, dates, phone, notes, the cover photo picker and photo upload |
| Modals | The calendar, time, month range and note modals |
| Navigation | The footer pill in every state |
| Title pills | Title pills and page title pills |
| Toggles | On/off toggles, segmented toggles and the Dashboard switch |
Patterns
Section titled “Patterns”In the order you meet them in the app.
| Page | What’s in it |
|---|---|
| Signing in | Sign in, Sign up, Enter code, Finish Account, arriving from an invite |
| Home and Dashboard | Home’s sections, jaunt cards, invites, tasks, activity, voters and the edit header |
| Create a jaunt | The new-jaunt form and how its setup choice shapes it |
| Trip page | Who’s in it, the weather card, the voting deadline, your checklist, How and Docs & Tix sections |
| Polls: Where, When, Stay | Where places, Stay listings, the When calendar and the decided cards |
| Who | Members, invites, editing a member and Copy invite link |
| How (travel) | Way and mode switches, flight, train and taxi cards, TfL line chips, adding travel, How’s own fields |
| Docs & Tix | Document and ticket checklists, the completion meter and checklist pieces |
| Account and editing | Account settings, phone number, the Help & feedback page, editing and deleting a jaunt |
Tokens
Section titled “Tokens”Tokens: every raw value (colours, corners, shadows, text sizes), read straight from the app’s code.