Hemline

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

Dela Gothic One is a heavy, playful poster sans for the candy zine masthead, and Libre Caslon Text gives the serious, bookish body the design contrasts it with.

• Dela Gothic OneHeadings: masthead 120px and card titles ~56px, uppercase
• Libre Caslon TextBody: body 18px

Who it is for

• Personal style bloggers
• Sustainable fashion writers
• Stylists and wardrobe consultants
• Vintage and thrift enthusiasts

Layout

1. Header: italic bold wordmark left, pink outlined 'Subscribe' pill right, thin black rule below
2. Centered hero on peach: 120px uppercase masthead, serif intro paragraph, underline email field + outlined 'Sign up →' pill
3. Featured article: wide lavender rounded card split with date + huge uppercase title left and tinted photo right
4. 3-column grid of solid-color cards (amber, mint, coral, sky, magenta) each with tinted image, date, uppercase title, excerpt, outlined 'Read more →' pill
5. Footer with Connect / Follow columns
6. Article page and contact

Palette

Playful, bold, colorful, confident, feminine-leaning, fun. A candy-colored fashion zine with serious typography.

• background peach#f7e5d2
• text#000000
• button pink#f3b1de
• card lavender#bca8f0
• card amber#f4be3c
• card mint#7ee8bc
• card coral#ec7089
• card sky#7dd3f0
• card magenta#c044b0
• placeholder text#6b5647

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Supreme-style grotesk 800, 120px masthead and ~56px card titles, uppercase, -2px tracking (Supreme is not on Google Fonts; a vibld project loads Dela Gothic One)

Body

Libre Caslon Text 400 18px serif body

Heavy uppercase sans for titles against a bookish serif body -- fashion magazine meets zine

Spacing and imagery

1120px container; cards with 24px radius, inset image 16px radius; 3-column grid with ~64px gaps; pill buttons with 2px black borders

Fashion and accessory photography (suits, pearls, clothing racks) duotone-tinted to match each card's color.

Components

• Italic wordmark
• Outlined pill buttons
• Giant uppercase masthead
• Underline-style email field
• Featured split card
• Color-coded article cards
• Duotone image treatment
• Read more pill with arrow
• Footer link columns
• Article layout with related posts
• Share buttons
• Contact form

Interactions

• Card hover lift and arrow nudge
• Image duotone fades to full color on hover
• Newsletter submit states
• Staggered card reveal
• Button fill-invert on hover

Data

• Post{slug, title, date, excerpt, cover, color, body_md, tags[]}
• Subscriber{email}
• Socials{instagram, x, pinterest}

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 color 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, labeled 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 **Hemline**, a personal fashion blog for a (fictional) style curator writing about capsule wardrobes, thrifting, color and fit. The home page is a giant masthead plus a stack of bright color-blocked article cards. The job: make style writing feel joyful and collectible, and grow a newsletter.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. MDX posts; Framer Motion for staggered card reveals; react-hook-form + zod for newsletter and contact. Backend only for forms (Edge Function or a newsletter provider).

### Pages & layout
1. **Home** – header with italic heavy wordmark left, pink outlined "Subscribe" pill right, 1px black rule. Hero on peach: 120px uppercase masthead, 3–4 line serif intro, newsletter row (underline-only input with uppercase placeholder, outlined "Sign up →" pill). Featured post: full-width lavender card (24px radius) with date + huge uppercase title + excerpt left, tinted photo right. Then a 3-column grid of solid-color cards, each: inset tinted image, date, 48–56px uppercase title, 3-line excerpt, outlined "Read more →" pill. Footer: Connect (email, contact) and Follow (social) columns.
2. **Post** – colored header band matching the card color, title, date, hero, serif prose, related posts.
3. **Contact** – short form.

### Design system
`--background: #f7e5d2`, `--foreground: #000000`, `--pink: #f3b1de`; card palette `--lavender: #bca8f0`, `--amber: #f4be3c`, `--mint: #7ee8bc`, `--coral: #ec7089`, `--sky: #7dd3f0`, `--magenta: #c044b0`, `--placeholder: #6b5647`. Fonts: a heavy display face (Dela Gothic One, with a sans-serif fallback) uppercase for display headings only, Libre Caslon Text 400/italic for body. Scale 14/16/18/24/40/56/120 (body Libre Caslon Text 18px/1.7, ~65ch; placeholder label 14px uppercase with 0.08em tracking); display tracking -0.02em. Radius 24px cards, 16px images, 999px pills with 2px black borders. Image duotone via CSS `mix-blend-mode: multiply` over the card color. Motion 300ms ease; stagger 80ms.

### Components & interactions
Header, Masthead, NewsletterRow (idle/loading/success/error), FeaturedCard, ColorCard (hover translateY(-4px), image un-tints on hover/focus), PillButton (hover fills black with white text), PostHeader, Prose, RelatedPosts, FooterColumns, ContactForm.

### Data & state
Frontmatter: title, slug, date, excerpt, cover, color (one of the palette keys), tags. Colors assigned in order or explicitly. Seed 7 original posts with generated fashion imagery of fictional models.

### Accessibility
Every card color must carry black text at ≥ 4.5:1 -- verified for all seven, magenta (#c044b0) is the tightest at 4.7:1, so do not darken it further without switching its text to white. Uppercase titles only for headings; excerpts in sentence case serif. Underline-only input needs a real label and a visible focus state (thicker underline + outline). Cards are single links; "Read more" is not a separate nested link. Reduced motion disables lifts and stagger. Tinted images still get descriptive alt text. Verified contrast: body text #000000 on #f7e5d2 = 17.0:1; black text #000000 on #bca8f0 = 10.0:1; black text #000000 on #ec7089 = 7.2:1; black text #000000 on #c044b0 = 4.7:1; placeholder text in underline input #6b5647 on #f7e5d2 = 5.6:1.

### Security
Proportionate: zod-validated forms client and server, honeypot, rate limiting, double opt-in; no secrets client-side; sanitized MDX; social links `rel="noopener noreferrer"`.

### Performance & SEO
Responsive images with lazy loading; limit heavy display font to needed weights. Pre-render; per-post meta/OG using card color and cover; sitemap and RSS. Lighthouse 95+.

### Guardrails
- Original writing; placeholder or generated imagery; no fashion brand logos or real designer claims.
- No fabricated reader quotes.
- Collect only emails.
- Typed small components, no `any`, visible form errors.
- Done when: each card color passes contrast with its text, the grid collapses to 1 column cleanly, hover/focus un-tints images, newsletter handles all states, and post pages inherit their card color.

Open the builderAll templatesThis palette on its own