Good Journey

Brand guidelines · goodjourney v1 · stable

Building something for this brand? Read /agent.md — it is the machine-readable contract an agent or a build tool applies. Machine-readable siblings: effective.json, brand.css, tokens.tailwind.css, tokens.dtcg.json, .well-known/styleguide.json.

Good Journey — Good Journey — The Brand Wellness Manual

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 below is loaded from this project’s own /api/styleguide/assets/<sha256> — the same content-addressed path <BrandLogo/> resolves to everywhere else on the site. Publish a new mark at the master and this page changes with the rest of the estate.

Logo

Good Journey stacked logotype

logo.primaryLogoLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	2048 × 749	Cream, 2048 px raster · inverse · on --gj-navy · email`f29275adb7ef9c8e…`
inverse	inverse	dark	`svg`	1200 × 439	Cream on navy, sky or photography (p.29) · inverse · on --gj-navy · web`eed09a5301ec666f…`
inverse	mono	dark	`svg`	1200 × 439	Single-ink white — production only (decision G-11) · mono · on #000000 · web`d62e2e7855810449…`
inverse	inverse	dark	`svg`	1200 × 431	Small-scale cut, cream (p.32) · inverse · on --gj-navy · web`c4b541b1872a683f…`
mono	mono	light	`svg`	1200 × 439	Single-ink black — production only (decision G-11) · mono · on #FFFFFF · web`b7a388a399b897c9…`
primary	lime	dark	`svg`	1200 × 439	Lime on navy — the cover (p.1) · lime · on --gj-navy · web`1fdbd85c9c6fadbb…`
primary	one-color	light	`png`	2048 × 749	Navy on cream, 2048 px raster · one-color · on --gj-surface · email`e20b74bd500148b6…`
primary	one-color	light	`svg`	1200 × 439	Navy on cream — the primary mark (pp. 28, 32) · one-color · on --gj-surface · web`63aa6978ee7b29c0…`
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`4cf6ecf57b8a9ad7…`

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	2048 × 209	Cream, 2048 px raster · inverse · on --gj-navy · email`fb77b06699019ccc…`
inverse	inverse	dark	`svg`	1200 × 122	Cream on navy — the website header (p.36) · inverse · on --gj-navy · web`83380bb9eca15e1c…`
inverse	mono	dark	`svg`	1200 × 122	Single-ink white (decision G-11) · mono · on #000000 · web`20af107b5e902e41…`
inverse	inverse	dark	`svg`	1200 × 121	Small-scale cut, cream (p.33) · inverse · on --gj-navy · web`9c8fdc1f72aa8998…`
lockup	pink	dark	`svg`	1200 × 122	Pink on navy (p.29) · pink · on --gj-navy · web`2a54ead8155ffd66…`
lockup	one-color	light	`png`	2048 × 209	Navy, 2048 px raster · one-color · on --gj-surface · email`b0c13e205a33e3a7…`
lockup	one-color	light	`svg`	1200 × 122	Navy on cream (p.33) · one-color · on --gj-surface · web`31f3f8141e978a40…`
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`c2786cf368b24774…`
mono	mono	light	`svg`	1200 × 122	Single-ink black (decision G-11) · mono · on #FFFFFF · web`49fa5264cdfe19f4…`

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

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`ed1b257b83461959…`

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`svg`	1200 × 531	Cream on sky (p.30) · inverse · on --gj-sky · web`8a2b07573b84dd43…`
wordmark	pink	dark	`svg`	1200 × 531	Pink on navy (p.30) · pink · on --gj-navy · web`7ca9f8ce4869fb1c…`
wordmark	one-color	light	`svg`	1200 × 531	Navy on cream (p.30) · one-color · on --gj-surface · web`743426e59dd1abb9…`
wordmark	orange	light	`svg`	1200 × 531	Orange on pink (p.30) · orange · on --gj-pink · web`2ea4398b7b9ee1d3…`
wordmark	sky	light	`svg`	1200 × 531	Sky on lime (p.30) · sky · on --gj-lime · web`651981e6a29686de…`

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`svg`	1200 × 697	Stacked, cream (p.39) · inverse · on --gj-navy · web`e973d537b070c9be…`
inverse	inverse	dark	`svg`	1200 × 294	Horizontal, cream (p.39) · inverse · on --gj-navy · web`1025d3a9a8c2a8a9…`
lockup	one-color	light	`svg`	1200 × 697	Stacked, navy (p.41) · one-color · on --gj-surface · web`fd6cc9b85250fc2e…`
lockup	one-color	light	`svg`	1200 × 294	Horizontal, navy (p.42) · one-color · on --gj-surface · web`343504aacd93327f…`

