Brieflane

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

Sora keeps the geometric display voice; Albert Sans is a clean, slightly humanist body that stays readable in light gray on black.

• SoraHeadings: hero ~64px 700; eyebrows 600 uppercase, 0.28em
• Albert SansBody: body 17px, light gray on black

Who it is for

• Marketing managers juggling multi-channel campaigns
• Demand-gen leads tracking MQL/SQO pacing
• Agencies running repeatable client launches
• Small startup teams without a marketing stack

Layout

1. Minimal top bar: logo mark + wordmark left, outlined pill 'Sign in' right
2. Centered hero: letter-spaced uppercase eyebrow, huge bold product title, 3-line subcopy, filled periwinkle pill CTA + ghost pill secondary
3. 'What's inside' eyebrow followed by a 5-up row of tall rounded dark cards, each with a tinted circular icon, title and one-line description
4. Hairline divider and centered copyright footer with a faint radial glow
5. Behind auth: sidebar app with Campaigns list, Campaign workspace (brief/timeline/budget/checklist/results tabs), UTM builder + All UTMs table, Name generator, Calendar month view, Funnel dashboard, Leads table, Requests inbox, Settings (stages, taxonomy, team)

Palette

Dark, sleek, quiet, premium, focused. It feels like a night-mode SaaS console where color is reserved for small glowing icon chips and one bright call to action.

• background#000103
• card surface#04080d
• muted surface#171b22
• text#f2f6f8
• secondary text / eyebrow#a5abb5
• primary (periwinkle)#8394ff
• secondary accent (pink)#ff85db

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Sora 700, ~64px hero with tight negative tracking (-1.6px); section eyebrows Sora 600 12-13px uppercase with very wide 0.28em tracking

Body

Albert Sans 400 at 17px, light gray on black

Geometric display face paired with a humanist-geometric body sans; hierarchy comes from size contrast and spaced-out micro-labels rather than color. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Airy, centered single-column hero (~620px text measure) inside a ~1160px container; 5-column card grid with 16-20px gaps; large 16px+ radius on cards and fully rounded pill buttons; generous 120px+ vertical rhythm.

No photography. Only small line icons (lucide-style) sitting in dark tinted circles (green, indigo, amber, teal, red) and a subtle radial gradient glow at the page bottom.

Components

• Pill navbar button
• Hero eyebrow label
• Primary pill CTA with arrow
• Feature cards with tinted icon chips
• Campaign workspace tabs
• Numbered launch checklist
• UTM builder form with validated dropdowns
• All UTMs searchable table with copy action
• Campaign name generator
• Animated funnel chart with conversion chips
• Target pacing bars
• Leads table with inline stage select
• Month calendar with channel filters
• Public request intake form

Interactions

• Hover lift and border brighten on feature cards
• Copy-to-clipboard toast for UTM links
• Inline stage change in leads table with optimistic update
• Funnel bars animate in and highlight the biggest drop
• Drag to reorder checklist items and campaign stages
• Calendar channel filter toggles
• Accept / decline / promote actions on requests with confirmation
• Period filter switching on dashboards

Data

• Team{id, name}
• Membership{team_id, user_id, role: owner|editor|viewer}
• Campaign{id, team_id, name, owner_id, stage_id, channel, budget, start, end, brief}
• ChecklistItem{campaign_id, position, label, done}
• Stage{team_id, name, color, position}
• TaxonomyValue{team_id, kind: channel|source|medium|format, value}
• UtmLink{campaign_id, url, source, medium, campaign, content, term, created_by}
• Lead{team_id, name, email, company, stage, campaign_id}
• FunnelTarget{team_id, month, mql_target, sqo_target, campaign_id?}
• CampaignRequest{team_id, requester_name, email, summary, due_date, status}

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 color 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, labeled 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 **Brieflane**, a campaign operations workspace for small marketing teams and agencies. Each campaign gets its own hub (brief, dates, budget, owner, ordered launch checklist, results), tracking links are generated from a team-controlled naming taxonomy so reports stay clean, and a funnel dashboard shows how leads convert stage to stage against monthly MQL and SQO targets. Colleagues outside marketing can submit campaign requests through a public form.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Add TanStack Query (server state), react-hook-form + zod (UTM builder, request form), date-fns (calendar), Recharts (funnel, pacing), Framer Motion (funnel entrance) and dnd-kit (reordering checklists and stages). Use Supabase for Postgres, Auth (email + magic link), and an Edge Function that accepts public request submissions.

