Noor Halvorsen

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

Sofia Sans Extra Condensed has true italics, which the hover state needs and Bebas Neue lacks, and Figtree is a friendly reading face.

• Sofia Sans Extra CondensedHeadings: poster index ~60-128px uppercase, italic on hover
• FigtreeBody: body 16px, nav 15px medium

Who it is for

• Freelance product designers
• Art directors and creative directors
• Design consultants seeking premium clients
• Designers documenting process in case studies

Layout

1. Header: circular smiley logo mark left, Projects / About / Playground links right with underline on active
2. Centered vertical list of huge condensed uppercase project titles filling the page; hovered item turns italic and vivid blue
3. Footer: '© name' left, a short location line right
4. Case study page: hero, metadata grid (role, year, client, team), challenge/solution sections, image gallery, external link, next project
5. About: bio, experience timeline, live timezone clock
6. Playground page for experiments

Palette

Playful, confident, typographic, minimal, warm. The home page reads like a bold poster index of work.

• background (off-white)#f6f5f4
• text#141414
• muted text (labels, captions)#635e59
• accent blue#1a3cff
• secondary#e8e6e3
• muted surface#dddad5
• decorative border#d9d9d9

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

Sofia Sans Extra Condensed uppercase, fluid ~60-128px, tight leading; hover state switches to italic/oblique in accent blue

Body

Figtree 16px, line-height 1.6; nav 15px medium

Condensed display for a poster-like index, neutral Figtree for reading

Spacing and imagery

Centered single column with zero gap between title lines; 48px header/footer insets; case studies on ~1100px container with generous section padding

Home has no images; case studies use large product UI images, mockups and process photos

Components

• Circular logo mark
• Minimal nav with active underline
• Oversized project title index
• Italic blue hover state
• Footer credit bar
• Case study hero
• Metadata grid
• Challenge/solution sections
• Image gallery/carousel
• Experience timeline
• Live timezone clock
• Playground grid

Interactions

• Hover/focus title turns italic blue
• Scroll reveal animations on case studies
• Route transitions between index and case study
• Live ticking clock for designer's timezone
• Carousel through case study images
• Drawer nav on mobile

Data

• CaseStudy{slug, title, role, year, client, team[], summary, challenge, solution, outcome, images[], externalUrl}
• Experience{company, role, start, end, description}
• PlaygroundItem{title, media, note}
• Profile{name, location, timezone, email, bio}

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 typographic portfolio for a fictional product designer called **Noor Halvorsen**. The audience is startup founders and agency leads hiring for product design or creative direction. The home page is an index of project names set as a huge centered stack; each opens a structured case study that walks through the brief, challenge, solution and outcome. An about page shows experience and the designer's local time for scheduling.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, React Router, Framer Motion for scroll reveals and route transitions, Embla for case-study galleries, Vaul for the mobile menu, date-fns-tz for the timezone clock, and react-helmet-async for per-page meta. No backend.

### Pages & layout
1. Header: a circular logo mark left; Projects, About and Playground right, with an underline on the active link.
2. Index: a centered vertical stack of 8–10 project titles in condensed uppercase, each a link filling most of the viewport width; the hovered or focused title turns italic and blue; the list scrolls naturally.
3. Footer: copyright name left, a location line right.
4. Case study: large title and hero image; a metadata grid (role, year, client, team, deliverables); Challenge, Approach, Solution and Outcome sections with key metrics; a gallery carousel; an external link; a next-project link that uses the same giant type.
5. About: portrait, bio, an experience timeline, and a live clock ("It's 3:42 pm in San Diego").
6. Playground: masonry of small experiments with captions.

### Design system
Tokens (HSL recommended): `--background: #f6f5f4; --foreground: #141414; --accent: #1a3cff; --secondary: #e8e6e3; --muted: #dddad5; --border: #d9d9d9 (decorative); --muted-foreground: #635e59`. Fonts: Sofia Sans Extra Condensed for display and Figtree 400/500 for body. Scale: clamp(3.75rem, 11vw, 8rem) index titles with 0.95 line-height; 48 / 28 / 18 / 16 / 14px (16–18px body at line-height 1.6, max 70ch; 14px only for weight-500 labels and captions in #635e59). Since Bebas has no italic, apply `transform: skewX(-10deg)` for the hover state. Spacing: 48px insets, 96px case-study section gaps. Radius 0 on images; 6px on buttons. Motion: 150ms color and skew; 500ms fade-up reveals; 300ms route crossfade. Light theme only.

### Components & interactions
- Index link: hover and focus apply blue and skew; `aria-current` on the project you arrived from.
- Metadata grid: definition list (`dl`) with labels and values.
- Gallery: arrows, dots, keyboard navigation, and captions; a lazy image with placeholder; an error fallback.
- Clock: updates every 30s; shows day or night status; handles missing timezone gracefully.
- Mobile: the index titles scale down; the menu opens in a drawer.
- Empty playground state and a 404 page in the same giant type.

### Data & state
`CaseStudy{slug,title,role,year,client,team[],deliverables[],summary,challenge,approach,solution,outcome,metrics[],images[],externalUrl?}`, `Experience{company,role,start,end?,text}`, `PlaygroundItem{title,media,note}`, `Profile{name,city,timezone,email}`. Everything is static and typed. Seed invented clients and projects.

### Accessibility
#1a3cff on #f6f5f4 is 6.2:1 and 5.4:1 on #e8e6e3, which passes; white on a #1a3cff button is 6.7:1; muted labels use #635e59. Sofia Sans Extra Condensed is used only at display sizes (60px+) with a condensed sans fallback. Never rely on the color or skew alone for focus; add a visible outline. The index is a `<nav aria-label="Projects">` list of links; large type must still reflow at 400% zoom without horizontal scroll. The clock is not a live region. Case-study images need meaningful alt text, and metrics must be real text. Reduced motion disables reveals and skew transitions. Verified contrast: body text on background: #141414 on #f6f5f4 = 16.92:1; muted labels on background: #635e59 on #f6f5f4 = 5.89:1; blue hover title / link on background: #1a3cff on #f6f5f4 = 6.15:1; white on blue button: #ffffff on #1a3cff = 6.7:1.

### Security
Static site: external project links use `rel="noopener noreferrer"`; `mailto:` for contact; no secrets or analytics keys in code beyond public IDs.

### Performance & SEO
The home page has no images, so it should hit 100 Lighthouse performance; preload Sofia Sans Extra Condensed with `font-display: swap`. Lazy-load case-study media and code-split case-study routes. Per-case-study title, description and OG image; Person JSON-LD. Pre-render routes if possible.

### Guardrails
- Use original case-study copy and placeholder mockups; no real client logos or famous names as project titles.
- Don't fabricate metrics presented as real results; label demo numbers.
- Collect no personal data.
- Keep components small and typed, never use `any`, and handle missing images visibly.
- Done when: every index title links to a case study that renders all sections; hover and focus states match; the clock shows the correct local time; titles reflow at 320px width; each route has unique meta.

Open the builderAll templatesThis palette on its own