Logo
The mark is two shapes: a coral pin and a teal J. It always sits on its own badge. Switch the theme to see the dark version.
The rule
Section titled “The rule”| Badge | Size | Outlines |
|---|---|---|
| Rounded square | Large: app icon, website, hero spots | Yes, coloured outlines |
| Circle | Small: title pills, the app, the favicon | No |
| Light | Dark | |
|---|---|---|
| Pin | #F26C63 |
#F26C63 |
| J | #2C7A7B |
#639C9C |
| Badge | #E6F5F5, #184242 outline |
#101715, #639C9C outline |
Only the logo gets this badge; every other icon keeps its usual dark badge.
In use
Section titled “In use”Where it’s used
Section titled “Where it’s used”Small, in a circle: every title pill with the logo (“Create a new Jaunt”, Welcome, Edit Jaunt, invite cards), the trip page’s title pill, the “Jaunt created” activity row and the demo’s “Jaunt Demo” pills. Large, in a rounded square: the iPhone icon and the website.
Outlines: small and large
Section titled “Outlines: small and large”- Small (in the app, the favicon): each shape keeps an outline drawn in its own colour, so it keeps its thickness with no visible edge.
- Large, light (iPhone home-screen icon, the website): the outlines show, darker red
#9A3B33on the pin and dark green#184242on the J, on a mint rounded square. The iPhone home-screen icon is this design as a 180px PNG, the format iPhones require. - Large, dark: outlined shapes. A dark red pin (
#3D1814) with a coral outline (#F26C63), and a translucent dark J (#20302Cat 50%) with a light teal outline (#639C9C). Switch the theme to see it at the top of this page.
The favicon is jaunt-travel.io’s own file, so the app, the demo and the website match.
Not the logo
Section titled “Not the logo”The footer’s Jaunt button keeps the older one-colour mark, all white, because it works as a nav icon that lights up when selected.
Open item
Section titled “Open item”There’s no custom-lettered wordmark yet: “Jaunt” is set in the regular typeface (Manrope) wherever the name appears. Update this page once one exists.
Seven ways the mark breaks, each next to the correct version. Switch the theme to see them in dark mode.
1. Don't recolour it
The pin is always coral and the J always teal (light teal in dark mode). Never swapped, never a third colour.
2. Don't stretch, skew or rotate it
Proportions and angle are fixed. Resize the whole mark, never distort it.
3. Don't take the pin and the J apart
They're one mark. Don't resize, rearrange or use one shape without the other.
4. Don't add effects
No drop shadows, glows or gradients. The only outlines are the ones built into the mark.
5. Don't place it somewhere it disappears
On the teal pill itself the J all but vanishes. Always put the mark on its own badge.
6. Don't redraw it by hand
A hand-traced copy is never close enough. Always use src/assets/jaunt.svg.
7. Don't crowd it
Give it room: clear space of about a third of its size on every side. Text and icons shouldn't touch it.