Birchline

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

Winky Sans is an expressive, cheeky grotesk that can carry the whole brand at 72px beside the cartoon, with Reddit Sans as the quieter body the design allows.

• Winky SansHeadings: hero 72px 700 at -0.05em, H2 48px at -0.025em, feature titles 18px 700
• Winky SansBody: body 16-18px/1.6 400
• Reddit SansBody: the quieter body alternative, 16-18px 400

Patterns

• split hero: heavy grotesk headline left, playful line illustration right
• black solid + outlined square-ish CTA pair
• six-item icon feature grid with black circular icon badges
• monochrome tech-logo strip
• full-width black rounded CTA banner
• nav dropdown and NEW badge pill
• single-line copyright footer

States it is designed for

• Contact form: validation, sending, success, error
• Blog: empty category, pagination end
• Pricing: monthly/annual toggle with savings label
• Dropdown: closed, open, keyboard-highlighted item
• Illustration failed to load: layout keeps its space with no broken icon

Who it is for

• startup founders launching a first site
• developers who want a fast static marketing site
• small studios shipping client landing pages

Layout

1. Header: two-tone wordmark (bold + light halves) left; centre links (Features dropdown, Pricing, About, Blog, Contact, a link with an indigo NEW pill); 'Log in' text button and black 'Sign up' button right; hamburger on mobile
2. Hero: two columns; left 64-72px heavy headline on two lines, 18px slate paragraph, black 'Get the starter' button with icon and outlined 'View source' button; right a large black-outline illustration with a single pink and yellow accent
3. Features: 48px heading, one-line intro, 3x2 grid of items each with a small black circle icon, bold title and 3-line slate description
4. Tech strip: small centred caption and a row of six monochrome glyph logos (use generic tool glyphs)
5. CTA banner: black rounded (8px) container inside the page width, 48px white headline, slate-light subline, white button
6. Footer: one centred line of muted copyright text
7. Mobile: hero illustration hidden or moved below text; buttons full width and stacked; features single column

Palette

Bold, cheeky and confident. Black-and-white UI with one cartoon moment makes it approachable without losing seriousness.

• page background#ffffff
• ink (headings, buttons, CTA banner)#000000
• body slate#45556c
• muted slate (captions, footer)#62748e
• slate-light on black#90a1b9
• soft button fill#f3f4f6
• NEW pill indigo#4f39f6
• illustration pink accent (decorative)#f9a8d4
• illustration yellow accent (decorative)#facc15

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

Winky Sans 700, 72px/1.0 hero with -0.05em tracking; 48px h2 with -0.025em; 18px 700 feature titles

Body

Winky Sans 400 (or Reddit Sans as a quieter body) 16-18px/1.6

One expressive grotesk carries the whole brand. Keep headings tight and heavy; body relaxed. No uppercase except the tiny NEW pill (with 0.05em tracking).

Spacing and imagery

Medium density; container 1200px; section spacing 96px; feature grid gap 40px x 32px. Radius 4px buttons, 8px CTA banner. No shadows.

One thick-outline cartoon illustration (a character with a small rocket, or any playful mascot) with two flat accent colours; tech logos as monochrome glyphs.

Components

• SiteHeader with dropdown and badge
• TwoToneWordmark
• SplitHero
• IconButton (solid, outline)
• HeroIllustration
• FeatureItem with circular icon badge
• LogoStrip
• CTABanner
• PricingTable
• BlogList and BlogPost
• ContactForm
• MinimalFooter

Interactions

• Features dropdown opens on click and keyboard, closes on Escape and outside click
• Buttons: solid darkens to #1f2937 on hover; outline gains a soft grey fill
• Illustration may float 4px up and down slowly; disabled under reduced motion
• Mobile menu toggles with animated icon and traps focus

Data

• Feature{icon, title, body}
• Plan{name, price, period, features[], cta, highlighted}
• Post{slug, title, excerpt, author, date, category, cover, body}
• NavItem{label, href, children[]?, badge?}

Guardrails

Experience

• Keep the hero to a two-line headline and three-line paragraph
• Only one black CTA per viewport besides the header button
• Feature descriptions max three lines; titles max four words
• The CTA banner repeats the primary action, never introduces a new one
• Use a single illustration style throughout; no mixing with stock photos

Accessibility

• Body slate #45556c gives 7.58:1; muted slate #62748e (4.76:1) is only for captions and footer
• Dropdown menu follows the disclosure pattern with aria-expanded
• Illustration has empty alt (decorative); logo strip has a text list of supported tools for screen readers
• NEW pill text white on indigo (6.46:1) and at least 12px with 0.05em tracking
• Visible 2px black focus ring with white offset on buttons (and white ring on the black banner)

Security

• Contact form handled by a serverless function with zod validation, honeypot and rate limiting
• No secrets in the static bundle; form provider keys server-side only
• External links use rel="noopener"
• Auth pages (if enabled) redirect to a hosted auth provider rather than handling passwords

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Birchline**, a bold static marketing site and blog starter for young startups. It pairs a heavy grotesk typeface, strict black-and-white UI and one playful outline illustration so the site feels confident and friendly. Pages: home, pricing, about, blog (index and post), contact, plus simple sign-in and sign-up placeholders.

