Tessa Quill

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

Rubik's rounded grotesk at poster scale is the whole idea of this CV, and few templates use it.

• RubikHeadings: name and role 128px bold uppercase at -6.4px
• RubikBody: body 17px, italic uppercase role titles

Who it is for

• Job seekers in competitive markets
• Consultants and freelancers
• Career changers
• Recent graduates

Layout

1. Ruled poster header: row 1 huge first name left + pill-shaped portrait with lilac border right; row 2 contact details (phone, city, email) left + huge last name right; row 3 huge lilac (#b05be0) role word left + website/handle right; hairlines between rows
2. Large summary paragraph
3. Two-column body: work experience timeline left (#8e3fbf date ranges, italic uppercase role + company, description); education, languages (label/level) and skills groups right
4. Footer copyright; floating round back-to-top button
5. Skip-to-content link

Palette

Bold, confident, playful, clean, modern. It turns a CV into a typographic statement piece.

• background#ffffff
• text#181818
• body text#1c1221
• accent lilac (portrait border, decorative)#c575f0
• lilac role word (display only)#b05be0
• accent strong (dates, labels)#8e3fbf
• rule#181818

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

Rubik bold uppercase at 128px with -6.4px tracking for name and role

Body

Rubik 17px, line-height 1.6; short italic uppercase role titles; #8e3fbf uppercase labels

One rounded grotesk family used at extreme sizes creates a poster-resume hybrid

Spacing and imagery

48px margins, full-width rows separated by 1px black rules, two-column body split ~50/50 with inner label/value columns, pill (fully rounded) portrait and buttons

Single portrait photo cropped into a stadium/pill shape with thick lilac border; no other imagery

Components

• Typographic name rows
• Pill portrait frame
• Contact detail stacks
• Summary paragraph
• Experience timeline item
• Education list
• Language level list
• Skills groups
• Back-to-top button
• Skip link
• Theme customization tokens

Interactions

• Staggered text reveal on load
• Animated background shapes in hero
• Scroll-snap sections
• Back-to-top button appears after scroll
• Hover underline on contact links
• Print-friendly stylesheet

Data

• Profile{firstName, lastName, role, phone, city, email, website, handle, photo, summary}
• Experience{start, end, title, company, description}
• Education{degree, school, years}
• Language{name, level}
• SkillGroup{label, skills[]}

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 one-page online resume for a fictional brand strategist named **Tessa Quill**. The audience is recruiters, hiring managers and potential consulting clients who want to scan experience quickly but remember the person. The page should work like a typographic poster at the top (name and role in enormous type) and like a tidy, printable CV below.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, and Framer Motion for staggered reveals. Keep all content in one typed `resume.ts` file so the owner edits a single place. No backend. Add a print stylesheet so the same page prints to a clean PDF.

### Pages & layout
1. Skip-to-content link.
2. Poster header, three ruled rows: (a) huge uppercase first name left and a pill-shaped portrait with a thick accent border right; (b) contact details (phone, city, email) stacked left and huge last name right; (c) the role in huge #b05be0 uppercase left and website and handle right. Use 1px black rules between rows.
3. Summary: a large-type paragraph (28–32px) spanning the width.
4. Body, two columns. Left: work experience timeline, where each entry has an accent date range, an italic uppercase "Role, Company" line and a short description. Right: Education, Languages (label and level pairs), and Skills (group label in accent, comma list of skills).
5. Footer with copyright, and a round black back-to-top button.

### Design system
Tokens: `--background: #ffffff; --foreground: #181818; --text: #1c1221; --accent: #c575f0; --accent-strong: #8e3fbf; --accent-display: #b05be0; --rule: #181818`. Font: Rubik 400/500/700 (italic 500 for role lines). Scale: clamp(56px, 10vw, 128px) name rows with -5% tracking; 30px summary; 20px section labels; 17px body at line-height 1.6, max 70ch; 14px meta at weight 500. Spacing: 48px margins, 32px row padding, 24px between timeline items. Radius: 9999px for the portrait frame and back-to-top button. Motion: letters or lines stagger in over 600ms; background blobs drift slowly (optional). Light theme; expose tokens so the accent is swappable.

### Components & interactions
- NameRow: responsive so long names shrink with `clamp` and never overflow; on mobile, rows stack (contact details below the name).
- TimelineItem: semantic `<article>` with `<time>` elements.
- Back-to-top: appears after 600px of scroll; focusable; smooth scroll (instant under reduced motion).
- Contact links: `tel:`, `mailto:` and https links with hover underline.
- Print: hides animations and the back-to-top button; forces black text; fits on two A4 pages.

### Data & state
`Profile{first,last,role,phone,city,email,website,handle,photo,summary}`, `Experience{start,end?,title,company,text}`, `Education{degree,school,years}`, `Language{name,level}`, `SkillGroup{label,skills[]}`. All static. Use invented employers (don't reference real agencies or clients) and a clearly fake phone number such as 555-0100.

### Accessibility
Light lilac #c575f0 is only 2.9:1 on white, so it is used only for the decorative portrait border. The giant role word uses #b05be0 (4.0:1, display size, above the 3:1 large-text minimum) and all small accent text (dates, labels, skill group names) uses #8e3fbf (6.4:1). The three name rows must read in logical order ("Tessa Quill, Brand Strategist") via a single H1 with visually split spans. Portrait alt text: "Portrait of Tessa Quill". Reduced motion disables staggered reveals. Verified contrast: body text on white: #1c1221 on #ffffff = 18.14:1; accent-strong dates/labels on white: #8e3fbf on #ffffff = 5.81:1; giant role word: #b05be0 on #ffffff = 3.88:1; white arrow on black back-to-top button: #ffffff on #181818 = 17.76:1.

### Security
Static site with no forms. Keep personal data minimal: publish a city, not a street address; consider a contact form or obfuscated email if spam is a concern. External links use `rel="noopener noreferrer"`.

### Performance & SEO
One image only: serve it as AVIF at 2× size and lazy-load nothing else. Preload Rubik and subset it. Person JSON-LD with jobTitle and sameAs; meta description and OG image generated from the poster header. Target Lighthouse 100 across the board.

### Guardrails
- Use a fictional person, invented employers and placeholder portrait; no real company names or awards.
- Don't present fabricated recommendations.
- Publish only the contact details the owner chooses.
- Keep components small and typed, never use `any`, and fail visibly if data is missing.
- Done when: all accent text passes AA at its size; the header stacks cleanly at 360px with no overflow; the page prints to two tidy pages; everything is editable from one data file; screen readers announce the name and role as one heading.

Open the builderAll templatesThis palette on its own