Tabline

Who it is for

• Product and brand designers
• Creative directors
• Freelance illustrators
• Design students building a first portfolio

Layout

1. Rotating circular text-logo badge in the top-left corner
2. Single column (~900px) of full-width accordion rows separated by 1px rules: intro, recent news, selected work, side projects, older work, recognition, admired work, contact
3. Each row expands to reveal content: text, project lists with thumbnails, links
4. Case-study pages: title, context, body copy and image gallery with a back link

Palette

minimal, editorial, confident, quiet, typographic. It feels like an index card or a well-set table of contents.

• background#f8f6f1
• text#171717
• accent red#d41111
• secondary surface#ebe7e0
• border/rules#171717

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

Display

Space Grotesk-style grotesk, regular weight, ~24px row titles in sentence case (Grotesk is not on Google Fonts; a vibld project loads Hanken Grotesk)

Body

Space Grotesk 16px, weight 400, line-height 1.65, 70ch measure

One grotesk family for everything; hierarchy comes from size and the plus/minus affordance rather than weight or color.

Spacing and imagery

Single narrow column with a left gutter of ~64px, 66px rows, hairline dividers, zero radius, lots of empty right-side space.

Almost none on the landing view; project thumbnails and case-study galleries only appear inside expanded sections. The red circular SVG logo is the only graphic.

Components

• Rotating circular SVG text logo
• Accordion list with plus/minus toggles
• Hairline row dividers
• News list items
• Project list rows with thumbnails
• Awards list
• Inspiration link list
• Contact links
• Case study page layout
• Image gallery
• Back link

Interactions

• Logo rotates continuously
• Accordion expand/collapse with height animation and plus rotating to minus
• Staggered fade-in of rows on load
• Row hover: text shifts or turns red
• Page transitions between index and case study
• Keyboard-operable accordion

Data

• Section{id, title, items}
• Project{slug, title, year, role, summary, cover, gallery[], context, body}
• NewsItem{date, text, link}
• Award{title, org, year}
• Inspiration{title, maker, url}

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 "Tabline", a minimal personal portfolio for a designer. The whole homepage is a single column of accordion rows, and each row hides one topic: intro, recent news, featured work, side projects, archive, recognition, work the designer admires, and contact. Recruiters and clients should scan the list in seconds and open only what interests them. Case studies get dedicated pages.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui Accordion (Radix) for accessible expand and collapse, lucide-react (Plus and Minus icons). Framer Motion for staggered row entrance and page transitions. React Router for `/work/:slug`. Content lives in local TS or MDX files. No backend.

### Pages & layout
1. **Home**: a small circular text badge in the top-left that reads the site name around a circle and rotates slowly. Below it, a single column about 900px wide, left-aligned with a 64px gutter, holding eight accordion rows separated by 1px dark rules. Row titles are playful sentence-case labels ("Designer ~ Title", "Lately", "Selected work", "Side projects", "Older work", "Recognition", "Work I envy", "Say hello"), each with a plus icon at the far right.
2. **Expanded content**: intro paragraph; dated news list; project rows (thumbnail, title, year, role, link to case study); awards list; outbound inspiration links; email and social links.
3. **Case study**: back link, title, role and year meta, a context paragraph, long-form body and an image gallery in one or two columns.

### Design system
Light theme only. Tokens: `--background: #f8f6f1` (warm paper), `--foreground: #171717`, `--accent: #d41111` (signal red), `--secondary: #ebe7e0`, `--border: #171717`, `--radius: 0`. Font: Space Grotesk for everything from Google Fonts, 400 and 500. Scale: row titles 24px, body 16px/1.65, meta 13px uppercase at 0.08em tracking. Spacing: 8px base, rows 64px tall, section padding 48px. No shadows. Motion: accordion height 300ms `ease-out`; row entrance stagger 60ms; logo rotation 20s linear infinite.

### Components & interactions
- Accordion row: default; hover (title turns red, plus nudges right 2px); focus-visible (2px red outline); open (plus rotates 45° to become a cross, content fades in).
- Allow multiple rows open; remember open rows in the URL hash so links can be shared.
- Project row: thumbnail 64px square, hover shows a larger floating preview image next to the cursor on desktop only.
- Case study: gallery images get lightbox Dialog; empty-gallery fallback text.
- Rotating badge: pauses on hover.

### Data & state
`Section{id, title, kind}`; `Project{slug, title, year, role, summary, cover, context, body, gallery: {src, alt}[]}`; `News{date, text, href?}`; `Award{title, org, year}`; `Inspiration{title, maker, href}`. State: accordion open values (synced to hash). Seed 4 featured and 6 archived fictional projects with neutral placeholder imagery.

### Accessibility
The `#171717` on `#f8f6f1` pair passes AAA. Red `#d41111` on paper is 5.0:1, which is fine for text and focus rings; do not set red text on the `#ebe7e0` secondary surface (4.38:1), use `#171717` there. Use real button triggers with `aria-expanded` and `aria-controls`, which Radix provides. The rotating logo should be decorative (`aria-hidden`) and paired with a visually hidden site name in an H1, because the visible headings are all row titles. Stop rotation and staggering under `prefers-reduced-motion`. Keep heading order sensible: H1 for the site, H2 for row titles. Case study images need descriptive alt text. Verified contrast: body #171717 on #f8f6f1 = 16.6:1; red hover #d41111 on #f8f6f1 = 5.0:1; body on secondary #171717 on #ebe7e0 = 14.55:1.

### Security
It's a static site, so keep security proportionate. Use `mailto:` links rather than a form, or if you add a form, validate it with zod and protect it with a honeypot. Outbound links use `rel="noopener noreferrer"`. If case-study bodies are MDX or markdown from a CMS, sanitize the rendered HTML with DOMPurify.

### Performance & SEO
Keep the homepage tiny with no images until a row opens, then lazy-load thumbnails. Code-split case-study routes. Each case study gets its own title, description and OG image. Inline the SVG badge. Target Lighthouse 100 for performance and accessibility.

### Guardrails
- Use original copy and placeholder imagery only, with no real client logos or trademarks.
- Do not fabricate awards or testimonials presented as real.
- Do not collect visitor data you do not need.
- Keep components small and typed, with no `any`, and show visible fallbacks for missing images.
- Done when: all rows toggle by mouse and keyboard; hash deep-links reopen rows; case studies route and render galleries; reduced motion halts the badge; the layout holds from 360px to 1440px.

Open the builderAll templatesThis palette on its own