Licence

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

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

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

Image

Sticker graphics

image.stickersImageTunable

A project may replace this within the constraint the brand declared.

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`29db9fdcd7573567…`

Licence

Never

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

Pattern

Wave rule

pattern.wavePatternTunable

A project may replace this within the constraint the brand declared.

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`1808cc4dd3e5e5e4…`

Licence

App icon

Good Journey app icon

appicon.pwaApp iconLocked

The brand owns this. A project override is refused at the master and fails the checker.

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. A slot the brand does not ship says so rather than showing something else.

On a light ground

Good Journey a

Browser tab16 × 16

On a dark ground

Good Journey a

Browser tab16 × 16

One colour — black, on light

One colour — white, on dark

Size ladder

Platform	Purpose	Size	Format	Colourway	As served
pwa	any	512 × 512	`png`	full-color	pngPWA 512 (any)`fa286ba78044d2fa…`
pwa	maskable	512 × 512	`png`	full-color	pngPWA 512 (maskable)`f5d76aaddb648421…`
pwa	monochrome	512 × 512	`png`	mono	pngPWA 512 (monochrome)`9d603fb40b470211…`
pwa	any	192 × 192	`png`	full-color	pngPWA 192 (any)`fa4b18961e0dd090…`
pwa	maskable	192 × 192	`png`	full-color	pngPWA 192 (maskable)`2c61b64d0259cdca…`
ios	any	1024 × 1024	`png`	full-color	pngApp Store 1024`27998337246c8f20…`
ios	any	180 × 180	`png`	full-color	pngiOS 180 (apple-touch-icon)`b155ecd9bbcc8809…`
ios	any	167 × 167	`png`	full-color	pngiPad Pro 167`424054e8adb22b94…`
ios	any	152 × 152	`png`	full-color	pngiPad 152`58b7420466fd02f7…`
ios	any	120 × 120	`png`	full-color	pngiPhone 120`0013a49c4478f587…`
macos	any	1024 × 1024	`png`	full-color	pngmacOS 1024 (rounded tile; not the Apple template squircle)`db3535ff39c6191f…`
windows	any	150 × 150	`png`	full-color	pngWindows tile 150`690e6e44e1bf5d0d…`
web	any	1024 × 1024	`svg`	full-color	svgMaster (vector) — navy Gj on full-bleed lime`785011b9759e8f44…`
web	any	1024 × 1024	`svg`	full-color	svgRounded tile (vector)`cc4d65369a058745…`
web	any	512 × 512	`png`	mono	pngOne-colour black`9d603fb40b470211…`
web	any	512 × 512	`png`	inverse	pngOne-colour white`14e96857b3000d14…`
web	any	512 × 512	`svg`	mono	svgOne-colour black (vector)`c3c3796890255b83…`
web	any	512 × 512	`svg`	inverse	svgOne-colour white (vector)`2d7014a388fb43ed…`
web	any	48 × 48	`ico`	full-color	icofavicon.ico (16/32/48)`42603c28c737d122…`
web	any	48 × 48	`png`	full-color	pngFavicon 48`a2697c26a855ab13…`
web	any	32 × 32	`png`	full-color	pngFavicon 32`9c41c455247af2db…`
web	any	16 × 16	`png`	full-color	pngFavicon 16`01364861f0feffd8…`

Cut from a vector master — every raster above is derived from it, so a new master regenerates the whole ladder.

Licence

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.

Share image

Social share card

og.socialShare imageTunable

A project may replace this within the constraint the brand declared.

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`fa7806901fb0e1e7…`

Licence

Font

Barlow Condensed SemiBold

font.headlineFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Barlow Condensed SemiBold 600 — the manual's headline face · web`215a93c696f44203…`

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

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

Barlow Condensed Bold

font.displayFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

Barlow Black

font.titleFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

Poppins

font.sansFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

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

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.sans-boldFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

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

Licence

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 below is documented in the one mode this guide declares and then read back off the live stylesheet. A token that no longer matches what is written here says so, in the row where it happens.

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

Live checkreading the stylesheet…

Parent palette (p.34)

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

Cream page#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

Cream page#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

Cream page#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

Cream page#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

Cream page#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

Cream page#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

Cream page#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

Cream page#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

