Dogear Weekly

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

Montserrat stays for the ultra-black geometric cover lines, and Source Sans 3 is a quiet humanist body that reads well in the bento cards.

• MontserratHeadings: headlines 72px 900 at -0.05em
• Source Sans 3Body: body 16-18px gray

Who it is for

• Newsletter writers launching a list
• Creators and coaches
• Marketers growing email audiences
• Indie founders writing weekly updates

Layout

1. Header: heavy black wordmark left, Issues/Benefits/About links and black pill 'Subscribe' right
2. Bento hero inside a large rounded black-outlined frame: left cell with huge headline and subcopy; right top stat cell; right bottom photo cell with overlaid statement
3. Full-width subscribe strip with pill email input and peach-pink gradient button
4. Sample issues cards with drop caps / blockquotes
5. Benefits grid
6. Author bio with grayscale portrait and social circles
7. Black CTA band with second form
8. Footer inside the frame; separate thank-you route with share buttons

Palette

Bold, editorial, confident, warm, modern. A premium magazine cover crossed with a bento dashboard.

• background#f4f4f5
• text#000000
• primary black#000000
• accent peach#f9d4c8
• gradient pink#eda2c0
• card#f8f7f7
• border#e4e4e7
• muted text#52525b
• input border#8c8c99

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

Montserrat 900, 72px, -0.05em tracking, sentence case

Body

Source Sans 3 400 16–18px gray

Ultra-black geometric display against quiet Source Sans 3 creates poster-like punch

Spacing and imagery

1200px outer frame with 2px black border and 24px radius; internal cells divided by 2px black lines; pill inputs/buttons; roomy 60px cell padding

Candid lifestyle photo of creators working together with a dark gradient overlay and text; grayscale author portrait; no illustrations.

Components

• Bento frame grid
• Heavy display headline
• Stat cell
• Photo cell with overlay text
• Subscribe strip
• Gradient pill button
• Sample issue cards
• Drop cap and blockquote styles
• Benefits grid
• Author bio with socials
• Dark CTA band form
• Thank-you page with share buttons

Interactions

• Smooth scroll to sections
• Framer Motion reveal on scroll
• Email validation with loading and success states
• Redirect to thank-you
• Share buttons open prefilled share links
• Button gradient shift on hover

Data

• Subscriber{email, source(hero|footer), created_at, confirmed}
• Issue{title, excerpt, date, slug}
• Benefit{icon, title, text}
• Author{name, role, bio, portrait, socials[]}

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 **Dogear Weekly**, a one-page landing site for a weekly creator newsletter. It explains what readers get, shows sample issues, introduces the (fictional) author and converts with two signup forms, ending on a thank-you page that invites sharing. The job: turn a visitor into a subscriber in under a minute.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion for reveals; react-hook-form + zod for email forms; React Router for `/`, `/thank-you`, `/privacy`, `/terms`. Supabase: one `subscribers` table and an Edge Function that validates, rate-limits and inserts (or forward to a newsletter provider API from the function).

### Pages & layout
1. **Landing** – header with heavy wordmark, anchor links, black pill Subscribe. A single large rounded frame with a 2px black border holding a bento grid: hero cell (72px black headline, gray subcopy), stat cell ("read every Thursday", open-rate line), photo cell with a dark gradient and a white statement. A full-width subscribe strip (label, pill input, peach-to-pink gradient button). Then sample issues (3 cards with date, title, excerpt, drop-cap preview), a benefits grid (4–6 items), author bio (rounded grayscale portrait, bio, circular social buttons), a black CTA band with the second form and privacy note, footer -- all within the frame.
2. **Thank-you** – confirmation, "check your inbox", share buttons (prefilled text), back link.
3. **Privacy / Terms**.

### Design system
`--background: #f4f4f5`, `--foreground: #000000`, `--card: #f8f7f7`, `--muted-foreground: #52525b`, `--border: #e4e4e7` (decorative), `--input-border: #8c8c99`, `--frame: #000000`, gradient `linear-gradient(90deg, #f5bfae, #eda2c0)`. Fonts: Montserrat 800/900 (display, tracking -0.05em) + Source Sans 3 400/500. Scale 14/16/18/24/48/72 (body 16-18px/1.6, ~65ch). Radius: frame 24px, pills 999px, portrait 24px. Borders 2px black inside the grid. Motion: reveals 400ms ease-out; button hover shifts gradient position over 300ms.

### Components & interactions
Header, BentoFrame, HeroCell, StatCell, PhotoCell, SubscribeStrip & CtaForm (idle/validating/loading/success/duplicate/error), IssueCard with drop cap, Blockquote, BenefitItem, AuthorBio, SocialCircle, ShareButtons, Footer. Smooth-scroll anchors with offset for sticky header.

### Data & state
Static content objects for issues, benefits, author. `subscribers` table: email (unique, lowercased), source, created_at, confirmed. Use neutral placeholder numbers or omit counts rather than claiming a specific subscriber total.

### Accessibility
Gradient button carries black text (≥ 7:1 on peach/pink). White text on the photo sits on a `rgb(0 0 0 / .6)` scrim (≥ 5.7:1 even over white areas). Email inputs have visible or sr-only labels plus privacy text linked via `aria-describedby`; success/error announced in a live region. Headings in order (one h1). Reveal animations respect reduced motion. Social circles need accessible names. Verified contrast: body text #000000 on #f4f4f5 = 19.1:1; gray subcopy #52525b on #f4f4f5 = 7.0:1; black text #000000 on #eda2c0 = 10.5:1; white #ffffff on #000000 = 21.0:1; white statement #ffffff on #666666 = 5.7:1.

### Security
Validate email with zod client-side and again in the Edge Function; honeypot field; per-IP rate limit; double opt-in email with signed token. No provider API keys in the client. RLS: `subscribers` has no public select; inserts only through the function (service role). Share URLs encoded; external links `rel="noopener noreferrer"`.

### Performance & SEO
Single lightweight route; preload display font; optimize the photo (AVIF/WebP, sizes). Meta description, OG image, Twitter card. Lighthouse 95+ across the board.

### Guardrails
- Fictional author and placeholder photos; no real social proof numbers unless true.
- No fabricated reader testimonials.
- Store only the email and signup source.
- Typed small components, no `any`, visible errors.
- Done when: both forms subscribe with proper states, duplicates are handled gracefully, the thank-you page shares correctly, the bento grid collapses to one column on mobile without broken borders, and Lighthouse accessibility is 100.

Open the builderAll templatesThis palette on its own