Tidepool CV

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

Epilogue is a grotesk with a playful, slightly wide display cut, and Alegreya Sans is a soft humanist body, keeping the CV fresh but professional.

• EpilogueHeadings: name 120px 600 at -0.02em, section titles 32px
• Alegreya SansBody: body 16px at 1.7

Who it is for

• Creative directors and designers
• Job seekers wanting an online CV
• Freelancers sharing a credentials link
• Career switchers

Layout

1. Slim top bar: name and title left; download, email, LinkedIn and GitHub icon buttons right; a small avatar appears centered after scrolling
2. Hero: huge bold sans name centered, short teal underline bar, organic blob-masked portrait, scroll dot
3. About paragraph
4. Experience: centered vertical timeline with date, role and company right-aligned on the left, description on the right, teal dot markers
5. Education timeline in the same format
6. Skills
7. Contact
8. Section headings preceded by small teal dot clusters that count up (1, 2, 3 dots)

Palette

fresh, calm, approachable, modern, tidy. It is a playful CV that still reads as professional.

• background (pale teal)#c0dcde
• text#1d1d1d
• accent teal#4a9aa0
• muted text#4b5a5c
• surface#d6e9ea
• accent text#26656a

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

Epilogue SemiBold 600, 120px name with tight -0.02em tracking; section titles 32px

Body

Alegreya Sans 16px, weight 400, 1.7 line-height, 640px measure

Grotesk display with a soft humanist body; center-aligned headings with a strict left/right timeline split.

Spacing and imagery

Centered single axis, a timeline column split at the middle, roomy 96px section spacing, organic blob shapes rather than radii.

One portrait clipped to an organic blob; blob-shaped timeline markers; icons for actions. No other photography.

Components

• Top bar with icon action buttons
• Scroll-revealed mini avatar
• Oversized name headline
• Accent underline bar
• Blob-masked portrait
• Dot-cluster section markers
• Center-line timeline
• Timeline entries (date, role, org, description)
• Skills list
• Contact links
• Download PDF action

Interactions

• Mini avatar fades into the top bar after scrolling past the hero
• Timeline entries reveal on scroll (GSAP or Framer Motion)
• Icon button hover and focus states with tooltips
• Blob portrait subtly morphs
• Download triggers the PDF resume
• Smooth scroll

Data

• Profile{name, title, about, photo, email, linkedin, github, resumePdf}
• TimelineItem{kind: experience|education, start, end, title, org, description}
• Skill{name, group}

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 "Tidepool CV", an online resume for a creative professional that reads well to people and to applicant tracking systems. It should open with personality (a giant name and an organic portrait blob), then present experience and education on a clean central timeline, and offer one-click actions to download a PDF, email, or view professional profiles.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Button, Tooltip, Separator), lucide-react icons. Framer Motion for scroll reveals and the top-bar avatar. The PDF is a static file generated from the same data at build time (for example with `@react-pdf/renderer` in a script) so both versions stay in sync. No backend.

### Pages & layout
1. **Top bar**: fixed, translucent pale teal. Name, a bullet and the title on the left; four icon buttons on the right (download PDF, email, LinkedIn-style profile, code profile). After the hero scrolls out, a 32px round avatar fades in at the center.
2. **Hero**: centered name at about 120px, a 256px teal rule under it, then a portrait clipped to an irregular blob and a small dot hinting at scrolling.
3. **About**: centered heading with one dot above it, and a 2 to 3 sentence paragraph at a 640px measure.
4. **Experience**: heading with two dots. A vertical center line with a teal blob marker per entry; the left column (right-aligned) holds the date range, role in bold and organization, and the right column holds the description.
5. **Education**: three dots, same timeline pattern.
6. **Skills**: grouped chips.
7. **Contact**: email and profile links, plus a repeated download button.

### Design system
Light, single hue. Tokens: `--background: #c0dcde`, `--foreground: #1d1d1d`, `--accent: #26656a` (use `#4a9aa0` for decoration only), `--muted: #44585b`, `--surface: #d6e9ea`. Fonts: Epilogue 600 for the name and headings, Alegreya Sans 400 for body text. Scale: 120/32/20/16/14px (14px only for dates and captions), name tracking -0.02em. Spacing: 8px base, 96px between sections, a 1100px max-width timeline with a 48px gutter each side of the line. Shapes: SVG blob paths for the portrait and markers; buttons use a small 6px radius. Motion: 450ms reveals with a 40ms stagger per entry.

### Components & interactions
- Icon button: 40px hit area, tooltip label, and hover, focus-visible (2px `#1d1d1d` ring) and active states. Download shows a brief "Preparing…" state if the file is fetched.
- Timeline item: fades up on entering the viewport; the marker scales in.
- On mobile the timeline collapses to a single left rail.
- If the portrait fails to load, show an initials blob instead.

### Data & state
`resume.ts` exports `Profile{name, title, about, photo, email, links: {label, href}[]}`, `Item{kind:'experience'|'education', start, end, title, org, description}` and `Skill{name, group}`. The web page and the PDF script both read it. Seed a fictional career of 4 roles and 2 degrees with invented studio names.

### Accessibility
The `#1d1d1d` on `#c0dcde` pair passes AAA. Do not use the light teal `#4a9aa0` for text or meaningful icons; accent text uses `#26656a`. Icon-only buttons need `aria-label` values that match their tooltips. Mark timelines up as ordered lists with `<time datetime>`. Keep reading order logical (date, role, org, description) even though the columns are visually split. Use one H1 (the name), H2 section headings, and set `prefers-reduced-motion` to disable reveals. Verified contrast: body #1d1d1d on #c0dcde = 11.67:1; muted #44585b on #c0dcde = 5.2:1; accent #26656a on #c0dcde = 4.61:1; accent on surface #26656a on #d6e9ea = 5.3:1.

### Security
Static only. Serve the PDF from the same origin, use `mailto:` with no exposed form endpoints, and give external profile links `rel="noopener noreferrer"`. The build script must not embed personal data beyond what is shown.

### Performance & SEO
Make it ATS-friendly with real text (no text in images), semantic headings and a plain-text PDF. Add a Person JSON-LD block and OG image. Lazy-load the portrait below 600px width. Target Lighthouse 95+.

### Guardrails
- Use original copy and placeholder imagery only, with no real employers' logos or trademarks.
- Do not fabricate references or endorsements.
- Publish only the contact details the owner chooses.
- Keep components small and typed, with no `any`, and show fallbacks visibly.
- Done when: the timeline renders from data on desktop and mobile; the PDF downloads and matches the page; the avatar appears on scroll; every icon button has an accessible name; keyboard navigation reaches every action.

Open the builderAll templatesThis palette on its own