Good Journey

Good Journey — The Brand Wellness Manual

Provisional v1.0.0, 2026-10-02 — a faithful web rebuild of the 56-page Brand Wellness Manual (dated 2025-08-07) with sixteen open decisions (G-1 to G-16) that fill what the manual does not cover. Not yet ratified by Good Journey.

Distilled from

Contents

01	Identity
02	Assets
03	Voice
04	Colour
05	Typography
06	Iconography
07	Layout
08	Motion
09	Components
10	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

Navy pages and cream pages alternating like a book, with lime as the light in between (pp. 2–56)
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)
Stickers with hard offset shadows (p.30)

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 wave rule

A lime wavy line under every section label (pp. 19–55) — the road again, as a rule.

Colour-shift emphasis

A headline's key phrase changes colour — lime on navy, periwinkle on cream — instead of changing weight (pp. 6, 9–11, 19).

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).

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	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 wavy underline under every section label (pp. 2, 19–20, 29–55), lime · one-color · on --gj-surface · web

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 — the manual's headline face · 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 Medium

Font · Locked

font.label

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed Medium 500 — tracked labels · web

Barlow Condensed Bold

Font · Locked

font.display

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed Bold 700 — numerals, names; the website display stand-in · web

Barlow Black

Font · Locked

font.title

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Black 900 — section titles · 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 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.

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: stickers, the website CTA fill, the Horchata and Churro packs Palette p.34 / p.43 / p.52: WEB HEX F15627 / RGB 241, 86, 39. 3.27:1 on cream — a FILL, never small text (decision G-3). 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. 2.24:1 on cream — decorative and ground only (decision G-3). In ink — Pantone 284 U · CMYK 60, 26, 0, 0	`#5DAFF4`
`--gj-lime`	Lime — the cover, the highlighter, the wave rule, accents on navy Palette p.34 / p.43: WEB HEX E9E72F / RGB 233, 231, 47. The book's own pages paint lime from CMYK 16, 0, 76, 0, which renders as #DEE463 on screen — see drift and decision G-2. 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. 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. In ink — Pantone 0131 C · CMYK 0, 0, 19, 5	`#F1F2C4`
`--gj-cream`	Cream — the page Palette p.34 / p.43 prints WEB HEX FFF5EC but RGB 255, 248, 239 (= #FFF8EF); the two disagree. The book's own page ground is CMYK 0, 2, 5, 0 (≈ #FFF9F0), which agrees with the RGB. #FFF8EF is used (decision G-1). In ink — Pantone 9226 U · CMYK 0, 3, 6, 0	`#FFF8EF`
`--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 book's own periwinkle — divider pages, the Donuts header bar, statement bands Observed in the manual's layout (pp. 2, 14, 18, 20, 27, 38–46, 56) as RGB 120, 120, 250; it is NOT printed on any palette page. Closest palette colour: violet #5D59C4. Cream text on it measures 3.40:1 — large type only (decision G-4).	`#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`

Grounds

Token	Role	Cream page
`--gj-surface`	The page — cream Every light page of the manual is cream (CMYK 0, 2, 5, 0).	`#FFF8EF`
`--gj-surface-raised`	Cards and panels on the page White — the website product cards (p.36).	`#FFFFFF`
`--gj-surface-tint`	Pale-lime band — persona panels, the large-scale table cells pp. 22, 29, 32–33.	`#F1F2C4`
`--gj-surface-soft`	Lavender band — persona panels, quote cards pp. 24, 26, 32–33. Navy only on this ground: soft and secondary inks fall below 4.5:1.	`#D3D3EB`

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 book's own soft ink (pp. 22, 24, 26): 5.28 / 5.56 / 4.83 on cream / white / pale lime.	`#646491`
`--gj-ink-secondary`	Supporting text — the violet copy pp. 8, 12, 15: 6.08 / 6.40 / 5.56.	`#5351BD`
`--gj-on-ink`	Ink on a navy fill	`#FFF8EF`

Accent and action

Token	Role	Cream page
`--gj-accent`	The signal FILL — stickers, the CTA ground in the website mockup, badges Fill only: cream on it is 3.27:1 and white 3.44:1, so it never carries small text (decision G-3).	`#F15627`
`--gj-accent-ink`	Orange as text — prices, ratings, small signals	`#C5380D`
`--gj-action`	The primary button fill	`#C5380D`
`--gj-action-hover`	The primary button at hover	`#A82F0B`
`--gj-on-action`	Label on the primary button	`#FFF8EF`
`--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	`#5351BD`
`--gj-focus-ring`	The focus outline	`#5D59C4`

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`	Quote cards and persona panels pp. 22, 24, 26: the quote card is drawn with a 20px corner on the 1920px page.	`20px`
`--gj-radius-sm`	Inputs, chips pp. 22, 24, 26: the persona info box corner.	`10px`
`--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)`

Type roles (root-scoped)

Token	Role	Cream page
`--font-display`	Website display — the CTA, hero and product headlines p.35 names Obviously Narrow (Adobe Fonts) as the website display face; it cannot be bundled, so the stack falls back to the bundled Barlow Condensed Bold (decision G-7).	`obviously-narrow, "Barlow Condensed Bold", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-headline`	The manual's statement headlines Barlow Condensed SemiBold — pp. 6, 9–11, 19–20 (112 px statements) and every page heading (60 px).	`"Barlow Condensed SemiBold", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-label`	Tracked caps labels and eyebrows Barlow Condensed Medium at 0.09em tracking — pp. 5, 12, 15, 19–26, 29–45.	`"Barlow Condensed Medium", "Barlow Condensed", "Arial Narrow", sans-serif`
`--font-title`	Wide, heavy section titles p.35 names Obviously (Adobe Fonts) as a website face; the manual sets its section titles in Barlow Black (pp. 3, 4, 13, 18, 27, 28, 38, 47, 56).	`obviously, "Barlow Black", "Arial Black", sans-serif`
`--font-sans`	Every running word on screen: body, UI, buttons p.35 names Poppins (Google Fonts) as the website text face. Bundled.	`Poppins, "Helvetica Neue", Arial, sans-serif`
`--font-sans-bold`	Poppins at 700 — labels, buttons, emphasis 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 collateral body face Bicyclette (Adobe Fonts) sets every body line in the manual; a consumer that loads an Adobe Fonts kit gets it, everyone else gets Poppins (decision G-7).	`bicyclette, Poppins, "Helvetica Neue", Arial, 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 gradient shadow of the navy pages.	`#181752`
`--gj-surface-soft`	A soft band on navy	`#2A2774`

