Ines Calloway

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

Hubot Sans has a heavy black weight for the magazine-cover headline, and Heebo is a neutral, system-like body.

• Hubot SansHeadings: hero ~192px 900 uppercase, -9.6px, three stacked lines
• HeeboBody: body 16px at 1.6, 12px bold tracked buttons

Who it is for

• Musicians presenting catalogs and credits
• Producers with multi-format portfolios
• Managers pitching to labels and media
• Agencies building artist sites

Layout

1. Minimal header: tracked artist name left, white 'Register' pill right
2. Full-bleed vivid photo (radiating colored threads) behind a gigantic 3-line uppercase headline
3. Bottom row: subtitle in large caps left, spaced date and outlined 'Register' pill right
4. Discography grid (2-4 columns) with release type badges
5. Album/track list page with hover-to-play
6. Chart ranking page with positions and movement
7. Artist profile with stats (listeners, followers) and bio
8. Theme switcher for three identities

Palette

Loud, vibrant, editorial, energetic, modern. The hero feels like an exhibition poster.

• light theme background#faf6f0
• light theme text#1c1917
• light theme muted text#6b625a
• light theme primary orange#c3490a
• light theme input border#a58b65
• amber theme background#121212
• amber theme text#f5f5f5
• amber theme primary#f59e0b
• indigo theme background#0b1020
• indigo theme primary fill#6164f1
• indigo theme text accent#a5b4fc
• hero overlay (black 60%)#00000099

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

System sans black (900) uppercase at ~192px, -9.6px tracking, tight leading, 3 stacked lines (the system face is not on Google Fonts; a vibld project loads Hubot Sans)

Body

System UI sans 16px, line-height 1.6; buttons 12px bold tracked (the system face is not on Google Fonts; a vibld project loads Heebo)

Fluid clamp-based headlines give a magazine-cover scale; utility text stays neutral

Spacing and imagery

Hero 100vh with 48px insets; pill buttons; inner grids 2→4 columns with 16-24px gaps; 8px radius

Vivid full-bleed art photography (colored threads converging), album covers in grids, artist portraits

Components

• Minimal header with register pill
• Full-bleed poster hero
• Stacked giant headline
• Date + outlined CTA row
• Theme/identity switcher
• Discography grid with type badges
• Track list rows with hover play icon
• Chart ranking table with movement arrows
• Artist stats cards
• Bio block
• Drawer menu
• Toasts

Interactions

• Switch between three visual identities
• Hover reveals play icon on track rows
• Recharts sparkline/bar for listener stats
• Toast on actions (save, copy link)
• Drawer on mobile
• Fluid headline scaling
• Register CTA opens form

Data

• Artist{name, bio, monthlyListeners, followers, image}
• Release{title, type: album|EP|single, year, cover, tracks[]}
• Track{title, duration, plays, explicit}
• ChartEntry{position, lastPosition, track, weeks}
• Theme{name, tokens}

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 an artist portfolio for a fictional musician called **Ines Calloway** that can present itself in three visual identities: a dark amber "player" look, an indigo "charts" look, and a light warm "community" look. The audience is labels, media and fans. The site shows the full catalog, track lists, chart positions and listener stats, and opens with a bold poster-style announcement for the next event or release.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS with CSS-variable themes, shadcn/ui (Radix Tabs, Table, Dialog), lucide-react, React Router for nine pages, Recharts for listener and chart trend graphics, Embla for featured-release carousels, Vaul for the mobile drawer, and Sonner for toasts. No backend; a registration form for the event can post to a single function.

### Pages & layout
1. Announcement home: tracked name left and a white "Register" pill right; a full-bleed vivid art photo; a giant three-line uppercase headline; a bottom row with a large subtitle, spaced date and outlined Register pill.
2. Overview: featured release carousel, top tracks, stats cards.
3. Discography: responsive grid (2 → 4 columns) with type badges (Album, EP, Single).
4. Release: cover, metadata, and track list with hover-to-play icons and durations.
5. Charts: ranking table with position, change arrows and weeks on chart, plus a line chart.
6. Profile: bio, stats (listeners, followers, top cities), and a bar chart.
7. Videos, Tour, Contact.
A theme switcher (three swatches) in the header swaps identities.

