Aster Quinn

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 Bodoni is a cooler, more archival high-contrast serif for the misty name, Rosario is a soft humanist prose face, and DM Mono stays for the data.

• Libre BodoniHeadings: name 128px 500 uppercase at 0.05em, list titles 24-28px
• RosarioBody: prose 16-18px at 1.6
• DM MonoFigures and code: labels, dates and metadata, 12px minimum

Who it is for

• Senior product designers and design directors
• Creatives presenting a career timeline
• Agencies presenting team capabilities
• Designers wanting a moody, distinctive personal site

Layout

1. Fixed header: circular monogram left; numbered section indicator (01 Home) center; city and live date/time right in mono
2. Hero: centered two-line serif name, tracked mono subtitle, then a wide landscape image
3. Experience: numbered rows with company in serif, years and role in mono, hairline dividers
4. Personal Projects: numbered row(s) linking to case studies
5. Education: numbered rows with degree, school and years
6. About paragraph
7. Contact with email, socials and live clock
8. Case study pages

Palette

Misty, calm, sophisticated, archival, introspective. It is cool and foggy, like a Scandinavian morning.

• background (slate blue)#5b6b7b
• text (cream)#f6f4ee
• secondary surface#4f5964
• card#53616e
• accent#6c7a89
• muted#70808f
• border (warm)#e0dbd1
• dimmed text / labels#ebeae4

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 Bodoni 500, 128px uppercase for the two-word name with 0.05em tracking; 24-28px for list titles

Body

Rosario 16-18px at 1.6 line-height; DM Mono (12px minimum, 400) for labels, dates and metadata with wide tracking

A three-font system: serif for names and titles, mono for data, sans for prose. It creates an editorial, archival feel.

Spacing and imagery

Narrow ~700px content column centered, rows ~64px tall with hairline dividers, large section gaps, circular monogram, minimal radius.

Soft, pale-blue foggy landscape photography with pine silhouettes; very little other imagery.

Components

• Circular monogram
• Numbered section indicator
• Live city date/time
• Serif hero name
• Mono subtitle
• Hero landscape image
• Numbered experience rows
• Personal projects list
• Education list
• About paragraph
• Contact block with clock
• Case study page layout

Interactions

• Section indicator updates (01 Home, 02 Experience...) as you scroll
• Anchor navigation with smooth scroll
• Rows fade/slide in on scroll
• Row hover brightens text from #ebeae4 to full cream and reveals an arrow
• Live clock ticks each minute
• Case study route transitions

Data

• Role{index, company, start, end, title}
• Project{slug, title, type, cover, sections[]}
• Education{degree, school, start, end}
• Profile{name, subtitle, 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
Create a moody, slate-blue single-page portfolio for a fictional design director, "Aster Quinn". It serves hiring managers and prospective clients who want a senior designer's career at a glance. A large serif name and a foggy landscape set the tone. Experience, projects and education are clean numbered lists, and a live local clock adds a personal, "working from somewhere" detail.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Framer Motion for in-view reveals, an IntersectionObserver hook for the section indicator, date-fns-tz for the clock and React Router for `/work/:slug`. Static only.

### Pages & layout
1. Fixed header with three zones: a 40px circular monogram on the left; in the center a circled index number plus the current section name (Home, Experience...); on the right, the city and live date in DM Mono at 12px.
2. Hero: a two-line uppercase serif name at clamp(64px, 10vw, 128px) with 0.05em tracking, a mono subtitle with 0.2em tracking, then a 16:9 landscape image in a 900px container.
3. Experience: an eyebrow label, then rows with a mono index "01", the company in serif at 28px, years and role right-aligned in mono, and a 1px divider.
4. Personal projects: the same row style, linking to case studies.
5. Education: degree in serif, school in small mono below, years on the right.
6. About: a 2-paragraph bio in Rosario at 18px.
7. Contact: email, socials, city and live time.

### Design system
- `--background: 210 15% 42%` (#5b6b7b), `--foreground: 45 33% 95%` (#f6f4ee), `--secondary: #4f5964`, `--card: #53616e`, `--accent: #6c7a89`, `--muted: #70808f`, `--border: #e0dbd1` (at 25% opacity for decorative dividers), `--muted-foreground: #ebeae4` for dimmed rows and mono labels. `--accent` and `--muted` are fills for non-text details only and never sit behind text.
- Fonts: Libre Bodoni 500, Rosario 400 and DM Mono 400, all from Google Fonts. Scale: 12 / 14 / 16 / 18 / 28 / 64 / 128px.
- Spacing: 8px base; 64px rows; 160px between sections; 700px content column.
- Motion: 600ms ease-out fade-up with a 60ms stagger and 200ms hover. Single dark-ish theme.

### Components & interactions
- SectionIndicator: updates on scroll and animates the number change. Clicking it opens a small menu of anchors.
- ListRow: hover or focus raises the text to full cream and slides in an arrow. Linked rows are `<a>`; plain rows are static.
- LiveClock: minute updates. If the timezone is invalid, fall back to the city without a time.
- Empty states: hide a section entirely if its list is empty.
- Case study: hero, overview, image and text sections, next project link.

### Data & state
Typed arrays: `Role{index, company, start, end, title}`, `Project{slug, title, type, cover, sections}` and `Education{degree, school, start, end}`, plus a `Profile` config. The only state is the active section. Seed four invented companies (no real brands), one personal project and two fictional schools.

### Accessibility
- Cream #f6f4ee on slate #5b6b7b is 4.98:1, fine for body text. Dimmed rows and mono labels use #ebeae4 (4.54:1), never #70808f.
- Build the lists as `<ol>` for real numbering.
- The section indicator uses `aria-live="polite"` sparingly, or not at all, to avoid chatter.
- Honor reduced motion. Give the landscape image a descriptive alt. Add a skip link.
- Verified contrast: body #f6f4ee on #5b6b7b = 4.98:1; muted #ebeae4 on #5b6b7b = 4.54:1; card #f6f4ee on #53616e = 5.78:1.

### Security
- Only `mailto:` and external links, with `rel="noopener noreferrer"`.
- No secrets. If you add a form later, validate with zod on both sides.

### Performance & SEO
Mark the hero landscape as the LCP image with `fetchpriority="high"` and `srcset`. Subset the three font families and preload Libre Bodoni. Use one H1 (the name) and H2s per section, and add Person JSON-LD and OG tags.

### 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:
  - [ ] Header indicator tracks the active section while scrolling
  - [ ] Numbered lists render as semantic ordered lists
  - [ ] Live clock shows correct local time for configured timezone
  - [ ] All text passes 4.5:1 on the slate background
  - [ ] Case study pages link back and forward

Open the builderAll templatesThis palette on its own