From b7356efd08ad7b9c22d16619a69f8deddeed0e78 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 6 Mar 2026 07:45:43 -0500 Subject: [PATCH] Update CLAUDE.md: add landing.css, push-when-ready policy, new design tokens --- CLAUDE.md | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 0dd9284..f358428 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,15 +1,14 @@ # Claude Code Guidelines -## Git Commit Messages +## Git -When creating git commits, it is inappropriate to claim credit or co-authorship for work that was requested by the user. The user is the author of their own code changes. - -Do not add attribution lines like "Generated with Claude Code" or "Co-Authored-By: Claude" to commit messages unless explicitly requested by the user. +- No attribution lines ("Generated with Claude Code", "Co-Authored-By: Claude") in commits unless explicitly requested. +- Keep commit messages concise and descriptive of the actual changes. +- When ready, commit and push. Don't ask — just do it. ## General Guidelines - Focus on implementing the requested changes accurately -- Keep commit messages concise and descriptive of the actual changes made - Respect that the user owns their codebase and all modifications to it ## Design System @@ -20,6 +19,7 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de - `common.css` — shared app styles (layout, buttons, nav, wells, footer, corner ribbon) - `mps.css` — message ribbon, alerts +- `landing.css` — landing page styles (hero, sections, pricing, cards, CTAs) - `styleguide.html` — live component reference ### Color Palette @@ -35,13 +35,15 @@ Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/de | Danger Red | `#CC6958` | Delete button | | Check Green | `#678731` | Checkmark list items | | Cross Red | `#c77765` | Cross list items | -| Text Dark | `#0b0b0b` | Headings (bold-dark, big-bold-dark, huge-bold-dark) | +| Text Dark | `#0b0b0b` | Headings | | Text Body | `#515151` | Body text | +| Text Desc | `#666` | Card descriptions, secondary body text | | Text Muted | `#777` | Footer links, taglines | -| Text Faint | `#999` | Footer bottom | -| BG Light | `#F9F9FA` | Page background, nav, wells, footer | -| White | `#FFFFFF` | Content sections, well-white | +| Text Faint | `#999` | Footer bottom, pricing periods, muted captions | +| BG Light | `#F9F9FA` | Alternating sections, nav, wells, footer | +| White | `#FFFFFF` | Content sections, cards | | Border | `#e0e0e0` | Dividers, footer borders | +| Border Light | `#eee` | Card borders on landing | ### Button Hierarchy @@ -54,16 +56,33 @@ Green = primary CTA (action the user should take). Blue = secondary (information - `.cart-delete-button.mps-button` — danger red - `.shop-switch-button.mps-button` — outline (border only) -### Typography Classes +Landing page CTAs add `.landing-cta` for pill shape (50px radius), shadow, hover lift. +### Typography + +**App pages** (common.css): - `.huge-bold-dark` — 2.7em, weight 550 (page titles) - `.big-bold-dark` — 1.4em, weight 550 (section headings) - `.bold-dark` — weight 550 (inline emphasis) +**Landing page** (landing.css): +- `.landing-hero-title` — 3.2em mobile, 4.5em desktop, weight 700 +- `.landing-section-title` — 2em, weight 700 +- `.landing-body` — 1.05em, line-height 1.7 + ### Components - **Message ribbon** — `.message-ribbon` gradient banner, hidden on mobile - **Wells** — `.well` (gray bg) and `.well.well-white` (white bg), rounded corners - **Alerts** — `.alert.alert-success`, `.alert.alert-info`, `.alert.alert-warning`, `.alert.alert-danger` - **Footer** — `.mps-footer` with grid (`.mps-footer-grid`), groups, CTAs, bottom bar -- **Layout** — `.one-column` (800px max), `.one-column-thin` (400px max) \ No newline at end of file +- **Layout** — `.one-column` (800px max), `.one-column-thin` (400px max) + +### Landing Page Patterns + +- Alternating `.landing-section` / `.landing-section-alt` for visual rhythm (no HR dividers) +- Cards: 12px radius, subtle box-shadow, hover lift +- Pricing: `.landing-pricing-card` with `.landing-pricing-featured` for highlighted plan + `.landing-pricing-badge` +- Protection lists: `.landing-list-bad` (tinted red) / `.landing-list-good` (tinted green) +- Step numbers: `.landing-step-number` green circles +- Final CTA: `.landing-final-cta` with subtle gradient background