Ink

Token	Role	Navy block
`--gj-ink`	Copy on navy 10.99:1 — pp. 6, 11, 19 set statements in cream on navy.	`#FFF8EF`
`--gj-ink-muted`	Secondary copy on navy 7.88:1.	`#D3D3EB`
`--gj-ink-secondary`	Supporting text on navy	`#F1F2C4`
`--gj-on-ink`	Ink on a cream fill	`#312E7C`

Accent and action

Token	Role	Navy block
`--gj-accent`	The signal on navy pp. 6, 10, 11, 19: the emphasised words are lime on navy (8.79:1).	`#E9E72F`
`--gj-accent-ink`	Signal text on navy	`#E9E72F`
`--gj-action`	The primary button on navy	`#E9E72F`
`--gj-action-hover`	The button at hover on navy	`#F1F2C4`
`--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	`#F1F2C4`
`--gj-focus-ring`	Focus outline on navy	`#E9E72F`

Lines and fills

Token	Role	Navy block
`--gj-border`	Hairline on navy	`rgba(255, 248, 239, 0.18)`
`--gj-border-strong`	Strong rule on navy	`#FFF8EF`
`--gj-hairline`	Soft rule on navy	`rgba(255, 248, 239, 0.12)`
`--gj-fill-soft`	A cream wash on navy	`rgba(255, 248, 239, 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

Barlow Condensed

--font-headline 500 (labels), 600 (headlines), 700 (numerals, names, table labels) · upright only

Every headline and page heading in the manual, always uppercase; tracked caps labels at 500.

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).

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

Statements: 600, uppercase, line-height 0.89, tracking 0 — 112px on the 1920px page.
Page headings: 600, uppercase, 60px, tracking 0, under a 29px 500 eyebrow tracked 0.09em.
Section labels: 500, uppercase, tracking 0.09em, 41px, underlined by the wave rule.
Two-colour emphasis: the key phrase changes colour (lime on navy, periwinkle or violet on cream), never weight.

Barlow

--font-title 900 bundled (800, 600, 400 used once each in the manual) · upright only

Divider titles (VERBAL IDENTITY, PERSONALITY, DONUTS) and the closing page.

Named on p.35 as a Google Font; embedded as Barlow-Black, -ExtraBold, -Bold, -SemiBold, -Regular. Black is bundled. The website's wide display face is Obviously (Adobe Fonts, p.35) — documented, not bundled; it leads the stack so an Adobe Fonts kit wins.

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

Uppercase, tracking 0, one or two words, display sizes only (≥ 48px).

Obviously Narrow → Barlow Condensed Bold

--font-display 700 bundled · upright only

Website hero headlines, product-card titles and button labels — uppercase.

p.35 lists Obviously Narrow (Adobe Fonts) as a website font; the website mockup (p.36) sets SHOP BEST SELLERS, the hero and the CTAs in it. Not redistributable outside Adobe Fonts, so the bundled Barlow Condensed Bold stands in (decision G-7).

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

Uppercase only.
Never below 16px.

Poppins

--font-sans 400 and 700 (each its own family name) · 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.5 on the web.
Bold labels use --font-sans-bold, never a synthesised weight.

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; on screen only where an Adobe Fonts kit is loaded.

pp. 35, 44, 53 name Bicyclette as an Adobe Font; it sets every body line, label and running header in the manual (Regular, Italic, Bold, Black embedded). Adobe Fonts licences web use only through an Adobe-hosted kit, so it is documented and never bundled; Poppins is the bundled stand-in (decision G-7).

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.

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-statement`	`clamp(2.5rem, 5.8vw, 7rem)`	Statement headline — Barlow Condensed 600, uppercase, line-height 0.89 (112px on the 1920px page)
`--gj-text-title`	`clamp(3rem, 9vw, 10.75rem)`	Divider title — Barlow Black, uppercase (172px on the page)
`--gj-text-h1`	`clamp(2.25rem, 4vw, 3.75rem)`	Page heading — Barlow Condensed 600, uppercase (60px)
`--gj-text-eyebrow`	`1.125rem`	Eyebrow over a heading — Barlow Condensed 500, uppercase, 0.09em (29px on the page)
`--gj-text-label`	`1.5rem`	Section label with the wave rule — Barlow Condensed 500, 0.09em (41px on the page)
`--gj-text-tagline`	`clamp(1.75rem, 3.4vw, 4rem)`	Tagline / brand line — sentence case, line-height 1 (62–67px on the page)
`--gj-text-lead`	`1.25rem`	Lead paragraph — Poppins 400, line-height 1.5
`--gj-text-base`	`1rem`	Body — Poppins 400, line-height 1.5
`--gj-text-small`	`0.875rem`	Captions, legal — the marketing floor

