Elio Park

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

Proza Libre is a plain but witty humanist sans with a real italic for asides, and its bold caps hold up when pushed to gallery-wall scale.

• Proza LibreHeadings: viewport-scaled uppercase project names, bold, 0.05em
• Proza LibreBody: body 16-20px, inline bold keywords, italic asides

Who it is for

• Solo product and brand designers
• Creative consultants presenting case studies
• Designers who also show personal explorations
• Freelancers who want an editorial, gallery-like site

Layout

1. Four-corner fixed navigation: monogram top-left (green), Work top-right, About bottom-left, Contact bottom-right
2. Rotating circular text badge centered at top
3. Hero: centered one-to-three-line welcome statement in the middle of the viewport
4. Project index: enormous uppercase project names spanning the width (e.g. an invented one-word product name), one per screen band, plus an Explorations entry
5. About: bold-keyword paragraph and italic sign-off
6. Contact: label, email and social links left; location and live local time right
7. Footer rule with credit and 'made in' line
8. Case study page layout with impact metrics grid and next/prev project

Palette

Calm, warm, editorial, spacious, witty. It feels like a gallery wall with small captions in the corners.

• background (ivory)#f3f1ed
• text#141414
• accent (green)#1d731d
• secondary surface#e5e2dc
• muted text#656565
• border#141414

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

Proza Libre bold, viewport-scaled (roughly 12-20vw) uppercase project names (one or two words each) with 0.05em tracking

Body

Proza Libre 16-20px, bold used inline for keywords, italic for asides

A single neutral sans is pushed to extremes of scale; the gap between tiny corner labels and giant titles creates the drama.

Spacing and imagery

Large empty areas; content column ~600px centered; corner nav inset 32px; hairline footer rule; square corners.

Very little photography on the index; project imagery is saved for case studies. A rotating text badge and emoji add a personal touch.

Components

• Four-corner fixed nav
• Rotating circular text badge
• Centered welcome statement
• Viewport-scaled project title list
• Explorations gallery
• About paragraph with bold keywords
• Contact block with live local time
• Case study hero
• Impact metrics grid
• Sequential next/prev project nav
• Footer credit line

Interactions

• Circular badge rotates continuously (pauses on reduced-motion)
• Scroll-triggered reveal of project titles
• Hovering a project title shows a preview image or shifts color
• Live clock updates the local time each minute
• Case study metrics count up when in view
• Next/prev project navigation at the end of case studies

Data

• Project{slug, title, client, year, role, cover, metrics: {label, value}[], sections[]}
• Exploration{title, media, date}
• Profile{name, location, 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 an ivory-toned, editorial portfolio for a fictional independent designer, "Elio Park". The audience is product teams and brand leads looking at case studies. The site should feel like a gallery. Navigation sits in the four corners, a small rotating badge acts as a signature, and each project name is set so large it fills the screen. Case studies prove impact with metrics.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Framer Motion for reveals, the rotating badge and count-up metrics, React Router for `/`, `/work/:slug` and `/explorations`, date-fns-tz for the local-time readout, and Embla Carousel for exploration galleries. Static only.

### Pages & layout
1. Fixed corner nav, 32px from each edge: monogram top-left in the accent color, Work top-right, About bottom-left, Contact bottom-right. Put a circular "crafted by" text badge at top center.
2. Hero: a single centered statement (name, role, region) in the vertical middle of the viewport.
3. Work index: each project name is an uppercase link sized with clamp(64px, 16vw, 260px) and stacked with generous space. End with an "Explorations" link.
4. About: a 600px column. Bold the discipline keywords and close with a gray italic sign-off.
5. Contact: an eyebrow, then two columns. The left has email and external links with ↗; the right has the city and a live local time.
6. Footer: a hairline rule, © name and a credit line.
7. Case study: hero image, meta row, a 3-4 cell metrics grid, narrative sections and next/previous project.

### Design system
- `--background: #f3f1ed`, `--foreground: #141414`, `--accent: #1d731d`, `--secondary: #e5e2dc`, `--muted-foreground: #656565`.
- Font: Proza Libre (Google Fonts) 400/600/800. Scale: 14 / 16 / 20 / 32 / 64px plus fluid display. Display tracking is -0.04em for sentence-case text; uppercase project names use 0.05em. Body 16-20px at 1.6 line-height in a ~65ch column; the rotating badge text is at least 12px.
- Spacing: 8px base; 160-240px between index items. Radius 0 and no shadows.
- Motion: badge at 20s linear infinite rotation; reveals at 600ms cubic-bezier(0.16,1,0.3,1); count-up over 1.2s. Light theme.

### Components & interactions
- CornerNav: fixed links with a hover underline and an active state in the accent. It must not cover content on mobile, so at small widths collapse the bottom corners into the footer.
- RotatingBadge: SVG `textPath`, decorative. Pause it under reduced motion.
- ProjectTitle: fades in on scroll. On hover or focus the color shifts and a floating preview image appears; the floating image is optional on touch.
- LocalTime: updates each minute and shows a fallback if the timezone is invalid.
- MetricCard: animates from 0 once, and screen readers get the final value immediately.

### Data & state
Typed data: `Project{slug, title, client, year, role, cover, metrics[], sections[]}`, `Exploration{title, media, date}` and `Profile{name, city, timezone, email, socials}`. Seed four fictional projects with invented client names and plausible metrics marked as sample.

### Accessibility
- The green accent is deepened to #1d731d (5.29:1 on ivory, 4.61:1 on the secondary surface), so the monogram and active nav state are legible; links keep #141414 with an underline. Muted text is #656565.
- Corner nav sits inside a `<nav>` landmark in logical DOM order. Mark the badge `aria-hidden`.
- Giant titles are real text links with visible focus outlines.
- Local time uses a `<time>` element.
- Verified contrast: body #141414 on #f3f1ed = 16.33:1; accent #1d731d on #f3f1ed = 5.29:1; muted #656565 on #f3f1ed = 5.17:1.

### Security
- No forms by default, just `mailto:` and external links with `rel="noopener noreferrer"`.
- If you add a form, validate with zod on client and server and add a honeypot.
- No secrets in client-side code.

### Performance & SEO
Keep the index text-only for a fast LCP. Lazy-load case study images with dimensions. Use per-project meta, OG images and one H1 per page.

### 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:
  - [ ] Corner nav stays usable and non-overlapping from 360px to 1920px
  - [ ] Project titles scale fluidly without horizontal overflow
  - [ ] Badge and count-up respect reduced-motion
  - [ ] Local time renders and updates
  - [ ] Case study shows metrics grid and next/prev links

Open the builderAll templatesThis palette on its own