Kai Okafor

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

Fira Sans comes from the code-editor world as a readable UI sans, and JetBrains Mono stays for the editor-themed details it was made for.

• Fira SansHeadings: headline 60px 700 at -1.5px
• Fira SansBody: body 16-18px
• JetBrains MonoFigures and code: nav, card titles, chips, comments and metrics

Who it is for

• Freelance developers and consultants
• Senior engineers building a personal brand
• Small dev shops establishing credibility
• Developers documenting products and side projects

Layout

1. Header: '<name />' logo in green mono left; Home (active green), Work, About, Contact in mono right; bottom border
2. Hero over a subtle square grid: '/* Senior Developer */' comment eyebrow, two-tone headline (white line + gray lines) with blinking green caret, intro paragraph, green 'View Work →' button
3. Featured Work: 2x2 grid of bordered cards with mono title, arrow, description, tech chips, divider and '//' impact metric in green
4. '// View all projects →' link
5. Footer: '// © year name', Styleguide link, GitHub / LinkedIn / Mail icons
6. Case study pages with challenges, stack and metrics
7. About, Contact form, Styleguide pages

Palette

Technical, focused, dark, precise, credible. It reads like a well-themed code editor turned into a résumé.

• background#0a0a0a
• card#121212
• text#fafafa
• accent (neon green)#00ff2a
• secondary#1f1f1f
• muted#262626
• border#2e2e2e
• body gray#a3a3a3
• input border#616161

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

Fira Sans 700, 60px, -1.5px tracking, with the second part in gray

Body

Fira Sans 16-18px; JetBrains Mono for nav, card titles, chips, comments and metrics

Sans for readability, mono for all 'code' flavor; green reserved for interactive and highlight.

Spacing and imagery

32px margins, 1216px container, 24px card gap, 24px card padding, 4-6px radius, 1px borders, 50px background grid.

No photos; a faint square grid background, code-comment glyphs and tech chips provide texture.

Components

• JSX-style logo
• Mono nav with active green
• Grid-pattern hero background
• Code-comment eyebrow
• Two-tone headline
• Blinking caret
• Primary green button
• Project card with arrow
• Tech-stack chips
• Impact metric line
• View all link
• Footer with icon links
• Contact form
• Styleguide page

Interactions

• Caret blinks; optional typing effect on headline
• Cards lift border color to green and arrow shifts on hover
• Button darkens/glows on hover, focus ring green
• Staggered entrance transitions
• Contact form validation with toasts
• Mobile drawer nav

Data

• Project{slug, title, summary, stack[], impact, challenges[], solution, metrics[]}
• Profile{handle, name, role, location, intro, socials[]}
• Message{name, email, subject, body}

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 terminal-flavored portfolio for a fictional senior engineer, "Kai Okafor". It serves CTOs, engineering managers and founders hiring contractors. The site should feel like a tasteful code editor: dark canvas, faint grid, monospace accents and one neon-green highlight. It needs to show four flagship projects with concrete impact metrics, and it offers full case studies, an about page and a contact form.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Button, Card, Badge, Form, Toast via Sonner, Vaul for mobile nav) and lucide-react. Use React Router for Home, Work, `/work/:slug`, About, Contact and Styleguide, react-hook-form + zod for the form, and optionally Recharts for a before/after metric chart in case studies. One serverless function sends messages.

### Pages & layout
1. Header, 64px: a `<handle />` logo in green mono, and nav in mono at 14px. The active link is green and the rest gray. 1px bottom border.
2. Hero: over a 50px CSS grid pattern (1px lines at 6% white), fading out at the bottom. A comment eyebrow `/* Role */` with green inner text, a headline at clamp(40px, 5vw, 60px) with line 1 in white and lines 2-3 in #9ca3af, and a blinking green caret. Then a 4-line intro and a green "View Work →" button in mono.
3. Featured work: a 2x2 grid of cards (#121212, 1px border, 6px radius). Each card has a mono title and arrow, a 2-line summary, tech chips, a divider and a `// metric` line in green mono.
4. "// View all projects →" link, centered.
5. Footer: `// © year name`, a Styleguide link and icon links.
6. Case study: overview, challenge list, approach, stack, a metrics row and next project.

### Design system
- `--background: #0a0a0a`, `--card: #121212`, `--foreground: #fafafa`, `--primary: #00ff2a`, `--secondary: #1f1f1f`, `--muted: #262626`, `--border: #2e2e2e`, `--muted-foreground: #a3a3a3`, `--input-border: #616161` (the #2e2e2e border stays for decorative card outlines), `--radius: 6px`.
- Fonts: Fira Sans 400/500/700 and JetBrains Mono 400/500, from Google Fonts. Scale: 12 / 13 / 14 / 16 / 18 / 24 / 60px; 12-13px only for chips and metrics, body 16-18px at 1.6 line-height.
- Spacing: 8px base, 32px margins, 24px gaps.
- Motion: 1s steps(1) caret blink, 400ms fade-up with a 60ms stagger and 150ms hovers. Dark only.

### Components & interactions
- Button (primary): green with black mono text. Hover brightens with a subtle green glow, focus shows a 2px green ring with offset, loading shows a spinner and disabled drops to 50% opacity.
- ProjectCard: hover or focus turns the border green/40 and moves the arrow 2px right. The whole card is a link.
- Chip: static mono label on `--secondary`.
- ContactForm: name, email, subject and message. States for invalid, submitting, success and error.
- Styleguide: tokens, type and component states.

### Data & state
`Project{slug, title, summary, stack, impact, challenges, solution, metrics}` and `Profile` are typed data files. Seed four invented projects (payments platform, design system, live analytics, commerce services) with plausible, clearly illustrative metrics.

### Accessibility
- Green #00ff2a on #0a0a0a is 14.46:1, and black text on green is 15.34:1.
- Gray #9ca3af on the background is 7.8:1; chip text #a3a3a3 on #1f1f1f is 6.53:1.
- The blinking caret is `aria-hidden` and stops under reduced motion (WCAG 2.2.2).
- Decorative comment glyphs (`//`, `/* */`) are hidden from screen readers where they would be noise.
- Cards have a single link target with descriptive text.
- Verified contrast: body #fafafa on #0a0a0a = 18.97:1; green #00ff2a on #0a0a0a = 14.46:1; button #000000 on #00ff2a = 15.34:1; chips #a3a3a3 on #1f1f1f = 6.53:1.

### Security
- zod on the client and in the function, with a honeypot, rate limit and length caps.
- No secrets in client-side code. GitHub and LinkedIn links use `rel="noopener noreferrer"`.

### Performance & SEO
There are no images, so target Lighthouse 100. Draw the grid with a CSS background. Preload JetBrains Mono. Add per-case meta, OG images and Person JSON-LD with `sameAs` links.

### 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:
  - [ ] Hero shows comment eyebrow, two-tone headline and caret that stops under reduced-motion
  - [ ] Four project cards with chips and metric lines link to case studies
  - [ ] Green accent used consistently for interactive states
  - [ ] Contact form handles all states
  - [ ] Styleguide page documents tokens and component states

Open the builderAll templatesThis palette on its own