Colour

A warm cream/charcoal base with a 1950s pastel accent palette. Pastels are almost always used at reduced opacity — /30, /40, or /60 — to keep the editorial feel. Never use pastels at full saturation as primary backgrounds.

Core Palette

Surface Hierarchy

surface

#FDF6F0

Page background, warm cream

surface-container-lowest

#ffffff

Cards, drawers, modals

surface-container-low

#F8F2EC

Subtle inset areas

surface-container

#F5F0EA

Form fields, qty stepper

surface-container-high

#EDE6DE

Hover states on containers

surface-variant

#F0E8E0

Image placeholder backgrounds

Interactive & Text

Primary

#2D2926

Buttons, text, interactive elements

Primary Container

#3D3936

Button hover state

Secondary

#6b5b56

Warm accent text, section labels

Secondary Container

#f4ded7

Tag chips, text selection bg

On Surface Variant

#574F4A

Secondary text, labels, descriptions

Outline

#8E8580

Secondary button borders

Outline Variant

#D5CBC5

Ghost borders — always /20 or lower

Error

#BA1A1A

Form errors, destructive states

1950s Accent Palette

Glaze-inspired accent colours. Used for category identity, section tints, and editorial moments. Almost always at reduced opacity — /30 to /60. Never use at full saturation as large backgrounds.

Blossom

#F4B8C6

Keep Cups, nav tint, bag badge

Pistachio

#B8D8B0

Mugs, maker section accents

Serene

#A8CDE0

House Numbers category

Canary

#F4E8A0

Jewellery, editorial quote bg

Latte

#C8BAA8

Footer, description placard

Usage rule

The three swatch tiers shown above illustrate correct usage. Top = full (category chip active state only). Middle = /40 (subtle tints, filter chips). Bottom = /30 (section backgrounds, description placards). Full-saturation backgrounds are reserved for small chip elements only.

Tailwind config

colors: {
  "primary":                  "#2D2926",
  "primary-container":        "#3D3936",
  "on-primary":               "#ffffff",
  "secondary":                "#6b5b56",
  "secondary-container":      "#f4ded7",
  "on-secondary-container":   "#71615c",
  "surface":                  "#FDF6F0",
  "surface-variant":          "#F0E8E0",
  "surface-container-lowest": "#ffffff",
  "surface-container-low":    "#F8F2EC",
  "surface-container":        "#F5F0EA",
  "surface-container-high":   "#EDE6DE",
  "on-surface":               "#2D2926",
  "on-surface-variant":       "#574F4A",
  "outline":                  "#8E8580",
  "outline-variant":          "#D5CBC5",
  "error":                    "#BA1A1A",
  "blossom":                  "#F4B8C6",
  "pistachio":                "#B8D8B0",
  "serene":                   "#A8CDE0",
  "canary":                   "#F4E8A0",
  "latte":                    "#C8BAA8"
}

Typography

Three fonts, three voices. Each carries a distinct register. Never mix fonts within a single text element.

Epilogue

font-headline

Architectural and authoritative. Used for all headings and brand moments. Always feels like it means something.

Weights: 400, 600, 700, 800

Plus Jakarta Sans

font-body

Modern and approachable. Body copy, prices on grid cards, product descriptions. Never uppercase.

Weights: 400, 500, 600

Work Sans

font-label

Technical and precise. Section labels, nav CTAs, category identifiers, micro labels. Always uppercase with generous tracking.

Weights: 300, 400, 500, 600

Epilogue — Scale & Usage

Hero Heading

800, 5xl–7xl

tracking-tighter

uppercase

Made by hand.

Section Heading

700, 3xl–4xl

tracking-tight

uppercase

Browse by Category

Product Name (Grid)

700, xl

tracking-tight

uppercase

Sage Keep Cup

Product Name (Detail)

800, 4xl–5xl

tracking-tighter

Sage Keep Cup

Brand Wordmark

bold, xl

tracking-tighter

uppercase

Tiny Cicada

Price (Detail)

400, 2xl

text-secondary

$65.00 AUD

Plus Jakarta Sans — Scale & Usage

Body Text

400, base–lg

leading-relaxed

Each piece is thrown, trimmed and glazed by hand — no two are identical. Objects that earn their place in your daily life.

Price (Grid)

600, lg

Never uppercase

