Studio Club landing
A scrapbook-style page for a weekend workshop studio, with photos set inside the headline.
Gallery
Prompt: Landing page (web), Studio Club
Build the landing page for Studio Club, small-group weekend workshops in a shared creative studio: ceramics, film photography, drawing, printmaking, weaving, and plant styling. Beginners welcome, materials included, at most eight people per class.
Follow the style guide style.md (Playful Collage v1) exactly. Treat every token, signature pattern, motion rule, and item in its "Never" list as a hard constraint. Use only the photos below; draw only what the style allows in code (UI, grain, doodle strokes, line icons, stickers, the stamp).
Assets
| File | Size | What it shows | Crop |
|---|---|---|---|
assets/pill-ceramics.png | 1536×1024 | Woman laughing at a pottery wheel | Capsule, face/hands in the middle third |
assets/pill-film.png | 1536×1024 | Young man loading a film camera | Capsule |
assets/trainer-portrait.png | 1024×1024 | Workshop host, head and shoulders | Circle |
assets/room-studio.png, room-session.png | 1024×1024 | Studio interior; group sketching | Polaroids |
assets/topic-ceramics.png, topic-film.png, topic-drawing.png, topic-print.png, topic-weaving.png, topic-plants.png | 1536×1024 | Craft still lifes | Card photos, 4:3 cover |
assets/cta-group.png | 1536×1024 | Group holding the cups they made | Capsule in the CTA headline |
Sections, in order (each a stacked sheet as the style's Motion describes)
- Hero (paper)
- Nav: wordmark "Studio Club" in Fredoka with a tiny lemon dot; links About, Workshops ▾ (just a chevron), Gift cards; outline button "Get in touch".
- Photo-pill headline, two centered lines: "Make [pill-ceramics] things / with [&-badge] people [trainer circle]". Line one: "Make", the ceramics capsule, "things"; line two: "with", the cobalt+lemon "&" badge pair (cobalt circle holds a small line icon of a paintbrush), "people", the trainer circle.
- Under it, centered ink-soft 18px: "Weekend workshops for curious hands. No experience, no mess at home, no more than eight of you."
- An email field with an attached black "Join" button (placeholder "Your email for new dates").
- Two ribbon zigzags breaking out of the bottom-left and right edges; doodle strokes near the headline corners.
- Cursor sticker pointing at the headline with the label "Ceramics".
- A black info card overlapping the bottom-left edge: "Studio Club" in Fredoka, then two rows with leaf check icons: "Materials included" and "Max 8 per class".
- Rotating stamp at the bottom right: "NEXT SEASON · ENROL NOW ·" around an arrow.
- About (paper): left: polaroid stack of
room-studio.png(tag "Our studio", cobalt) androom-session.png(tag "Sunday sketch club", leaf), plus a small round avatar oftrainer-portrait.pngwith a leaf pill "Meet Ana, your host". Right: a small line icon in a circle, the title "We're Studio Club" with marker highlight on "Studio Club", and two short paragraphs: "We're a shared studio in the old print works, run by makers who teach. Every class is small, hands-on, and finished with something you made yourself." / "Classes run Saturday and Sunday, mornings or afternoons. Come alone. Most people do." - Formats (leaf sheet): title "Pick your pace" with marker highlight on "pace" (lemon), and a bubble menu of white circles at varied sizes, ink labels: "One-day taster", "Four-week course", "Private group", "Gift a class", "Kids' Saturday", and one black bubble "Learn more". Doodle strokes in ink around them.
- Workshops (lemon sheet): centered title "This season" with a white marker highlight on "season" and a small sticker icon (two overlapping tickets, line-drawn). A 3×2 topic grid: Ceramics, "6 sessions"; Film photography, "4 sessions"; Drawing, "8 sessions"; Printmaking, "4 sessions"; Weaving, "3 sessions"; Plant styling, "2 sessions". The Ceramics card is the featured card: cobalt background, white text, white outline button. Each card's button shows googly eyes that follow the pointer. Below the grid a black pill button "All workshops".
- CTA (paper): photo-pill headline, centered: "Save [pill-film] a seat / for [lemon pill "you"] and [cta-group capsule] friends", one line "Book online, by phone, or just drop by the studio on Thursday evenings.", black button "Book a class".
- Footer: a black rounded panel inside the paper section: left a leaf pill "Newsletter" and a white outline pill "one email a month", an email field with a white "Send" button; right two link columns (Studio: About, Workshops, Gift cards, Private groups · Help: FAQ, Accessibility, Contact); bottom small "© 2026 Studio Club" and three simple social line icons. A small overlapping circle cluster at the top-right corner of the panel: the trainer photo circle and a lemon circle.
Behaviour
- Motion exactly as the style specifies: stacked sticky sheets, hero pops and draw-ins, cursor drift, stamp rotation, bubbles bobbing, card hover lift with googly eyes.
- The email fields validate on submit (inline message "That doesn't look like an email yet") and show "You're on the list ✓" on success (no network call).
Responsive
- Below 900px: the headline keeps its inline pills but drops to 44px and wraps naturally (pills stay inline with the words they follow); the cursor sticker and info card move below the email field; polaroids stack above the about copy; bubbles reflow into a loose two-column cluster; topic grid becomes 2 columns, then 1 below 560px; the footer panel stacks. Sheets still stack while scrolling. No horizontal scroll.
Output
- One self-contained
landing-web.htmlwith inline CSS and vanilla JS. Google Fonts allowed (Figtree, Fredoka). Images via relative pathsassets/.... - Reveal observers use
threshold: 0with no negative bottom rootMargin; above-the-fold content visible within 1s; withprefers-reduced-motion: reduceeverything static and visible. - Semantic HTML, alt text, real labels, visible focus states (2px ink outline, 3px offset), AA contrast.
- Hyphenated words in headings use non-breaking hyphens (U+2011).
Tokens
Playful Collage v1.1paper#ECECE8
default section background, with grain
ink#111111
text, black cards, black buttons, doodles (15.9:1 on paper)
ink-soft#5E5E5A
body text (5.5:1 on paper)
card#FFFFFF
topic cards, inputs
leaf#3DAA5A
green section, ribbons, sticker fills. Ink text only on leaf (6.4:1; white fails)
lemon#F2F28A
yellow section, highlight marker behind a word, pill backgrounds (ink 16:1)
cobalt#1C5BFF
small round badges and the featured card. White text allowed (5.3:1)
Style: Playful Collage (v1.1)
Direction
A friendly, hands-on scrapbook for a real community: grainy paper, bold rounded type, photos tucked into pills and polaroids, hand-drawn doodles in the margins, and stickers that look freshly stuck on. It's cheerful but organised. Every section is a clean colored sheet that slides up over the previous one as you scroll, like a stack of cards.
Assets (mandatory)
Photos come from assets/ (people, rooms, still lifes). Never draw people, rooms, or objects in code. Code may draw: UI, the paper grain, hand-drawn doodle strokes (short curved lines, arcs, squiggles, and sparks: 2px ink strokes with round caps, no fills, never depicting objects), simple line icons, stickers, and the stamp.
Tokens
Color
| Token | Hex | Use |
|---|---|---|
| paper | #ECECE8 | default section background, with grain |
| ink | #111111 | text, black cards, black buttons, doodles (15.9:1 on paper) |
| ink-soft | #5E5E5A | body text (5.5:1 on paper) |
| card | #FFFFFF | topic cards, inputs |
| leaf | #3DAA5A | green section, ribbons, sticker fills. Ink text only on leaf (6.4:1; white fails) |
| lemon | #F2F28A | yellow section, highlight marker behind a word, pill backgrounds (ink 16:1) |
| cobalt | #1C5BFF | small round badges and the featured card. White text allowed (5.3:1) |
Rules: one colored section per screen; leaf, lemon, and cobalt never sit side by side as large fills. Ink is the only text color besides white-on-cobalt and white-on-ink.
Paper grain: an inline SVG feTurbulence noise (baseFrequency ~0.9, 1 octave) as a background image at 6 to 8% opacity over the section color. No other texture.
Type
- Headlines: "Figtree" 800, letter-spacing -0.02em, line-height 1.12. Hero 76px, section 48px, card titles 22px/700.
- Wordmark: "Fredoka" 700, 28px.
- Body: "Figtree" 400/500, 16px/1.6, ink-soft. Small labels 13px/500.
Shape
- Sections: 40px top radius, full width, stacked (see Motion).
- Cards: white, 1.5px ink border, 28px radius, 14px inner padding, photo with 18px radius.
- Pills: 999px radius. Buttons: ink fill, white 15px/600 text, 44px tall; outline variant 1.5px ink.
- Black info card: ink background, white text, 14px radius, with leaf check icons.
Signature patterns
- Photo-pill headline: a centered two-line headline where 2 to 3 photos sit inline as pills (capsule 2.4:1, or circle) the same height as the cap height ×1.6, plus one round icon badge pair (cobalt circle + lemon circle overlapping, the lemon one holding "&").
- Marker highlight: one word in a section title sits on a hand-torn lemon (or white on lemon sections) marker shape, slightly rotated -2°.
- Cursor sticker: a black arrow cursor with a black pill label ("Ceramics") that floats near the hero, as if a collaborator is pointing. Its arrow tip always touches the element it names (on every breakpoint), never floating in empty space.
- Ribbon zigzags: two thick leaf zigzag strokes (14px, round joins) breaking out of the hero edges.
- Rotating stamp: a 120px circular text badge ("ENROL · NEXT SEASON · ENROL ·") with an arrow in the middle, slowly rotating.
- Polaroid stack: 2 to 3 photos as tilted cards (±6°) with a small cobalt or leaf caption tag, overlapping.
- Bubble menu: white circles of different sizes with short labels, floating on a leaf section, one black "Learn more" bubble.
- Topic grid: white cards: photo, small meta ("12 sessions"), title, and a small outline button with a playful googly-eyes icon.
Motion
- Stacked sections: each section is
position: sticky; top: 0(or top offset 24px) so the next section, with its 40px top radius, slides up over it while the previous one scales to 0.96 and darkens 8%. Sheets taller than the viewport stick attop: calc(100vh - <sheet height>)so their bottom is readable before the next sheet covers them. The first sheet has square top corners (the page starts flush), and the page behind the sheets is ink. - Hero entrance: headline words and photo pills pop in with a 70ms stagger (scale 0.6 → 1, rotate ±6° → 0, spring-like
cubic-bezier(0.34, 1.56, 0.64, 1), 600ms). Doodles draw in withstroke-dashoffset(500ms). Ribbons draw in from their ends (800ms). - Idle life: the cursor sticker drifts on a small loop (12px, 6s); the stamp rotates 360° every 18s; bubbles bob ±6px at different phases; polaroids tilt 1° toward the pointer on hover.
- Card hover: lift 4px and rotate -1°, googly eyes look toward the pointer.
- Reveal observers use
threshold: 0with no negative bottom rootMargin; anything in the viewport on load reveals immediately. - Reduced motion: no stacking scale, no pops, no idle loops; everything static and visible.
Copy voice
Warm, direct, a bit cheeky. Short sentences. Talks to "you".
Never
- Gradients, glassmorphism, drop shadows heavier than
0 2px 0 inksticker shadows - White text on leaf or lemon; more than one big color fill per screen
- Inter, Roboto, Arial, or system fonts as the visible font
- Emoji in place of icons or doodles
- Doodles that depict objects (no drawn plants, people, or tools); strokes and sparks only
- Stock-photo clichés (handshakes, people pointing at laptops)
- Phrases like "unlock your potential", "level up", "world-class"
cta-group.png594 KB
pill-ceramics.png1.5 MB
pill-film.png1.6 MB
room-session.png1.3 MB
room-studio.png1.2 MB
topic-ceramics.png1.6 MB
topic-drawing.png1.5 MB
topic-film.png1.7 MB
topic-plants.png746 KB
topic-print.png1.7 MB
topic-weaving.png2.1 MB
trainer-portrait.png975 KB
Image prompts
The prompts we used to make these images. Use them to make your own versions.
{
"styleAnchor": "Natural, candid editorial photography for a friendly community workshop brand. Bright soft daylight, warm but true colors, real textures (clay, paper, wood, fabric), shallow depth of field, a light film grain. People look genuinely engaged and relaxed, diverse in age and background, never posing for the camera. Clean, uncluttered compositions with one clear subject. No text, no logos, no watermarks.",
"images": [
{
"name": "pill-ceramics",
"size": "1536x1024",
"background": "opaque",
"prompt": "A woman in her thirties laughing while shaping a bowl on a pottery wheel, wet clay on her hands, linen apron, plants and shelves of bisque pots softly blurred behind. Framed so the face and hands sit in the middle third horizontally, with calm space on the left and right. It will be cropped into a wide capsule."
},
{
"name": "pill-film",
"size": "1536x1024",
"background": "opaque",
"prompt": "A young man with curly hair carefully loading a roll of film into a vintage film camera at a wooden table, a small smile, contact sheets and film canisters around. Framed so the face and hands sit in the middle third horizontally, with calm space on the left and right. It will be cropped into a wide capsule."
},
{
"name": "trainer-portrait",
"size": "1024x1024",
"background": "opaque",
"prompt": "A friendly workshop host in her fifties with short gray hair and a canvas apron, standing in a bright studio, warm smile, looking just off camera. Head and shoulders, centered, so it can be cropped into a circle."
},
{
"name": "room-studio",
"size": "1024x1024",
"background": "opaque",
"prompt": "A bright, airy creative studio with long wooden tables, stools, hanging plants, shelves of materials, big windows, nobody in frame."
},
{
"name": "room-session",
"size": "1024x1024",
"background": "opaque",
"prompt": "Seen from slightly above: six people around a long table sketching in notebooks during a relaxed drawing session, coffee cups and pencils between them."
},
{
"name": "topic-ceramics",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life on a pale stone surface: three handmade glazed ceramic bowls in soft greens and creams, a wooden rib tool, a wire cutter, a small lump of clay."
},
{
"name": "topic-film",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life top-down on a light wooden table: a vintage film camera, three film canisters, a few small black-and-white prints with blank borders."
},
{
"name": "topic-drawing",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life at 45 degrees: an open sketchbook with loose charcoal gesture sketches of hands (no text), charcoal sticks, a kneaded eraser, graphite pencils."
},
{
"name": "topic-print",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life top-down: a carved linoleum block, an ink roller with cobalt-blue ink, and two fresh abstract block prints of overlapping circles on cream paper (no letters)."
},
{
"name": "topic-weaving",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life: a small wooden frame loom with a half-finished weave in leaf green and lemon yellow wool, balls of yarn and a wooden comb beside it."
},
{
"name": "topic-plants",
"size": "1536x1024",
"background": "opaque",
"prompt": "Still life on a sunny windowsill: five clear glass jars of water holding plant cuttings with fresh roots, a small pair of scissors, a terracotta pot."
},
{
"name": "cta-group",
"size": "1536x1024",
"background": "opaque",
"prompt": "A small mixed group of five people smiling and holding up the ceramic cups they just made at the end of a workshop, aprons on, relaxed and proud. Framed so the face and hands sit in the middle third horizontally, with calm space on the left and right. It will be cropped into a wide capsule."
}
]
}