Hueprint

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

Playfair's variable optical sizes give a delicate, high-contrast light display with italics, while Libre Baskerville and Courier Prime keep the washi-and-ink studio notebook.

• PlayfairHeadings: display 112px at 300, italic accent word, never below 40px
• Libre BaskervilleBody: body 16px
• Courier PrimeFigures and code: 12px uppercase UI labels and buttons, ~0.22em

Who it is for

• Designers and brand strategists
• Agencies onboarding clients
• Product teams sharing brand specs
• Builders feeding brand context to AI agents

Layout

1. Thin top bar with hairline rule: letter-spaced mono 'HUEPRINT' wordmark left, rust pill '// START HERE' center, book icon + 'LIBRARY' right
2. Centered hero: giant light serif headline with the last word in italic
3. Pill URL input: mono 'URL /' prefix, placeholder, black pill '[ EXTRACT → ]' button
4. Dashed rounded drop zone: '// DROP ZONE' mono label, italic serif instruction, mono accepted types and size limit
5. Warm paper background with subtle texture, lots of empty space
6. App: staged extraction progress, kit page (palette with contrast badges, type specimens, logo variants, voice profile, tokens), exports menu, library grid, share link

Palette

Editorial, literary, crafted, calm, premium. Feels like a design studio's notebook rather than a SaaS dashboard.

• background (washi paper)#f4efe6
• card#f9f6f0
• ink text / primary#0a0a0a
• rust pill#a4441f
• accent oxblood#8b1a1a
• muted ink 8%#e6e1d8

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

Playfair 300, 112px (never below 40px on mobile; body stays 400) with an italic accent word

Body

Libre Baskerville 400 16px; Courier Prime 12px uppercase with ~0.22em tracking for UI labels and buttons

Editorial serif display + bookish serif body + typewriter mono labels -- a print-studio, 'washi and ink' aesthetic. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Narrow ~680px centered column, pill inputs and buttons, 6-18px radii, dashed borders, hairline rules; very sparse and airy.

No imagery on the entry screen; subtle paper grain. In kits: extracted logos, favicons, social images and colour swatches.

Components