### Pages & layout
1. **Landing**: slim top bar; centered hero with spaced uppercase eyebrow, oversized product name, subcopy, filled + ghost pill CTAs; a row of five tall dark feature cards with colored icon chips; minimal footer.
2. **Auth**: sign up creates a team seeded with sample, clearly labeled demo data.
3. **App shell**: left sidebar for each module and a team switcher.
4. **Campaign workspace**: header with stage badge and owner; tabs for Brief, Checklist, Budget, Links, Results.
5. **UTM builder**: dropdowns fed by taxonomy, live URL preview, save as template; **All UTMs** table with search and copy.
6. **Funnel**: animated horizontal funnel, conversion chips between stages, biggest-drop callout, target pacing bars, period filter.
7. **Leads**: sortable table, stage filter, inline stage select, detail drawer; CSV import with dedupe preview.
8. **Calendar**: month grid of launches, sends and request due dates, filterable by channel.
9. **Settings**: stages (rename, recolor, reorder), taxonomy values, members and roles.

### Design system
Dark-first. Tokens: `--background: #000103`, `--card: #05080e`, `--muted: #171b22`, `--foreground: #f2f6f8`, `--muted-foreground: #a5abb5`, `--primary: #8394ff` (text on it `#060815`), `--secondary: #ff85db`, `--accent: #dca8ff`, `--border: rgb(255 255 255 / 0.06)`. Fonts: Sora (700 display, 600 uppercase eyebrows with 0.28em tracking) and Albert Sans (400/500 body at 16-17px). Type scale 12/14/16/20/28/40/64. Spacing on a 4px base; sections 96-128px apart. Radius 16px for cards, full pills for buttons. Prefer 1px translucent borders over shadows. Motion 150ms ease-out for hover, 400ms spring for funnel bars. Add `--input-border: #5b6270` for form fields and checkbox outlines (the 6% border is decorative only).

### Components & interactions
Buttons (primary pill, ghost pill, icon) with hover brighten, visible focus ring in primary at 55% alpha, disabled at 40% opacity, and spinner loading state. Checklist rows are draggable with a handle and keyboard reordering. UTM builder shows inline validation and disables Save until valid. Tables show skeletons, an empty state with a create CTA, and an error banner with retry. Copy actions toast.

### Data & state
Entities: Team, Membership(role), Campaign, ChecklistItem(position), Stage, TaxonomyValue, UtmLink, Lead, FunnelTarget, CampaignRequest. Server state lives in Supabase via TanStack Query; UI filters sit in URL search params. Seed one sample campaign, six stages, a starter taxonomy and ~40 fictional leads, all marked `is_sample`.

### Accessibility
Check that light gray body text (#a5abb5) on near-black passes 4.5:1 and that dark text is used on the periwinkle button. dnd-kit must use its keyboard sensor with announcements. Give the funnel chart a visually hidden table of stage counts and rates. Respect `prefers-reduced-motion` by skipping funnel animation. Label every form field. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #f2f6f8 on #000103 = 19.2:1; body text #f2f6f8 on #05080e = 18.44:1; secondary text / eyebrow #a5abb5 on #000103 = 9.04:1; secondary text #a5abb5 on #171b22 = 7.48:1.

### Security
Enable RLS on every table: rows are readable only by members of the owning team; writes require editor or owner role; role changes are owner-only. The public request form posts to an Edge Function that validates with zod, applies a honeypot field and per-IP rate limit, then inserts using a service key kept in function env. Validate UTM values against taxonomy on client and in a Postgres check or trigger. Encode URL parameters, never build links via string concatenation of raw input. Cap CSV imports at 5 MB.

### Performance & SEO
Code-split charts and calendar; paginate leads server-side. Landing gets title, meta description and OG image; app routes are `noindex`. Target Lighthouse 90+.

### Guardrails
- Use original copy and generic icons only; no third-party logos or trademarked names.
- Sample data must be fictional and labeled as sample; no fake testimonials.
- Keep components small and typed; no `any`; surface errors visibly.
- Done when: a new user signs up and sees a seeded team; a UTM link can be generated, validated and copied; leads can change stage inline and the funnel updates; a public request can be submitted and promoted into a campaign; a viewer role cannot edit anything.

Open the builderAll templatesThis palette on its own