Good Journey

Good Journey — Brand Guide

Version 2.0.0, 2026-10-03 — The Brand Wellness Manual (2025-08-07) rebuilt for the web, aligned with the live website goodjourneydonuts.com, with document layouts for business documents. Screen values follow the website; print builds follow the manual.

Distilled from

Contents

01	Identity
02	Assets
03	Voice
04	Colour
05	Typography
06	Iconography
07	Layout
08	Motion
09	Components
10	Documents
11	Hard rules

Identity

What the brand is

For people who want to enjoy the journey to good health, Good Journey offers unreasonably good, cheat-free donuts and cookies in a variety of popular flavors — made with real ingredients and a natural sweetener found in fruits and vegetables that tastes like cane sugar and is far better for you (pp. 6, 10, 11).

The emotion

Here’s where the journey gets sweet.

The tension

The Lover

passion · pleasure · indulgence · sensory · alluring

The Caregiver

compassion · nurturing · health · supportive · reassuring

Personality

Bold — confident, energetic, innovative (and not afraid to show it) (p.14)
Real — authentic, honest, transparent, earnest, plainspoken (p.14)
Healthy — healthy bodies, healthy minds, healthy attitudes (p.14)
Playful — fun, bright, positive vibes (p.14)
Primary archetype The Lover, secondary The Caregiver: delightful, health-conscious products that promote self-love and care for others (p.15)

It feels

Joyful
Indulgent
Caring
Honest
Bright
Energetic
Supportive
Unreasonably good

It never feels

Clinical or diet-food
Preachy about sugar
Guilt-tripping
Goofy-sweetener cheap
Protein-bar macho
Vague about ingredients

The customer

People on a journey to good health — from fitness lovers to people newly noticing they feel better eating cleaner — who are positive, energetic, open and always looking for ways to enhance their experience without compromising their lifestyle (p.19). Three types: the Expert (clean-eating, low price sensitivity, “This is legit. A no-brainer. Done.”), the Seeker (recently diagnosed, wants to do it right, “I’ve got this / They’ve got me”) and the Newbie (new to nutrition, wary of being duped, needs transparent, simple, supportive messages) (pp. 21–26).

Visual references

Bands alternating light and dark like the manual’s pages — cream, lilac and lime-wash against navy, violet and orange (pp. 2–56; website)
Hand-drawn doodles — rockets, stars, speech bubbles saying “yum!” and “HI!”, looping arrows (pp. 1, 14, 21–25)
Saturated product still life: packs, donuts and cookies on flat colour grounds that match the pack (pp. 4, 13, 45, 46, 54, 55)
Real-customer UGC collages (p.7)
Sticker cards and stickers with hard, unblurred offsets (p.30; website)

Signatures — the moves only this brand makes

The swooping R

The logotype's R kicks its leg into a wave under the N — the road of the journey. Never redrawn (pp. 28–33).

The sticker card

A cream card with a 4px navy keyline, 16px corners and a hard 0 6px 0 navy drop — no blur — that lifts 4px on hover. It frames every product, Instagram card and the comparison table’s featured column on the website (decision G-31).

The wave rule

A lime wavy line under every section label in the manual (pp. 19–55) — the road again, as a rule. A print and brand-book device; on the web the orange underline swash does its job (decision G-35).

The underline swash

A hand-drawn orange looped underline under one headline word — the website’s rule (decision G-35).

Colour-shift emphasis

A headline’s key phrase changes colour instead of weight: orange on cream at display size, lilac (or lime) on navy (website; decision G-36). The manual also uses periwinkle on cream — print only.

The highlighter

A flat lime block behind one phrase of a tagline (pp. 5, 17).

Stickers and doodles

Donut, cookie, smiley GOOD, “yum!”, “sweet”, “You’ll love” stickers and line doodles of rockets, stars and planets (pp. 1, 21–25, 30). On the web: the lime “You’ll love” starburst, the lime GOOD smiley seal across a band seam, navy hexagon claim badges, and doodles — “yum!”, “NEW!”, sparkles (decision G-35).

The elongated “goooood”

“Get the goooooooooood stuff!” (p.37), “IT’S GOOOOOOOOD TO SEE YOU!” (p.46) — the brand stretches its own name for joy.

Assets

Served from the live bundle

Every mark is content-addressed: the file behind it cannot change without changing its address, so what is printed here is exactly what the estate was serving on the day this document was made.

Good Journey stacked logotype

Logo · Locked

logo.primary

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	2048 × 749	Cream, 2048 px raster · inverse · on --gj-navy · email
inverse	inverse	dark	`svg`	1200 × 439	Cream on navy, sky or photography (p.29) · inverse · on --gj-navy · web
inverse	mono	dark	`svg`	1200 × 439	Single-ink white — production only (decision G-11) · mono · on #000000 · web
inverse	inverse	dark	`svg`	1200 × 431	Small-scale cut, cream (p.32) · inverse · on --gj-navy · web
mono	mono	light	`svg`	1200 × 439	Single-ink black — production only (decision G-11) · mono · on #FFFFFF · web
primary	lime	dark	`svg`	1200 × 439	Lime on navy — the cover (p.1) · lime · on --gj-navy · web
primary	one-color	light	`png`	2048 × 749	Navy on cream, 2048 px raster · one-color · on --gj-surface · email
primary	one-color	light	`svg`	1200 × 439	Navy on cream — the primary mark (pp. 28, 32) · one-color · on --gj-surface · web
primary	one-color	light	`svg`	1200 × 431	Small-scale cut, navy — below 200 × 200 px or 2 × 2 in (p.32) · one-color · on --gj-surface · web

Clear space — The height of the “O” in GOOD on every side (pp. 29, 39, 48) — 15.3% of the stacked logotype's width, 8.9% of the horizontal logotype's width.

Minimum width — Use the small-scale cut below 200 × 200 px on screen or 2 × 2 in in print (p.32). No absolute minimum is printed.

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Good Journey horizontal logotype

Logo · Locked

logo.horizontal

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	2048 × 209	Cream, 2048 px raster · inverse · on --gj-navy · email
inverse	inverse	dark	`svg`	1200 × 122	Cream on navy — the website header (p.36) · inverse · on --gj-navy · web
inverse	mono	dark	`svg`	1200 × 122	Single-ink white (decision G-11) · mono · on #000000 · web
inverse	inverse	dark	`svg`	1200 × 121	Small-scale cut, cream (p.33) · inverse · on --gj-navy · web
lockup	pink	dark	`svg`	1200 × 122	Pink on navy (p.29) · pink · on --gj-navy · web
lockup	one-color	light	`png`	2048 × 209	Navy, 2048 px raster · one-color · on --gj-surface · email
lockup	one-color	light	`svg`	1200 × 122	Navy on cream (p.33) · one-color · on --gj-surface · web
lockup	one-color	light	`svg`	1200 × 121	Small-scale cut, navy — below 100 × 300 px or 1 × 3 in (p.33) · one-color · on --gj-surface · web
mono	mono	light	`svg`	1200 × 122	Single-ink black (decision G-11) · mono · on #FFFFFF · web

Clear space — The height of the “O” in GOOD on every side (p.29) — 8.9% of the logotype's width.

Minimum width — Use the small-scale cut below 100 × 300 px on screen or 1 × 3 in in print (p.33).

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Gj monogram

Logo · Locked

logo.mark

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	1024 × 991	Cream, 1024 px raster · inverse · on --gj-navy · web
inverse	inverse	dark	`svg`	1024 × 991	Cream on sky (p.30) · inverse · on --gj-sky · web
inverse	mono	dark	`svg`	1024 × 991	Single-ink white (decision G-11) · mono · on #000000 · web
mark	one-color	light	`png`	1024 × 991	Navy, 1024 px raster · one-color · on --gj-surface · web
mark	one-color	light	`svg`	1024 × 991	Navy on cream (p.30) · one-color · on --gj-surface · web
mark	sky	light	`svg`	1024 × 991	Sky on lime (p.30) · sky · on --gj-lime · web
mark	orange	light	`svg`	1024 × 991	Orange on pink (p.30) · orange · on --gj-pink · web
mono	mono	light	`svg`	1024 × 991	Single-ink black (decision G-11) · mono · on #FFFFFF · web

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Gj seal

Logo · Locked

logo.seal

Role	Cut	Theme	Format	Size	As served
mark	full-color	any	`svg`	493 × 512	The scalloped seal from the manual's running header (pp. 28–37), as drawn · full-color · on --gj-navy · web

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

GOJO logotype

Logo · Locked

logo.gojo

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`svg`	1200 × 531	Cream on sky (p.30) · inverse · on --gj-sky · web
wordmark	pink	dark	`svg`	1200 × 531	Pink on navy (p.30) · pink · on --gj-navy · web
wordmark	one-color	light	`svg`	1200 × 531	Navy on cream (p.30) · one-color · on --gj-surface · web
wordmark	orange	light	`svg`	1200 × 531	Orange on pink (p.30) · orange · on --gj-pink · web
wordmark	sky	light	`svg`	1200 × 531	Sky on lime (p.30) · sky · on --gj-lime · web

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Good Journey Donuts lockups

Logo · Locked

logo.donuts

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`svg`	1200 × 697	Stacked, cream (p.39) · inverse · on --gj-navy · web
inverse	inverse	dark	`svg`	1200 × 294	Horizontal, cream (p.39) · inverse · on --gj-navy · web
lockup	lime-pill	dark	`svg`	149 × 73	Cream logotype, lime pill, navy DONUTS — on navy (website) · lime-pill · on --gj-navy · web
lockup	one-color	light	`svg`	1200 × 697	Stacked, navy (p.41) · one-color · on --gj-surface · web
lockup	one-color	light	`svg`	1200 × 294	Horizontal, navy (p.42) · one-color · on --gj-surface · web

Clear space — The height of the “O” in GOOD on every side (p.39).

Minimum width — Small-scale cuts below 200 × 200 px (stacked) or 100 × 300 px (horizontal) (pp. 41–42); only the large-scale cuts are extracted here.

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Good Journey Cookies lockups

Logo · Locked

logo.cookies

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`svg`	1200 × 663	Stacked, cream (p.48) · inverse · on --gj-navy · web
inverse	inverse	dark	`svg`	1200 × 291	Horizontal, cream (p.48) · inverse · on --gj-navy · web
lockup	one-color	light	`svg`	1200 × 663	Stacked, navy (p.50) · one-color · on --gj-surface · web
lockup	one-color	light	`svg`	1200 × 291	Horizontal, navy (p.51) · one-color · on --gj-surface · web

Clear space — The height of the “O” in GOOD on every side (p.48).

Minimum width — Small-scale cuts below 200 × 200 px (stacked) or 100 × 300 px (horizontal) (pp. 50–51); only the large-scale cuts are extracted here.

Never

Do not stretch the marks or make them illegible (p.31).
Do not use colours that are off-brand; use the approved palette (p.31).
Do not place over complex backgrounds or on backgrounds of insufficient contrast (p.31).
Do not use drop shadows or other unapproved graphic treatments (p.31).
Do not reconfigure the mark (p.31).
Do not rotate, tilt or skew the marks (p.31).