Specimens

Statement

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

Barlow Condensed 600 · uppercase · line-height 0.89 · tracking 0 · one phrase in a second colour

Divider title

Personality

Barlow Black 900 · uppercase · tracking 0

Website hero

The donuts you thought you couldn’t have again

Obviously Narrow → Barlow Condensed 700 · uppercase (p.36)

Page heading with eyebrow

Logo usage — Primary marks

Eyebrow Barlow Condensed 500 tracked 0.09em over a Barlow Condensed 600 heading

Section label

Tone of voice + messaging

Barlow Condensed 500 · uppercase · 0.09em · the lime wave rule below

Tagline

Here’s where the journey gets sweet.

Bicyclette → Poppins 400 · sentence case · the highlighter behind one line

Body

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

Poppins 400 · 16px / 1.5 · navy

Label

Embodies

Poppins 700 (Bicyclette Black in print) · uppercase · 0.05em

Rules

Three bundled families do all the screen work: Barlow Condensed (headlines, labels), Barlow Black (titles), Poppins (everything else).
Headlines and labels are UPPERCASE; body copy, statements and taglines are sentence case (pp. 5, 16, 17).
Emphasis inside a headline is a colour change, never a weight change (pp. 6, 9, 10, 11, 19).
Tracked caps (0.09em) belong to Barlow Condensed Medium labels; headlines are never tracked.
The Adobe Fonts faces (Bicyclette, alkaline, Obviously, Obviously Narrow) are never self-hosted; they lead their stacks so a licensed kit wins.
Type floor 14px marketing, 12px operator.