• Mono letter-spaced top bar
• Rust pill nav chip
• Serif hero with italic word
• Pill URL input with prefix and extract button
• Dashed drag-and-drop zone
• Staged extraction progress
• Palette swatches with WCAG contrast scores and inline edit
• Typography specimens loaded live
• Logo/asset gallery with variant generator
• Voice & tone card (vocabulary, do/don't)
• Tokens viewer (JSON/CSS/Tokens Studio tabs)
• Export menu (PDF guide, ZIP, Tailwind, design.md)
• Library grid of kits
• Share link dialog

Interactions

• Submit URL to extract; staged progress (reading, palette, type, voice, assembling)
• Drag-and-drop up to 10 files with validation
• Edit colours and rerun contrast scoring
• Copy hex/tokens to clipboard
• Generate logo variants
• Export PDF/ZIP/tokens
• Rename, duplicate, delete kits in library
• Create public share link

Data

• Kit{id, owner_id|anon_session, name, source_url, status, created_at}
• Colour{kit_id, role, hex, contrast_on_bg, contrast_on_fg}
• Typeface{kit_id, role: display|body|mono, family, source, weights[]}
• Asset{kit_id, kind: logo|favicon|og|variant, path, mime}
• Voice{kit_id, summary, vocabulary[], dos[], donts[]}
• Tokens{kit_id, spacing, radius, shadow, motion (json)}
• ShareLink{kit_id, token, enabled}
• SourceFile{kit_id, path, mime, size}

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 **Hueprint**, a brand-kit extractor for designers, agencies and product teams. Paste a website address or drop brand files (decks, logos, screenshots, PDFs) and get a structured kit: colour palette with accessibility scores, typography, logos and assets, a voice-and-tone profile, and design tokens. Kits live in a personal library, can be shared by link, and export to a PDF guide, a ZIP, CSS/JSON tokens, a Tailwind theme and a markdown design brief for AI coding agents.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-dropzone for uploads, Framer Motion for staged progress, jsPDF (or a print-styled route with html-to-image) for the guide, JSZip for ZIP exports, culori for colour maths and WCAG contrast, Embla for asset carousels, Recharts for a palette distribution chart, TanStack Query. Supabase: Auth (optional; anonymous sessions allowed), Postgres, Storage for source files and assets, Edge Functions for fetching pages, sampling colours/fonts, AI voice summary and logo variants.

### Pages & layout
1. **Start**: hairline top bar with letter-spaced mono wordmark, a rust pill "Start here" chip in the middle, "Library" at right. Centered giant light serif headline with one italic word; a pill URL field with mono prefix and a black pill "Extract" button; a dashed drop zone with mono label, italic serif instruction, and accepted types and size limit.
2. **Extraction progress**: stepped list (Reading source → Sampling palette → Finding type → Capturing voice → Assembling kit) with live status.
3. **Kit**: sections for Palette (roles, hex, contrast pairs AA/AAA, inline edit), Typography (live specimens), Logos & assets (variants tool), Voice (summary, words to use/avoid), Tokens (tabs JSON/CSS/Tokens Studio). Sticky export bar.
4. **Library**: grid of kit cards (swatches strip, name, source domain, date) with rename, duplicate, delete.
5. **Shared kit** `/k/:token`: read-only.

### Design system
Tokens: `--background: #f4efe6`, `--card: #f9f6f0`, `--foreground: #0a0a0a`, `--primary: #0a0a0a`, `--primary-foreground: #f4efe6`, `--accent: #8b1a1a`, `--chip: #a4441f`, `--muted: rgb(10 10 10 / .08)`, `--border: #0a0a0a` (use at 20-30% for hairlines). Fonts: Playfair 300/italic for display, Libre Baskerville for body, Courier Prime for labels/buttons (uppercase, 0.22em tracking, 12px minimum). Scale 12/14/16/24/48/112. Radius 6px base; pills for inputs and buttons; 18px for the drop zone. Subtle paper-grain background via CSS noise. Motion 250ms ease; progress steps stagger 120ms. Add `--muted-foreground: #5c574f` and `--input-border: #8a847a` for the URL pill and drop zone outline (hairlines at 20-30% ink are decorative).

### Components & interactions
URL field: idle, invalid (inline message), submitting, error (unreachable or blocked). Drop zone: hover, dragging, file list with remove, rejected-file notes. Swatch: click to copy, edit via colour picker, contrast badge updates live. Export buttons show progress and success toasts. Library empty state points to Start.

### Data & state
Kit, Colour, Typeface, Asset, Voice, Tokens, ShareLink, SourceFile. Extraction runs as a job row with status for polling or Realtime. Anonymous kits tie to a session id and migrate to the account on sign-in. Seed a demo kit for a fictional coffee brand.

### Accessibility
The italic serif at 112px is fine; mono labels at 12px use full-ink colour. Swatches announce role, hex and contrast rating. Drop zone is keyboard-activatable with a real file input. Progress uses `aria-live`. Rust chip `#a4441f` with light text passes 4.5:1. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: ink text #0a0a0a on #f4efe6 = 17.29:1; ink text #0a0a0a on #f9f6f0 = 18.35:1; muted text #5c574f on #f4efe6 = 6.26:1; paper text #f4efe6 on #0a0a0a = 17.29:1.

### Security
Page fetching happens only in Edge Functions: http(s) only, block private IP ranges and redirects to them (SSRF), timeouts, size caps, no script execution. Uploads: allow-list PDF/PNG/JPG/WebP/SVG, ≤20 MB each, max 10; sanitize SVG before rendering; private bucket with signed URLs. Treat extracted text as untrusted in AI prompts. RLS: owner-only kits; shared kits served via token view. Rate-limit extraction per session/IP. Respect site terms and don't store full page copies longer than needed.

### Performance & SEO
Load Google Fonts for specimens on demand; lazy-load export libraries. Cache extraction results per URL for a short period. Start page has title/description/OG; kits and library `noindex`.

### Guardrails
- Original UI copy; demo kits use fictional brands -- never ship real companies' logos as sample content.
- Remind users they need rights to use extracted brand assets.
- Typed components, no `any`, visible errors.
- Done when: a URL produces a kit with palette, type, voice and tokens; uploads work within limits; contrast scores are correct; all exports download; share links render read-only; blocked/private URLs are rejected.

Open the builderAll templatesThis palette on its own