Cream page#FFF8EF

—

--gj-white

White

Palette p.34: WEB HEX FFFFFF.

In ink — Pantone WHITE INK · CMYK 0, 0, 0, 0

Cream page#FFFFFF

—

Donuts flavour palettes (p.43)

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

Cream page#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

Cream page#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

Cream page#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

Cream page#FED09E

—

Cookies flavour palette (p.52)

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

Cream page#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

Cream page#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

Cream page#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

Cream page#8A8BC4

—

Colours the manual draws but does not list

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

Cream page#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.

Cream page#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.

Cream page#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).

Cream page#181752

—

Grounds

--gj-surface

The page — cream

Every light page of the manual is cream (CMYK 0, 2, 5, 0).

Cream page#FFF8EF

—

--gj-surface-raised

Cards and panels on the page

White — the website product cards (p.36).

Cream page#FFFFFF

—

--gj-surface-tint

Pale-lime band — persona panels, the large-scale table cells

pp. 22, 29, 32–33.

Cream page#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.

Cream page#D3D3EB

—

Ink

--gj-ink

Body copy, headlines, the wordmark

Navy on cream 10.99:1.

Cream page#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.

Cream page#646491

—

--gj-ink-secondary

Supporting text — the violet copy

pp. 8, 12, 15: 6.08 / 6.40 / 5.56.

Cream page#5351BD

—

--gj-on-ink

Ink on a navy fill

Cream page#FFF8EF

—

Accent and action

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

Cream page#F15627

—

--gj-accent-ink

Orange as text — prices, ratings, small signals

Cream page#C5380D

—

--gj-action

The primary button fill

Cream page#C5380D

—

--gj-action-hover

The primary button at hover

Cream page#A82F0B

—

--gj-on-action

Label on the primary button

Cream page#FFF8EF

—

--gj-highlight

The highlighter — lime behind a phrase

pp. 5, 17: a lime block behind navy text.

Cream page#E9E72F

—

--gj-on-highlight

Text on the highlighter

8.79:1.

Cream page#312E7C

—

--gj-link

A link at rest — navy, underlined

Cream page#312E7C

—

--gj-link-hover

A link at hover and focus

Cream page#5351BD

—

--gj-focus-ring

The focus outline

Cream page#5D59C4

—

Lines and fills

--gj-border

The default hairline

Cream pagergba(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.

Cream page#312E7C

—

--gj-hairline

A soft rule

Cream page#D3D3EB

—

--gj-fill-soft

A navy wash — empty states, chips

Cream pagergba(49, 46, 124, 0.06)

—

Status

--gj-positive

Success as text and rule

Cream page#1E7A46

—

--gj-warning

Warning as text and rule

Cream page#8F6301

—

--gj-negative

Error as text and rule

Cream page#BB4425

—

--gj-info

Information as text and rule

Cream page#0D6DBE

—

Shape and elevation

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

Cream page20px

—

--gj-radius-sm

Inputs, chips

pp. 22, 24, 26: the persona info box corner.

Cream page10px

—

--gj-radius-pill

Buttons and the sign-in control

p.36: SHOP NOW and Sign In are full pills.

Cream page999px

—

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

Cream page3px 3px 0 rgba(35, 31, 32, 0.5)

—

--gj-shadow-lift

A lifted card

Cream page0 12px 32px -20px rgba(49, 46, 124, 0.45)

—

Type roles (root-scoped)

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

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

Cream page"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.

Cream page"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).

Cream pageobviously, "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.

Cream pagePoppins, "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).

Cream page"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).

Cream pagebicyclette, 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).

Cream pagealkaline, "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

Live checkreading the stylesheet…

Grounds

--gj-surface

The navy block

Navy block#312E7C

—

--gj-surface-raised

A card on navy — recessed

Navy block#26236B

—

--gj-surface-tint

The deep band

The gradient shadow of the navy pages.

Navy block#181752

—

--gj-surface-soft

A soft band on navy

Navy block#2A2774

—

Ink

--gj-ink

Copy on navy

10.99:1 — pp. 6, 11, 19 set statements in cream on navy.

Navy block#FFF8EF

—

--gj-ink-muted

Secondary copy on navy

7.88:1.

Navy block#D3D3EB

—

--gj-ink-secondary

Supporting text on navy

Navy block#F1F2C4

—

--gj-on-ink

Ink on a cream fill

Navy block#312E7C

—

Accent and action

--gj-accent

The signal on navy