$65.00

Work Sans — Scale & Usage

Section Label

400, xs

tracking-[0.2em]

Current Collection

Nav / CTA Label

400, xs

tracking-widest

View All Pieces

Category Label

400, xs

tracking-widest

Keep Cups

Micro Label

400, [10px]

tracking-[0.2em]

Gold Coast Hinterland

Tailwind config

fontFamily: {
  "headline": ["Epilogue", "sans-serif"],
  "body":     ["Plus Jakarta Sans", "sans-serif"],
  "label":    ["Work Sans", "sans-serif"]
}

// Google Fonts link:
// Epilogue: wght@400;600;700;800
// Plus Jakarta Sans: wght@400;500;600
// Work Sans: wght@300;400;500;600

Spacing

The site uses Tailwind's default 8dp-derived scale. Key spacing decisions are listed below.

Token / Class	Value	Usage
`max-w-site`	1200px	Content column max width on all pages
`px-8 md:px-12`	32px / 48px	Page-level horizontal padding
`py-32`	128px	Between major content sections
`mb-12` / `mb-16`	48px / 64px	Section header to content
`gap-8 md:gap-12`	32px / 48px	Product grid gaps
`p-10`	40px	Category card padding
`p-8`	32px	Description placard, cart drawer header padding
`py-16`	64px	Footer vertical padding

Standard page container pattern

<section class="py-32">
  <div class="max-w-site mx-auto px-8 md:px-12">

    <!-- Section header -->
    <div class="mb-16">
      <span class="font-label text-[10px] tracking-[0.2em] uppercase text-secondary block mb-4">
        Section Eyebrow
      </span>
      <h2 class="font-headline font-bold text-4xl tracking-tight uppercase">
        Section Heading
      </h2>
    </div>

    <!-- Section content -->
  </div>
</section>

Borders & Dividers

The site avoids using 1px solid rules to separate sections. Separation happens through surface colour shifts and generous negative space.

No-line rule

Never use border-b or border-t on section wrappers. Use background colour shifts or 128px+ negative space instead.

Where borders appear

Active nav link

border-b border-blossom

Shop About

Spec list rows

border-b border-outline-variant/20

Capacity: 200ml
Glaze: Sage & Cream
Material: Stoneware

Footer accent bar

w-12 h-1 bg-latte

border-t border-outline-variant/10

Drawer header/footer

border-b border-outline-variant/20

Your Bag

Cart items appear here

Fixed glassmorphism bar. The pink tint from Blossom/30 combined with the frosted glass effect creates a warm, semi-transparent header.

Live example (not fixed)

Tiny Cicada

person shopping_bag menu

Glass effect CSS

