@codeyam/codeyam-cli 0.1.0-staging.4c0c3c9 → 0.1.0-staging.5370992

package/codeyam-cli/templates/design-systems/editorial-design-system.md

@@ -0,0 +1,267 @@
+# Editorial Design System
+
+> Serif-first, warm, print-inspired UI. Parchment tones, sharp corners, typography-driven hierarchy. For any web or mobile app.
+
+## Philosophy
+
+Draws from quality print publications and luxury brand identities. Typography, spacing, and weight do the work that color and shape do in other systems. Warmth without softness. Restraint with intention — minimal color means color carries meaning when it appears.
+
+**Rules:**
+
+1. Cards use borders only — never box-shadows
+2. Nearly square-cornered everywhere (max 4px radius, no pills)
+3. Background is always warm parchment — never white, never grey
+4. Accent colors (burgundy, sage, gold) appear only as text, borders, or thin fills — never large background fills
+5. Font-weight never exceeds 500 — heaviness destroys the elegance
+
+---
+
+## Colors
+
+### Light Mode (only mode — no dark mode)
+
+```css
+:root {
+  /* Surfaces — lightest to darkest warm neutral */
+  --bg-base: #f4efe4; /* parchment page bg */
+  --bg-surface: #ede5d6; /* cards, sidebar, topbar */
+  --bg-muted: #e0d5c0; /* hover states, inset areas */
+
+  /* Text */
+  --text-primary: #1c1409; /* headings, active states (warm near-black, not #000) */
+  --text-secondary: #5a4f3f; /* body text, secondary content */
+  --text-muted: #8a7d6b; /* labels, metadata, placeholders */
+
+  /* Border */
+  --border: #c9bbaa; /* all borders and dividers */
+
+  /* Shadows — intentionally none. Borders and background contrast do all separation. */
+  --shadow-sm: none;
+  --shadow-md: none;
+}
+```
+
+Hover states shift surfaces one step darker: base → surface → muted.
+
+### Accents
+
+```css
+/* Use sparingly — as text, borders, or thin fills only */
+--burgundy: #7a1e1e; /* critical, error, accent highlight */
+--burgundy-lt: #c84b4b; /* burgundy hover */
+--sage: #3e5145; /* success, active, positive */
+--gold: #b08830; /* warning, in-progress, special */
+```
+
+### Semantic
+
+```css
+/* Outlined badges at 6% opacity tint, never solid fills */
+--success-border: var(--sage);
+--success-text: var(--sage);
+--danger-border: var(--burgundy);
+--danger-text: var(--burgundy);
+--warning-border: var(--gold);
+--warning-text: var(--gold);
+```
+
+### Ordered Palette
+
+```css
+/* For any categorical sequence: tags, categories, avatars, etc. */
+--palette-1: #1c1409; /* ink */
+--palette-2: #7a1e1e; /* burgundy */
+--palette-3: #3e5145; /* sage */
+--palette-4: #b08830; /* gold */
+--palette-5: #5a4f3f; /* secondary */
+```
+
+---
+
+## Typography
+
+**Font stack:** `'Cormorant Garamond', Georgia, serif` (display/UI), `'EB Garamond', Georgia, serif` (body prose only)
+
+| Style          | Size    | Weight | Notes                                                                         |
+| -------------- | ------- | ------ | ----------------------------------------------------------------------------- |
+| Display        | 44–52px | 300    | `letter-spacing: -0.02em; line-height: 1`. Italic `em` for editorial emphasis |
+| Headline       | 28–36px | 400    | Italic. Section headers                                                       |
+| Subhead        | 18–22px | 500    | `letter-spacing: 0.01em`. Card titles                                         |
+| Label / Kicker | 9–11px  | 400    | `uppercase; letter-spacing: 0.22–0.28em; color: --text-muted`                 |
+| Body           | 15–16px | 400    | EB Garamond. `line-height: 1.6`                                               |
+| Body Italic    | 14–15px | 400    | EB Garamond italic. Metadata, timestamps, captions                            |
+| UI Small       | 11–13px | 400    | `letter-spacing: 0.12–0.18em`. Buttons, badges, tags                          |
+| Large Value    | 32–44px | 300    | `letter-spacing: -0.02em`. Emphasized numbers                                 |
+
+**Key distinctions:**
+
+- Display font (Cormorant Garamond) for ALL UI chrome: nav, labels, buttons, badges, numbers
+- Body font (EB Garamond) ONLY for prose text and descriptions
+- Labels and categories are ALWAYS uppercase with generous letter-spacing (0.2em+)
+- Italic signals metadata, dates, captions — use it meaningfully, not decoratively
+- Prefer Unicode symbols (✦ ◈ ◇ ▷) over icon libraries — they fit the editorial aesthetic
+
+---
+
+## Spacing & Radius
+
+Base unit: 4px. Scale: 4, 8, 16, 24, 40, 64px.
+
+| Context      | Value                            |
+| ------------ | -------------------------------- |
+| Card padding | `24px` (header/body/footer each) |
+| Grid gap     | 40px                             |
+| Section gap  | 40px                             |
+
+```css
+--radius-sm: 2px; /* inputs, small chips — use sparingly */
+--radius-md: 4px; /* maximum radius in the system */
+/* No large radius. No pills. Buttons are square-cornered (0px). */
+```
+
+---
+
+## Layout
+
+### Common Patterns
+
+- **Sidebar:** 220px fixed, `--bg-surface`, right border `--border`
+- **Top bar:** Sticky, `--bg-surface`, bottom border. Title (uppercase, letter-spaced) + date (italic) + avatar
+- **Bottom nav (mobile):** Use dot + label pattern from sidebar nav items
+- **Main content:** flex-1, `--bg-base`, padding 40px
+- **Reading column:** `max-width: 68ch` for optimal EB Garamond readability
+
+### Navigation States
+
+- Section labels: 9px, uppercase, `letter-spacing: 0.22em`, `--text-muted`
+- Nav items: 14px body font, `--text-secondary`. Hover → `--bg-muted` bg. Active → `--text-primary` bg + `--bg-base` text
+- Active dot indicator: 5px circle in `--gold`
+
+### Mobile / Small Viewport
+
+- Sidebar collapses to bottom tab bar (dot + label)
+- Cards stack single-column, full width
+- Display type reduces to 28px, value type to 28px
+- Grid columns collapse to 1
+
+---
+
+## Components
+
+### Card
+
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+.card-header {
+  padding: 24px 24px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.card-body {
+  padding: 24px;
+  flex: 1;
+}
+.card-footer {
+  padding: 16px 24px;
+  border-top: 1px solid var(--border);
+}
+```
+
+**Variants:** none — cards are always `--bg-surface` with `--border`. No shadows ever.
+
+**Interactive states:** hover is color/background only — never move or transform elements.
+
+### Value Card
+
+Card with: label (Label style, uppercase), emphasized value (Large Value style, weight 300), optional trend text (Body Italic, `--sage` for up, `--burgundy` for down). For stat rows: use a grid with 1px `--border` gap background to create ruled-line separation.
+
+### Button
+
+```css
+.btn {
+  font-family: var(--font-display);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  padding: 9px 20px;
+  border-radius: 0;
+  transition: all 0.15s ease;
+}
+```
+
+| Variant   | Background       | Text             | Border                    |
+| --------- | ---------------- | ---------------- | ------------------------- |
+| Primary   | `--text-primary` | `--bg-base`      | none                      |
+| Secondary | transparent      | `--text-primary` | `1px solid var(--border)` |
+| Ghost     | transparent      | `--text-muted`   | none                      |
+
+Primary: only one per view. Ghost: for inline navigation actions ("View Detail →"). No icons unless text alone is insufficient.
+
+### Badge
+
+`padding: 2px 10px; font-size: 9px; letter-spacing: 0.18em; uppercase; border: 1px solid`. Always outlined — background tint is 6% opacity of accent color, never solid fill. Variants: default (`--border`/`--text-muted`), active (`--sage`), warning (`--gold`), critical (`--burgundy`).
+
+### Input
+
+Underline-style — bottom border is the primary affordance. `border: 1px solid var(--border); border-bottom: 2px solid var(--text-secondary); background: var(--bg-base); font-family: var(--font-body); font-size: 15px`. Focus: `border-bottom-color: var(--text-primary)`. Placeholder: italic, `--border` color. Labels: always present, uppercase display font.
+
+### Table
+
+Header row: `border-bottom: 2px solid var(--text-primary)`. Header cells: 9px uppercase label style, weight 400. Data cells: 14px body font, `--text-secondary`. Hover → `--bg-muted`. Primary column and numbers: `--text-primary`, weight 500.
+
+### Tag / Chip
+
+`font-size: 11px; letter-spacing: 0.1em; padding: 4px 12px; border: 1px solid var(--border); background: transparent`. Selected/hover → `--text-primary` bg + `--bg-base` text.
+
+### Progress Bar
+
+Track: 3px height, `--bg-muted`, no rounded ends. Fill: `--text-primary` (default), or accent color. Animate: `width 0.8s cubic-bezier(0.4, 0, 0.2, 1)`.
+
+### Tooltip
+
+`background: --text-primary; color: --bg-base; font-size: 12px; padding: 8px 14px`. No border-radius. Trigger text: dashed underline in `--burgundy`.
+
+---
+
+## Motion
+
+```css
+--transition-base: 150ms ease; /* all hover states and interactions */
+```
+
+No bouncy or springy animations. Ease only. No animations on text — only containers. Staggered fade-up on page load:
+
+```css
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* animation: fadeUp 0.5s ease both; delay: n * 0.07s */
+```
+
+Respect `prefers-reduced-motion` by disabling all animations.
+
+---
+
+## Checklist
+
+- [ ] Background is `#F4EFE4` parchment — never white, never grey, never #000
+- [ ] No box-shadows anywhere — borders and background contrast only
+- [ ] All corners are square or max 4px radius — no pills, no rounded buttons
+- [ ] Cormorant Garamond for all UI chrome; EB Garamond only for prose
+- [ ] Labels are uppercase with letter-spacing 0.2em+
+- [ ] Italic is used meaningfully (metadata, dates) — not decoratively
+- [ ] Accent colors appear only as text/borders/thin fills — no large color fills
+- [ ] Font-weight never exceeds 500
+- [ ] Badges are outlined with 6% opacity tint — never solid
+- [ ] Hover states are color/background only — elements never move

package/codeyam-cli/templates/design-systems/mono-brutalist-design-system.md

@@ -0,0 +1,256 @@
+# Mono-Brutalist Design System
+
+> Raw, typographic, terminal-warm UI. Monospace identity, dashed borders, single mint-green accent. For any web or mobile app.
+
+## Philosophy
+
+Brutalism's exposed skeleton — visible grids, raw type, no embellishment — warmed with organic off-whites, sage greens, and monospaced type. Feels like a well-worn notebook: structured but human.
+
+**Rules:**
+
+1. Monospace font carries the identity — labels, tags, metadata, inputs, buttons, nav all use mono
+2. Dashed borders are the signature element — used on tags, chips, empty states, never on structural containers
+3. Single chromatic accent (mint green) — resist adding secondary colors
+4. Never use pure black (`#000`) or pure white (`#fff`) — everything lives between warm off-white and dark olive
+
+---
+
+## Colors
+
+### Light Mode
+
+```css
+[data-theme='light'] {
+  --bg-base: #eeece6; /* warm off-white page bg */
+  --bg-surface: #fafaf7; /* cards, panels */
+  --bg-surface-raised: #ffffff; /* modals, overlays */
+  --bg-inverse: #2d3228; /* dark olive — inverted accent blocks, headers */
+
+  --text-primary: #2d3228; /* headings, primary content */
+  --text-secondary: #555550; /* body, descriptions */
+  --text-muted: #777772; /* labels, metadata */
+  --text-faint: #999994; /* placeholders, disabled */
+
+  --border: #e2dfd6; /* solid borders — cards, panels, dividers */
+  --border-dashed: #999690; /* dashed borders — tags, chips, empty states */
+
+  --shadow-sm: none; /* no shadows in this system — borders do the work */
+  --shadow-md: none;
+}
+```
+
+### Dark Mode
+
+```css
+[data-theme='dark'] {
+  --bg-base: #1a1e18;
+  --bg-surface: #222820;
+  --bg-surface-raised: #2a3028;
+  --bg-inverse: #2d3228; /* unchanged — constant anchor */
+
+  --text-primary: #e0ddd6;
+  --text-secondary: #a8a89e;
+  --text-muted: #6a7a64;
+  --text-faint: #4a5a44;
+
+  --border: #2e3628;
+  --border-dashed: #3e4a38;
+  /* Accent unchanged. Inverse surfaces unchanged. */
+}
+```
+
+Respect `@media (prefers-color-scheme: dark)` on `:root:not([data-theme="light"])`.
+
+### Accents
+
+```css
+/* Mint green — the only chromatic accent. Unchanged between modes. */
+--accent: #b8e0a0; /* primary: on dark surfaces, active indicators */
+--accent-soft: #c5e8b0; /* light mode soft fill; dark mode: #1e3a18 */
+--accent-dark: #82b870; /* darker variant for emphasis */
+```
+
+### Semantic
+
+```css
+--success-bg: #dff0d4;
+--success-text: #3a5c2a;
+--danger-bg: #f0d4d4;
+--danger-text: #5c2a2a;
+/* Dark mode: --success-bg: #1e3018; --success-text: #82b870; */
+```
+
+### Ordered Palette
+
+```css
+/* Single-accent system — categorical sequence uses value/opacity variations */
+--palette-1: #2d3228; /* ink */
+--palette-2: #82b870; /* accent dark */
+--palette-3: #b8e0a0; /* accent */
+--palette-4: #555550; /* secondary */
+--palette-5: #999690; /* muted */
+```
+
+---
+
+## Typography
+
+**Font stack:** `'Courier New', Courier, monospace` (identity — labels, tags, inputs, buttons, nav), `system-ui, -apple-system, sans-serif` (headings and body prose only). Optional upgrade: `'DM Mono'` for mono.
+
+| Style       | Size                     | Weight | Font | Notes                                                        |
+| ----------- | ------------------------ | ------ | ---- | ------------------------------------------------------------ |
+| Display     | `clamp(28px, 5vw, 56px)` | 300    | Sans | `letter-spacing: -0.02em; line-height: 1.2`                  |
+| H1          | `clamp(22px, 3vw, 36px)` | 400    | Sans | `letter-spacing: -0.02em`                                    |
+| H2          | 18px                     | 500    | Sans | Card titles                                                  |
+| H3          | 14px                     | 500    | Sans | Panel titles                                                 |
+| Body        | 13px                     | 400    | Sans | `line-height: 1.6`                                           |
+| Mono L      | 13px                     | 400    | Mono | Large mono labels                                            |
+| Mono M      | 12px                     | 400    | Mono | Default — inputs, content text                               |
+| Mono S      | 11px                     | 400    | Mono | Tags, metadata, table cells. `letter-spacing: 0.03em`        |
+| Mono XS     | 10px                     | 400    | Mono | Section labels, footers. `uppercase; letter-spacing: 0.12em` |
+| Large Value | `clamp(28px, 4vw, 44px)` | 300    | Sans | Emphasized numbers. `letter-spacing: -0.02em`                |
+
+**Key distinctions:**
+
+- ALL CAPS labels always use `letter-spacing: 0.10em` minimum
+- Wrapping user-generated content in quotes (`"text like this"`) is a signature pattern
+- Mono for everything structural/interactive; sans only for headings and prose
+
+---
+
+## Spacing & Radius
+
+Base unit: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48px.
+
+| Context                | Value  |
+| ---------------------- | ------ |
+| Card padding (compact) | `16px` |
+| Card padding (default) | `24px` |
+| Grid gap (cards)       | 10px   |
+| Section gap            | 32px   |
+
+```css
+--radius-sm: 8px; /* badges */
+--radius-md: 12px; /* inputs, small cards */
+--radius-lg: 16px; /* cards, panels */
+--radius-xl: 20px; /* modals */
+--radius-pill: 100px; /* buttons, tag pills */
+```
+
+---
+
+## Layout
+
+### Common Patterns
+
+- **Sidebar/Header:** Dark olive (`--bg-inverse`), same in both modes — constant anchor
+- **Top bar:** Sticky, dark olive bg, mint accent for active nav
+- **Bottom nav (mobile):** Dark olive bg, mint accent active indicator
+- **Main content:** flex-1, `--bg-base`, 40px padding (desktop), 20px (mobile)
+
+### Navigation States
+
+- Section labels: Mono XS, uppercase, `letter-spacing: 0.12em`, `--text-muted`
+- Nav items: Mono M, `--text-secondary`. Hover → `--bg-surface` bg. Active → mint accent text on inverse bg
+- Dark olive header is always present — `--bg-inverse`, `z-index: 20`
+
+### Mobile / Small Viewport
+
+- Single column, 20px padding
+- Cards full-width, `--radius-lg`
+- Tag pills in horizontal scroll row (no wrap)
+- Tap targets minimum 44px height
+- Display type scales down via clamp
+
+---
+
+## Components
+
+### Card
+
+```css
+.card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+}
+```
+
+**Variants:** `default` (surface), `inverted` (ink bg, no border), `accent` (accent-soft bg, accent border).
+
+**Interactive states:** hover → subtle bg shift only. No transforms, no shadows.
+
+**Card anatomy:** Label row (ALL CAPS mono) → content → footer (timestamp + tag pill).
+
+### Value Card
+
+Card with: label (Mono XS, uppercase), emphasized value (Large Value style), optional trend indicator (`--success-text` for up, `--danger-text` for down, italic). Stats row: grid with thin border gaps between cards.
+
+### Button
+
+```css
+.btn {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 12px 22px;
+  border-radius: var(--radius-pill);
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+```
+
+| Variant   | Background     | Text             | Border                              |
+| --------- | -------------- | ---------------- | ----------------------------------- |
+| Primary   | `--bg-inverse` | `--accent`       | none                                |
+| Secondary | transparent    | `--text-primary` | `1.5px dashed var(--border-dashed)` |
+| Ghost     | transparent    | `--text-muted`   | `1px solid var(--border)`           |
+
+Primary: always dark bg + mint text. All buttons use mono font, pill radius.
+
+### Tag / Pill (signature element)
+
+`font-family: mono; font-size: 11px; padding: 4px 11px; border-radius: 100px; border: 1.5px dashed var(--border-dashed); letter-spacing: 0.03em; background: transparent`. Active → solid border + inverse bg + white text. Accent variant → accent-dark border + accent-dark text.
+
+### Badge
+
+`font-family: mono; font-size: 10px; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.04em`. Variants: trending (inverse bg + accent text), rising (success bg + success text), default (base bg + muted text).
+
+### Input
+
+`font-family: mono; font-size: 12px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-base)`. Focus: `border-color: var(--border-dashed)`. Placeholder: `--text-faint`, mono.
+
+### Table
+
+Header: Mono XS uppercase labels, `--text-muted`. Rows: Mono S, `--text-secondary`, `border-bottom: 1px solid var(--border)`. Hover → `--bg-base`. Numbers: `--text-primary`, weight 500.
+
+### Empty State
+
+Centered dashed circle (`1.5px dotted var(--accent-dark)`, 50px, `+` inside) on accent-soft background. Lowercase conversational text: `"no items here yet"`.
+
+---
+
+## Motion
+
+```css
+--transition-fast: 100ms ease; /* button/tag hover */
+--transition-base: 120ms ease; /* card hover, general */
+--transition-slow: 200ms ease-out; /* modals, panels */
+```
+
+Grounded and minimal — things slide and fade, never bounce. No spring physics, parallax, rotation, or scale-up on hover. Page load: staggered fade-up, 40ms delay per item.
+
+---
+
+## Checklist
+
+- [ ] Background is warm off-white (`#eeece6`) or dark olive (`#1a1e18`) — never pure black or white
+- [ ] Monospace font on all labels, tags, inputs, buttons, and nav — sans only for headings/prose
+- [ ] Tags/pills use dashed borders — structural containers use solid borders
+- [ ] Only one chromatic accent (mint green) — no secondary colors
+- [ ] Primary buttons: dark bg + mint text, always pill-shaped
+- [ ] ALL CAPS labels have letter-spacing 0.10em+
+- [ ] Dark olive inverse surfaces are the same in both light and dark mode
+- [ ] No box-shadows — borders and background contrast only
+- [ ] User content wrapped in quotes (`"..."`) where applicable
+- [ ] Motion is grounded — fade and slide only, no bounce