Iconography

A system, not a folder

The system

Property	Specification
Library	Marketing: the brand's own hand-drawn doodles (pp. 1, 14, 21–25) as illustration, plus simple line icons in circles for benefits (p.36). Operator: Lucide.
Style	Monoline, rounded caps and joins, drawn with a slightly wobbly hand; one colour from the palette; no gradients, no duotone. A doodle decorates — an icon labels, and carries a word unless it is search, cart, account, close, back or menu.
Grid	Operator 24 × 24 on a 2px keyline. Marketing benefit icons sit centred in a 48px circle.
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
—	`48px`	Marketing — benefit icons in a circle (p.36)

Rules

Not a matter of taste

Icons take currentColor.
Doodles are decoration and aria-hidden.
No brand mark is redrawn as an icon.
The two sets never mix on one surface.

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 manual's text column starts 158px in on a 1920px page	`clamp(16px, 8vw, 158px)`

Structure

Token	Value	Role
`--gj-page-max`	`1280px`	Content measure
`--gj-prose-max`	`68ch`	Running text measure
`--gj-header-height`	`72px`	Site header — the manual's navy header band is 79px on the 1920px page
`--gj-rule-width`	`2px`	Box rules and table borders (pp. 15, 32–33)

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

Layouts alternate full-bleed bands — cream, navy, periwinkle or violet — the way the manual alternates pages; a page never stacks two bands of the same ground.
One statement per band. A band carries one headline, one supporting paragraph and at most one action.
Stickers and doodles sit in the margin of a band, never under text.
Photography runs full-bleed or in a tight grid with 12px gutters (pp. 7, 45, 46, 54, 55).

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-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

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.

Button hover

The pill darkens to --gj-action-hover over 150ms; nothing moves.

Banned

Bounce and elastic easing in UI
Motion on the logo — it never spins, wiggles or pops (p.31)
Auto-advancing carousels
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, stickers appear at rest without the pop, bands appear without the rise, drawers appear in place; 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 (p.36).

.gj-announcement

State	Specification
Rest	--gj-sky ground, --gj-navy ink (4.91:1), Poppins 700 14px, centred, 8px block padding

One message.
The mockup sets cream text on sky (2.24:1); the rail uses navy ink instead (decision G-3).

Site header

A navy band: Shop · About · search on the left, the cream horizontal logotype centred, cart and a Sign In pill on the right (p.36).

.gj-header

State	Specification
Rest	.gj-on-navy, height --gj-header-height, Poppins 600 15px nav in cream
Small	Nav collapses to a menu button; logotype switches to the small-scale cut below 300px wide

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

Footer

A navy band: stacked logotype, links, contact. Not shown in the manual (decision G-8).

.gj-footer

State	Specification
Rest	.gj-on-navy

Support address as printed on packs: hello@goodjourneyfoods.com (p.55).

Actions

Primary button

The SHOP NOW pill (p.36).

.gj-btn.gj-btn--primary

State	Specification
Rest	--gj-action ground, --gj-on-action label, --font-display uppercase 18px, radius --gj-radius-pill, padding 14px 32px
Hover	--gj-action-hover, 150ms
Focus	3px --gj-focus-ring outline, 2px offset
On navy	lime pill, navy label