.glass-nav {
  background: rgba(253, 246, 240, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

Applied classes

<header class="fixed top-0 w-full z-50
  glass-nav bg-blossom/30">

Cart count badge — bg-blossom text-primary rounded-full — absolute positioned -top-1.5 -right-1.5

Active link indicator — border-b border-blossom pb-1 — also sets aria-current="page"

Z-index stack — nav z-50, cart overlay z-40, cart drawer z-50, cookie banner z-[60]

Buttons

Five button types. All use font-label font-bold uppercase tracking-widest except the Text link. All have explicit focus states.

Primary

bg-primary text-on-primary px-8 py-4
font-headline font-bold text-xs uppercase tracking-widest rounded
hover:opacity-80 transition-opacity duration-300
focus:outline-2 focus:outline-offset-2 focus:outline-primary

Secondary (Outline)

border border-outline px-12 py-4
font-label text-xs tracking-widest uppercase rounded-lg
hover:bg-primary hover:text-on-primary hover:border-primary
transition-colors duration-500
focus:outline-2 focus:outline-offset-2 focus:outline-primary

Text Link

Read Michelle's Story

inline-flex items-center gap-3
font-label text-xs uppercase tracking-widest
border-b border-primary pb-1 w-fit
hover:text-secondary hover:border-secondary
transition-colors
focus:outline-2 focus:outline-offset-2 focus:outline-primary

Filter Chips

Product Cards

No card container. The link element wraps the image and label directly. Image uses aspect-[3/4] with a hover scale effect. Quick View overlay appears on hover.

[IMAGE: Sage Keep Cup on studio shelf]

Sage Keep Cup

Keep Cups

$65

[IMAGE: Monstera Mug]

Monstera Mug

Mugs

$55

[IMAGE: House Number tile]

House Number Set

House Numbers

$85

Product card structure

<a href="..." class="group product-card-hover cursor-pointer block
  focus:outline-none focus-within:ring-2 focus-within:ring-primary
  focus-within:ring-offset-2 rounded-lg"
  aria-label="Product Name — $XX AUD">

  <div class="relative aspect-[3/4] bg-surface-variant
    overflow-hidden rounded-lg mb-6">
    <img class="w-full h-full object-cover
      group-hover:scale-105 transition-transform duration-700" />
    <!-- Quick View overlay -->
    <div class="quick-view absolute inset-0 bg-primary/10
      backdrop-blur-[2px] flex items-end justify-center pb-6">
      <span class="bg-surface-container-lowest px-5 py-2
        font-label text-[10px] uppercase tracking-widest
        rounded-lg">Quick View</span>
    </div>
  </div>

  <!-- Label row -->
  <div class="flex justify-between items-start">
    <div>
      <h3 class="font-headline font-bold text-xl uppercase
        tracking-tight mb-1">Product Name</h3>
      <p class="font-label text-xs uppercase tracking-widest
        text-on-surface-variant">Category</p>
    </div>
    <span class="font-body font-semibold text-lg">$65</span>
  </div>

</a>

Category Cards

Appear in the "Browse by Category" section. White surface, generous padding, accent colour bar as the only visual identifier for the category.

Keep Cups

Hand-thrown cups built for the commute.

Shop Keep Cups

Mugs

Generous mugs for slow mornings.

Shop Mugs

House Numbers

Made to order. Native botanical motifs.

Shop House Numbers

<a href="..." class="group p-10 rounded-lg bg-surface-container-lowest
  flex flex-col gap-4 hover:shadow-lg transition-shadow duration-300
  focus:outline-2 focus:outline-offset-2 focus:outline-primary">

  <div class="w-12 h-1 bg-{accent} rounded-full"></div>
  <h3 class="font-headline font-bold text-2xl uppercase">...</h3>
  <p class="font-body text-sm text-on-surface-variant">...</p>
  <span class="font-label text-xs uppercase tracking-widest
    text-secondary group-hover:text-primary transition-colors mt-2">
    Shop {Category}
    <span class="material-symbols-outlined text-xs">arrow_forward</span>
  </span>

</a>

Product Detail

12-column grid: gallery takes 7 columns, sidebar takes 5 (sticky top-28). On mobile, stacks vertically.

Product detail sidebar (condensed demo)

[GALLERY: Main product image + thumbnail strip]

Keep Cups

Sage Keep Cup

$65.00 AUD

Thrown on the wheel in sage and cream glaze. Fits standard portafilter baskets, comfortable to hold on the morning commute.

Handmade Stoneware 200ml

Capacity: 200ml
Glaze: Sage & Cream
Material: Stoneware

Free shipping over $100 Australia-wide

Grid layout

grid grid-cols-1 md:grid-cols-12 gap-12
// Gallery: md:col-span-7
// Sidebar: md:col-span-5 (sticky top-28)

Description placard

bg-latte/30 p-8 rounded-lg

Category chip

bg-{accent}/60 font-label text-[10px]
uppercase tracking-[0.2em]
px-3 py-1.5 rounded-lg

Tag chips

bg-secondary-container
text-on-secondary-container
font-label text-[10px] uppercase
tracking-[0.2em]
px-3 py-1.5 rounded-lg

Editorial Quote

Used for brand or maker voice moments. Canary/30 background, centred layout, flanking hr lines on attribution.

"The process is unhurried by design. The kiln decides the rest."

Michelle, Tiny Cicada Ceramics

<section class="bg-canary/30 py-16 px-8 text-center">
  <span class="material-symbols-outlined text-4xl">format_quote</span>
  <blockquote class="font-headline font-bold text-3xl md:text-5xl
    tracking-tighter leading-tight mb-8 max-w-3xl mx-auto">
    "..."
  </blockquote>
  <div class="flex items-center justify-center gap-4">
    <div class="w-12 h-px bg-outline"></div>
    <p class="font-label text-[10px] uppercase tracking-widest
      text-on-surface-variant">Attribution</p>
    <div class="w-12 h-px bg-outline"></div>
  </div>
</section>

Form Fields

Borderless fields on a surface-container background. Focus state brightens the field and adds a 1-ring primary indicator. Labels always Work Sans, xs, uppercase, tracking-widest.

<!-- Label -->
<label class="font-label text-xs uppercase tracking-widest
  text-on-surface-variant">...</label>

<!-- Input -->
<input class="bg-surface-container border-none rounded-lg
  px-4 py-3 font-body text-sm text-on-surface
  placeholder:text-on-surface-variant/50
  focus:outline-none focus:bg-surface-container-lowest
  focus:ring-1 focus:ring-primary">

<!-- Error state -->
ring-1 ring-error
<p class="font-label text-[10px] uppercase tracking-widest
  text-error" role="alert">Error message</p>

Cart Drawer

Slides in from the right. White surface, max-w-md width, full viewport height. Overlay behind at bg-black/40. aria-live on the item count for screen reader announcements.

Your Bag

Your bag is empty.

Total $65.00

<!-- Overlay -->
<div class="fixed inset-0 bg-black/40 z-40"></div>

<!-- Drawer -->
<aside role="dialog" aria-modal="true" aria-label="Shopping bag"
  class="fixed top-0 right-0 h-full w-full max-w-md
  bg-surface-container-lowest z-50 shadow-2xl
  translate-x-full transition-transform duration-300">

  <!-- Header -->
  <div class="border-b border-outline-variant/20 px-8 py-6">...</div>

  <!-- Items (aria-live) -->
  <div aria-live="polite" class="flex-1 overflow-y-auto">...</div>

  <!-- Footer -->
  <div class="border-t border-outline-variant/20 px-8 py-6">...</div>
</aside>

Overlays & Notifications

Toast notifications, cookie consent, and mobile nav drawer. All documented with structure — not rendered in this page to avoid polluting the demo environment.

Toast Notification

Added to bag

// Fixed bottom-right, z-[70]
// Auto-dismiss after 3000ms
// aria-live="polite" on container
bg-primary text-on-primary
rounded-lg shadow-lg
font-label text-xs uppercase tracking-widest

Cookie Consent Banner

We use cookies for the cart and optional Google Analytics to understand how people find us. Privacy Policy

// Fixed bottom-0 left-0 right-0, z-[60]
// role="dialog" aria-modal="false"
// aria-live="polite"
bg-surface-container-lowest
border-t border-outline-variant/20

Icons

Material Symbols Outlined only. Default variation settings: FILL 0, wght 400, GRAD 0, opsz 24. Decorative icons get aria-hidden="true". Icons used as the sole label need an accessible name.

arrow_forward

CTAs, text links

chevron_right

Breadcrumb

shopping_bag

Cart, nav

person

Account nav

Mobile nav toggle

Close drawers

local_shipping

Shipping note

format_quote

Editorial quote

photo_camera

Instagram social

local_fire_department

Kiln / craft moments

lock

Secure checkout

Facebook (inline SVG — not in Material Symbols)

<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"
  aria-hidden="true">
  <path d="M22 12c0-5.523-4.477-10..." />
</svg>

CSS for variable font settings

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

Interaction & Motion

Motion is deliberate and restrained. Three durations. All animations collapse to 0.01ms under prefers-reduced-motion: reduce.

Element	Property	Duration	Tailwind class
Product image	scale-105 on hover	700ms	`transition-transform duration-700`
Quick View overlay	opacity + translateY	300ms	`transition: opacity 0.3s, transform 0.3s`
Buttons (primary, outline)	opacity / bg / color	300ms	`transition-opacity duration-300`
Secondary button hover	bg fill (deliberate slow)	500ms	`transition-colors duration-500`
Cart drawer slide	translateX	300ms	`transition-transform duration-300`
Category card shadow	box-shadow	300ms	`transition-shadow duration-300`

Reduced motion

All animations collapse to 0.01ms. This is handled in the global <style> block in base.njk.

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Accessibility

WCAG 2.2 AA minimum. Charcoal on cream passes AAA. Every interactive element is keyboard-focusable. Assistive technology support baked in by default.

Skip Link

First focusable element on every page. Hidden until focused.

<a href="#main-content"
  class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4
  focus:z-[100] focus:bg-primary focus:text-on-primary
  focus:px-4 focus:py-2 focus:font-label focus:text-xs
  focus:uppercase focus:tracking-widest focus:rounded-lg">
  Skip to content
</a>

Focus States

Applied consistently to all interactive elements.

focus:outline-2 focus:outline-offset-2 focus:outline-primary

ARIA Landmarks

<header role="banner">           <!-- implicit -->
<nav aria-label="Main navigation">
<main id="main-content" tabindex="-1">
<aside role="dialog" aria-modal="true" aria-label="Shopping bag">
<footer role="contentinfo">      <!-- implicit -->

<!-- Active nav item -->
aria-current="page"

<!-- Cart count -->
aria-live="polite"

Touch Targets

All interactive elements maintain a 44×44px minimum touch target. Icon buttons use padding to extend the hit area where the visual element is smaller than 44px.

Text Selection

Selection uses the secondary container colours for a branded but readable highlight.

Selected text looks like this

// Applied on <body>
selection:bg-secondary-container selection:text-on-secondary-container

Colour Contrast

Charcoal on cream

Passes AAA

White on charcoal

Passes AAA

Secondary text on container

Passes AA

Grid Layouts

All layouts use CSS Grid. The 12-column grid is the backbone for product detail, about, and complex asymmetric layouts.

Homepage Product Grid — 3-col equal

grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12

Product Detail — 12-col (7 gallery + 5 sidebar)

grid grid-cols-1 md:grid-cols-12 gap-12
// Gallery:  md:col-span-7
// Sidebar:  md:col-span-5 (sticky top-28)

Shop Grid — 12-col asymmetric

// First row: 7-col hero + 5-col secondary
// Subsequent rows: 4+4+4 equal grid
grid grid-cols-12 gap-8 md:gap-12

About Workshop — 12-col (7+5 offset)

grid grid-cols-1 lg:grid-cols-12 gap-24 items-center
// Image col:   lg:col-span-7 (with offset decorative elements)
// Content col: lg:col-span-5

Footer — 2-col (brand + 3-col link grid)

grid grid-cols-1 md:grid-cols-2 gap-12
// Brand column: flex-col gap-8
// Links column: grid grid-cols-3 gap-8

Process Bento — 4-col (2+1+1, then full-width)

grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6
// Row 1: col-span-2, col-span-1, col-span-1
// Row 2: col-span-2 md:col-span-4 (full width)

Footer

Latte/30 background, generous vertical padding. The latte accent bar is the only visual break before the brand wordmark.

Live footer example

<footer class="w-full py-16 mt-24 bg-latte/30" role="contentinfo">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-12
    max-w-site mx-auto px-8 md:px-12">

    <!-- Brand column -->
    <div class="flex flex-col gap-8">
      <div class="w-12 h-1 bg-latte rounded-full"></div>
      <div class="text-lg font-bold font-headline uppercase">...</div>
    </div>

    <!-- Three-column link grid -->
    <div class="grid grid-cols-3 gap-8">
      <nav aria-label="Shop navigation">...</nav>
      <nav aria-label="About navigation">...</nav>
      <nav aria-label="Info navigation">...</nav>
    </div>

  </div>

  <!-- Copyright -->
  <div class="border-t border-outline-variant/10 mt-16 pt-8">...</div>
</footer>

Design System

Colour

Core Palette

Surface Hierarchy

Interactive & Text

1950s Accent Palette

Typography

Epilogue — Scale & Usage

Plus Jakarta Sans — Scale & Usage

Work Sans — Scale & Usage

Spacing

Borders & Dividers

Where borders appear

Navigation

Buttons

Product Cards

Sage Keep Cup

Monstera Mug

House Number Set

Category Cards

Keep Cups

Mugs

House Numbers

Product Detail

Sage Keep Cup

Editorial Quote

Form Fields

Cart Drawer

Your Bag

Overlays & Notifications

Toast Notification

Cookie Consent Banner

Icons

Interaction & Motion

Accessibility

Grid Layouts

Homepage Product Grid — 3-col equal

Product Detail — 12-col (7 gallery + 5 sidebar)

Shop Grid — 12-col asymmetric

About Workshop — 12-col (7+5 offset)

Footer — 2-col (brand + 3-col link grid)

Process Bento — 4-col (2+1+1, then full-width)

Footer