### Stack
Astro + TypeScript, Tailwind CSS, lucide icons, zod for the contact form, markdown content collections for the blog. Zero client JS by default; islands only for the mobile menu, features dropdown and pricing toggle. The contact form posts to a serverless function that relays to a transactional email service.

### Pages & layout
1. **Home**:
   - Header: a two-tone wordmark (bold first half, regular second half); centre links Features (dropdown), Pricing, About, Blog, Contact and a link with an indigo NEW pill; text "Log in" on a soft grey fill and a black "Sign up".
   - Split hero: a 72px heavy headline on two lines ("Launch pages that load instantly"), an 18px slate paragraph, a black "Get the starter" button with a download icon and an outlined "View source" button. On the right, a large thick-outline cartoon illustration with pink and yellow accents (commission or draw your own).
   - Features: 48px heading, one-line intro and a 3x2 grid; each item has a black circular icon badge, a bold title and a three-line description.
   - Tech strip: a small caption and six monochrome glyphs for generic tools.
   - CTA banner: a black 8px-radius block with a 48px white headline, a light slate subline and a white button.
   - Footer: one centred muted copyright line.
2. **Pricing**: three plans, monthly/annual toggle, FAQ list.
3. **About**: mission paragraph and a team grid with illustrated avatars.
4. **Blog**: card list with category filter; post page with a 720px prose column.
5. **Contact**: form plus address block.
6. **Responsive**: under 768px, hamburger menu; hero stacks text-first and moves the illustration below at 70% width; buttons go full width.

### Design system
- Colors: `--bg: #ffffff`, `--ink: #000000`, `--body: #45556c`, `--muted: #62748e`, `--on-ink-muted: #90a1b9`, `--soft: #f3f4f6`, `--badge: #4f39f6`, illustration-only accents `--ill-pink: #f9a8d4` and `--ill-yellow: #facc15`.
- Fonts: Winky Sans 700 for display (72px/1.0 at -0.05em; h2 48px at -0.025em; titles 18px); body Winky Sans 400 or Reddit Sans 400 at 16-18px/1.6.
- Spacing: 8px grid; 96px section spacing; container 1200px.
- Radius: 4px buttons and inputs; 8px banner and cards; pills 999px.
- Shadows: none.
- Motion: 150ms hover; optional 6s float on the illustration; none under reduced motion.

### Components & interactions
SiteHeader, TwoToneWordmark, NavDropdown (disclosure with `aria-expanded`, Escape closes), SplitHero, IconButton (solid | outline), HeroIllustration, FeatureItem, LogoStrip, CTABanner, PricingTable with BillingToggle, BlogCard, ProsePost, ContactForm, MinimalFooter. The solid button hovers to `#1f2937`; the outline button gains a `--soft` fill.

### Data & state
Typed arrays for features, plans and navigation; blog posts as markdown with `{title, excerpt, author, date, category, cover}`. Seed four invented posts. The pricing toggle writes `?billing=`. The contact payload is `{name, email, message}`.

### Accessibility
One h1; the heading order runs h2 for sections and h3 for features. The illustration is decorative (`alt=""`). The logo strip includes a visually hidden list of tool names by role. The dropdown and mobile menu are keyboard operable with focus management. Focus rings are 2px black with a 2px white offset (inverted on the black banner). Captions in `--muted` stay at 14px or larger.
Verified contrast: heading ink on white: #000000 on #ffffff = 21.0:1; body slate on white: #45556c on #ffffff = 7.58:1; muted slate on white: #62748e on #ffffff = 4.76:1; subline on black banner: #90a1b9 on #000000 = 7.98:1; NEW pill label: #ffffff on #4f39f6 = 6.46:1; log-in button text on soft fill: #000000 on #f3f4f6 = 19.08:1; outline button border on white: #000000 on #ffffff = 21.0:1.

### Security
The contact function validates with zod, trims to length limits, strips HTML, checks a honeypot and rate-limits by IP. Provider keys live only in server env. External links use `rel="noopener"`. Auth placeholders link to a hosted auth flow; no password fields are stored locally.

### Performance & SEO
Fully static; inline the illustration as optimised SVG (under 30 KB). Self-host Winky Sans with only the needed weights. Sitemap, RSS, canonical URLs, per-page meta and an original OG image. Lighthouse 100 target.

### Guardrails
- Draw an original mascot or illustration; do not trace existing characters.
- Write original headlines; no framework marketing slogans.
- Tech glyphs must be generic and monochrome, and must not imply endorsement.
- Acceptance criteria:
  - [ ] Home, pricing, about, blog, post and contact pages build statically
  - [ ] Dropdown and mobile menu work by keyboard alone
  - [ ] Contact form handles success and error without reload
  - [ ] No text pair below AA; muted slate never used under 14px
  - [ ] Illustration hidden gracefully at narrow widths without layout shift

Open the builderAll templatesThis palette on its own