Jonah Reyes

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

Libre Caslon Display is a high-contrast display serif and Newsreader a text serif built for news, which keeps the broadsheet arts-section feel on black.

• Libre Caslon DisplayHeadings: 'Get in touch' ~60px, company names ~32px
• NewsreaderBody: body 16-20px, italics

Who it is for

• Product designers job hunting
• Designers presenting case studies to win client trust
• Side-project creators establishing credibility
• Creatives who prefer an editorial, text-first site

Layout

1. Three-column layout with vertical hairline dividers
2. Left column: stacked name at top; About / Work / Contact links at bottom
3. Middle column: intro sentence, 'About Me' arrow link, underlined 'Work' label, list of companies (Playfair titles with years), 'See All' link
4. Right column: large serif 'Get in touch' heading, city and live local time, big diagonal arrow icon link
5. Below: About section with bio paragraphs and an italic sign-off
6. Education section with degree, school and years
7. Footer row: copyright, Email / LinkedIn / Dribbble, 'Made in' credit
8. Case study pages

Palette

Literary, dark, quiet, refined, confident. It feels like a newspaper's arts section printed in reverse.

• background#000000
• text#f2f2f2
• secondary surface#1a1a1a
• muted#1f1f1f
• border / dividers#333333
• muted text#9a9a9a

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

Libre Caslon Display 400, ~60px for 'Get in touch', ~32px for company names

Body

Newsreader, 16-20px

Two serifs, a high-contrast display and a text serif, give a broadsheet feel on black.

Spacing and imagery

Columns ~210px / ~535px / remainder; 32px padding; hairline #333 rules; large vertical whitespace; no radius.

No imagery on the home view; case studies carry images. A large arrow glyph acts as the main graphic.

Components

• Three-column editorial grid with rules
• Stacked name block
• Bottom-anchored nav
• Intro paragraph
• Arrow text links
• Company/work list with years
• See All link
• Get in touch heading
• Live local time
• Large arrow CTA
• About section
• Education list
• Footer link row
• Case study page layout

Interactions

• Staggered fade-in of columns on load
• Work list items brighten and shift on hover
• Arrow links nudge diagonally on hover
• Live clock updates each minute
• Scroll-triggered reveals for About and Education
• Reduced-motion disables all animation

Data

• Work{company, year, slug, role, summary, sections[]}
• Education{degree, school, years}
• Profile{name, intro, city, timezone, email, socials[]}

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, broadsheet-style portfolio for a fictional product designer, "Jonah Reyes". It serves hiring managers and prospective clients who like substance over spectacle. The home screen is three newspaper columns separated by hairlines: identity, work history and a big invitation to get in touch. Case studies and an about section sit below. Everything is serif.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react (ArrowUpRight). Use Framer Motion for staggered entrances (respecting reduced motion), date-fns-tz for the live time and React Router for `/` and `/work/:slug`. Static only.

### Pages & layout
1. Grid (desktop): `grid-template-columns: 210px minmax(0, 535px) 1fr` with 1px #333 vertical rules, full viewport height for the first screen.
2. Left: the name stacked over two lines at 18px at the top, and three nav links anchored at the bottom.
3. Middle: a 20px intro sentence, an "About Me ↗" link, a small underlined "Work" label, then 4-6 entries (company in Libre Caslon Display at 32px, year below at 13px muted) and a "See All ↗" link.
4. Right: "Get in touch" at 60px over two lines, then city and live time lower down, and a 64px arrow icon link at bottom-right.
5. About: a full-width row with a top rule, three bio paragraphs and an italic muted sign-off.
6. Education: degree in serif at 18px, then school · years in muted text.
7. Footer: a three-part row with ©, links and a credit.
8. Mobile: a single column. Rules become horizontal and the order is name, intro, work, contact.

### Design system
- `--background: #000`, `--foreground: #f2f2f2`, `--secondary: #1a1a1a`, `--muted: #1f1f1f`, `--border: #333`, `--muted-foreground: #9a9a9a`, `--radius: 0`. The #333 rules are decorative.
- Fonts: Libre Caslon Display 400 for display and Newsreader 400/400i for text, both from Google Fonts. Scale: 13 / 16 / 18 / 20 / 32 / 60px, line-height 1.5 for body, measure capped at ~70ch; 13px only for years and meta.
- Spacing: 8px base, 32px column padding, 96px row spacing.
- Motion: 500ms fade-up with a 100ms stagger per column; 200ms hovers.

### Components & interactions
- WorkItem: hover or focus makes it brighter with a 4px right shift. It links to the case study, or is static when there is no case study.
- ArrowLink: the icon translates 2px up and right on hover.
- LiveTime: `<time>` updated each minute, with a fallback to the city only.
- CaseStudy: title, role, year, summary, image sections and next project.
- Empty work list: show "Selected work coming soon."

### Data & state
`Work{company, year, slug, role, summary, sections}`, `Education{degree, school, years}` and `Profile{name, intro, city, timezone, email, socials}`. Seed invented company names (not real brands) and two fictional schools.

### Accessibility
- #f2f2f2 on black is 18.76:1. The muted #9a9a9a is 7.46:1 on black and 6.19:1 on #1a1a1a, fine for small text.
- The column layout must keep a logical DOM and reading order. Use `<nav>`, `<main>` and `<footer>`.
- The big arrow link needs an accessible name ("Email me"). Focus rings are a 2px #f2f2f2 outline with offset.
- Target WCAG AAA contrast for body text.
- Verified contrast: body #f2f2f2 on #000000 = 18.76:1; muted #9a9a9a on #000000 = 7.46:1; muted on surface #9a9a9a on #1a1a1a = 6.19:1.

### Security
- Contact via `mailto:`. External links use `rel="noopener noreferrer"`.
- No inline secrets.

### Performance & SEO
The home view is text-only, so aim for Lighthouse 100. Preload Libre Caslon Display, subset fonts, lazy-load case study images and add Person JSON-LD with per-case meta.

### 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:
  - [ ] Desktop shows three ruled columns filling the first viewport
  - [ ] Mobile collapses to one column in logical order
  - [ ] Live time updates and falls back gracefully
  - [ ] All animations disabled under reduced-motion
  - [ ] Company names in seed data are fictional

Open the builderAll templatesThis palette on its own