Newsletter.Fast Style Guide

THEMES

Blueprint Theme (Landing, App)

Section Label

Card Title

Card content with muted text styling.

          
/* Blueprint Theme */
--bg: #e8dcc4;        /* Aged paper */
--text: #1a3a5c;      /* Navy */
--text-muted: #4a6a8c;
--text-faded: #8b775c;
--accent: #8b4513;    /* Brown */
--border: rgba(26, 58, 92, 0.25);
          
        

Dark Theme (Admin, Invite)

Active

Card Title

Card content with muted text.

          
/* Dark Theme */
--bg: #0a0a0a;
--bg-card: #111111;
--text: #e5e5e5;
--text-muted: #6b7280;
--accent: #10b981;     /* Green */
--accent-2: #f59e0b;   /* Orange */
--accent-3: #3b82f6;   /* Blue */
--error: #ef4444;
--border: #222222;
          
        

COLORS

Blueprint Palette

Paper

#e8dcc4

Background

Navy

#1a3a5c

Primary text, buttons

Slate

#4a6a8c

Muted text

Brown

#8b4513

Accent, highlights

Tan

#8b775c

Faded text

Dark Palette

Black

#0a0a0a

Background

Card

#111111

Cards, panels

Green

#10b981

Primary accent

Orange

#f59e0b

Warnings, schedule

Blue

#3b82f6

Info, links

Red

#ef4444

Errors, danger

Gray

#6b7280

Muted text

TYPOGRAPHY

Font

FONT FAMILY

JetBrains Mono

Monospace font used throughout. Clean, readable, technical.


font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

Scale

HERO (clamp 3-10rem)

Day 1,000

H1 (24-32px)

Page Title

H2 (18-20px)

Section Title

BODY (14px)

Regular body text for paragraphs and content.

SMALL (12-13px)

Small text, captions, metadata.

LABEL (10-11px uppercase)

Section Label

COMPONENTS

Buttons

BLUEPRINT THEME

DARK THEME

          
/* Button base */
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
padding: 10px 20px;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid;
          
        

Badges

STATUS BADGES

Active Scheduled Sent Failed

Inputs

BLUEPRINT THEME

DARK THEME

Cards

BLUEPRINT CARD

Card Title

Content inside the card.

DARK CARD

Card Title

Content inside the card.

Navigation

DARK NAV

SPACING

Scale

8px

16px

24px

32px

48px

64px

          
/* Spacing scale: 8px base */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
          
        

PATTERNS

Blueprint Grid

20px grid pattern overlay

          
background-image:
  linear-gradient(rgba(26, 58, 92, 0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(26, 58, 92, 0.03) 1px, transparent 1px);
background-size: 20px 20px;

Section Labels

Blueprint Label Dark Label

          
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 4px 10px;
border: 1px solid;
          
        

WORKFLOW

Vibe Coding with Claude Code

Product Manager + AI Engineer = Ship Fast

This entire product was built using "vibe coding" - a workflow where the human acts as Product Manager and Claude Code acts as Top Engineer.

The Roles

YOU: PRODUCT MANAGER

1. Define what to build (features, not implementation)
2. Prioritize ruthlessly (what ships TODAY?)
3. Test and validate (click around, find bugs)
4. Say "ship it" or "iterate"

CLAUDE CODE: TOP ENGINEER

1. Understand the codebase (reads files, greps patterns)
2. Implement features (writes code, creates files)
3. Deploy to production (wrangler, git push)
4. Document what shipped (HANDOFF.md, commits)

Example Session

PM "let's create an Invite page - short pitch, exact steps to sign up"

CLAUDE Creates /invite page with pitch, 5-step guide, FAQ, CTA button

PM "first, look at home page and dashboard - create a style guide"

CLAUDE Reads existing CSS, extracts design tokens, creates styles.newsletter.fast

PM "deploy it. document how we work together."

Key Principles

Ship Daily

Small features, deployed immediately. No PRs sitting in review.

Talk in Outcomes

"Users should be able to share their signup link" not "add a Share component with..."

Iterate Live

Deploy first, polish second. Real users find real bugs faster than speculation.

Context is King

HANDOFF.md keeps state between sessions. Claude reads the codebase, you guide the vision.

The Stack

FRONTEND

React + Vite

BACKEND

Hono + Cloudflare Workers

DATABASE

Cloudflare D1 (SQLite)

Resend + ImprovMX

Claude Code (Opus 4.5)

DEPLOY

Wrangler CLI

What Gets Built

In a single session (1-2 hours), typical output:

+ 3-5 new features deployed to production
+ Bug fixes discovered and resolved
+ Database migrations run
+ Git commits with clear messages
+ HANDOFF.md updated for next session