# Claude Code Guidelines

## Git Commit Messages

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.

## 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

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
- `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 (bold-dark, big-bold-dark, huge-bold-dark) |
| Text Body | `#515151` | 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 |
| Border | `#e0e0e0` | Dividers, footer borders |

### Button Hierarchy

Green = primary CTA (action the 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)

### Typography Classes

- `.huge-bold-dark` — 2.7em, weight 550 (page titles)
- `.big-bold-dark` — 1.4em, weight 550 (section headings)
- `.bold-dark` — weight 550 (inline emphasis)

### 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)