### Design system
Base tokens (light warm): `--background: #faf6f0; --foreground: #1c1917; --primary: #c3490a; --border: #e7e0d6 (decorative); --muted-foreground: #6b625a; --input-border: #a58b65`. Dark amber muted text is #a3a3a3; indigo muted text is #9aa3c7. Dark amber: `--background: #121212; --foreground: #f5f5f5; --primary: #f59e0b; --card: #1e1e1e`. Indigo charts: `--background: #0b1020; --foreground: #eef2ff; --primary: #6164f1; --card: #151b33`. Fonts: Heebo 400/700/900 for everything; headlines use `clamp(56px, 14vw, 192px)` with -5% tracking and 0.85 line-height. Scale: 48 / 28 / 18 / 14 / 12px (16–18px body at line-height 1.6, max 70ch; 12px only for weight-700 button labels and badges). Radius 8px cards, pill buttons. Motion: 200ms hovers, 300ms theme crossfade. Each theme defines its own chart colors.
- Typeface: Hubot Sans (Google Fonts) for hero ~192px 900 uppercase, -9.6px, three stacked lines.

### Components & interactions
- Theme switcher: radio group with labels; persists in localStorage; no flash on load (set the class before hydration).
- Track row: hover or focus reveals the play icon; the playing row is highlighted; explicit badge; a copy-link action with toast.
- Charts table: sortable columns; up/down/new indicators with text, not only arrows.
- Stats: numbers animate once on view; charts have tooltips and an accessible table fallback.
- Register dialog: name and email with validation, loading, success and error states.
- Empty states for releases without tracks and charts without data.

### Data & state
`Artist{name,bio,listeners,followers,topCities[],image}`, `Release{slug,title,type,year,cover,tracks[]}`, `Track{title,duration,plays,explicit}`, `ChartEntry{pos,lastPos?,trackSlug,weeks}`, `ThemeName`. All typed static data; theme and now-playing live in context. Use invented numbers clearly labelled as demo.

### Accessibility
The hero headline, subtitle and date sit over a busy photo under a 60% black overlay, which holds white text at 5.7:1 even over the brightest threads. Verify each theme separately: in the light theme the primary is #c3490a so white button text passes; amber #f59e0b text on #121212 passes and amber buttons use #121212 text; indigo #6164f1 on #0b1020 is below 4.5:1 for small text, so use #a5b4fc for text and keep #6164f1 for fills with white labels. Charts need data tables or `aria-describedby` summaries. Theme swatches need names. Honor reduced motion for number counters. Verified contrast: light: white on primary button: #ffffff on #c3490a = 4.91:1; amber: dark text on amber button: #121212 on #f59e0b = 8.72:1; indigo: white on primary fill: #ffffff on #6164f1 = 4.56:1.

### Security
Validate the register form with zod on the client and in the function, add a honeypot and rate limit, and store only name and email if needed. Links to streaming services use `rel="noopener noreferrer"`. No secrets client-side.

### Performance & SEO
Lazy-load Recharts on the chart and profile routes only; code-split all routes; responsive covers. Per-release meta, OG images, MusicAlbum JSON-LD. Target a JS bundle under 200 KB gzip on the home route.

### Guardrails
- Don't copy any streaming service's logo, name or exact UI; the three identities should be inspired moods, not clones.
- Use invented stats labelled as demo and placeholder art only.
- Collect only registration fields you need.
- Keep components small and typed, never use `any`, and handle errors visibly.
- Done when: all three themes pass AA contrast on text; the theme persists without a flash; the charts table sorts by keyboard; each chart has a text alternative; the register form handles success and failure.

Open the builderAll templatesThis palette on its own