One primary per band.
Never #F15627 under a white label — 3.44:1 (decision G-3).

Outline pill

The Sign In control (p.36): a 2px outline pill.

.gj-btn--outline

State	Specification
Rest	transparent, 2px --gj-border-strong, --gj-ink label
Hover	--gj-fill-soft ground

Secondary actions only.

Content

Split hero

Product photograph left, cream panel right: rating eyebrow, display headline, one paragraph, the primary button (p.36).

.gj-hero

State	Specification
Desktop	two columns 1:1
Mobile	photo above, panel below

The eyebrow is --gj-accent-ink, not --gj-accent.
Only claim a rating the business can substantiate.

Statement band

A full-bleed band with one statement headline whose key phrase changes colour, and a pull-quote below (pp. 6, 9–11, 19).

.gj-statement

State	Specification
On cream	navy headline, violet or periwinkle emphasis
On navy	cream headline, lime emphasis

Emphasis is colour, never weight.
Periwinkle grounds carry large text only (3.40:1 cream).

Section label

Tracked caps over the lime wave rule (pp. 19–20, 29–55).

.gj-label

State	Specification
Rest	--font-label, 0.09em, uppercase; the wave rule (pattern.wave) 8px below

The wave is the only decorative rule in the system.

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	lime or periwinkle bar

The bar is as tall as the paragraph.

Numbered list

Numbers in lime discs (pp. 21–25) or tall Barlow Condensed Bold numerals (pp. 12, 20).

.gj-numbered

State	Specification
Disc	lime disc, navy Barlow Black numeral
Tall	--font-display numerals in violet or lime

Two digits always: 01, 02.

Quote card

A rounded lavender or pale-lime card with a large navy closing quote mark (pp. 22, 24, 26).

.gj-quote-card

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

Navy text only on lavender.

Navy band

The brand's dark ground (pp. 3, 6, 11, 19).

.gj-on-navy

State	Specification
Rest	cream ink, lime accents

Lime is the accent on navy; violet is not (2.04:1).

Commerce

Product card

White card, 2px rounded navy border, photograph, name, one line, a full-width orange pill (p.36 SHOP BEST SELLERS).

.gj-product-card

State	Specification
Rest	--gj-surface-raised, 2px --gj-border-strong, radius --gj-radius-sm
Hover	--gj-shadow-lift

The pack photograph is the hero; no stickers on the card.

Benefit grid

A navy band of line icons with short labels — No Sugar Added, Gluten-Free & Keto-Friendly, Only 3g Net Carbs (p.36).

.gj-benefits

State	Specification
Rest	.gj-on-navy, cream line icons, Poppins 13px labels

Claims must match the label exactly.

Decoration

Sticker accent

One of the p.30 stickers placed at a slight angle with a hard offset shadow.

.gj-sticker

State	Specification
Rest	--gj-shadow-sticker, rotate −8° to 8°
Reveal	gj-pop once

Decorative: aria-hidden.
Never over text or the logo.

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 #FFF8EF the page. Text on cream is navy, violet-ink #5351BD or soft ink #646491 — nothing lighter.
Orange #F15627, sky #5DAFF4, lime #E9E72F, pink #FFD0E5 and the flavour colours are FILLS. Orange text uses --gj-accent-ink #C5380D; the primary button uses --gj-action #C5380D.
On navy, the accent is lime. Violet on navy (2.04:1) and orange on navy (3.37:1) never carry text.
Periwinkle #7878FA grounds carry large type only (≥ 24px, or 19px bold): cream on it is 3.40:1.

Type

Headline emphasis is a colour change, never a weight change.
Bicyclette, alkaline, Obviously and Obviously Narrow are licensed through Adobe Fonts and are never self-hosted or bundled.

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.

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.

Good Journey · Good Journey — The Brand Wellness Manual · Provisional v1.0.0, 2026-10-02 — a faithful web rebuild of the 56-page Brand Wellness Manual (dated 2025-08-07) with sixteen open decisions (G-1 to G-16) that fill what the manual does not cover. Not yet ratified by Good Journey.