Ardent Words

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

Archivo Black keeps the manifesto weight, and Encode Sans is a firm, slightly squarish body that stays direct and no-nonsense.

• Archivo BlackHeadings: display up to ~102px at -0.05em, sentence case
• Encode SansBody: body 16-20px, 12px uppercase labels

Who it is for

• Freelance copywriters and content strategists
• Consultants positioning services for startups
• Writers who need case studies without imagery
• Creatives wanting a stark, high-contrast brand

Layout

1. Sticky top bar: bold wordmark left; Home, Work, About, Styleguide, Contact right (active item in blue)
2. Hero: two-line display headline, second line in bright blue, short intro paragraph, 'See the work' arrow link
3. 'The Difference' section: stacked generic phrases with a HOVER tag that reveal strategic rewrites
4. Selected Work: section label plus headline with an accent word, then numbered rows (01, 02...) each with a title and a three-column Context / Action / Result grid
5. CTA block: 'Ready to convert?' with contact link
6. Footer: wordmark, navigation, get in touch, connect columns
7. Separate About, Contact and living Styleguide pages

Palette

Bold, direct, dark, confident, no-nonsense. It reads like a manifesto: big claims and hard numbers with nothing ornamental.

• background#080808
• text#fafafa
• accent (royal blue)#0040ff
• card#0d0d0d
• secondary surface#1a1a1a
• border / muted#262626
• body gray#a3a3a3
• accent text (links, metrics)#4d7aff
• input border#5f5f5f

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

Archivo Black, fluid up to ~102px, very tight -0.05em tracking, sentence case

Body

Encode Sans 16-20px; uppercase 12px labels with wide tracking

A heavy grotesk display with a neutral Encode Sans body; the contrast in weight is the whole brand.

Spacing and imagery

Wide 1170px container, 56px side padding, huge vertical rhythm (160px+), hairline #262626 row dividers, radius 0 everywhere.

None. The page is pure typography, with numbers and accent-colored metrics doing the visual work.

Components

• Sticky nav with active accent
• Two-tone display headline
• Arrow text CTA
• Hover copy-rewrite cards
• Section eyebrow labels
• Numbered case study rows
• Context/Action/Result grid
• Accent metric callouts
• CTA banner
• Multi-column footer
• Contact form
• Living styleguide page

Interactions

• Hovering (or focusing/tapping) a generic phrase swaps it to the strategic rewrite with a slide/fade
• Nav links shift to blue on hover and for the active route
• Arrow in CTA nudges right on hover
• Scroll-triggered fade-up of case rows
• Contact form validation with inline errors and toast
• Styleguide page shows tokens and components live

Data

• CaseStudy{number, title, context, action, result, metric}
• Rewrite{generic, strategic}
• Service{name, description}
• Inquiry{name, email, company, budget, message}

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 a dark, typography-only portfolio for a fictional conversion copywriter, "Ardent Words". It targets startup founders and product marketers who hire on evidence. The site should state a sharp point of view, show the difference between bland and strategic copy interactively, and present case studies as problem → action → measurable result. Everything leads to an inquiry.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) for Form, Select, Toast and Tabs (the styleguide page), and lucide-react. Use Framer Motion for text swaps and reveals, React Router for Home, Work, About, Styleguide and Contact, and react-hook-form + zod for the inquiry form. The only backend piece is one serverless function or edge function to relay inquiries.

### Pages & layout
1. Sticky header: a heavy wordmark on the left and five uppercase nav links on the right. The active link is in the accent color, with a 1px bottom border.
2. Hero: a two-line claim, where line two is in the accent. Then a 2-sentence intro in gray and a "See the work →" link.
3. "The difference": 3-4 rows, each showing a generic phrase in muted gray with a small HOVER tag. On hover, focus or tap, the phrase is replaced by a sharper rewrite in white.
4. Selected work: an eyebrow, a heading with one accent word, then numbered rows. Each row has a large index at left and on the right a title plus a 3-column grid labelled Context, Action and Result. The Result text is in the accent.
5. CTA band, then a footer with columns for navigation, contact and social.
6. Styleguide page: color swatches, the type scale and component states.

### Design system
- Tokens: `--background: #080808`, `--foreground: #fafafa`, `--primary: #0040ff`, `--card: #0d0d0d`, `--secondary: #1a1a1a`, `--border: #262626`, `--muted-foreground: #a3a3a3`, `--primary-text: #4d7aff` (every accent-colored word, link, active nav item and metric), `--input-border: #5f5f5f`. `--border: #262626` stays for decorative row dividers only. `--radius: 0`.
- Fonts: Archivo Black for display, with clamp(48px, 8vw, 104px) and -0.05em tracking. Encode Sans 400/500 for body at 16-20px. Labels are 12px uppercase (two or three words at most) with 0.1em tracking. Body line-height 1.6, paragraphs capped at ~65ch.
- Spacing: 8px scale; 160px section rhythm; container 1170px.
- Motion: 250ms ease-out for text swaps and 500ms staggered fade-ups. Dark only.

### Components & interactions
- RewriteRow: states for idle, revealed (hover/focus/tap), and reduced-motion (instant swap). It is a `<button>` with `aria-expanded`.
- CaseRow: static, with an in-view fade.
- InquiryForm: name, email, company, budget select and message. States for invalid, submitting, success and error.
- NavLink: hover and active use the accent.
- Empty state: if the case list is empty, show a "Case studies coming soon" line.

### Data & state
Keep typed arrays: `CaseStudy{number, title, context, action, result}` and `Rewrite{generic, strategic}`. Form state lives in react-hook-form. Seed 3-4 fictional B2B case studies with plausible but invented metrics, labelled as illustrative.

### Accessibility
- #0040ff on #080808 is only 3.03:1, so it is used only as a fill (white on #0040ff is 6.61:1). All accent text, including the hero line, metrics, links and the active nav item, uses `--primary-text` #4d7aff (5.29:1).
- Hover-only content must also reveal on keyboard focus and tap.
- Give the form visible labels. Use a skip link and a visible focus ring (2px, #4d7aff).
- Verified contrast: body #fafafa on #080808 = 19.19:1; muted #a3a3a3 on #080808 = 7.94:1; accent text #4d7aff on #080808 = 5.29:1; button #ffffff on #0040ff = 6.61:1; input border #5f5f5f on #080808 = 3.14:1.

### Security
- zod validation in the browser and again in the function.
- Honeypot plus per-IP rate limiting. Cap field lengths.
- No API keys client-side.
- Render all user-supplied text as plain text.

### Performance & SEO
No images, so aim for Lighthouse 100. Preload Archivo Black and subset the fonts. Add meta and OG tags per route and Person/ProfessionalService JSON-LD.

### Guardrails
- Do write all copy yourself and use placeholder imagery (Unsplash-style stock or generated); no trademarked names, client logos or real people.
- Don't present invented testimonials or awards as real; label sample content as sample.
- Keep components small and fully typed; no `any`. Surface errors visibly instead of failing silently.
- Don't collect or store more personal data than the contact form needs.
- Done when:
  - [ ] Rewrite rows work with mouse, keyboard and touch
  - [ ] Case rows show Context/Action/Result with accent metrics
  - [ ] All accent text meets contrast for its size
  - [ ] Inquiry form handles invalid, loading, success and error
  - [ ] Styleguide page renders tokens and component states

Open the builderAll templatesThis palette on its own