Stitch Prompt
# Stitch Prompt — Nerdworks Homepage (Showcase Dark, SG1) **Target:** `mcp__stitch__generate_screen_from_text` **Project:** Nerdworks (Stitch project `52879442134287154`) **Styleguide:** SG1 — `/designs/nerdworks-showcase-dark-sg1/` (post ID 11409) **Written:** 2026-04-10 — first Stitch prompt under the new 12-step Theme Factory convention ## Meta This prompt follows the new Theme Factory convention from `httpdocs/build-prompts/CLAUDE.md`: 1. **Positive instructions only.** Every constraint is phrased as a directive — "use X", not "do not use Y". Models perform better on explicit positive rules than exclusion lists. 2. **Styleguide tokens declared up front.** The full SG1 token set is at the top of the prompt. Stitch sees the constraints before the layout. 3. **Layout brief is structural.** Describes what goes where, not pixel measurements. 4. **Voice and content rules follow**, not embedded in layout prose. ## Success criteria — what "Stitch followed the styleguide" looks like When the returned mockup is inspected, every visible element should trace to one of these rules: - Colour sampled from any major surface matches one of the 14 palette hex values exactly (no ±5 drift, no invented accent colours) - Primary font rendered appears to be Plus Jakarta Sans - All rectangular UI has 0/4/8/12/16 px radius - Newsletter form is two separate rectangles with a visible gap - All headings are sentence case - Section backgrounds alternate dark / dark-charcoal / green / near-white — visible rhythm Any drift from these is a signal that Stitch does NOT respect explicit token injection, which would force a plan-B rethink for Workflow A. --- # THE PROMPT BELOW — send everything between the HR markers to Stitch --- # Nerdworks Homepage — The Showcase Dark Generate a homepage design for **Nerdworks**, a premium UK trading card game and collectibles retailer. Brand identity: **The Showcase Dark** — editorial curation of TCG products presented as fine art, with a magazine-quality voice. The page alternates dark, dark-charcoal, brand green, and one near-white section to create a visible three-colour rhythm as the visitor scrolls. **Follow every instruction in this brief exactly. Use only the values, shapes, and content described here.** ## Design tokens ### Colour palette The design uses exactly these 14 hex values. Every visible colour in the mockup is one of these. **Neutrals:** - `#1A1E1A` near-black — primary dark section background, all dark body text on light sections - `#28302A` dark charcoal — secondary dark surface, raised card backgrounds, editorial sections - `#5A645A` dark grey — secondary text on light sections - `#9AA49A` mid grey — muted body text on dark sections - `#E2E6E2` light grey — hairline borders and dividers - `#F0F2F0` off-white — surface variants on light sections - `#F8F9F8` near-white — the single light section background, primary text colour on dark - `#FFFFFF` pure white — form inputs on light, event cards on light sections **Brand greens:** - `#266038` NW Green — primary brand colour: green statement section backgrounds, primary CTA fills, heading accent underlines - `#217E52` NW Green Light — hover states, eyebrow labels, link accents on dark, product prices - `#D4EAD9` NW Green Pale — used only in small category tag chips, at chip scale **Small accents:** - `#CC2222` red — used only on sale price tags - `#CCAA00` yellow — used only on small NEW or HOT highlight chips **Footer accent:** - `#022C22` darkest green — footer background only The palette above is complete. Every visible colour in the returned design matches one of these values. ### Typography - **Font family:** Plus Jakarta Sans from Google Fonts. Every piece of text in the design is set in Plus Jakarta Sans. - **Weights used:** 400 regular (body copy), 500 medium (card titles and nav links), 600 semibold (eyebrow labels, button text, link accents), 700 bold (section headings), 800 extrabold (hero display heading only) - **Type scale in pixels (desktop):** - Display heading (hero only): 112px, 800 weight, line-height 1.05, letter-spacing −0.02em - H1 (major section headings): 72px, 700 weight, line-height 1.15, letter-spacing −0.01em - H2 (secondary section headings): 56px, 700 weight, line-height 1.15 - H3 (large category titles): 40px, 700 weight, line-height 1.15 - H4 (card titles): 28px, 500 or 600 weight, line-height 1.35 - Body Large (hero lede, section subtitles): 20px, 400 weight, line-height 1.55 - Body (default paragraphs): 16px, 400 weight, line-height 1.55 - Body Small (card meta, captions): 14px - Eyebrow (section kickers, button labels, category labels): 12px, 600 weight, uppercase, letter-spacing 0.08em - **Case:** All headings — including the hero display heading — are sentence case. Only the first word and proper nouns are capitalised. Eyebrow labels and button text are uppercase. ### Shape and spacing - **Border radius values used in the design:** 0 (dividers), 4px (badges and small chips), 8px (buttons and form inputs), 12px (product, editorial, event, and testimonial cards), 16px (category tiles and large feature images). These are the only radius values that appear in the design. - **Spacing scale in pixels:** 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Padding and gaps use these values. - **Section padding:** 96 to 128 pixels top and bottom on most sections. - **Content column:** 1440px maximum width, centred. Section backgrounds fill 100% of viewport width; content sits inside the 1440px column. ### Component rules **Buttons** are rectangular with 8px radius. Button text is uppercase, 600 semibold weight, 16px, letter-spacing 0.08em. There are three button variants: - Primary: `#266038` green fill, `#F8F9F8` near-white text - Secondary ghost: transparent fill, 1px `#F8F9F8` border, near-white text - Light-on-dark: `#F8F9F8` near-white fill, `#1A1E1A` near-black text **Badges** are small chips with 4px radius. Badge text is 12px, 600 weight, uppercase, letter-spacing 0.08em. There are four badge variants: - Staff Pick: `#266038` green fill, white text - Sale: `#CC2222` red fill, white text - New: `#CCAA00` yellow fill, `#1A1E1A` dark text - Category tag: `#D4EAD9` pale green fill, `#266038` dark green text **Product cards** have `#28302A` dark charcoal fill, 12px radius, and 16px inner padding. They contain a square product image at the top with 8px radius, a card title in 28px 500 weight, a meta line in 14px muted grey, and a price in 20px 600 weight `#217E52` green with a £ prefix. **Event cards** on the near-white section have `#FFFFFF` white fill, 1px `#E2E6E2` light grey hairline border, 12px radius, and 24px inner padding. They contain a dark rectangular date badge at the top-left, an event title in 28px bold `#1A1E1A`, a meta line, and a "JOIN EVENT →" link in 12px uppercase green. **Testimonial cards** on the green statement section have `#1F4F2E` darker green fill, 16px radius, and 32px padding. They contain an italic quote in 16px off-white, a small circular avatar placeholder, and an attribution with a collector name and title. **Form inputs** are rectangular with 8px radius. On the green statement section, the email input has an inset dark green fill with muted green placeholder text. The newsletter form renders as two separate rectangles: an email input and a submit button, with a 12px gap between them. The input is approximately 560px wide and 64px tall; the submit button is approximately 180px wide and 64px tall. --- ## Layout structure — top to bottom The page has ten sections. Sections alternate background colours for the three-colour rhythm: dark, dark-charcoal, green, with one near-white section in the middle. ### 1. Navigation bar Sticky, `#1A1E1A` near-black background, 1px `#28302A` hairline bottom border. - Left: "NERDWORKS" wordmark. The word renders with "Nerd" in `#F8F9F8` near-white and "works" in `#217E52` green light. - Centre: nav links "The Vault", "Archives", "Curations", "Collections". 14px, 500 medium weight, `#9AA49A` muted grey. - Right: stroked outline icons for search, account, and shopping bag. ### 2. Hero — `#1A1E1A` near-black background Generous 128px top and bottom padding. Grid split: 60% content on the left, 40% product image on the right. Left content: - Eyebrow: "THE OBSIDIAN SELECTION" (12px, 600 weight, uppercase, `#217E52` green light) - Display heading: "Curated for collectors" (112px, 800 weight, sentence case, `#F8F9F8` near-white, line-height 1.05) - Lede paragraph: "The definitive archive for trading card games, miniatures, and board game rarities — treated with the reverence of fine art. Hand-picked by people who care." (20px, `#9AA49A` mid grey, line-height 1.55, max width 560px) - Two CTAs side by side: primary "Enter the Vault" (green fill), secondary "Browse the Archive" (ghost border) Right content: - Product card artwork in a 4:5 aspect ratio container with 16px radius. The image shows a rare Pokémon or Magic card in close-up against a dark moody backdrop with subtle rim lighting. ### 3. Editorial feature — `#28302A` dark charcoal background 50/50 image-and-content layout. - Left: editorial photograph, 4:3 aspect ratio, 16px radius. The image shows a shop counter with a curator's notebook, a loupe, and spread-out trading cards. - Right: - Eyebrow: "EDITORIAL FEATURE" (uppercase, green light) - H2: "The curator's notebook" (56px, 700 weight, sentence case, near-white) - Body paragraph (16px, `#9AA49A` mid grey): An ongoing record of pulls from the shop floor — the pieces that stopped us in our tracks, the rarities that resurfaced from private collections, and the cards we wish we could keep for ourselves. - Primary CTA: "Read the full archive" ### 4. Latest Acquisitions product grid — `#1A1E1A` near-black background Section header row: - Left: eyebrow "THE GALLERY" and H2 "Latest acquisitions" (56px, 700 weight, sentence case) - Right, aligned to the right edge: "BROWSE ALL ITEMS →" (12px uppercase eyebrow style, green light) Below the header: a five-column product card grid with 24px gaps. Each card uses the product card component described above. The five products are: 1. Charizard ex Full Art — Pokémon · 151 Booster — £189.00 — has a green "STAFF PICK" badge positioned top-left overlapping the image edge 2. Mox Opal (Foil) — Magic: The Gathering · Modern Masters — £340.00 3. Ursula's Quest Deckbox — Disney Lorcana · First Chapter — £52.00 4. Phyrexian Tower — Magic: The Gathering · Urza's Saga — £145.00 5. Elspeth Tirel Planeswalker — Magic: The Gathering · Scars of Mirrodin — £68.00 ### 5. The Curator's Vault — `#266038` NW green statement section Full-width green background with 128px padding. All content centred. - Centred H1 heading: "The Curator's Vault" (72px, 700 weight, `#F8F9F8` near-white, sentence case, apostrophe present) - Italic subheading below: "Collectors who've found their holy grails here" (20px, off-white, italic, centred, 48px below the heading) - Below the subheading: three testimonial cards in a row, 32px gap between cards. Each card uses the testimonial card component. The three testimonials: 1. Marcus Thorne, Competitive MTG player — quote: "I found a Grim Tutor here for half the going rate. They'd already spotted the print variation I'd been hunting for eighteen months." 2. Elena Voss, Pokémon archivist — quote: "The curator's notes on each card read like a museum placard. It changes how you see the collection." 3. Jordan Chen, Lorcana foil hunter — quote: "Every pull is documented, every rarity is verified. No other shop treats the cards with this much reverence." ### 6. Explore the Archive — `#28302A` dark charcoal background - Left-aligned H1: "Explore the archive" (72px, 700 weight, sentence case, near-white) - Below the heading: a 60px wide by 3px tall `#266038` green accent line, left-aligned, immediately under the heading text - Below: a 3-column by 2-row category tile grid (six tiles total), 24px gaps Each category tile: - 16px radius - Full-bleed category photography in a 4:3 aspect ratio container - A dark gradient scrim at the bottom of the image, transparent at the top fading to `rgba(0,0,0,0.85)` at the bottom - Overlay text positioned bottom-left: first the uppercase subtitle in `#217E52` green light (12px, 600 weight, 0.14em letter-spacing), then below it the category title in white (40px, 700 weight, sentence case) The six categories: 1. "5 subcategories" / Pokémon 2. "12 subcategories" / Magic: The Gathering 3. "3 subcategories" / Disney Lorcana 4. "8 subcategories" / Board games 5. "6 subcategories" / Warhammer & miniatures 6. "4 subcategories" / Accessories & supplies ### 7. This week at the shop — `#F8F9F8` near-white background This is the one light section on the page. It provides the critical light-band break in the three-colour rhythm. Section header row: - Left: eyebrow "SOCIAL HUB" in `#217E52` green light, below it H1 "This week at the shop." (72px, 700 weight, sentence case, `#1A1E1A` dark text, period at the end of the heading) - Right, aligned to the right edge: a light-on-dark button labelled "FULL CALENDAR →" with dark fill and light text Below the header: three event cards in a row, 24px gaps. Each card uses the event card component. The three events: 1. Date badge "FRI 12" (dark charcoal fill, white text, two lines), event title "Friday Night Magic" (28px bold dark), meta "7:00 PM · Standard format · £5 entry", link "JOIN EVENT →" 2. Date badge "SAT 13", event title "Pokémon League", meta "2:00 PM · All ages welcome · Free", link "JOIN EVENT →" 3. Date badge "SUN 14", event title "Lorcana Draft Night", meta "6:00 PM · Draft pods · £15 entry", link "JOIN EVENT →" ### 8. Join the Inner Circle — `#266038` NW green statement section Full-width green background with 128px padding. All content centred. - Centred H1: "Join the Inner Circle" (72px, 700 weight, `#F8F9F8` near-white, sentence case) - Lede paragraph below the heading: "Early access to drops, member pricing, and curator notes from the floor team — straight to your inbox, twice a month. No spam." (20px, off-white at 80% opacity, max width 560px, centred) - Below the lede: the newsletter form, centred. The form has two separate rectangles with a 12px gap between them: - Email input (rectangle one): approximately 560px wide, 64px tall, 8px radius. Inset darker green `#1F4F2E` fill, `#F8F9F8` white text, muted green `#8FBAA0` placeholder reading "Your collector email address". - Submit button (rectangle two): approximately 180px wide, 64px tall, 8px radius. `#F8F9F8` near-white fill, `#1A1E1A` dark text, label reading "SUBSCRIBE" in 16px uppercase 600 weight. ### 9. From the Archive — `#28302A` dark charcoal background Section header row: - Left: eyebrow "EDITORIAL" and H2 "From the archive" (56px, 700 weight, sentence case) - Right, aligned right: "VIEW INSIGHTS →" (eyebrow style, green light) Below the header: three chromeless editorial cards in a row, 32px gaps. Each card has no background fill and no border — just stacked image and text. Each card: - Top: feature image, 16:10 aspect ratio, 12px radius - Below the image: uppercase eyebrow label in `#217E52` green light (12px, 600 weight, 0.14em letter-spacing) - Below the eyebrow: card title in 28px, 500 weight, `#F8F9F8` near-white, up to two lines - Below the title: excerpt paragraph in 16px, `#9AA49A` mid grey, up to two lines The three editorial cards: 1. Eyebrow "MARKET TRENDS", title "Why alpha-era foils are outpacing the broader market", excerpt "Condition-verified alpha foils have doubled year on year. We walk through the data and what it means for collectors holding reserved list cards." 2. Eyebrow "CARE GUIDE", title "The definitive guide to storing graded cards long-term", excerpt "Temperature, humidity, UV exposure, and the silent enemy of every collection — PVC sleeves. A protocol for preserving condition across decades." 3. Eyebrow "DEEP DIVE", title "The Lorcana First Chapter print run, analysed card by card", excerpt "We broke down every slot in the First Chapter booster box and mapped the true rarity curves against Ravensburger's published ratios. The findings surprised us." ### 10. Footer — `#022C22` darkest green background - Three columns of navigation links aligned to the left: Shop, About, and Support columns with 4-6 links each - NERDWORKS wordmark positioned at the top-right of the footer - A row of stroked outline social icons (Twitter/X, Instagram, YouTube, Twitch) - A bottom row with copyright text "© 2026 Nerdworks. All rights reserved." in muted green and a row of stroked payment method icons --- ## Voice and content rules - Editorial curation language throughout: "Curated", "Hand-picked", "Staff picks", "The Vault", "The Obsidian Selection", "Hand-picked by people who care" - UK English: prices in £, spellings "colour", "organised", "archive" - All headings are sentence case — only the first word and proper nouns are capitalised - The voice is calm, knowledgeable, collector-to-collector — the feeling of a trusted curator sharing expertise, not a store pushing sales - The voice is editorial and curator-led, in the tone of a fine-art auction house catalogue - Copy uses real product names as listed in each section - Prices are realistic and varied: £45, £189, £340, £52, £68, £145 - The overall design impression should be that of walking into a curated fine-art gallery or specialist auction house — calm, generous spacing, gallery-style framing of the product art