Product Journey Product JourneyPrimary · horizontal — default for headers, sites, docs
Product JourneyBrand guidelines
The visual system for Product Journey — logo, color, type, and how they go together. One source of truth.
↓ Download full brand kit01
The mark
An isometric cube with a road cresting over it — the journey made literal. The gold wedge (top + left face) carries the brand’s warmth; the azure face and the road give it motion and depth.
On light On dark On indigoMonochrome
For single-color contexts — the footer, stamps, embossing, anywhere the full palette is too much. Charcoal on light, white on dark.
Charcoal
White02
Logo lockups
Three configurations. Use the primary horizontal lockup wherever space allows; the stacked lockup for merch and square formats; the horizontal-stack lockup where you want the wordmark compact beside the mark.
Product Journey Product Journey Product Journey Product JourneyStacked · mark-forward — merch, t-shirts, square / centered formats
Product Journey Product JourneyHorizontal stack · compact — mark left, wordmark stacked tight to its right
03
Social avatars
Square, solid-background marks for profile pictures — LinkedIn, GitHub, X. Indigo is the default; Night is the near-black alternate. Icon-only reads best at the small, often circle-cropped sizes these platforms use.
04
Color
Indigo leads, azure supports, gold accents. Charcoal carries text. Each brand color ships with a tint (for backgrounds) and a shade (for hovers / depth).
Primary #252056
Midnight Indigo
tint shade
Secondary #4C7AC9
Azure
tint shade
Accent #F4B740
Gold
tint shade
Text / ink #2A2A2A
Charcoal
tint shade
Paper #FAF8F5 Default page background
Surface #FFFFFF Cards, panels
Line #E7E5E1 Borders, dividers
Night #161325 Dark-mode background
05
Typography
Aa
ABCDEFGHIJKLM
abcdefghijklm 0123456789
abcdefghijklm 0123456789
Aa
ABCDEFGHIJKLM
abcdefghijklm 0123456789
abcdefghijklm 0123456789
Display / H1
Section heading / H2
Subheading / lead
Body copy in Inter. The quick brown fox jumps over the lazy dog while the road winds on toward whatever ships next. Clear, even color on the page at comfortable reading sizes.
06
Interface
The palette applied: buttons, links, and accents the way they appear in product.
Roadmap
From idea to launch
Every product has a journey. This is the map for yours, one decision at a time.
Beta
07
Usage
Do
- Keep clear space around the logo equal to the height of the mark’s top face.
- Use the mark in full color on light, dark, or the gold accent background.
- Lead with indigo; let gold be the accent, not the field.
- Pair Outfit for display with Inter for everything else.
Don’t
- Recolor the mark’s panels outside the brand palette.
- Stretch, rotate, or add effects (shadows, gradients) to the logo.
- Set the wordmark in a font other than Outfit 800 italic.
- Place the logo on a busy photo without a solid backing.
08
Download assets
SVG for print and infinite scaling; transparent PNG for quick drops. Use the indigo set on light backgrounds, the white set on dark. (Social avatars are in section 03.)
↓ Download full brand kit