pp. 6, 10, 11, 19: the emphasised words are lime on navy (8.79:1).

Navy block#E9E72F

—

--gj-accent-ink

Signal text on navy

Navy block#E9E72F

—

--gj-action

The primary button on navy

Navy block#E9E72F

—

--gj-action-hover

The button at hover on navy

Navy block#F1F2C4

—

--gj-on-action

Label on the lime button

Navy block#312E7C

—

--gj-highlight

The highlighter on navy

Navy block#E9E72F

—

--gj-on-highlight

Text on the highlighter

Navy block#312E7C

—

--gj-link

A link on navy

Navy block#E9E72F

—

--gj-link-hover

A link at hover on navy

Navy block#F1F2C4

—

--gj-focus-ring

Focus outline on navy

Navy block#E9E72F

—

Lines and fills

--gj-border

Hairline on navy

Navy blockrgba(255, 248, 239, 0.18)

—

--gj-border-strong

Strong rule on navy

Navy block#FFF8EF

—

--gj-hairline

Soft rule on navy

Navy blockrgba(255, 248, 239, 0.12)

—

--gj-fill-soft

A cream wash on navy

Navy blockrgba(255, 248, 239, 0.08)

—

Status

--gj-positive

Success on navy

Navy block#7BD4A4

—

--gj-warning

Warning on navy

Navy block#FDB515

—

--gj-negative

Error on navy

Navy block#F58461

—

--gj-info

Information on navy

4.91:1 on navy.

Navy block#5DAFF4

—

Typography

Set live, at natural size

The three faces

Barlow Condensed

--font-headline500 (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-title900 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-display700 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-sans400 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-bold700 · 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-prose400, 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-scriptone · 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

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, at true size

Operator — table row, chip

16px

Operator — toolbar, sidebar

20px

Marketing — inline with labels

24px

Marketing — benefit icons in a circle (p.36)

48px

Rules

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, at true size

--gj-space-1

The base unit (G-8)

—

--gj-space-2

—

--gj-space-3

—

--gj-space-4

Card padding

—

--gj-space-5

Between blocks

—

--gj-space-6

Section rhythm on desktop

—

--gj-space-7

Hero and divider bands

—

--gj-gutter

Page inline padding — the manual's text column starts 158px in on a 1920px page

—

Declared: 4px · 8px · 16px · 24px · 40px · 64px · 96px · 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

--gj-ease

Reveals and hovers (G-8)

cubic-bezier(0.22, 1, 0.36, 1)

--gj-ease-in-out

Colour changes

ease-in-out

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.

The guide's own chrome, in the hand

Hover me

The kit’s hover contract — dims in 140ms, restores in 280ms

The kit’s waiting mark — a hairline breathing 0.35↔0.75 over 2s

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

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

pp. 29, 39, 48

Keep clear space equal to the height of the “O” in GOOD on every side of every logotype and lockup.

pp. 32–33, 41–42, 50–51

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.

pp. 31, 40, 49

Never stretch, recolour off-palette, place on busy or low-contrast grounds, add drop shadows, reconfigure, rotate, tilt or skew the marks.

pp. 28–33

The logotype is an asset, never live type: no font in this guide draws the swooping R.

Colour

p.34; decision G-1, G-4

Navy #312E7C is the brand ink; cream #FFF8EF the page. Text on cream is navy, violet-ink #5351BD or soft ink #646491 — nothing lighter.

decision G-3

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.

pp. 6, 10, 11, 19

On navy, the accent is lime. Violet on navy (2.04:1) and orange on navy (3.37:1) never carry text.

decision G-4

Periwinkle #7878FA grounds carry large type only (≥ 24px, or 19px bold): cream on it is 3.40:1.

Type

pp. 6, 9–11, 19

Headline emphasis is a colour change, never a weight change.

pp. 35, 44, 53; decision G-7

Bicyclette, alkaline, Obviously and Obviously Narrow are licensed through Adobe Fonts and are never self-hosted or bundled.

Sub-brands

pp. 39–55; decision G-12

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

Claims

pp. 36–37, 46, 55

Health and nutrition claims (zero added sugar, net carbs, keto, gluten-free, non-GMO) appear only as printed on the current pack.

Accessibility

decision G-3, G-8

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 · a living document — the colour section reads the stylesheet on every load

Version 1 · pointer 1 · manifest 4838b8c2e5f5ed90… · published 2026-10-03T15:15:04Z · goodjourneydonuts.com · Admin