Juno Ferreira

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

The punchy techno-grotesk stays for the sunny zine, and Livvic is a friendlier, rounder body than Inter to match the stickers.

• Space GroteskHeadings: hero 96px 700, section titles 60px at -1.5px
• LivvicBody: descriptions 16-20px in deep brown

Who it is for

• Designers launching an independent practice
• Product designers presenting case studies
• Creatives documenting career transitions
• Freelancers who want a memorable, colorful site

Layout

1. Fixed yellow header bar with thick bottom border: name left; Email and Résumé right (breadcrumbs on case pages)
2. Hero: two-line heavy headline (ampersand tinted), short supporting paragraph
3. Alternating project/role sections: big bold title, role, years, description and 'View Project' arrow link on the left; one or two rotated image cards scattered on the right
4. Experience timeline with company icons
5. Education
6. About
7. Contact with live timezone clock
8. Case study pages with overview, skill tags, role and external links

Palette

Playful, warm, bold, energetic, optimistic. It feels like a sunny zine spread, with bright color and stickers-on-a-wall imagery.

• background (peach)#f9c8b8
• gradient top (pink)#f28c9c
• text#1a1a1a
• primary (yellow header)#ffd400
• secondary (rose)#ec798c
• card (amber)#ffcc33
• muted#ebc2ad
• ampersand (deep rose)#7d1223

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

Space Grotesk 700, 96px hero and 60px section titles, -1.5px tracking (sentence case)

Body

Livvic 16-20px at 1.6 line-height, deep brown #3f302d for descriptions

A heavy techno-grotesk against warm color keeps the page punchy and playful.

Spacing and imagery

48px side margins, two-column sections (text left ~45%, images right), large vertical gaps, cards with slight radius and soft drop shadows, rotated 2-4 degrees.

Product mockups, zines and app screens on colored backgrounds, shown as rotated cards with soft shadows that overlap.

Components

• Fixed yellow header with border
• Breadcrumb nav on case pages
• Heavy grotesk hero
• Gradient page background
• Alternating project sections
• Scattered rotated image cards
• View Project arrow link
• Experience timeline with icons
• Education list
• About section
• Live timezone clock
• Résumé link
• Case study page layout with skill tags

Interactions

• Scattered images straighten and lift on hover
• Scroll-triggered entrance animations for sections and cards
• Background gradient shifts hue as you scroll
• Arrow links nudge on hover
• Live clock ticks
• Timeline items reveal sequentially

Data

• Project{slug, title, type, date, description, images[], tags[], links[]}
• Role{company, title, years, description, icon}
• Education{program, school, years}
• Profile{name, headline, intro, email, resumeUrl, timezone}

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 joyful, gradient-drenched portfolio for a fictional product designer and creative director, "Juno Ferreira". It targets startups and studios that want a designer with personality. The site pairs bold typography with playful "scattered photo" compositions: each project or role gets a text block and a cluster of slightly rotated images that snap straight when you hover them. Case studies go deeper.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Badge, Breadcrumb) and lucide-react. Use Framer Motion for rotation/hover springs, in-view reveals and scroll-linked background color, date-fns-tz for the clock and React Router for `/` and `/work/:slug`. Static only; the résumé is a PDF in `/public`.

### Pages & layout
1. Header: fixed, 60px, yellow with a 2px near-black bottom border. The short name in bold caps with 0.05em tracking on the left and "Email" and "Résumé" on the right. On case pages, add breadcrumbs (Home / Project).
2. Hero: a headline at clamp(48px, 8vw, 96px), weight 700, over two lines, with the ampersand in deep rose #7d1223. Below it, a 2-sentence paragraph in muted text.
3. Project and role sections, 5-7 of them. Left (45%): title at 60px, a type or role line, years, a 3-line description and "View Project ↗". Right: 1-3 image cards rotated -4 to 4 degrees and overlapping, with soft shadows.
4. Experience: a vertical timeline with small company icons (use generic shapes), role, years and a one-liner.
5. Education, About and Contact: email, social links, city and live time.
6. Case study: hero image, overview, role, skill tags, gallery and external link.

### Design system
- `--background: #f9c8b8` with a page gradient from #f28c9c at the top to #f9c8b8 to #ffd9a8 at the bottom. `--foreground: #1a1a1a`, `--primary: #ffd400`, `--secondary: #ec798c`, `--card: #ffcc33`, `--muted: #ebc2ad`, `--muted-foreground: #3f302d`, `--ampersand: #7d1223`. The scroll-linked hue shift stays within the tested stops (#f28c9c to #ffd9a8).
- Fonts: Space Grotesk 500/700 for display and Livvic 400/500 for body, from Google Fonts. Scale: 14 / 16 / 20 / 28 / 60 / 96px.
- Spacing: 8px base, 48px margins, 160px between sections. Radius 6px on cards.
- Shadow: `0 30px 60px -20px rgb(0 0 0 / 0.35)`.
- Motion: spring (stiffness 200, damping 18) for straightening on hover, 600ms fade-ups and scroll-linked hue shifts.

### Components & interactions
- ScatterCard: resting rotation comes from data. Hover or focus rotates to 0, scales to 1.03 and deepens the shadow. Show a skeleton while loading.
- ProjectSection: alternates the image cluster side on odd sections at tablet widths and stacks on mobile.
- ArrowLink: nudges on hover and has a visible focus ring.
- LiveClock: minute ticks with a fallback.
- Empty data: hide sections that have no entries.

### Data & state
`Project{slug, title, type, date, description, images: {src, alt, rotate}[], tags, links}`, `Role{company, title, years, description, icon}`, `Education` and `Profile`. Seed invented company and project names. Do not use real product logos in mockups; use generic app UIs.

### Accessibility
- #1a1a1a on the pink/peach gradient passes AAA (7.46:1 on the darkest pink). Muted descriptions use #3f302d (5.39:1 on the darkest pink, 4.59:1 on rose).
- Rotations are decorative. Hover effects must also run on focus, and under reduced motion render the cards unrotated and static.
- The header uses `<nav>`. The résumé link says "(PDF)".
- Verified contrast: body #1a1a1a on #f28c9c = 7.46:1; muted #3f302d on #f28c9c = 5.39:1; header #1a1a1a on #ffd400 = 12.16:1; ampersand #7d1223 on #f28c9c = 4.54:1.

### Security
- No forms. `mailto:` only.
- External case links use `rel="noopener noreferrer"`. No secrets.

### Performance & SEO
Lazy-load scattered images with `srcset`. Use a CSS gradient rather than images. Preload Space Grotesk 700. Add per-case meta and OG images.

### 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:
  - [ ] Scattered cards straighten on hover and focus, static under reduced-motion
  - [ ] Gradient background renders smoothly with passing text contrast
  - [ ] Header shows breadcrumbs on case pages
  - [ ] Live clock displays configured timezone
  - [ ] No real brand logos in any mockups

Open the builderAll templatesThis palette on its own