Plain Matter

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Roboto Mono already defines this label-maker voice, so the fallback is folded into it and the archival, clinical feel stays.

• Roboto MonoHeadings: headings and nav 14px uppercase, 0.06em
• Roboto MonoBody: body 16px, nav and labels 14px

Who it is for

• Independent streetwear founders
• Fashion agencies prototyping client shops
• Designers selling limited runs
• Developers wanting a clean React commerce base

Layout

1. Thin top bar: MENU left, small italic wordmark centered, SEARCH / ACCOUNT / CART right, 1px bottom rule
2. Hero carousel of floating garment cut-outs on white, centered active product name + price and a black SHOP ALL button
3. First-visit region modal listing countries with currency codes
4. Cookie consent card bottom-right with Essential only / Accept all
5. Shop grid with filter panel and NEW badges
6. Product page with image lightbox gallery and size selection
7. Shop-the-look section pairing items
8. Cart drawer and checkout redirect

Palette

Minimal, cool, clinical, quiet, fashion-forward. It feels like a white-cube gallery with price tags in typewriter type.

• background#ffffff
• text/primary#141414
• secondary surface#f5f5f5
• border#e6e6e6
• muted text#707070
• modal scrim#a3a3a3

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary *
• secondary
• accent
• destructive *

Type scale

Display

Roboto Mono uppercase, 14px with 0.06em tracking for headings and nav; tiny italic bold wordmark

Body

Roboto Mono 16px regular (14px for nav and labels)

A single monospace family everywhere gives a technical, archival, label-maker voice; hierarchy comes from case and spacing, not size.

Spacing and imagery

Sparse and centered; large empty white fields around products; 0px radius; hairline #e6e6e6 dividers; full-width header 56px tall.

Garment cut-outs on pure white, arranged as a horizontal carousel with neighbors peeking at the edges; product photos in a lightbox.

Components

• Monospace top bar
• Featured product carousel
• Region/currency selector modal
• Cookie consent card
• Filter panel
• Product card with NEW badge
• Fullscreen search overlay
• Image lightbox
• Size/variant selector
• Shop-the-look module
• Cart drawer
• Menu overlay

Interactions

• Carousel swipe/drag with neighbors peeking
• Region pick updates currency formatting
• Cookie consent choice persisted
• Fullscreen live search
• Filter panel slide-in with multi-select
• Lightbox with keyboard arrows
• Accessible focus-trapped overlays
• Smooth scrolling

Data

• Product{handle, title, price, currency, images[], sizes[], isNew, tags}
• Region{code, name, currency, symbol}
• CartLine{variantId, size, qty}
• ConsentPrefs{essential, analytics}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Plain Matter**, a stark monospace storefront for a fictional streetwear label with a dozen pieces. Audience: fashion shoppers who value restraint. The job is to present garments like exhibits, let visitors pick their region and currency, and move them from browsing to a hosted checkout with as little chrome as possible.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Sheet, Checkbox, RadioGroup, Toast), lucide-react. Embla Carousel for the hero and product gallery, Framer Motion for overlay transitions, TanStack Query for catalog data from a headless commerce API (or local fixtures). Optional Supabase only for storing account wishlists; otherwise no backend.

### Pages & layout
1. **Home** – 56px header: MENU left, small italic wordmark centered, SEARCH/ACCOUNT/CART right. Full-height carousel of garment cut-outs on white; neighbors peek at the edges; centered caption with product name and price and a black SHOP ALL button.
2. **First visit** – region dialog listing six regions with currency codes; bottom-right cookie card with "Essential only" and "Accept all".
3. **Shop** – 4-column grid, NEW badges, a filter sheet (category, size, color, price) and sort.
4. **Product** – large image stack (click opens lightbox), name, price, size buttons, add to bag, details accordion, shop-the-look strip of related items.
5. **Search overlay** – fullscreen input with live results.
6. **Cart sheet** – lines, subtotal in selected currency, checkout button.

### Design system
- Tokens: `--background: #ffffff`, `--foreground: #141414`, `--primary: #141414`, `--secondary: #f5f5f5`, `--border: #e6e6e6` (decorative hairlines), `--input-border: #767676`, `--muted-foreground: #707070`, `--radius: 0`.
- Font: Roboto Mono for everything (or Roboto Mono). Uppercase for nav, headings and buttons with 0.05–0.08em tracking (short labels only). Scale: 12 / 14 / 16 / 20 / 24.
- Spacing: 4px base; generous white space; 1px hairlines. No shadows except a faint one on the cookie card.
- Motion: overlays fade 200ms; carousel slides 400ms `cubic-bezier(0.25,1,0.5,1)`; scrim `#000` at 35%.

### Components & interactions
Header links (default/hover underline/focus), carousel (drag, arrows, dots, keyboard), region dialog (selected state, persisted), cookie card (two choices, persisted, dismissible), product card (hover swaps to second image, NEW badge, sold-out), filter sheet (checkbox groups, clear all, result count, empty result state), size buttons (selected/unavailable), add to bag (loading/success/error), lightbox (arrows, Escape), search (idle hint, loading, no results).

### Data & state
`Product{handle,title,prices:{[currency]:number},images[],sizes[{label,available}],isNew,category}`, `Region{code,name,currency,symbol}`, `CartLine{handle,size,qty}`, `Consent{essential:true,analytics:boolean}`. Region, consent and cart in a small Zustand or context store persisted to localStorage; filters in URL params. Seed 12 fictional garments (tees, hoodies, crewnecks) with neutral placeholder photos.

### Accessibility
`#141414` on white is 18.4:1 and muted `#707070` is 4.95:1 on white and 4.54:1 on `#f5f5f5`, so keep muted text at that value or darker. Size buttons, inputs and filter controls use `--input-border: #767676` (4.5:1) because the `#e6e6e6` hairline is decorative. All overlays are real dialogs with focus trap, Escape and focus return; the region dialog must be skippable. Carousel slides have `aria-roledescription="slide"`, labels, and pause on focus. Size buttons use `aria-pressed` and state sold-out in text. Use `Intl.NumberFormat` so currencies read correctly. Reduced motion disables carousel autoplay.
Verified contrast: body text on white #141414 on #ffffff = 18.42:1; muted text on white #707070 on #ffffff = 4.95:1; muted text on secondary surface #707070 on #f5f5f5 = 4.54:1; white label on black primary button #ffffff on #141414 = 18.42:1; body text on secondary surface #141414 on #f5f5f5 = 16.9:1; input and size-button border on white #767676 on #ffffff = 4.54:1; focus ring on white #141414 on #ffffff = 18.42:1.

### Security
Commerce tokens stay in a serverless proxy; the client never holds private keys. Consent must actually gate analytics scripts until accepted. Validate query params and search input with zod; escape any rich product descriptions with DOMPurify. Checkout is a redirect to the provider's hosted page on a verified domain. If Supabase wishlists are added, RLS restricts rows to `auth.uid()`.

### Performance & SEO
Lazy-load non-visible slides and grid images, use `srcset`, and preload only the first slide. Per-product meta, OG images and Product JSON-LD with price in the selected currency. hreflang is optional for regions. Lighthouse 90+.

### Guardrails
- Original product names, copy and placeholder photos; no real label names or logos.
- No fake reviews.
- Don't store personal data beyond what checkout needs; consent defaults to essential only.
- Small typed components, no `any`, visible error states.
- Done when: region choice changes all prices; consent is persisted and respected; filters produce correct results with an empty state; lightbox and carousel work by keyboard; cart survives reloads.

Open the builderAll templatesThis palette on its own