Add corner ribbon, fix button CTA hierarchy, add style guide page

- Corner ribbon "Contribute Code" links to source repo (top-right, fixed)
- Source Code button now green CTA, PyPi stays blue secondary
- New styleguide.html with live component reference
- CLAUDE.md updated with design system documentation
- Style Guide link added to footer Resources

CLAUDE.md

@@ -10,4 +10,58 @@ Do not add attribution lines like "Generated with Claude Code" or "Co-Authored-B
 
 - 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
+- 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 |
+| 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
+- `.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
+
+- **Corner ribbon** — `.corner-ribbon` fixed top-right, navy, links to source repo
+- **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)