Sticker graphics

Image · Tunable

image.stickers

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	1200 × 1057	The sticker sheet (p.30), as drawn; the offset shadows are omitted · full-color · on --gj-surface · web

Never

Stickers are accents: one cluster per layout, never behind body copy.
Never recolour a sticker outside the palette.

Wave rule

Pattern · Tunable

pattern.wave

Role	Cut	Theme	Format	Size	As served
primary	one-color	any	`svg`	717 × 24	The manual’s wavy underline under every section label (pp. 2, 19–20, 29–55), lime — print and brand book · one-color · on --gj-surface · web

Underline swash

Pattern · Tunable

pattern.underline-swash

Role	Cut	Theme	Format	Size	As served
primary	one-color	any	`svg`	165 × 23	Orange looped underline under one headline word (website) · one-color · on --gj-surface · web

Never

Under one word per band, never a whole line.
Orange only; never recoloured.

Scallop divider

Pattern · Tunable

pattern.scallop-divider

Role	Cut	Theme	Format	Size	As served
primary	one-color	any	`svg`	416 × 52	Orange scalloped edge — horizontal (website promo band) · one-color · on --gj-orange-light · web
primary	one-color	any	`svg`	124 × 504	Orange scalloped edge — vertical (website promo split) · one-color · on --gj-orange-light · web

Never

Divides two orange fields; never a text underline.

“You’ll love” starburst

Image · Tunable

image.starburst

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	138 × 109	Lime starburst with navy “You’ll love” — beside a section title (website) · full-color · on --gj-surface · web

Never

Beside a title, never over it.
One per page.

GOOD smiley seal

Image · Tunable

image.smiley-seal

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	163 × 164	Lime seal, navy ring — across a band seam (website) · full-color · on --gj-surface · web
primary	full-color	dark	`svg`	55 × 55	Cream seal, navy ring — on navy and photography (website) · full-color · on --gj-navy · web

Never

Across a seam or a corner; never over text.
Never in legal documents.

Hexagon claim badges

Image · Tunable

image.claim-badges

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	115 × 128	Navy hexagon — 0g* added sugar (website) · full-color · on --gj-orange · web
primary	full-color	any	`svg`	114 × 128	Navy hexagon — 1g* net carbs (website) · full-color · on --gj-orange · web
primary	full-color	any	`svg`	115 × 127	Navy hexagon — gluten free (website) · full-color · on --gj-orange · web

Never

A row of three at most.
The claims must match the current pack, asterisk and footnote included; in business and legal documents they need owner and legal sign-off.

Website doodles

Image · Tunable

