Nov
14
Saturday
Clay & Coffee
10:00 – 12:30
Main Studio
Design system · Agent reference
Sunday Club design system
The single source of truth for people and for Framer Agent. Every swatch, type sample and component on this page uses the live colour styles, text styles and components from the rest of the site — change them in Assets and this page updates too.
Colour tokens
Bright, warm and confident.
Butter and Ivory are the backgrounds. Cobalt is the action colour. Coral, Lilac and Mint alternate between sections. Never introduce new colours — edit these styles instead.
Butter
#FFF6DB
Main page background
Ivory
#FFFBF2
Alternate light sections, cards
Cobalt
#3558EC
Primary buttons, accents, footer
Cobalt Deep
#2440C4
Button hover
Coral
#FF6B54
Warm sections, stickers, fills
Coral Text
#C43320
Coral text on light backgrounds
Lilac
#C4B2F2
Section variation, cards
Mint
#BCE3B4
Section variation, cards
Ink
#172238
Text, outlines
Ink Soft
#4A5368
Secondary text
Line
Ink 14%
Hairlines and card borders
White
#FFFFFF
Photo borders, inputs
Typography
Big, chunky and friendly.
Two families only: Bricolage Grotesque for display and DM Sans for reading. Always apply a text style; never set font sizes on individual layers. Sizes are desktop / tablet / phone.
Display Hero — Bricolage Grotesque 800 · 126 / 100 / 58 · uppercase · page H1 on Home
Less scrolling.
Display XL — Bricolage 800 · 96 / 72 / 46 · section headings
What do you fancy making?
Display L — Bricolage 800 · 64 / 52 / 38 · secondary headings, prices
Pick a starting point.
Heading — Bricolage 700 · 34 / 30 / 26
Make something wonderful
Card Title — Bricolage 700 · 26 / 24 / 22
Clay & Coffee
Quote — Bricolage 600 · 28 / 26 / 22
The best Saturday in months.
Eyebrow — DM Sans 600 · 13 · uppercase · tracked 0.14em
Workshop explorer
Lead — DM Sans 400 · 21 / 19 / 18
Hands-on workshops for curious beginners.
Body — DM Sans 400 · 16
Small groups, friendly makers and everything you need.
Small — DM Sans 400 · 14 / 14 / 13
Availability labels are not live seat counts.
Spacing, grid and breakpoints
Generous, consistent, predictable.
4px
8px
12px
16px
24px
40px
56px
72px
112px
• Content max width 1320px (schedules 1180px, reading 720px). Centre inner wrappers; let section colours run edge to edge.
• Section padding: 112px desktop, 88px tablet, 64px phone (vertical). Side gutters: 40px / 32px / 20px.
• Breakpoints: Desktop ≥ 1200px, Tablet 810–1199px, Phone < 810px (designed at 390px).
• Grids: 3 columns desktop, 2 tablet, 1 phone. Gaps 24px for cards, 16–20px for tiles.
• Radius scale: pills 999px, cards 22–40px, inputs 16px. Nested radii get smaller.
• Sections alternate Butter / Ivory with one bold colour block (Lilac, Mint, Coral or Cobalt) at a time. Avoid dark hero sections.
Buttons
One shape, four colours.
Use the Button component only. Cobalt is the primary action, Coral for warm sections, Outline as secondary, Butter on Cobalt backgrounds. Hover turns the arrow and deepens the fill.
Navigation
Sticky, simple, always bookable.
The Navigation component lives in the Site Layout. Desktop shows five links and the booking button; Tablet and Phone use the Phone variant with a drawer (Phone Open).
Cards
Tactile, tilted, tappable.
Workshop Card and Session Ticket are CMS-ready. Testimonial and Step take a Tint colour from the palette. Slight rotations (±1–2°) are part of the look; keep them small.
Sample review
I booked on a whim and came home with three wobbly bowls and the best Saturday in months.
Priya, London
Clay & Coffee
01
Pick your happy place
Clay, colour, flowers or flour.
Tags and badges
Small labels, big personality.
Pills always use 999px radius. Category badges take the category colour from the CMS. Status pills describe sample availability, never live seat counts.
Pottery
2.5 hours
Few spaces left
New dates
CMS patterns
Content lives in the CMS.
Workshops (with a Category reference), Sessions (with a Workshop reference), Categories and Journal. Lists below are live: edit the CMS and they change.
Workshop Explorer — Workshops list, sorted by Order, Workshop Card bound to fields; filter chips are a Categories list setting the page’s Category variable.
Upcoming schedule — Sessions list sorted by Date (ascending), Session Ticket bound to the date, the referenced workshop and the availability label.
Forms
Friendly fields, clear states.
Inputs: white fill, 1.5px Ink border, 16px radius, Cobalt focus ring, labels above every field. Submit Button has Default, Pending, Success, Error, Incomplete and Coral variants.
Image treatments
Photos like printed snapshots.
Bloom School
• Print: 8–10px white border, 10px radius, rotation between −8° and +8°, soft Ink shadow. Use for hero collages and feature images.
• Rounded: 26–40px radius, no border. Use for galleries and cards.
• Photography: bright, natural light, real hands making real things. No dark moody images, no AI faces, no watermarks.
• Every image needs descriptive alt text; CMS images carry alt text on the image value.
Motion
Delight without delay.
• Entrances: fade + 40–60px rise with a soft spring (0.8–1s). Run once; never replay on scroll.
• Hero: word-by-word headline entrance, photo prints pop in with a slight spin, gentle parallax.
• Hover: cards take their category tint and the arrow turns 45°; gallery photos tilt 1–2°.
• Loops: the marquee ribbons and the rotating stamp only. Keep loops slow.
• Reduced motion is honoured site-wide (Site Settings), and the stamp stops spinning for people who ask for less motion.
• Never delay or hide essential actions behind animation.
Reusable sections
Build new pages from these.
• Hero collage (Home) — centred display headline with absolutely placed print photos and the stamp.
• Split hero (Workshops, Private Events, Gift Vouchers, Workshop) — copy column + tilted media column.
• Heading Group — Eyebrow + Display XL (+ Lead). Use at the top of every section.
• Workshop Explorer — filter chips + Workshop Card grid with empty state.
• Ticket list — Session Tickets sorted by date + availability note.
• Colour block CTA (Lilac/Mint/Coral/Cobalt) — headline and two buttons.
• Occasion / value tiles — 3–4 tinted cards with an icon, title and line of text.
• Form panel — Butter or White card with labelled fields and Submit Button.
Accessibility
Bright and readable for everyone.
• Text on light backgrounds uses Ink, Ink Soft, Cobalt or Coral Text (never bright Coral) to keep contrast at WCAG AA.
• One H1 per page, then H2 for sections and H3 for cards. Keep the order logical.
• Every form field has a visible label; required fields are marked and validated by the browser.
• Buttons and links have clear hover states and visible keyboard focus; touch targets are at least 44px.
• Decorative layers (marquee duplicate, blobs, card behind) are hidden from screen readers.
• Respect reduced motion; never rely on colour alone to show state.