92 lines
4 KiB
Markdown
92 lines
4 KiB
Markdown
# Claude Code Guidelines
|
|
|
|
## Git
|
|
|
|
- No attribution lines ("Generated with Claude Code", "Co-Authored-By: Claude") in commits unless explicitly requested.
|
|
- Keep commit messages concise and descriptive of our actual changes.
|
|
- When ready, commit and push. Don't ask — just do it.
|
|
|
|
## General Guidelines
|
|
|
|
- Focus on implementing our requested changes accurately
|
|
- Respect that our user owns their codebase and all modifications to it
|
|
|
|
## Design System
|
|
|
|
Mobile-first static site. CSS Grid. Helvetica. Media queries at 800px (tablet/desktop) and 1200px (wide).
|
|
|
|
### Files
|
|
|
|
- `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
|
|
|
|
| Color | Hex | Usage |
|
|
|-------|-----|-------|
|
|
| Green CTA | `#a3c765` | Primary buttons (shop-new, source code, download, done, checkout), links, alert-success |
|
|
| Blue Secondary | `#98b6fa` | Secondary buttons (edit, preview, save, PyPi, blog), alert-info |
|
|
| Navy Brand | `#5871ad` | Ribbon gradient start, log-out/activate buttons, corner ribbon |
|
|
| Light Navy | `#82A8FF` | Ribbon gradient end |
|
|
| Purple | `#9B59B6` | Source/code buttons (PyPi, Source Code) |
|
|
| Purple Dark | `#7B2D8E` | Purple hover state |
|
|
| Danger Red | `#CC6958` | Delete button |
|
|
| Check Green | `#678731` | Checkmark list items |
|
|
| Cross Red | `#c77765` | Cross list items |
|
|
| 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, 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
|
|
|
|
Green = primary CTA (action our user should take). Blue = secondary (informational). Navy = account actions. Red = destructive.
|
|
|
|
- `.shop-new-button.mps-button` — green CTA
|
|
- `.product-edit-button.mps-button` — blue secondary
|
|
- `.source-button.mps-button` — purple (source code, open source links)
|
|
- `.log-out-button.mps-button` — navy
|
|
- `.cart-delete-button.mps-button` — danger red
|
|
- `.shop-switch-button.mps-button` — outline (border only)
|
|
|
|
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). **Caveat:** these selectors target `section.one-column` — they won't apply to `<div>` elements. If using `.one-column` on a div, add `margin: 0 auto` explicitly.
|
|
|
|
### 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-banner-featured`
|
|
- 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
|
|
|
|
## Style
|
|
|
|
- Never use "the" — use "our" instead.
|