Sample piece↗Patchwork & little adventures
The gathering bag
$98Garden remnantsSample price · USD
Good Apollo · Design system · v0.1
A home for
the little details.
Warm, a little eclectic, and quietly considered. These are the foundations that keep Good Apollo feeling like itself, wherever it grows.
01 / Brand
Familiar, with a little character.
An expressive serif wordmark and a plainspoken descriptor. Give the wordmark room to breathe; keep it in plum or ink on a light surface.
02 / Color
Paper, plum, and a pat of butter.
Primitive colors feed semantic tokens such as --color-brand and --color-page. Change a role once in src/styles/tokens.css to update the whole storefront.
#37272f
Plum ink
Headings & body text
--color-plum-950#543543
Good Apollo plum
Primary actions & brand
--color-plum-800#fbf8f2
Warm paper
Page background
--color-cream-50#f5f0e6
Natural linen
Quiet section surfaces
--color-cream-100#eed99b
Butter
Small moments of warmth
--color-butter-300#656b4e
Garden olive
A subtle nod to our roots
--color-olive-70003 / TypographyA little expression.
A little expression.
A lot of clarity.
Fraunces brings warmth to the headlines. DM Sans keeps the practical things easy to read. Both are variable fonts, served locally.
Display / Fraunces / Fluid hero scale
Good things,
made at home.
Heading / Fraunces / Section scale
The good things.
Body / DM Sans / 16px · 1.6 leading
A crochet project on the couch. Fabric across the table. A pair of knitting needles never too far away.
Label / DM Sans / 13px · Tracked
From our home, with love
04 / Space & shape
Room to settle in.
A 4px base rhythm, generous section spacing, and fluid page gutters. Small corners for photography. Full rounds for buttons. The arch is reserved for editorial images.
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px--space-2080px--space-2496px05 / Components
The useful little things.
These are the same Astro components used by the storefront. They inherit the foundations, including hover, focus, and reduced-motion behavior.
Sample pieceA little about us
06 / Putting it together
Make it feel like us.
Let the work be the detail.
Use natural light, visible texture, and honest product photographs. Keep the interface quiet enough to let individual pieces have their own character.
Talk like a person.
Warm, specific, and unhurried. Say what a piece is, how it was made, and what makes it special. Leave out urgency, inflated claims, and sales tricks.
Keep comfort practical.
Readable contrast, visible keyboard focus, roomy touch targets, and layouts that work from small phones up. Motion should be subtle and respect reduced-motion preferences.
Change the foundation first.
Colors, font families, type scales, spacing, radii, and motion live in src/styles/tokens.css. Product content lives separately in src/data/products.ts. See docs/design-system.md for the full editing guide.