Episode 7 of 24Foundation45 min

Give your store a brand, a design system and a home page

Set colors, fonts and reusable parts once, then build a responsive, accessible header, footer and home page that every later page will share.

You will have: A design system (color, type and spacing tokens, plus a few reusable components), a shared layout with header and footer, and a home page that works on phones and passes basic accessibility checks.

Before you start

Episodes 4 to 6 are done: the project runs with npm run dev and the local database shop_local exists
Your project is committed to GitHub and you are on a fresh feature branch (the agent will create one if not)
Gather two or three store websites you like. You only need their names to describe the mood, never to copy them
If you have a logo file, put it in the project folder. If not, the agent will make a simple text logo

Make it yours

Change the example (a fashion store) to your own. Your answers are saved in this browser and used in every episode.

Store nameYour brand name.Type of storeFor example: jewellery store, book shop, plant shop.What you sellYour main product groups.Main countryWhere most customers live. It decides tax and shipping notes.CurrencyThe currency you charge in.Domain nameUse the one you own, or a name you plan to buy.

Other series keywords (4)

Payment gatewayStripe, PayPal or another gateway available in your country.AI agentClaude Code or Codex.Code editorVS Code, Cursor, Windsurf or any editor you like.Your computermacOS, Windows or Linux.

Your prompt

Paste into: {{ai_agent}} opened in your project folder (the same session or a new one, as in Episode 4).

You are a senior front-end developer and designer working inside my Next.js (App Router), TypeScript and Tailwind CSS project for "Thread & Needle", a fashion e-commerce store selling women's and men's clothing, shoes and accessories to customers in United States. I am not a programmer, so explain any technical word in a few words.

Goal: create the visual foundation of the store once, so every later page looks consistent. Do not build product pages, cart or accounts yet.

Plan first: ask me up to five short questions about the brand (mood in three words, preferred main color or "you choose", light or dark feel, a logo if I have one). Then show me your plan, including two color palettes to pick from, and wait for my OK before changing anything.

Tasks, after I approve:
1. Create a branch named feature/design-system.
2. Define design tokens in one place: brand, background, text, muted text, border, success, warning and error colors; a font pair loaded with next/font (no external font links); a type scale; spacing and radius. Use the Tailwind setup that is already installed and follow the installed version's way of declaring a theme.
3. Support a light theme now. Structure the tokens so a dark theme could be added later without rewriting components.
4. Build a small component set in components/ui: Button (primary, secondary, quiet), Input, Badge, Container, and a Price display that formats amounts in USD with Intl.NumberFormat. Prices are stored as whole minor units, so the Price component takes an integer.
5. Build the shared layout: skip-to-content link, header (logo or store name, main navigation, search link, cart link, account link), mobile menu that opens with a button and works with the keyboard, and footer (shop links, support links, copyright with Thread & Needle, a note that legal pages arrive in a later episode).
6. Build the home page: hero with a headline and button, a row of category cards, a grid of featured products, and a short trust strip (shipping, returns, secure payment). Use clearly marked placeholder text and placeholder boxes for images. Later episodes replace them with real data and photos.
7. Add the page title, description and Open Graph defaults in the root layout using threadandneedle.com as the base address.

Rules:
- Accessibility: use real landmarks (header, nav, main, footer), one h1 per page, visible focus outlines, text contrast of at least 4.5 to 1 against its background, buttons that are real buttons, and a respect for reduced-motion settings.
- Responsive: design for a 360 px wide phone first, then tablet and desktop. No sideways scrolling.
- Performance: no heavy libraries, no icon packs; use inline SVG for the few icons.
- Security: add no secrets and no third-party scripts.

Verify by running yourself and showing me the results: the type check, the lint, a production build, and a check of the home page at phone and desktop widths. If a browser testing tool is available, run a basic accessibility scan and report any problems you fixed.

Commit in small steps with clear messages, then push the branch and open a pull request.

Report back in this format:
1. What you did (short list).
2. What I should check myself (pages and widths to open).
3. Anything that needs my decision.

Review the prompt, then copy it. Never paste real passwords or API keys into a chat.

How to check it worked

Run npm run dev, open the home page, and see your colors, fonts, header, hero, category cards, featured grid and footer
Make the browser window narrow (about phone width): the menu becomes a button, nothing scrolls sideways, and text is still easy to read
Press the Tab key repeatedly: a visible outline moves through the links and buttons in a logical order, and the first stop is a skip-to-content link
Change the brand color in the one tokens file and save: the whole page updates without editing any component
The agent's report shows a successful build and lists the accessibility problems it found and fixed
A pull request exists on GitHub with small, clearly named commits

Sample result

Fashion store example

Example home page for the fashion store, shown at desktop width. Placeholder boxes stand in for photos until Episode 9.

If something goes wrong

The page looks plain or unstyled, as if Tailwind is not working.: Tell the agent: "The styles are not applying. Check that the global stylesheet is imported in the root layout and that the dev server was restarted, then show me what you found."
You do not like the look of the first result.: Describe what to change in plain words, such as "calmer colors, bigger headings, more white space". Because colors live in one tokens file, this is a small edit and a new commit.
The text is hard to read on some backgrounds.: Ask: "Check every text and background color pair against 4.5 to 1 contrast and fix the ones that fail, then show me the list."
The mobile menu does not open, or it traps the keyboard.: Ask the agent to test it at 360 px wide with the keyboard only: Enter opens it, Escape closes it, and Tab stays inside while it is open.

Free. Fonts are loaded through the framework, so there is no paid font service.

More in Foundation

This is part of the series Build a secure, no-cost e-commerce website with AI agents. See all 24 episodes, the tools used and answers to common questions on the series page.