image.doodles

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	206 × 145	“yum!” speech bubble (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	89 × 89	“NEW!” with an arrow — cream, on orange (website) · full-color · on --gj-orange · web
primary	full-color	any	`svg`	112 × 91	Lime sparkle ticks (website) · full-color · on --gj-violet · web
primary	full-color	any	`svg`	225 × 87	Smiling donut face (website) · full-color · on --gj-surface · web

Never

Decoration only: at most one per band, at an edge, never under text.
Never in legal documents.

Benefit icons

Icon · Tunable

icon.benefits

Role	Cut	Theme	Format	Size	As served
primary	full-color	any	`svg`	66 × 66	No added sugar — duotone (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	66 × 66	Gluten free — duotone (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	57 × 66	Net carbs — lime figure (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	57 × 48	Natural ingredients — lime sprout (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	66 × 42	Taste — lime steam (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	66 × 68	Donut with a check (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	56 × 56	Zero sugar — orange slashed ring (website) · full-color · on --gj-surface · web
primary	full-color	any	`svg`	56 × 56	No wheat — orange slashed ring (website) · full-color · on --gj-surface · web

Never

Each icon carries its word; the claim matches the pack.
Never mixed with operator (Lucide) icons.

Good Journey app icon

App icon · Locked

appicon.pwa

Drawn as the device draws it: iOS applies its own squircle to a solid plate, a launcher may crop the maskable cut to any shape, and a tab strip gets sixteen pixels.

On a light ground

Good Journey aiOS home screen · 180 × 180

Good Journey aAndroid launcher · 512 × 512

Good Journey a

Browser tab · 16 and 32 Good Journey

Good Journey aWindows tile · 150 × 150

On a dark ground

Good Journey aiOS home screen · 180 × 180

Good Journey aAndroid launcher · 512 × 512

Good Journey a

Browser tab · 16 and 32 Good Journey

Good Journey aWindows tile · 150 × 150

One colour — black, on light Good Journey

One colour — white, on dark

Size ladder

Platform	Purpose	Size	Format	Colourway	As served
pwa	any	512 × 512	`png`	full-color	PWA 512 (any)
pwa	maskable	512 × 512	`png`	full-color	PWA 512 (maskable)
pwa	monochrome	512 × 512	`png`	mono	PWA 512 (monochrome)
pwa	any	192 × 192	`png`	full-color	PWA 192 (any)
pwa	maskable	192 × 192	`png`	full-color	PWA 192 (maskable)
ios	any	1024 × 1024	`png`	full-color	App Store 1024
ios	any	180 × 180	`png`	full-color	iOS 180 (apple-touch-icon)
ios	any	167 × 167	`png`	full-color	iPad Pro 167
ios	any	152 × 152	`png`	full-color	iPad 152
ios	any	120 × 120	`png`	full-color	iPhone 120
macos	any	1024 × 1024	`png`	full-color	macOS 1024 (rounded tile; not the Apple template squircle)
windows	any	150 × 150	`png`	full-color	Windows tile 150
web	any	1024 × 1024	`svg`	full-color	Master (vector) — navy Gj on full-bleed lime
web	any	1024 × 1024	`svg`	full-color	Rounded tile (vector)
web	any	512 × 512	`png`	mono	One-colour black
web	any	512 × 512	`png`	inverse	One-colour white
web	any	512 × 512	`svg`	mono	One-colour black (vector)
web	any	512 × 512	`svg`	inverse	One-colour white (vector)
web	any	48 × 48	`ico`	full-color	favicon.ico (16/32/48)
web	any	48 × 48	`png`	full-color	Favicon 48
web	any	32 × 32	`png`	full-color	Favicon 32
web	any	16 × 16	`png`	full-color	Favicon 16

Never

Never redraw the Gj: every cut is the p.30 monogram, scaled.
Never place the icon tile on lime without a rule — it disappears.

Social share card

Share image · Tunable

og.social

Role	Cut	Theme	Format	Size	As served
og	—	any	`png`	1200 × 630	og:image 1200 × 630 — lime stacked logotype and the tagline on navy (decision G-10) · social

Barlow Condensed SemiBold

Font · Locked

font.headline

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed SemiBold 600 — buttons, card titles, subtitles (website); the manual’s headlines · web

Licence — The Barlow Project Authors · SIL Open Font License 1.1 (Google Fonts release, Fontsource 5.3.0 latin subset); OS/2 fsType 0. Free to use, embed and redistribute with the licence. · redistributable yes

Barlow Condensed Bold

Font · Locked

font.label

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed Bold 700 — labels, eyebrows, footer headings (website) · web

Barlow Condensed Black

Font · Locked

font.display

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed Black 900 — the open stand-in for Obviously Narrow Black (decision G-49) · web

Barlow Black

Font · Locked

font.title

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Black 900 — section titles · web

Barlow SemiBold

Font · Locked

font.price

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow SemiBold 600 — prices, navigation, claim badges (website) · web

Poppins

Font · Locked

font.sans

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Poppins Regular 400 — the website text face (p.35) · web

Licence — The Poppins Project Authors · SIL Open Font License 1.1 (Google Fonts release, Fontsource 5.3.0 latin subset); OS/2 fsType 0. Free to use, embed and redistribute with the licence. · redistributable yes

Poppins Medium

Font · Locked

font.sans-medium

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Poppins Medium 500 — lead paragraphs, footer links (website) · web

Poppins Bold

Font · Locked

font.sans-bold

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Poppins Bold 700 · web

Voice

How the brand speaks

Principles

Lead with delight, then reassure: taste first (“Highly delicious? Also yes.”), then the honest reason it is better for you (p.16).
Plainspoken and transparent: real ingredients, clear labels, no hidden anything — the Newbie and the Seeker are afraid of being duped (pp. 23–26).
Playful with a wink: GASP!, yikes, “goofy sweeteners”, stretched “goooood” (pp. 6, 9, 37, 46).
Supportive, never preachy: good health is a journey; treats are part of it, not a detour (p.16). Be kind to yourself (pp. 55, 56).
Favour: unreasonably good · cheat-free · real ingredients · natural sweetener · journey · sweet · treats · goodies · zero added sugar · low-carb · tasty vibes.
Avoid: guilt language, diet-culture shame, medical promises, and any health or nutrition claim the pack does not carry.
Speak as “we” to “you”; the founders sign as Helen & Kristoffer (p.46).

Microcopy, as shipped

Context	What it says
Brand line (pp. 1, 16, 55)	Here’s where the journey gets sweet.
Brand line (p.16)	Good health is a journey. Now treats don’t have to be a detour.
Brand line (p.16)	Low-carb? Yes. Highly delicious? Also yes.
Brand line (p.16)	Your sweet retreat.
Brand line (p.17)	Sometimes you gotta stop and eat the donuts.
Brand line (p.17)	It’s not the destination. It’s the Good Journey treats that matter.
Why (p.9)	Good health is a journey. We’re bringing the treats.
What (p.11)	We’re Good Journey. We make unreasonably good cheat-free donuts and cookies that make healthy eating fun.
Purpose + vision (p.5)	Be Earth’s most human-centric company, providing delicious, high-quality, and guilt-free foods that empower people to be happy and healthy. By 2035, we’ve empowered a billion people to be happy and healthy.
Website announcement rail (p.36)	Shop zero added sugar donuts and cookies with free shipping!
Website hero (p.36)	THE DONUTS YOU THOUGHT YOU COULDN’T HAVE AGAIN
Website hero body (p.36)	Tired of missing out because of blood sugar concerns, gluten sensitivity, or keto requirements? We get it. That’s why we created soft, perfectly sweet donuts that work with your body, not against it.
Website section (p.36)	REAL DONUT TASTE, ZERO REGRETS
Primary CTA (p.36)	SHOP NOW
Navigation (p.36)	Shop · About · Sign In
Trade show (p.37)	HIGH FIBER • KETO • NON GMO
Trade show (p.37)	Get the goooooooooood stuff!
Donut pack (p.4)	TASTY VIBES ONLY!
Donut pack flavour line (pp. 4, 38)	CHA·CHA — Horchata frosted cake donut · Gluten-Free · Keto · Delicious!
Mailer insert (p.46)	IT’S GOOOOOOOOD TO SEE YOU!
Cookie carton (p.55)	Be kind to yourself — have a cookie! We are committed to bringing you only the best products made with ingredients that make your body and mind happy.
Pack badges (p.55)	0g ADDED SUGAR · 1g NET CARBS · GLUTEN FREE
Support line (p.55)	QUESTIONS? EMAIL HELLO@GOODJOURNEYFOODS.COM
Closing (p.56)	Thank you and be kind to yourself.
Website marquee band	WARNING: MAY CAUSE HAPPINESS
Website footer newsletter	Sign up for sweet surprises
Website hero	Real donuts. Zero sugar crash.

Capitalization

The brand is GOOD JOURNEY in the logotype and Good Journey in copy; the ® accompanies the logotype (pp. 32–33), not running text. GOJO is a separate logotype (p.30).
Headlines, labels and buttons are uppercase; taglines and body copy are sentence case.
Flavour names are set as artwork: CHA·CHA, CHOC·A·LOT, COSMIC CHURRO — with the interpunct.
Never uppercase a customer's name, an email address or a data value in the operator register.

Colour

The palette, as declared

Every value is documented in every mode the brand declares. Each swatch is painted over its own surface’s ground, so an alpha value prints as what it is rather than as a flat tint.

Cream page

The manual's light page and the website body: a cream ground, navy ink, lime highlights, an orange signal used as a fill. Every palette and flavour colour is declared here, with its print build.

Cream page declared at :root

Parent palette (p.34)

Token	Role	Cream page
`--gj-navy`	The brand ink: the wordmark, headlines, body copy, the navy blocks Palette p.34: WEB HEX 312E7C / RGB 49, 46, 124. The book draws it in the same RGB on every page. The single most-used colour in the manual. In ink — Pantone 669 C · CMYK 92, 97, 29, 19 · p.34 and p.52. p.43 prints this hex beside CMYK 43, 58, 0, 60 under a PINK swatch — see drift.	`#312E7C`
`--gj-violet`	Secondary brand colour — a cooler, lighter navy Palette p.34 / p.52: WEB HEX 5D59C4 / RGB 93, 89, 196. In ink — Pantone 7670 C · CMYK 78, 78, 9, 1	`#5D59C4`
`--gj-orange`	The signal colour: primary pills, emphasis at display size, stickers, the promo band Palette p.34 / p.43 / p.52: WEB HEX F15627 / RGB 241, 86, 39. 3.34:1 under cream — it carries cream text only at large size (≥ 24px, or ≥ 18.66px bold): button labels, display headlines, big numbers. Small orange text uses --gj-accent-ink #C5380D (decisions G-3, G-29). In ink — Pantone 1585 C or 1655 U · CMYK 0, 82, 96, 0	`#F15627`
`--gj-sky`	Sky blue — the Dark Chocolate pack, the website announcement rail Palette p.34 / p.43: WEB HEX 5DAFF4 / RGB 93, 175, 244. A ground for navy text only (4.91:1); never cream or white text on sky (2.29:1). In ink — Pantone 284 U · CMYK 60, 26, 0, 0	`#5DAFF4`
`--gj-lime`	Lime — secondary pills, the DONUTS pill, the starburst and smiley seal, accents on navy Palette p.34 / p.43: WEB HEX E9E72F / RGB 233, 231, 47 — confirmed by the live website, which uses #E9E72F exactly (secondary pills, the DONUTS pill, the starburst and smiley seal; decision G-18). The manual’s own pages paint lime from CMYK 16, 0, 76, 0 (#DEE463 on screen) — print drift, never a screen value. In ink — Pantone 394 C or 388 U · CMYK 20, 0, 100, 0	`#E9E72F`
`--gj-pink`	Pink — the Horchata pack and sticker grounds Palette p.34: WEB HEX FFD0E5 / RGB 255, 208, 229. In ink — Pantone 203 U · CMYK 0, 37, 0, 0	`#FFD0E5`
`--gj-lavender`	Lavender — persona panels, quote cards, the small-scale table cells Palette p.34: WEB HEX D3D3EB / RGB 211, 211, 235. A print and pack colour; the website’s light violet is lilac #DED9FF. In ink — Pantone 7443 C · CMYK 10, 10, 0, 8	`#D3D3EB`
`--gj-lime-tint`	Pale lime — persona panels, quote cards, the large-scale table cells Palette p.34: WEB HEX F1F2C4 / RGB 241, 242, 196. A print and pack colour; the website’s pale-lime panel is lime-wash #F0F6D3. In ink — Pantone 0131 C · CMYK 0, 0, 19, 5	`#F1F2C4`
`--gj-cream`	Cream — the screen page, card grounds, labels on navy and orange Screen cream #FFFBF7 is the live website’s cream: every custom section ground, every button label and the fill of every logo file on goodjourneydonuts.com (decision G-17). The manual prints WEB HEX FFF5EC beside RGB 255, 248, 239 (#FFF8EF) on pp. 34 and 43; #FFF8EF stays as the print RGB and CMYK 0, 3, 6, 0 / PMS 9226 U as the print build. In ink — Pantone 9226 U · CMYK 0, 3, 6, 0 · Print RGB 255, 248, 239 (#FFF8EF), p.34. Screens use #FFFBF7 (decision G-17).	`#FFFBF7`
`--gj-white`	White Palette p.34: WEB HEX FFFFFF. In ink — Pantone WHITE INK · CMYK 0, 0, 0, 0	`#FFFFFF`

Donuts flavour palettes (p.43)

Token	Role	Cream page
`--gj-denim`	Donuts · Dark Chocolate flavour — the deeper blue p.43: WEB HEX 63A1D6 / RGB 99, 161, 214. Dark Chocolate = sky, lime, denim, chocolate, cream. In ink — Pantone 2143 U · CMYK 70, 30, 0, 15	`#63A1D6`
`--gj-chocolate`	Donuts · Dark Chocolate flavour — chocolate brown p.43: WEB HEX 543A34 / RGB 84, 58, 52. In ink — Pantone 7582 U · CMYK 50, 67, 67, 50	`#543A34`
`--gj-brick`	Donuts · Horchata flavour — brick red p.43: WEB HEX D34D2A / RGB 211, 77, 42. Horchata = orange, pink, brick, peach, cream. In ink — Pantone 2347 U · CMYK 15, 85, 100, 0	`#D34D2A`
`--gj-peach`	Donuts · Horchata flavour — peach p.43: WEB HEX FED09E / RGB 254, 208, 158. In ink — Pantone 4029 U · CMYK 0, 20, 40, 0	`#FED09E`

Cookies flavour palette (p.52)

Token	Role	Cream page
`--gj-marigold`	Cookies · Churro flavour — marigold p.52: WEB HEX FDB515 / RGB 253, 181, 21. Churro = navy, violet, orange, marigold, tangerine, butter, periwinkle grey. In ink — Pantone 143 C · CMYK 0, 32, 100, 0	`#FDB515`
`--gj-tangerine`	Cookies · Churro flavour — tangerine p.52: WEB HEX F47522 / RGB 244, 117, 34. In ink — Pantone 158 C · CMYK 0, 52, 86, 4	`#F47522`
`--gj-butter`	Cookies · Churro flavour — butter p.52: WEB HEX FFDD98 / RGB 255, 221, 152. In ink — Pantone 1205 C · CMYK 0, 13, 40, 0	`#FFDD98`
`--gj-periwinkle-grey`	Cookies · Churro flavour — periwinkle grey p.52: WEB HEX 8A8BC4 / RGB 138, 139, 196. In ink — Pantone 7446 C · CMYK 30, 29, 0, 23	`#8A8BC4`

Colours the manual draws but does not list

Token	Role	Cream page
`--gj-periwinkle`	The manual’s periwinkle — print and brand-book only; never on screen Observed in the manual’s layout (pp. 2, 14, 18, 20, 27, 38–46, 56) as RGB 120, 120, 250; on no palette page and used nowhere on the live website (decision G-19). On screen its jobs go to violet #5D59C4 (bands) and lilac #DED9FF (light bands, emphasis on navy). Cream on it is 3.40:1 — large type only.	`#7878FA`
`--gj-violet-ink`	The book's violet text colour Observed as running text and table headers (pp. 8, 12, 15, 32–33, 41–42, 50–51) as RGB 83, 81, 189; not on a palette page (decision G-4). 6.08:1 on cream.	`#5351BD`
`--gj-ink-soft`	The book's soft body ink — persona copy Observed as the persona body copy (pp. 22, 24, 26) as RGB 100, 100, 145; not on a palette page (decision G-4). 5.28:1 on cream.	`#646491`
`--gj-navy-deep`	The book's deep navy — gradient shadows on navy pages Observed in the navy gradients (pp. 1, 11, 16, 19, 35, 44, 53) as RGB 24, 23, 82; not on a palette page (decision G-4).	`#181752`

Website colours (goodjourneydonuts.com)

Token	Role	Cream page
`--gj-lilac`	Lilac — light band ground (reviews), comparison header cells and keylines, emphasis on navy The website’s light violet (13 CSS rules: the review band, comparison heads, cell rules, “REAL DONUTS. ZERO REGRETS” emphasis). Navy on lilac 8.54:1; lilac on navy 8.54:1. Never orange text on lilac (2.54:1) (decision G-20).	`#DED9FF`
`--gj-lime-wash`	Lime-wash — the pale-lime panel (creators split) and ingredient circles The website’s pale lime; navy on it 10.39:1. Distinct from the palette’s pale lime #F1F2C4, which the site does not use (decision G-21).	`#F0F6D3`
`--gj-orange-light`	The promo band’s second orange — a FILL beside --gj-orange behind a scalloped edge The website’s promo split (70/30 hard stop). Fill only; never text (decision G-22).	`#F78650`
`--gj-pink-rule`	Pink rule — the 2px divider between FAQ rows Decorative only: 1.90:1 on cream, never text. Candidate for the Horchata pink (G-13 still open) (decision G-22).	`#F3A1C4`

Grounds

Token	Role	Cream page
`--gj-surface`	The page — cream The website’s cream #FFFBF7 on every custom section (decision G-17).	`#FFFBF7`
`--gj-surface-raised`	Cards on the page — cream, framed by the navy keyline The website’s product, Instagram and review cards are cream with a 4px navy border and a hard navy drop, not white (decision G-31).	`#FFFBF7`
`--gj-surface-tint`	Lime-wash band — the pale-lime panel The website’s creators panel (decision G-21). Navy 10.39:1, violet 5.10:1.	`#F0F6D3`
`--gj-surface-soft`	Lilac band — reviews, quote cards The website’s review band (decision G-20). Navy only on this ground: violet is 4.19:1 and orange 2.54:1.	`#DED9FF`

Ink

Token	Role	Cream page
`--gj-ink`	Body copy, headlines, the wordmark Navy on cream 10.99:1.	`#312E7C`
`--gj-ink-muted`	Secondary copy, captions, persona body The manual’s soft ink (pp. 22, 24, 26): 5.40 / 5.56 / 4.99 on cream / white / lime-wash. Not a website colour; captions only.	`#646491`
`--gj-ink-secondary`	Secondary text — the violet copy (FAQ, inputs, option pills) The website’s secondary text ink is palette violet: 5.52:1 on cream, 5.69:1 on white, 5.10:1 on lime-wash (decision G-46).	`#5D59C4`
`--gj-on-ink`	Ink on a navy fill	`#FFFBF7`

Accent and action

Token	Role	Cream page
`--gj-accent`	The signal FILL — stickers, badges, display-size emphasis Cream on it is 3.34:1 — large text only (≥ 24px, or ≥ 18.66px bold) (decisions G-3, G-29).	`#F15627`
`--gj-accent-ink`	Orange as small text — prices, ratings, review links, labels below 24px Accessible orange for SMALL text: hue 13.96° and saturation 0.88 held, lightness lowered to 5.17 / 5.32 / 4.77:1 on cream / white / lime-wash (decisions G-3, G-29).	`#C5380D`
`--gj-action`	The primary pill — orange, with a LARGE cream label The website’s primary pill: #F15627 with a cream Barlow Condensed SemiBold label at 28.8px desktop / 24px mobile — 3.34:1, AA for large text. A label below 24px (18.66px bold) puts the pill on --gj-action-small (decision G-29).	`#F15627`
`--gj-action-hover`	The primary pill at hover — navy The website turns the pill navy on hover (11.25:1 under cream) (decision G-29).	`#312E7C`
`--gj-action-small`	An orange action whose label is below 24px Cream label 5.17:1. Use only when the label cannot be large (decision G-29).	`#C5380D`
`--gj-on-action`	Label on the primary button	`#FFFBF7`
`--gj-highlight`	The highlighter — lime behind a phrase pp. 5, 17: a lime block behind navy text.	`#E9E72F`
`--gj-on-highlight`	Text on the highlighter 8.79:1.	`#312E7C`
`--gj-link`	A link at rest — navy, underlined	`#312E7C`
`--gj-link-hover`	A link at hover and focus Violet, the website’s secondary ink (5.52:1) (decision G-46).	`#5D59C4`
`--gj-focus-ring`	The focus outline	`#5D59C4`
`--gj-emphasis`	Colour-shift emphasis inside a display headline Orange on cream at display size only (3.34:1, AA large) — “WHY IS GOOD JOURNEY BETTER?”. Never on lilac (2.54:1) (decision G-36).	`#F15627`

Lines and fills

Token	Role	Cream page
`--gj-border`	The default hairline	`rgba(49, 46, 124, 0.16)`
`--gj-border-strong`	The 2px navy rule — tables, cards, boxes The sizing tables (pp. 32–33, 41–42, 50–51) and the archetype table (p.15) are boxed in a 2px navy rule.	`#312E7C`
`--gj-hairline`	A soft rule	`#D3D3EB`
`--gj-fill-soft`	A navy wash — empty states, chips	`rgba(49, 46, 124, 0.06)`

Status

Token	Role	Cream page
`--gj-positive`	Success as text and rule	`#1E7A46`
`--gj-warning`	Warning as text and rule	`#8F6301`
`--gj-negative`	Error as text and rule	`#BB4425`
`--gj-info`	Information as text and rule	`#0D6DBE`

Shape and elevation

Token	Role	Cream page
`--gj-radius-card`	Cards — product, review, Instagram The website’s card corner (1rem). The manual’s quote card is 20px; that value moves to --gj-radius-lg (decision G-33).	`16px`
`--gj-radius-sm`	Inputs, chips pp. 22, 24, 26: the persona info box corner.	`10px`
`--gj-radius-media`	Photographs inside cards The website’s review media (decision G-33).	`12px`
`--gj-radius-frame`	A framed photograph — cream 4px border The website’s about-page frame (decision G-33).	`14px`
`--gj-radius-lg`	Galleries and the comparison table’s rounded ends The site’s largest radius; the 20px max rule stands (decision G-33).	`20px`
`--gj-radius-pill`	Buttons and the sign-in control p.36: SHOP NOW and Sign In are full pills.	`999px`
`--gj-shadow-sticker`	The sticker offset — a hard shadow p.30: every sticker sits on a 50% #231F20 offset shadow. Stickers only — never the logo (p.31).	`3px 3px 0 rgba(35, 31, 32, 0.5)`
`--gj-shadow-lift`	A lifted card	`0 12px 32px -20px rgba(49, 46, 124, 0.45)`
`--gj-shadow-offset`	The sticker-card drop — a hard navy offset, no blur The website’s signature elevation: product cards, Instagram cards, the gallery, the comparison table’s featured column (decision G-32).	`0 6px 0 #312E7C`
`--gj-shadow-offset-hover`	The sticker card lifted (with translateY(-4px)) Hover state, 150ms (decision G-32).	`0 10px 0 #312E7C`
`--gj-shadow-offset-sm`	Small controls — cart thumbnails, quantity steppers Decision G-32.	`0 3px 0 #312E7C`
`--gj-shadow-soft`	Review cards on the lilac band — the only soft shadow The site uses 0 10px 24px rgba(0,0,0,.04); the guide keeps the same geometry in a navy-hued alpha — the brand has no neutral grey (decision G-32).	`0 10px 24px rgba(49, 46, 124, 0.06)`

Type roles (root-scoped)

Token	Role	Cream page
`--font-display`	Section titles and H1s — display caps Section titles and H1s on the website: Obviously Narrow Black, uppercase, tracked +2px at 56px. Obviously is an OH no Type face that needs a purchased licence and is never bundled here; the bundled Barlow Condensed Black is the measured open stand-in (decisions G-25, G-26, G-49).	`"Obviously Narrow", obviously-narrow, "Barlow Condensed Black", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-title`	Wide, heavy titles Wide titles on the website (comparison, review headline, footer menu): Obviously Black, normal width. Licensed face, never bundled; the manual’s Barlow Black stands in (decisions G-25, G-26).	`"Obviously Black", Obviously, obviously, "Barlow Black", "Arial Black", sans-serif`
`--font-headline`	Buttons, card titles, subtitles; the manual’s statements Barlow Condensed SemiBold — the website’s buttons, card titles, band subtitles and benefit labels; the manual’s statements and page headings (decision G-25).	`"Barlow Condensed SemiBold", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-label`	Labels and eyebrows — tracked caps Barlow Condensed Bold — the website’s labels, eyebrows, footer headings, review titles and FAQ questions: uppercase, +0.04em (decision G-28).	`"Barlow Condensed Bold", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-price`	Prices, navigation, claim badges Barlow SemiBold — the website’s navigation, prices and claim badges, tracked 1.2px at 20px. Bundled (decision G-25).	`"Barlow SemiBold", Barlow, "Arial Narrow", sans-serif`
`--font-sans`	Body copy, forms, operator UI p.35 names Poppins (Google Fonts) as the website text face; the website sets body copy in Poppins 400 16px / 1.6. Bundled.	`Poppins, "Helvetica Neue", Arial, sans-serif`
`--font-sans-medium`	Lead paragraphs, footer links Poppins Medium — the website’s lead paragraphs (24px / 1.2), footer links and review links. Bundled (decision G-25).	`"Poppins Medium", Poppins, "Helvetica Neue", Arial, sans-serif`
`--font-sans-bold`	Poppins at 700 — inline emphasis in operator UI and documents One weightless @font-face per bundled cut, so the bold cut is its own family name (the Wine Chips precedent).	`"Poppins Bold", Poppins, "Helvetica Neue", Arial, sans-serif`
`--font-prose`	Brand-book body face Bicyclette sets every body line in the manual. It is a licensed face, never bundled — Poppins renders until a proper licence and files exist (decisions G-7, G-26).	`Bicyclette, bicyclette, Poppins, "Helvetica Neue", Arial, sans-serif`
`--font-marquee`	The marquee band The website’s marquee band only (“WARNING: MAY CAUSE HAPPINESS”): Bicyclette Black at 128px. Licensed face, never bundled; Barlow Black stands in (decisions G-25, G-26).	`"Bicyclette Black", bicyclette, "Barlow Black", "Arial Black", sans-serif`
`--font-script`	Script accent — artwork only alkaline (Adobe Fonts, pp. 35, 44, 53). Not bundled; reserved for artwork, stickers and packaging (decision G-7).	`alkaline, "Brush Script MT", cursive`

Navy block

The manual's navy pages (pp. 3, 6, 11, 16, 19, 35, 44, 53) and the website header: navy ground, cream ink, lime as the accent. This is the brand's dark ground.

Navy block declared at .gj-on-navy
Inherits from marketing

Grounds

Token	Role	Navy block
`--gj-surface`	The navy block	`#312E7C`
`--gj-surface-raised`	A card on navy — recessed	`#26236B`
`--gj-surface-tint`	The deep band The manual’s navy gradient shadow; a print and brand-book ground.	`#181752`
`--gj-surface-soft`	A soft band on navy	`#2A2774`

Ink

Token	Role	Navy block
`--gj-ink`	Copy on navy 11.25:1 — the website’s nav, footer and statements on navy.	`#FFFBF7`
`--gj-ink-muted`	Secondary copy on navy 7.88:1.	`#D3D3EB`
`--gj-ink-secondary`	Supporting text on navy	`#F0F6D3`
`--gj-on-ink`	Ink on a cream fill	`#312E7C`

Accent and action

Token	Role	Navy block
`--gj-accent`	The signal on navy The signal on navy: lime (8.79:1). Colour-shift emphasis on navy is lilac (--gj-emphasis) (decision G-36).	`#E9E72F`
`--gj-accent-ink`	Signal text on navy	`#E9E72F`
`--gj-action`	The primary button on navy A lime pill with a navy label (8.79:1) — the website’s secondary pill (decisions G-5, G-30).	`#E9E72F`
`--gj-action-hover`	The button at hover on navy The pill turns cream on hover; navy label 11.25:1.	`#FFFBF7`
`--gj-action-small`	A small-label action on navy Lime, navy label 8.79:1 (decision G-29).	`#E9E72F`
`--gj-on-action`	Label on the lime button	`#312E7C`
`--gj-highlight`	The highlighter on navy	`#E9E72F`
`--gj-on-highlight`	Text on the highlighter	`#312E7C`
`--gj-link`	A link on navy	`#E9E72F`
`--gj-link-hover`	A link at hover on navy	`#DED9FF`
`--gj-focus-ring`	Focus outline on navy	`#E9E72F`
`--gj-emphasis`	Colour-shift emphasis on navy Lilac on navy 8.54:1 — “REAL DONUTS. ZERO REGRETS” (decision G-36). Lime is allowed.	`#DED9FF`

Lines and fills

Token	Role	Navy block
`--gj-border`	Hairline on navy	`rgba(255, 251, 247, 0.18)`
`--gj-border-strong`	Strong rule on navy	`#FFFBF7`
`--gj-hairline`	Soft rule on navy	`rgba(255, 251, 247, 0.12)`
`--gj-fill-soft`	A cream wash on navy	`rgba(255, 251, 247, 0.08)`

Status

Token	Role	Navy block
`--gj-positive`	Success on navy	`#7BD4A4`
`--gj-warning`	Warning on navy	`#FDB515`
`--gj-negative`	Error on navy	`#F58461`
`--gj-info`	Information on navy 4.91:1 on navy.	`#5DAFF4`

Typography

Set in the real faces, at true size

The faces

Obviously Narrow → Barlow Condensed Black

--font-display 900 — the bundled stand-in is its own family, requested at normal weight · upright only

Section titles, H1s, page-template headings and document titles — uppercase on marketing bands.

The website sets every section title and H1 in Obviously Narrow Black (OH no Type). Obviously is licensed per use and is never bundled with this guide; the bundled stand-in is Barlow Condensed Black (SIL OFL 1.1), chosen by measurement: average cap width 0.694 vs 0.675 of cap height, stem 0.269 vs 0.283, ink density 0.771 vs 0.769 (decisions G-25, G-26, G-49).

"Obviously Narrow", obviously-narrow, "Barlow Condensed Black", "Barlow Condensed", "Arial Narrow", sans-serif

Uppercase, tracked +2px at 56px desktop / +1px at 38px mobile (≈ 0.035em).
Line-height 1.03 desktop, 1.1 mobile.
One phrase may change colour (--gj-emphasis); never the weight.
Never below 16px.

Obviously (wide) → Barlow Black

--font-title 900 bundled (as its own family) · upright only

Wide titles; the manual’s divider titles.

The website sets its wide titles in Obviously Black (normal width): the comparison title, the review headline, the footer menu, ingredient names. Licensed face, never bundled; the manual’s Barlow Black (pp. 3, 4, 13 …) stands in (SIL OFL 1.1).

"Obviously Black", Obviously, obviously, "Barlow Black", "Arial Black", sans-serif

Uppercase, tracking -0.4 to +1px, one to four words, ≥ 28px.

Barlow Condensed

--font-headline 600 · upright only

Button labels (uppercase), card and plan titles (Title Case), band subtitles, benefit labels; the manual’s statements.

Named on pp. 35, 44, 53 as a Google Font; embedded in the manual as BarlowCondensed-Medium, -SemiBold and -Bold. Bundled as three static latin cuts under their own family names (SIL OFL 1.1). The website serves the same Fontsource cut.

"Barlow Condensed SemiBold", "Barlow Condensed", "Arial Narrow", sans-serif

Buttons: uppercase, 28.8px desktop / 24px mobile.
Card titles: Title Case, 35.2px desktop / 20px mobile, +0.96px.
Subtitles: sentence case, 29.6px / 1.6.
The manual’s statements: uppercase, line-height 0.89.

Barlow Condensed Bold

--font-label 700 · upright only

Labels, eyebrows, footer headings, FAQ questions, table headers.

The website’s labels, eyebrows, footer headings, review titles and FAQ questions (Fontsource cut, SIL OFL 1.1) (decision G-28).

"Barlow Condensed Bold", "Barlow Condensed", "Arial Narrow", sans-serif

Uppercase, +0.04em (0.8px at 20px).

Barlow SemiBold

--font-price 600 · upright only

Prices and figures, navigation links, claim badges, product sub-headings.

The website’s navigation, prices and claim badges (Google Fonts / Fontsource cut, SIL OFL 1.1) (decision G-25).

"Barlow SemiBold", Barlow, "Arial Narrow", sans-serif

Prices and badges +1.2px at 20px (0.06em).
Figures are lining and tabular in tables.

Poppins

--font-sans 400 (500 and 700 are their own family names) · upright only

Every running word on screen — body, navigation, forms, operator UI.

p.35 lists Poppins (Google Font) as the website text face; the website mockup (p.36) sets body copy and navigation in it. Bundled (SIL OFL 1.1).

Poppins, "Helvetica Neue", Arial, sans-serif

Body 16px / 1.6 on the web, 16px paragraph spacing.
Bold labels use --font-sans-bold, never a synthesised weight.

Poppins Medium

--font-sans-medium 500 · upright only

Lead paragraphs (24px / 1.2), footer links, small meta lines.

The website’s lead paragraphs, footer links and review links (Google Fonts / Fontsource cut, SIL OFL 1.1) (decision G-25).

"Poppins Medium", Poppins, "Helvetica Neue", Arial, sans-serif

Poppins Bold

--font-sans-bold 700 · upright only

Buttons, labels, table headers, emphasis.

As Poppins; the 700 cut under its own family name.

"Poppins Bold", Poppins, "Helvetica Neue", Arial, sans-serif

Bicyclette

--font-prose 400, 400 italic, 700, 900 · roman + italic

Print and collateral body copy in the brand book; on screen only where a licensed copy is loaded.

pp. 35, 44, 53 name Bicyclette as an Adobe Font; it sets every body line, label and running header in the manual. A licensed face: never bundled here; Poppins renders until the owner holds a licence and files for the medium (decisions G-7, G-26).

Bicyclette, bicyclette, Poppins, "Helvetica Neue", Arial, sans-serif

Body 24–26px on the 1920px page, line-height ≈1.3, tracking 0.
Labels: Black 900, uppercase, tracking 0.05em (EMBODIES, FOCUSES ON).
Running header: Black / Regular 14px, uppercase, tracking 0.03em.

Bicyclette Black → Barlow Black

--font-marquee 900 · upright only

The marquee band — one repeating line, uppercase, 128px. Never in documents.

The website’s marquee band only. Licensed face, never bundled; Barlow Black stands in (decisions G-25, G-26).

"Bicyclette Black", bicyclette, "Barlow Black", "Arial Black", sans-serif

alkaline

--font-script one · upright only

Artwork only — packaging flavour lines and stickers. Never live UI text.

pp. 35, 44, 53 name alkaline as an Adobe Font. Not bundled; no free substitute is proposed.

alkaline, "Brush Script MT", cursive

The scale

Token	Value	Spent by
`--gj-text-display`	`clamp(2.375rem, 3.9vw, 3.5rem)`	Section title / H1 — --font-display, uppercase, line-height 1.03, +2px (56px desktop, 38px mobile)
`--gj-text-display-xl`	`clamp(2.375rem, 4.7vw, 4.2rem)`	The product-grid title — SHOP BEST SELLERS (67.2px)
`--gj-text-wide`	`clamp(1.75rem, 2.8vw, 2.5rem)`	Wide title — --font-title, uppercase (40px / 28px)
`--gj-text-subtitle`	`1.85rem`	Band subtitle — --font-headline, sentence case, line-height 1.6 (29.6px)
`--gj-text-card-title`	`clamp(1.25rem, 2.4vw, 2.2rem)`	Card and plan titles — --font-headline, Title Case, +0.96px (35.2px / 20px)
`--gj-text-button`	`clamp(1.5rem, 2vw, 1.8rem)`	Pill labels — --font-headline, uppercase (28.8px / 24px) — always large
`--gj-text-label`	`1.25rem`	Labels and eyebrows — --font-label, uppercase, +0.04em (20px)
`--gj-text-lead`	`1.5rem`	Lead — --font-sans-medium, line-height 1.2 (24px; 16px mobile)
`--gj-text-base`	`1rem`	Body — --font-sans, line-height 1.6
`--gj-text-price`	`1.25rem`	Prices and claim badges — --font-price, +1.2px (20px)
`--gj-text-small`	`0.875rem`	Captions, legal lines — the marketing floor
`--gj-text-statement`	`clamp(2.5rem, 5.8vw, 7rem)`	Brand book — the manual’s statement headline (Barlow Condensed 600, line-height 0.89)
`--gj-text-title`	`clamp(3rem, 9vw, 10.75rem)`	Brand book — divider title (Barlow Black, 172px on the page)
`--gj-text-marquee`	`clamp(4rem, 9vw, 8rem)`	The marquee band — --font-marquee, uppercase (128px)

Specimens

Section title

Why is Good Journey better?

Obviously Narrow Black → Barlow Condensed Black · uppercase · +2px · one phrase in --gj-emphasis

Wide title

See why our customers love us

Obviously Black → Barlow Black · uppercase

Button label

Shop now

Barlow Condensed SemiBold · uppercase · ≥ 24px — always large, so cream on orange passes AA-large

Card title

Donut Variety Pack (12 Donuts)

Barlow Condensed SemiBold · Title Case · +0.96px

Label

Reach out

Barlow Condensed Bold · uppercase · +0.04em

Subtitle

Real donuts. Zero sugar crash.

Barlow Condensed SemiBold · sentence case · line-height 1.6

Lead

The donuts you thought you couldn’t have again.

Poppins Medium · 24px / 1.2

Body

Tired of missing out because of blood sugar concerns, gluten sensitivity, or keto requirements? We get it.

Poppins 400 · 16px / 1.6 · navy

Price

$54.99

Barlow SemiBold · +1.2px

Statement (brand book)

Good health is a journey. We’re bringing the treats.

The manual’s statement: Barlow Condensed 600 · uppercase · line-height 0.89 · untracked

Rules

Bundled families do all the screen and document work: Barlow Condensed (Black section titles — the Obviously Narrow stand-in; Bold labels; SemiBold buttons, card titles and subtitles), Barlow (Black wide titles, SemiBold prices and navigation) and Poppins (Regular body, Medium lead, Bold emphasis).
Section titles and H1s are display caps tracked about +0.035em (2px at 56px); labels are Barlow Condensed Bold caps at +0.04em; card titles are Title Case; body copy, taglines and subtitles are sentence case. The manual’s untracked statements stay a brand-book style.
Emphasis inside a headline is a colour change, never a weight change.
Each bundled cut is its own family at normal weight: ask for “Barlow Condensed Black”, never Barlow Condensed at weight 900 — a weight request on a single-cut family synthesises a fake bold.
Obviously, Obviously Narrow, Bicyclette and alkaline are licensed faces and are never bundled or self-hosted from this guide. They lead their stacks so a properly licensed install wins; everywhere else the open stand-ins render.
Type floor 14px marketing, 12px operator; 8pt in print (captions), 10pt for running text.

Iconography

A system, not a folder

The system

Property	Specification
Library	Marketing: the website’s own duotone benefit icons (icon.benefits) and the manual’s hand-drawn doodles (image.doodles) as illustration. Operator: Lucide.
Style	Marketing icons are flat duotone glyphs — navy plus one of orange, sky or lime — drawn with a slightly wobbly hand, 48–60px, free-standing (no circle). A “no X” claim is an orange ring with a slash. Doodles are monoline in cream, navy, lime or orange. An icon labels and carries a word; a doodle decorates (decision G-45).
Grid	Operator 24 × 24 on a 2px keyline. Marketing benefit icons stand free at 48–60px over a two-line Barlow Condensed label.
Stroke	2px at 24px (the doodles in the manual are drawn at ~2px on the 1920px page).
Corner	Round caps and joins throughout.

Sizes, drawn at the declared value

Token	Value	Use
—	`16px`	Operator — table row, chip
—	`20px`	Operator — toolbar, sidebar
—	`24px`	Marketing — inline with labels
—	`48–60px`	Marketing — benefit icons, free-standing (website)

Rules

Not a matter of taste

Operator icons take currentColor; marketing icons keep their two brand colours.
Doodles are decoration and aria-hidden.
No brand mark is redrawn as an icon.
The two sets never mix on one surface.
A benefit icon states a claim only the current pack carries.

Layout

Three breakpoints, everything else fluid

Spacing, drawn at the declared value

Token	Declared	At this measure
`--gj-space-1` The base unit (G-8)	`4px`
`--gj-space-2`	`8px`
`--gj-space-3`	`16px`
`--gj-space-4` Card padding	`24px`
`--gj-space-5` Between blocks	`40px`
`--gj-space-6` Section rhythm on desktop	`64px`
`--gj-space-7` Hero and divider bands	`96px`
`--gj-gutter` Page inline padding; the website’s mobile gutter is 24px	`clamp(16px, 8vw, 158px)`

Structure

Token	Value	Role
`--gj-page-max`	`1280px`	Content measure (the website runs 1162–1300px)
`--gj-prose-max`	`68ch`	Running text measure
`--gj-header-height`	`128px`	Site header — 128px desktop, 80px mobile, sticky, hides on scroll (decision G-34)
`--gj-rule-width`	`2px`	Box rules and table borders (pp. 15, 32–33)
`--gj-header-height-mobile`	`80px`	Site header on mobile
`--gj-band-padding`	`clamp(48px, 6.7vw, 96px)`	Band block padding — 64–96px desktop, 48–56px mobile (decision G-38)
`--gj-card-border`	`4px`	The sticker card’s navy keyline (decision G-31)

The breakpoint canon

Width	Meaning	Note
`640px`	Phone → large phone	—
`768px`	Tablet: two columns	—
`1024px`	Desktop navigation	—
`1440px`	Wide: statements reach full size	—

Container queries — the other axis

Container	Declared on	Arms

Max widths

Width	Used by
`1280px`	Every page
`68ch`	Paragraphs

The z stack

z-index	Used by
`10`	Sticky header
`40`	Drawers
`50`	Modals and toasts

Policies

Pages are full-bleed bands on seven grounds: cream, lilac, lime-wash and sky (light); navy, violet and orange (dark). Light and dark alternate and two bands of the same ground never touch (decision G-38).
Dark bands (navy, violet, orange) are short statement bands; light bands carry the grids, tables and cards.
Each band carries one centred section title (sometimes with one subtitle), its content, and at most one action centred under it.
Stickers and doodles sit at a band’s edge or across a seam, never under text — at most one per band.
Photography runs full-bleed, in a cream 4px frame, or as cut-outs in circles; never with a soft shadow.

Motion

Curves, durations, and what is banned

Easings

Curve	Token	Value	Spent on
	`--gj-ease`	`cubic-bezier(0.22, 1, 0.36, 1)`	Reveals and hovers (G-8)
	`--gj-ease-in-out`	`ease-in-out`	Colour changes

Durations

Token	Value	Spent on
`--gj-duration-quick`	`150ms`	Hover colour
`--gj-duration-base`	`250ms`	Sticker pop, card lift
`--gj-duration-header`	`350ms`	The header hiding on scroll-down and returning
`--gj-duration-reveal`	`400ms`	A band revealing once

Keyframes

Name	Definition	Use
`gj-pop`	`0% { transform: scale(0.94) rotate(-3deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; }`	A sticker landing — once, on reveal

Choreography

Card lift

A sticker card rises 4px and its hard navy drop grows from 6px to 10px, 150ms. Nothing blurs.

Button hover

The orange pill turns navy over 150ms (optionally rising 2px); the lime pill turns cream on navy.

Header

The header hides on scroll-down and returns on scroll-up, 350ms cubic-bezier(.4, 0, .2, 1).

Marquee (exception)

One brand line loops right-to-left, 110s linear (50s mobile), on the web only; it stops under prefers-reduced-motion and never appears in documents (decision G-44).

Sticker pop

A sticker scales from 94% with a 3° tilt to rest, 250ms on --gj-ease. Stickers only — the logo never moves (p.31).

Reveal

A band fades and rises 12px into place once, 400ms.

Banned

Bounce and elastic easing in UI
Motion on the logo — it never spins, wiggles or pops (p.31)
Auto-advancing carousels (the marquee band is the one governed exception, web only)
Blinking or flashing text
Loops inside a cart, checkout or form
Motion as the only carrier of a state

Reduced motion

Under prefers-reduced-motion: reduce, the marquee stops, cards do not lift, stickers appear at rest without the pop, bands appear without the rise; colour transitions remain. Nothing is communicated by motion alone.

Components

Printed from the live stylesheet

Chrome

Announcement rail

A full-width sky rail over the header carrying one offer, 48px tall.

.gj-announcement

State	Specification
Rest	--gj-sky ground, --gj-navy ink (4.91:1), --font-headline 22px, +0.96px, centred, height 48px

One message.
Navy ink only — cream on sky is 2.29:1 and fails even at 22px (decisions G-3, G-24).

Site header

A navy bar: Shop and About on the left, the cream horizontal logotype centred (about 336px), cart and a Sign In outline pill on the right.

.gj-header

State	Specification
Rest	.gj-on-navy, height 128px (80px mobile), --font-price 20px cream links, hover opacity .8
Scroll	sticky; hides on scroll-down, returns on scroll-up, 350ms
Mobile	menu button left, logotype centre, cart right; the menu opens a navy sheet with --font-title 28px links

The logotype is an asset, never live type.
No shadow under the header.

Footer

A navy band in three columns: the stacked logotype and small links; a big wide-title menu (FAQ · ABOUT · SHOP) with cream social circles; REACH OUT with the support address and SIGN UP FOR SWEET SURPRISES with an email field. A centred legal line closes it.

.gj-footer

State	Specification
Rest	.gj-on-navy, padding 64px 0 32px; menu --font-title 40px cream; headings --font-label 20px; links --font-sans-medium 16px
Legal line	“© <current year> Good Journey LLC” as live text, centred

Support address hello@goodjourneyfoods.com; website goodjourneydonuts.com; entity Good Journey LLC (decision G-41).
One copyright year per page, never baked into the logo (decision G-40).

Actions

Primary pill

The orange pill — SHOP NOW, ADD TO CART, BUY NOW — with a large cream label.

.gj-btn.gj-btn--primary

State	Specification
Rest	--gj-action (#F15627) ground, --gj-on-action label, --font-headline uppercase 28.8px (24px mobile), radius --gj-radius-pill, padding 8px 48px or full width of its column
Hover	--gj-action-hover (navy), 150ms, optional translateY(-2px)
Focus	3px --gj-focus-ring outline, 2px offset
Small label	a label below 24px moves the pill to --gj-action-small (#C5380D, 5.17:1)
On navy	lime pill, navy label

One primary per band.
The label is always ≥ 24px (or ≥ 18.66px bold) — that is what makes cream on #F15627 AA-large (3.34:1) (decision G-29).

Secondary pill

The lime pill — SHOP ALL PRODUCTS, FOLLOW US ON INSTAGRAM.

.gj-btn.gj-btn--secondary

State	Specification
Rest	--gj-lime ground, --gj-navy label (8.79:1), --font-headline uppercase 24–28.8px, pill
Hover	cream ground, navy label, 150ms

Under a grid, never beside a primary pill (decision G-30).

Pill on orange

The navy pill — the only action on an orange band (BUY NOW in the promo split).

.gj-btn.gj-btn--on-orange

State	Specification
Rest	--gj-navy ground, cream label (11.25:1), --font-headline uppercase 28px, pill

An orange band never carries an orange pill (decision G-30).

Outline pill

The Sign In control: a 3px cream outline pill on navy.

.gj-btn--outline

State	Specification
Rest	transparent, 3px solid cream border, --font-price 20px cream, padding 16px 56px
Hover	fills cream, navy label

Secondary actions in the header only (decision G-30).

Content

Split hero

Product photograph left (about 54%), cream panel right: rating eyebrow, display H1, one lead line, a full-width primary pill, then a three-up benefit row.

.gj-hero

State	Specification
Desktop	700px tall; H1 --font-display 56px / 57.6 +2px; lead --font-sans-medium 24px; benefits grid 1fr 1.3fr 1fr, gap 32px
Mobile	photo full-bleed above, panel stacks

The rating eyebrow is orange at 20px bold (AA-large) — smaller, it is --gj-accent-ink.
Only claim a rating or customer count the business can substantiate (decision G-51).

Statement band

A full-bleed band with one display statement whose key phrase changes colour, and one subtitle.

.gj-statement

State	Specification
On cream	navy statement, --gj-emphasis (orange) phrase at display size
On navy	cream statement, lilac (or lime) phrase

Emphasis is colour, never weight.
Never orange emphasis on lilac (2.54:1) (decision G-36).

Section label

Tracked caps — on the web with the orange underline swash under one headline word; in the brand book over the lime wave rule.

.gj-label

State	Specification
Rest	--font-label, +0.04em, uppercase, 20px
Web	pattern.underline-swash under one word, at most once per band
Brand book	pattern.wave 8px below

On screen the swash is the only decorative rule; the wave rule belongs to print (decision G-35).

Highlighter

A lime block behind a phrase of a tagline (pp. 5, 17).

.gj-highlight

State	Specification
Rest	--gj-highlight ground, --gj-on-highlight ink, no radius, 0.1em inline padding

One highlighted phrase per block.

Bar quote

Body copy introduced by a 28px-wide vertical bar (pp. 6, 9, 10, 11, 19).

.gj-pullquote

State	Specification
On navy	lime bar
On cream	violet bar

The bar is as tall as the paragraph.

Numbered list

Numbers in lime discs (pp. 21–25) or tall display numerals.

.gj-numbered

State	Specification
Disc	lime disc, navy Barlow Black numeral
Tall	--font-display numerals in violet, or orange at ≥ 24px

Two digits always: 01, 02.

Benefit orbit

A navy band: a centred statement with lilac emphasis and one subtitle; a product photo on a scalloped blob with a swirl doodle; six benefits placed three left, three right.

.gj-orbit

State	Specification
Rest	.gj-on-navy, container 1216px; benefit labels --font-headline 22px cream, max 180px

One per page (decision G-37).

Marquee band

A violet strip, 144px tall, with one repeating brand line in cream (“WARNING: MAY CAUSE HAPPINESS”).

.gj-marquee

State	Specification
Rest	--gj-violet ground, --font-marquee 128px uppercase cream, gap 48px
Motion	110s linear loop (50s mobile)
Reduced motion	static

Web only; in documents it is a static section opener (decisions G-37, G-44).

Review masonry

A lilac band: a wide-title headline, three columns of review cards (video cards span two rows), one orange pill under the grid.

.gj-reviews

State	Specification
Rest	--gj-lilac ground, grid 1000px; cards cream, radius 16px, --gj-shadow-soft, padding 25.6px
Card	title --font-label 20px caps in quotes; body Poppins 14–16px navy; author --font-label navy

Never orange text on lilac — the headline’s emphasis phrase is navy-underlined with the swash instead (decisions G-36, G-37).

Ingredient carousel

A cream band: title and subtitle, a row of lime-wash circles holding cut-out ingredient photographs, the name in the wide title face and one line of Poppins between arrows.

.gj-ingredients

State	Specification
Rest	circles --gj-lime-wash about 240px (active 290px)

One ingredient in focus at a time (decision G-37).

Promo split

An orange band split in two: a still life on the lighter orange behind a vertical scalloped edge with navy claim badges; a NEW! doodle, a cream display title, one lead line and a navy pill.

.gj-promo

State	Specification
Rest	--gj-orange with --gj-orange-light 70/30, 672px; title --font-display 56px cream (AA-large)

Text on orange is display size only; the action is btn-on-orange (decision G-37).

Creators split

Half photograph on a sky field with hand-lettered name labels, half lime-wash panel with a display title, one paragraph and an orange pill; the GOOD smiley seal straddles the seam.

.gj-creators

State	Specification
Rest	no gutter, 800px; body Poppins 20px navy

The founders’ note or the about page (decision G-37).

Community band

A violet band: a left-aligned display title and subtitle, four Instagram post cards in the sticker frame, a lime pill with a sparkle doodle.

.gj-community

State	Specification
Rest	--gj-violet ground, padding 64px 0 80px; title cream (5.52:1)

Real customer posts only, with permission (decision G-37).

FAQ accordion

A cream band: a centred title, optional orange category heads, one column of rows separated by 2px pink rules; the first row is open.

.gj-faq

State	Specification
Rest	question --font-label 28px caps violet; answer Poppins 16px / 25px violet, max 800px; rule 2px --gj-pink-rule
Category head	--font-title 40px orange (display size)

Each question appears once per page — no section repeats another (decision G-37).

Legal page

The website’s styled page template for terms, rules and policies: one left column, a display H1 in Title Case, the effective date, numbered clauses with the clause name bold inline, Poppins body.

.gj-legal

State	Specification
Rest	column 1162px (68–75ch in documents); H1 --font-display 56px / 67.2 Title Case +2.24px; body Poppins 16px / 25.6 navy; 16px between paragraphs

Every legal page uses this template — never an unstyled policy page.
No stickers, no orange text (decision G-37).

Framed photo

A photograph in a 4px cream frame with 14px corners on a navy band; a collage tilts its polaroids −4° to +4°.

.gj-framed

State	Specification
Rest	border 4px solid --gj-cream, radius --gj-radius-frame, max 600px

No soft shadows (decision G-37).

Quote card

A cream card on lilac, or a lilac card on cream, with a large navy closing quote mark.

.gj-quote-card

State	Specification
Rest	radius --gj-radius-card, --gj-surface-soft or --gj-surface-raised, navy text

Navy text only on lilac.

Navy band

The brand’s dark ground — header, statement bands, the footer.

.gj-on-navy

State	Specification
Rest	cream ink, lilac emphasis, lime accents

Violet never carries text on navy (2.04:1).

Commerce

Sticker card

The website’s product card: a cream card framed by a 4px navy keyline with a hard navy drop. Claim flag, photograph, title, price, stars, review link, full-width orange pill.

.gj-product-card

State	Specification
Rest	--gj-surface-raised, 4px solid --gj-navy, radius --gj-radius-card (16px), --gj-shadow-offset; content padding 0 24px 24px
Hover	translateY(-4px), --gj-shadow-offset-hover, 150ms
Content	title --font-headline Title Case 35.2px; price --font-price 20px +1.2px; orange stars; review link --gj-accent-ink underlined; pill 80% wide

The same frame dresses Instagram cards, the product gallery and the comparison table’s featured column.
One claim flag per card, as printed on the pack (decision G-31).

Claim flag

A two-cell tab on a card’s top-left corner: a sky square with a cream check, then a cream tab with the claim (“3g net carbs”).

.gj-claim-flag

State	Specification
Rest	flag 70px tall; icon cell --gj-sky 60px; text cell cream, --font-price 20px +1.2px navy

Claims exactly as the pack prints them (decision G-37).

Benefit row

Three to six duotone benefit icons over two-line labels — under the hero, or around the product photo on navy.

.gj-benefits

State	Specification
On cream	icon.benefits glyphs 48–60px, --font-headline 22px navy labels, line-height 1
On navy	same glyphs, cream labels

Claims must match the label exactly.
Icons stand free — no circle (decision G-45).

Comparison table

A label column, then the featured “us” column (navy head with the DONUTS lockup, sky value cells, 5px navy side keylines, 20px rounded foot, hard navy drop), then competitor columns (lilac heads, cream cells, 5px lilac underlines). Booleans are icons. A dated source line sits under the table.

.gj-compare

State	Specification
Rest	labels --font-headline 19px navy left; values Poppins 20px navy centred
Mobile	scrolls sideways, the label column sticky

Navy text on sky (4.91:1).
Competitor data carries its date and source, and is reviewed before it is published (decisions G-37, G-51).

Decoration

Sticker accent

One sticker — the starburst, the smiley seal, a claim badge or a doodle — at a band’s edge or across a seam.

.gj-sticker

State	Specification
Rest	flat on the web (no shadow); --gj-shadow-sticker in the brand book; rotate −8° to 8°
Reveal	gj-pop once

Decorative: aria-hidden.
Never over text or the logo; at most one per band (decision G-35).

Documents

Every page we send, on brand

Business documents borrow the website’s layout language: a white page with cream, lilac, lime-wash, navy and violet bands; Barlow Condensed display caps over Poppins text; the sticker card for key facts; navy for the bands that matter. Pick the archetype, fill its blocks in order, and let the tokens do the colour.

Page setup

	US Letter	A4
Sheet	`8.5in × 11in`	`210mm × 297mm`
Margins (top · right · bottom · left)	`0.75in · 0.75in · 0.85in · 0.75in`	`18mm · 18mm · 22mm · 18mm`
Bleed	`0.125in`	`3mm`
Grid (columns · gutter)	`12 · 0.25in`	`12 · 6mm`
Baseline	`—`	`—`

Header, footer and page numbers

Element	Behaviour
Header	none
Footer	footer text — “Good Journey LLC · goodjourneydonuts.com”
Page numbers	none
Rules	none
First page	shows footer

Colour on paper

Role	Token	Value
page	`--gj-white`	`#FFFFFF`
ink	`--gj-navy`	`#312E7C`
inkStrong	`--gj-navy`	`#312E7C`
muted	`--gj-violet`	`#5D59C4`
rule	`--gj-lilac`	`#DED9FF`
accent	`--gj-accent-ink`	`#C5380D`
accentInk	`--gj-cream`	`#FFFBF7`

Print type scale

Role	Font	Size / leading	Weight
title	`--font-display`	`36pt / 38pt`	900
h1	`--font-display`	`26pt / 28pt`	900
h2	`--font-display`	`17pt / 20pt`	900
h3	`--font-headline`	`13pt / 16pt`	600
lead	`--font-sans-medium`	`13pt / 17pt`	500
body	`--font-sans`	`10pt / 16pt`	400
small	`--font-sans`	`8.5pt / 13pt`	400
caption	`--font-sans-medium`	`8pt / 11pt`	500
eyebrow	`--font-label`	`9pt / 11pt`	700
numeral	`--font-price`	`28pt / 30pt`	600
quote	`--font-headline`	`16pt / 21pt`	600

Blocks

Block	Kind	Purpose	Slots
Cover `.sg-doc-cover`	cover	The first page of any document longer than one page. The stacked or horizontal navy logotype, top left; never redrawn, never on a busy ground. One colour-shift phrase in the title (class sg-doc-accent): orange #F15627 is AA-large only, so it is used at title size and nowhere smaller. No stickers on a cover that carries a client’s name.	logo · eyebrow · title* · subtitle · meta
Cover — compact `.sg-doc-cover-compact`	cover	The top of a one-pager: the cream panel at the height of its content, not the 4.5-inch cover. The stacked or horizontal navy logotype, top left; never redrawn, never on a busy ground. One colour-shift phrase in the title (class sg-doc-accent): orange #F15627 is AA-large only, so it is used at title size and nowhere smaller. No stickers on a cover that carries a client’s name.	logo · eyebrow · title* · subtitle · meta
Letterhead `.sg-doc-letterhead`	letterhead	The top of letters, legal documents, quotes and invoices. The navy horizontal logotype; clear space equal to the height of the O in GOOD. Contact lines exactly as the brand writes them: goodjourneydonuts.com, hello@goodjourneyfoods.com, Good Journey LLC.	logo · sender* · date* · recipient*
Section opener — navy `.sg-doc-section-opener`	section-opener	Opens a major section of a proposal or business plan. Alternate with section-opener-violet: two openers of the same ground never follow each other. Emphasis on navy is lilac or lime, never orange.	number · eyebrow · heading* · lead
Section opener — violet `.sg-doc-section-opener-violet`	section-opener	The alternate opener, so consecutive sections change ground. Cream on violet is 5.52:1 — body-size text is allowed; lilac is not (4.19:1). Never animated, never repeated as a pattern.	number · eyebrow · heading* · lead
Body `.sg-doc-body`	body	Running prose: anything that is paragraphs. Measure ≤ 68 characters; one column. Bold for a term being defined; colour, not weight, for emphasis in headings.	heading · text*
Two columns `.sg-doc-two-column`	two-column	Two parallel ideas side by side — before/after, founders, problem/solution. Columns of similar length; never a table in disguise.	heading · left* · right*
Sticker card `.sg-doc-callout`	callout	The one fact the reader must not miss — a key number, a guarantee, a deadline. One per page. Tools that can draw it (Docs, Word, InDesign) frame it like the website: 3pt navy keyline, 12pt corners, a 4.5pt hard navy drop, no blur.	label · text*
Key numbers `.sg-doc-key-numbers`	callout	Two to four headline numbers — an executive summary or a results box. Every number has a source and a date in footnotes. Claims about health or customers need sign-off (hard rule).	label · text*
Pull quote `.sg-doc-pull-quote`	pull-quote	A line lifted from this document, to slow the reader down. Navy only on lilac — never orange (2.54:1).	quote* · attribution
Testimonial `.sg-doc-testimonial`	testimonial	A customer or partner in their own words. Verbatim and attributable; never edited for claims. Star ratings and customer counts only with a dated source (hard rule).	quote* · name* · role
Data table `.sg-doc-data-table`	data-table	Any table of figures — financials, specifications, schedules. A header row on every table; figures right-aligned in tabular Barlow-or-Poppins numerals; totals in the tfoot row. No zebra stripes and no vertical rules.	caption · table* · note
Comparison table `.sg-doc-comparison-table`	data-table	Us against the alternatives, row by row. Column order: the label column, Good Journey, then competitors. Yes/No cells as words or the brand’s icons, never colour alone. Competitor data is dated, sourced and approved before it is sent (hard rule).	caption · table* · note
Price block `.sg-doc-price-block`	price-block	One price: a single product, a case, a programme. Prices carry the currency and the unit; a compare-at price is struck through in navy. A validity date on every price.	label · amount* · period · note · features
Pricing table `.sg-doc-pricing-table`	pricing-table	Two to four tiers or packs side by side, one recommended. Mark exactly one tier recommended (data-highlight). The same inclusions in the same order in every tier.	tiers* · note
Benefit grid `.sg-doc-feature-grid`	feature-grid	Three to six benefits or features, each a title and one sentence. Benefits the pack can back; claims verbatim.	heading · items*
Benefit grid — navy `.sg-doc-feature-grid-navy`	feature-grid	The “why Good Journey” page of a proposal or plan. One per document. Never next to another navy block.	heading · items*
Questions and answers `.sg-doc-faq`	body	Terms explained, objections answered — the FAQ appendix. Each question once; group by topic. Answers are plain and specific — no claims the pack does not carry.	heading · text*
Next step `.sg-doc-cta-band`	cta-band	The single next step the reader should take. One per document. The action is written out (an address or URL), never only a link. Never directly after another navy block.	heading* · text · action
Signatures `.sg-doc-signature`	signature	Where the parties sign — proposals, agreements, order forms. Good Journey signs as Good Journey LLC. Never split across pages.	parties*
Sign-off `.sg-doc-sign-off`	signature	The close of a letter — one signatory. A warm close in the brand voice, then the name.	parties*
Clause `.sg-doc-legal-clause`	legal-clause	One numbered clause of terms, an agreement, rules or a policy. Numbers in navy, never orange. No stickers, doodles or colour bands inside legal text. Defined terms in bold at first use.	number · heading* · text* · subclauses
Notes and sources `.sg-doc-footnotes`	footnotes	Sources, dates and qualifications for numbers and claims. Every statistic, rating, customer count and competitor figure gets a numbered note with its date.	items*
Contact `.sg-doc-contact`	contact	Who to write to, at the end of a document. The brand’s own lines; no personal mobile numbers unless agreed.	name · lines*
Back cover `.sg-doc-closing`	contact	The last page or closing band of a long document. Ends the document; nothing follows it. One copyright year, as live text.	name · lines*
Line items `.sg-doc-line-items`	data-table	The products or services on a quote or invoice. Columns: item · description · quantity · unit price · amount; figures right-aligned.	caption · table* · note
Total `.sg-doc-total`	price-block	The amount due or quoted. One total per document, with its currency.	label · amount* · period · note · features
Terms `.sg-doc-terms`	body	Payment, delivery and validity terms on a quote or invoice. Plain, specific, dated.	heading · text*

One-pager

A single page that sells one thing — a product line, a programme, the company to a buyer.

one-pager · register marketing · at most 1 page(s) · header none · page numbers none

Recipe

Cover — compact → Benefit grid — navy → Price block (optional) → Testimonial (optional) → Next step → Contact

Lead with delight, then the honest reason it is better.
One action, written out.
Keep the band order: cream, navy, cream, lilac, navy, white.

Don’t

No second page.
No more than one testimonial.
No claim the pack does not print.

Content

≤ 250 words in total.
Title ≤ 8 words; subtitle one sentence.
Three benefits, each a short title and one sentence.
The price block OR the testimonial, not both — the page holds one of them below the benefits.

Templates: Letter · A4

Pricing sheet

Wholesale or retail prices, packs and terms for a buyer.

pricing-sheet · register marketing · at most 2 page(s) · header brand-and-title · page numbers footer-right

Recipe

Cover → Body (optional) → Pricing table → Price block (repeat-optional) → Comparison table (optional) → Data table (optional) → Questions and answers (repeat-optional) → Notes and sources (optional) → Next step → Contact

Every price has a currency, a unit and a validity date.
Mark one recommended pack.
Put minimums and lead times in the table, not in prose.

Don’t

No unexplained discounts.
No competitor prices without a dated source.

Content

Order: who it is for → packs and prices → terms → next step.
Pack names exactly as on the pack.

Templates: Letter · A4

Proposal

A document addressed to one client or partner: the opportunity, what we will do, the price and the next step.

proposal · register marketing · at most 12 page(s) · header brand-and-section · page numbers footer-right

Recipe

Cover → Section opener — navy → Body (repeat) → Section opener — violet → Body (repeat) → Two columns (optional) → Benefit grid — navy → Comparison table (optional) → Pricing table (optional) → Price block (repeat-optional) → Testimonial (optional) → Sticker card (optional) → Next step → Signatures (optional) → Notes and sources (optional) → Contact

Name the client on the cover and in the first paragraph.
Alternate navy and violet openers.
End with dated next steps.

Don’t

Never two navy blocks in a row.
No stickers or doodles near the client’s name or the price.
No unapproved claims.

Content

Opportunity → proposal → why us → price → proof → next step.
Each section opens with its claim, then the evidence.
Paragraphs of three to five sentences; “we” to “you”.

Templates: Letter · A4

Legal document

Terms, agreements, policies, rules and disclaimers.

legal · header document-title · page numbers footer-right

Recipe

Letterhead → Body → Clause (repeat) → Signatures (optional) → Notes and sources (optional)

Number every clause; one obligation per sub-clause.
State the effective date and version at the top.
Use the entity name Good Journey LLC.

Don’t

No bands, stickers, doodles, orange text or marketing claims.
Never the unstyled policy-page look — this template is the brand’s legal page.

Content

Plain, precise sentences; defined terms in bold at first use.
The website’s legal pages (sweepstakes rules, shipping policy, affiliate licensing agreement) are the model for order and tone.
Health claims or customer numbers in a legal document need owner and legal sign-off.

Templates: Letter · A4

Business plan

The company’s plan for investors, lenders or partners: market, product, operations, financials.

business-plan · register marketing · at most 40 page(s) · header brand-and-section · page numbers footer-right

Recipe

Cover → Key numbers → Body → Section opener — navy (repeat) → Section opener — violet (repeat-optional) → Body (repeat) → Two columns (repeat-optional) → Comparison table (optional) → Data table (repeat) → Sticker card (optional) → Pull quote (optional) → Questions and answers (repeat-optional) → Notes and sources → Back cover

Source and date every number.
One idea per section opener.
Financial tables with totals in the footer row.

Don’t

No unsourced market sizes.
No health promises — the product claims are the pack’s.

Content

Executive summary ≤ 1 page.
Chapters: problem, product, customers, market, competition, go-to-market, operations, team, financials, ask.

Templates: Letter · A4

Letter

A letter or memo to one person.

letter · register marketing · at most 2 page(s) · header none · page numbers footer-right

Recipe

Letterhead → Body (repeat) → Sign-off → Contact (optional)

Warm, plainspoken, signed by a person.

Don’t

No bands, stickers or tables.

Content

≤ 400 words.
Open with the reason for writing; close with one clear ask.

Templates: Letter · A4

Quote

Prices offered to one customer for a defined order, with a validity date.

quote · register operator · at most 2 page(s) · header none · page numbers footer-right

Recipe

Letterhead → Body (optional) → Line items → Total → Terms → Contact

Quote number, date and validity in the letterhead block.

Don’t

No marketing copy in the line items.

Content

Item names exactly as on the pack.

Templates: Letter · A4

Invoice

A request for payment for delivered goods or services.

invoice · register operator · at most 2 page(s) · header none · page numbers footer-right

Recipe

Letterhead → Line items → Total → Terms → Contact

Invoice number, issue date and due date in the letterhead block.

Don’t

Nothing decorative.

Content

Payment instructions in the terms block.

Templates: Letter · A4

Rules

Print on a white page; cream, lilac, lime-wash, navy and violet arrive as bands and cards. On screen-only PDFs the cream may run to the page edge.
Never two blocks of the same ground back to back — alternate light (cream, lilac, lime-wash, white) and dark (navy, violet).
Two families per page: Barlow (Condensed) for display, labels and figures; Poppins for reading.
Weights are the bundled cuts’ real weights — display caps 900 (Barlow Condensed Black), h3 and quotes 600, eyebrows 700, lead and captions 500, reading text 400. Never ask a family for a weight it does not ship: the renderer would fake a bold.
One colour-shift phrase per heading (class sg-doc-accent): orange #F15627 only at title and h1 size on light grounds; lilac or lime on navy.
Orange text below 18pt is the accent ink #C5380D; navy text only on sky and lilac.
The footer reads “Good Journey LLC · goodjourneydonuts.com” — never the brand book’s title.
Stickers, doodles and claim badges: at most one per page, at a band’s edge, never over text, never in legal documents or near a client’s name or a price.
Health claims, ratings, customer counts and competitor figures need owner and legal sign-off before a document leaves the company.
The licensed display faces are never embedded in a document unless the owner supplies licensed files; the bundled stand-ins render.

Hard rules

Not a matter of taste

Logo

Keep clear space equal to the height of the “O” in GOOD on every side of every logotype and lockup.
Use the small-scale stacked logotype below 200 × 200 px / 2 × 2 in, and the small-scale horizontal below 100 × 300 px / 1 × 3 in.
Never stretch, recolour off-palette, place on busy or low-contrast grounds, add drop shadows, reconfigure, rotate, tilt or skew the marks.
The logotype is an asset, never live type: no font in this guide draws the swooping R.

Colour

Navy #312E7C is the brand ink; cream #FFFBF7 the screen page (#FFF8EF / CMYK 0, 3, 6, 0 in print). Text on cream is navy or violet #5D59C4 — nothing lighter.
Orange #F15627 carries cream text only at large size — ≥ 24px, or ≥ 18.66px bold (≥ 18pt / 14pt bold in print): pill labels, display headlines, big numbers. Smaller orange text is --gj-accent-ink #C5380D. Sky, lime, pink and the flavour colours are fills.
On navy, emphasis is lilac #DED9FF or lime; violet (2.04:1) and orange (3.37:1) never carry text on navy.
Sky and lilac grounds take navy text only. Never cream or white on sky (2.29:1), never orange on lilac (2.54:1), never body-size orange on cream (3.34:1).
Periwinkle #7878FA is a print and brand-book colour; on screen its jobs go to violet and lilac.

Type

Headline emphasis is a colour change, never a weight change.
Obviously, Obviously Narrow, Bicyclette and alkaline are licensed faces: never bundled, self-hosted or embedded from this guide. Production use of Obviously needs a purchased OH no Type licence for the medium (web, print, app), and Bicyclette a proper licence of its own. Until then the bundled open stand-ins render: Barlow Condensed Black for Obviously Narrow, Barlow Black for Obviously, Poppins for Bicyclette.

Sub-brands

Donuts and Cookies use the parent logotype plus their pill (DONUTS / COOKIES) and their flavour palette; they never get their own logotype.

Claims

Health and nutrition claims (zero added sugar, net carbs, keto, gluten-free, non-GMO) appear only as printed on the current pack.
In business and legal documents, health and performance claims — “no spikes”, “zero glycemic”, “diabetic-friendly”, customer counts and star ratings (“4,300 happy customers”), competitor nutrition comparisons — need owner and legal sign-off before the document leaves the company.

Accessibility

Every text pair meets WCAG 2.1 AA (4.5:1, 3:1 for large text); every interactive state has a visible focus ring and a reduced-motion alternative.

Layout

Bands alternate light (cream, lilac, lime-wash, sky) and dark (navy, violet, orange); two bands of the same ground never touch.

Contact

Website goodjourneydonuts.com · support hello@goodjourneyfoods.com · legal entity Good Journey LLC. One copyright line per page, “© <current year> Good Journey LLC”, set as live text — never baked into the logo artwork.

Documents

Business documents never carry the brand book’s title (“The Brand Wellness Manual”) in a header or footer; their footer reads “Good Journey LLC · goodjourneydonuts.com”.

Good Journey · Good Journey — Brand Guide · Version 2.0.0, 2026-10-03 — The Brand Wellness Manual (2025-08-07) rebuilt for the web, aligned with the live website goodjourneydonuts.com, with document layouts for business documents. Screen values follow the website; print builds follow the manual.