Wren Adeyemi

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

Condensed display serif, sturdy text serif and typewriter mono are the magazine contents-page idea, and this trio is unique in the catalog.

• Instrument SerifHeadings: uppercase name 48-160px at 0.05em
• Source Serif 4Body: paragraphs 17-18px at 1.6
• Space MonoFigures and code: 12px uppercase metadata

Who it is for

• Freelance designers justifying premium pricing
• Product designers with notable experience
• Small teams building credibility without a designer
• Creatives who like editorial, type-led layouts

Layout

1. Top bar: [ General Info ] and [ Dark Mode ] bracketed mono buttons left; role @ company and city/country right
2. Hero: right-aligned short bio paragraph, then giant condensed serif name spanning the right side; 'Selected works 2017-2024' label left
3. Full-width hero image/render
4. Experience: rows with company, years, role and one-line description (interactive cards)
5. Personal Projects row: title + status, type, description in columns
6. Education: label column left; degree/school and years
7. About and Contact sections with live time
8. Asymmetric case study pages

Palette

Editorial, witty, achromatic, precise, airy. It reads like the contents page of a design magazine.

• background#ffffff
• text#000000
• label gray#595959
• secondary surface#f5f5f5
• border#e6e6e6
• hero render (violet)#8a6fd1

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

Instrument Serif 400, fluid 48-160px, uppercase name with 0.05em tracking

Body

Source Serif 4 at 17-18px (1.6 line-height) for paragraphs; Space Mono 12px uppercase with 1.2-1.8px tracking for nav and labels

A condensed editorial serif for display, a sturdy text serif for reading and a typewriter mono for metadata makes it feel like a magazine masthead.

Spacing and imagery

40px margins, 12-column grid with labels in the first 3 columns and content offset, generous 120px+ row spacing, hairline row dividers, no radius.

A single large abstract 3D render (glass cubes and spheres in violet) as the hero; case studies use asymmetric image offsets.

Components

• Bracketed mono buttons
• Dark mode toggle
• Role and location labels
• Right-aligned bio
• Fluid giant serif name
• Section labels in mono
• Full-width hero render
• Experience rows/cards
• Personal projects row
• Education rows
• About section
• Contact with live time
• Asymmetric case study layout

Interactions

• [ Dark Mode ] toggles achromatic dark theme
• [ General Info ] opens an info panel/overlay
• Experience cards expand or highlight on hover
• Scroll-triggered fade/slide reveals
• Name scales fluidly with viewport
• Live time updates in contact

Data

• Role{company, start, end, title, description}
• Project{title, status, type, description, slug}
• Education{degree, school, years}
• Profile{name, role, company, city, bio, email, timezone}

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 a light, magazine-inspired portfolio for a fictional product designer, "Wren Adeyemi". It is for clients and hiring teams who value craft and personality. The page reads like a masthead: bracketed monospace controls, a witty third-person bio, a huge condensed serif name and one striking hero render. Career details follow in neatly aligned editorial rows, and case studies use asymmetric image layouts.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS with class dark mode, shadcn/ui (Radix Sheet for the General Info panel) and lucide-react. Use Framer Motion for reveals, date-fns-tz for live time and React Router. Static only.

### Pages & layout
1. Top bar, 40px margins, 12px Space Mono uppercase with 0.15em tracking. Left: "[ General Info ]" and "[ Dark Mode ]" buttons. Right: "Role @ Company" and "City, Country".
2. Hero: a right-aligned bio of 3-4 short lines, max 440px wide. Under it, the name in uppercase serif at clamp(48px, 12vw, 160px) with 0.05em tracking, aligned right. At the far left, on the baseline row, a mono label "Selected works 20XX-20XX".
3. A full-width 16:9 hero render.
4. Experience: rows on a 12-column grid. Columns 1-3 hold the mono label (first row only). Columns 4-12 hold the company (serif 24px), years (mono, muted), title and a one-line description, with hairline dividers. Rows expand on click to show 2-3 highlights.
5. Personal Projects: title with status below, type and description across columns.
6. Education: the same grid as Experience.
7. About (2 paragraphs) and Contact (email, socials, live time).
8. Case study: images offset left and right in alternation, with captions in mono.

### Design system
- Light: `--background: #fff`, `--foreground: #000`, `--muted-foreground: #595959`, `--secondary: #f5f5f5`, `--border: #e6e6e6`.
- Dark: #0b0b0b background, #f2f2f2 text, #a3a3a3 labels. Achromatic only; the hero image supplies color.
- Fonts: Instrument Serif 400 (and italic) for display and names only, Source Serif 4 400 for paragraphs, plus Space Mono 400, all from Google Fonts, with Georgia and monospace fallbacks. Scale: 12 / 14 / 16 / 20 / 24 / 48 / 160px.
- Spacing: 8px base, 40px margins, 120px between sections. Radius 0.
- Motion: 600ms ease-out reveals and 250ms row expansion.

### Components & interactions
- BracketButton: text wrapped in brackets. Hover inverts (black fill, white text). Focus gets an outline. `aria-pressed` on the dark-mode button.
- InfoSheet: slides from the left with contact, availability and links. Esc closes it.
- ExperienceRow: collapsed or expanded (an accordion with `aria-expanded`). Hover shifts the background to `--secondary`.
- LiveTime: minute ticks and a fallback.
- Empty sections hide.

### Data & state
`Role{company, start, end, title, description, highlights}`, `Project{title, status, type, description, slug}`, `Education` and `Profile`. The theme is stored in localStorage. Seed four invented companies, one ongoing personal project and two fictional schools.

### Accessibility
- The label gray #595959 on white is 7:1 (6.42:1 on the hover surface). Dark mode labels use #a3a3a3 (7.8:1).
- Bracket characters should be hidden from screen readers (`aria-hidden` spans) so buttons read cleanly.
- The accordion uses proper button semantics. Keep one H1 (the name).
- The hero render needs alt text or `alt=""` if decorative. Honor reduced motion.
- Verified contrast: body #000000 on #ffffff = 21.0:1; labels #595959 on #ffffff = 7.0:1; dark body #f2f2f2 on #0b0b0b = 17.58:1; dark labels #a3a3a3 on #0b0b0b = 7.8:1.

### Security
- No forms. `mailto:` only.
- External links use `rel="noopener noreferrer"`. No secrets.

### Performance & SEO
Serve the hero render as AVIF with `srcset` and `fetchpriority="high"`. Preload Instrument Serif and subset Space Mono. Add Person JSON-LD and per-case OG images.

### 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:
  - [ ] Top bar buttons toggle dark mode and open the info sheet
  - [ ] Name scales fluidly from 48px to 160px without overflow
  - [ ] Experience rows expand/collapse accessibly
  - [ ] Both themes pass AA contrast
  - [ ] Case study images alternate asymmetric offsets

Open the builderAll templatesThis palette on its own