@ijfw/memory-server 1.3.0

package/templates/design/editorial-warm.md

@@ -0,0 +1,81 @@
+# Editorial Warm  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Magazine editorial meets warm minimalism  -  the feeling of a well-designed print publication on screen. Serif headings lend authority and permanence; generous leading invites reading rather than scanning. The warm off-white background and earthy palette create intimacy without losing professionalism. Use for newsletters, blogs, content-heavy landing pages, and any product where the prose itself is the feature.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #FAF8F5 (page background  -  warm parchment)
+- `--color-surface`: #F2EFE9 (card/panel surface)
+- `--color-border`: #DDD8CF (dividers, input borders)
+- `--color-text-primary`: #2C2420 (headings, primary content  -  warm near-black)
+- `--color-text-secondary`: #7A6F66 (supporting text, labels)
+- `--color-accent`: #C0622F (CTAs, links, highlights  -  terracotta)
+- `--color-accent-hover`: #9E4D22 (interactive accent state)
+- `--color-muted`: #B0A89E (placeholder text, disabled)
+- `--color-rule`: #D8D2C8 (horizontal rules, section dividers)
+
+## 3. Typography Rules
+- **Display font**: Playfair Display  -  Google Fonts  -  weights 400, 700, 900
+- **Body font**: Inter  -  Google Fonts  -  weights 400, 500
+- **Mono font**: JetBrains Mono  -  for code, data, inline technical references
+- **Scale**: Display 60px / H1 42px / H2 30px / H3 22px / Body 17px / Small 14px
+- **Line height**: 1.75 for body / 1.15 for display headings
+- **Letter spacing**: 0 for body / -0.01em for H1-H2 / 0.01em for small caps labels
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@400;500&family=JetBrains+Mono&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: background `--color-accent`, white text, `font-family: Inter`, `font-weight: 500`, `border-radius: 4px`, `padding: 12px 24px`. Hover: `--color-accent-hover`. Secondary: transparent, `1px solid --color-accent`, `color: --color-accent`. No shadows on either.
+
+### Cards
+Background `--color-surface`, `border: 1px solid --color-border`, `border-radius: 6px`, `padding: 32px`. Top accent line optional: `border-top: 3px solid --color-accent`. Title in Playfair Display, body in Inter.
+
+### Navigation
+Height 64px, `border-bottom: 1px solid --color-rule`, background `--color-bg`. Wordmark in Playfair Display weight 700. Nav links in Inter weight 500, `font-size: 14px`. Active: `color: --color-accent`.
+
+### Inputs
+`background: --color-bg`, `border: 1px solid --color-border`, `border-radius: 4px`, `padding: 11px 14px`, `font-size: 16px`, `font-family: Inter`. Focus: `border-color: --color-accent`, `outline: 2px solid rgba(192,98,47,0.15)`. Placeholder: `--color-muted`.
+
+### Badges / Chips
+`background: --color-surface`, `border: 1px solid --color-border`, `border-radius: 4px`, `padding: 3px 10px`, `font-size: 12px`, `font-family: Inter`, `font-weight: 500`, `color: --color-text-secondary`. Subtle and unobtrusive.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 28px gutters
+- **Max width**: 1100px (content column max 720px for long-form prose)
+- **Section padding**: 80px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 120px
+- **Whitespace philosophy**: generous  -  long-form content demands room to breathe
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `--color-bg`, Level 1 = `--color-surface`, Level 2 = `#E8E3DB`
+- **Shadow tokens**: low = `0 1px 4px rgba(44,36,32,0.06)`; mid = `0 4px 16px rgba(44,36,32,0.08)`; high = none (modals use backdrop instead)
+- **Border usage**: warm 1px borders throughout; `--color-rule` for horizontal dividers between sections
+
+## 7. Do's and Don'ts
+**Do:**
+- Use Playfair Display for all display text, pull quotes, and section headers
+- Set body text at 17px minimum  -  this aesthetic rewards reading, not scanning
+- Use horizontal rules (`--color-rule`) liberally to divide content regions
+- Lean into asymmetry: large serif headline + tighter caption below
+- Use terracotta accent sparingly  -  one CTA per viewport maximum
+
+**Don't:**
+- Use a pure white or pure black background  -  the warmth is load-bearing
+- Mix Playfair Display at small sizes (below 18px it loses authority)
+- Use bold Inter for headings  -  Playfair Display owns that role
+- Crowd the content column; the 720px prose limit exists for readability
+- Apply accent color to decorative elements; it must signal action or importance
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 36px / H1 to 28px / body stays 17px on mobile
+- **Layout collapse**: prose column goes full-width at 768px with 20px side padding; section padding reduces to 48px
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Editorial Warm DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Editorial Warm aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/glassmorphic.md

@@ -0,0 +1,84 @@
+# Glassmorphic  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Frosted glass and layered depth  -  surfaces that feel suspended in front of a rich background rather than sitting on a flat plane. The blur and translucency create a sense of atmosphere and space that flat design cannot achieve. Works best over gradient backgrounds (dark or vibrant light). Use for dashboards, mobile-inspired web apps, SaaS onboarding flows, and landing pages that need a contemporary, tactile feel without resorting to skeuomorphism.
+
+## 2. Color Palette & Roles
+- `--color-bg-start`: #0F0C29 (gradient background start  -  deep indigo)
+- `--color-bg-end`: #302B63 (gradient background end  -  mid purple)
+- `--color-bg-gradient`: linear-gradient(135deg, #0F0C29 0%, #302B63 60%, #24243E 100%)
+- `--color-surface`: rgba(255,255,255,0.08) (frosted card surface)
+- `--color-surface-hover`: rgba(255,255,255,0.12) (interactive surface state)
+- `--color-border`: rgba(255,255,255,0.18) (frosted border)
+- `--color-border-strong`: rgba(255,255,255,0.28) (active/focused border)
+- `--color-text-primary`: #F2F2F7 (headings, primary content)
+- `--color-text-secondary`: rgba(242,242,247,0.55) (supporting text, labels)
+- `--color-accent`: #7C6FFF (CTAs, links  -  soft violet)
+- `--color-accent-hover`: #9B91FF (interactive accent state)
+- `--color-blur`: blur(16px) (primary backdrop filter value)
+
+## 3. Typography Rules
+- **Display font**: Inter  -  Google Fonts  -  weights 300, 400, 600, 700
+- **Body font**: Inter  -  Google Fonts  -  weights 400, 500
+- **Mono font**: JetBrains Mono  -  for data, stats, code snippets
+- **Scale**: Display 56px / H1 40px / H2 28px / H3 20px / Body 15px / Small 13px
+- **Line height**: 1.6 for body / 1.1 for display
+- **Letter spacing**: 0 for body / -0.02em for display
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: `background: --color-accent`, white text, `font-weight: 600`, `border-radius: 10px`, `padding: 11px 24px`. Hover: `--color-accent-hover`. Secondary: `background: rgba(255,255,255,0.1)`, `border: 1px solid --color-border`, `color: --color-text-primary`, `backdrop-filter: blur(8px)`. Both have `border-radius: 10px`.
+
+### Cards
+`background: --color-surface`, `backdrop-filter: blur(16px)`, `-webkit-backdrop-filter: blur(16px)`, `border: 1px solid --color-border`, `border-radius: 16px`, `padding: 28px`. Hover state shifts to `--color-surface-hover`. Top highlight: `box-shadow: inset 0 1px 0 rgba(255,255,255,0.15)`.
+
+### Navigation
+Height 60px, `background: rgba(15,12,41,0.6)`, `backdrop-filter: blur(20px)`, `border-bottom: 1px solid --color-border`. Sticky. Nav items: Inter 14px, `color: --color-text-secondary`. Active: `color: --color-text-primary`, `background: rgba(255,255,255,0.08)`, `border-radius: 8px`, `padding: 6px 14px`.
+
+### Inputs
+`background: rgba(255,255,255,0.06)`, `backdrop-filter: blur(8px)`, `border: 1px solid --color-border`, `border-radius: 10px`, `padding: 11px 14px`, `color: --color-text-primary`, `font-size: 15px`. Focus: `border-color: --color-border-strong`, `box-shadow: 0 0 0 3px rgba(124,111,255,0.2)`. Placeholder: `--color-text-secondary`.
+
+### Badges / Chips
+`background: rgba(124,111,255,0.15)`, `border: 1px solid rgba(124,111,255,0.3)`, `color: #B5AFFF`, `border-radius: 8px`, `padding: 3px 10px`, `font-size: 12px`, `font-weight: 500`. Status variants shift the rgba hue only.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 24px gutters
+- **Max width**: 1200px
+- **Section padding**: 80px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80px
+- **Whitespace philosophy**: balanced  -  glass surfaces need breathing room but the gradient fills the void
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = gradient bg, Level 1 = `blur(16px)` card, Level 2 = `blur(24px)` modal
+- **Shadow tokens**: low = `0 4px 16px rgba(0,0,0,0.3)`; mid = `0 8px 32px rgba(0,0,0,0.4)`; high = `0 24px 48px rgba(0,0,0,0.5)`
+- **Border usage**: always present on glass surfaces  -  the 1px rgba border is what defines the glass edge
+
+## 7. Do's and Don'ts
+**Do:**
+- Always set a rich gradient or image background  -  frosted glass needs something behind it to blur
+- Use `-webkit-backdrop-filter` alongside `backdrop-filter` for Safari support
+- Layer cards at slightly different blur levels to create visual depth hierarchy
+- Use `rgba` borders consistently  -  hard opaque borders destroy the glass effect
+- Keep border-radius in the 12-20px range; glass surfaces should feel soft
+
+**Don't:**
+- Use glassmorphic surfaces on a flat solid background  -  the effect collapses
+- Stack more than three blur layers (each adds GPU cost and visual noise)
+- Use high-saturation opaque backgrounds for cards  -  it fights the blur
+- Mix sharp-cornered and glass-rounded components on the same screen
+- Apply `backdrop-filter` to components that overlap scrolling content (causes jank)
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 36px / H1 to 26px on mobile
+- **Layout collapse**: 12-col → single column; cards stack vertically; border-radius reduces slightly to 12px; blur intensity stays identical
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Glassmorphic DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Glassmorphic aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/magazine-editorial.md

@@ -0,0 +1,84 @@
+# Magazine Editorial  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Editorial flow and feature-story hierarchy  -  the visual grammar of a digital magazine where the article itself is the product. Mixed typography is the design technique: condensed headers command attention, serif body text rewards sustained reading, pull quotes interrupt and anchor. Newsprint-warm background. Structured column grids simulate the multi-column layouts of long-form print journalism. Use for media publications, long-form content platforms, newsletters, digital magazines, and any product where writing is the primary value delivered.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #F8F5EE (page background  -  newsprint warm)
+- `--color-surface`: #FFFFFF (article card, feature surface)
+- `--color-surface-tint`: #F1EDE4 (sidebar, secondary section background)
+- `--color-border`: #DDD6C8 (dividers, column rules)
+- `--color-border-rule`: #C8BFB0 (strong section rules, column separators)
+- `--color-text-primary`: #1A1612 (headings, bylines  -  warm near-black)
+- `--color-text-body`: #2E2822 (body text  -  slightly lighter for long reads)
+- `--color-text-secondary`: #7A6F62 (labels, captions, datelines)
+- `--color-accent`: #B5292A (CTAs, section tags, highlights  -  editorial red)
+- `--color-accent-hover`: #8C1E1E (interactive accent state)
+- `--color-pull-quote`: #3D3530 (pull quote text  -  distinct from body)
+- `--color-byline`: #5C5148 (byline, source attribution)
+
+## 3. Typography Rules
+- **Display font**: Barlow Condensed  -  Google Fonts  -  weights 600, 700, 800 (headlines, section labels)
+- **Body font**: Merriweather  -  Google Fonts  -  weights 300, 400, 700 (long-form article body)
+- **Mono font**: JetBrains Mono  -  for inline data, pull statistics, code
+- **Scale**: Display 72px / H1 48px / H2 32px / H3 22px / Body 18px / Caption 13px
+- **Line height**: 1.85 for body (Merriweather needs room) / 1.0 for Barlow Condensed display
+- **Letter spacing**: 0 for body / 0.01em for display / 0.1em for uppercase section tags
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Merriweather:wght@300;400;700&family=JetBrains+Mono&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: `background: --color-accent`, white text, `font-family: Barlow Condensed`, `font-weight: 700`, `border-radius: 3px`, `padding: 10px 24px`, `letter-spacing: 0.06em`, uppercase. Hover: `--color-accent-hover`. Secondary: `background: transparent`, `border: 2px solid --color-border-rule`, `color: --color-text-primary`, `font-family: Barlow Condensed`, `font-weight: 600`.
+
+### Cards
+Article card: `background: --color-surface`, `border-bottom: 2px solid --color-border-rule`, `border-radius: 0`, `padding: 24px 0`. Title in Barlow Condensed 700, body preview in Merriweather 300. Byline in Inter or system-sans 13px `--color-byline`. Feature card: full-width `border-top: 4px solid --color-accent`.
+
+### Navigation
+Height 52px, `border-bottom: 2px solid --color-text-primary`, background `--color-bg`. Publication name in Barlow Condensed weight 800, `font-size: 22px`, uppercase. Section nav below: 44px, `border-bottom: 1px solid --color-border`, items in Barlow Condensed 600 13px uppercase, `letter-spacing: 0.08em`. Active: `color: --color-accent`.
+
+### Inputs
+`background: --color-surface`, `border: 1px solid --color-border`, `border-radius: 2px`, `padding: 10px 12px`, `font-family: Merriweather`, `font-size: 15px`. Focus: `border-color: --color-accent`, `box-shadow: none`. Placeholder: `--color-text-secondary`. Search bar uses Barlow Condensed.
+
+### Badges / Chips
+Section tags: `background: --color-accent`, `color: white`, `border-radius: 2px`, `padding: 3px 8px`, `font-family: Barlow Condensed`, `font-weight: 700`, `font-size: 11px`, uppercase, `letter-spacing: 0.08em`. Neutral tag: `background: --color-surface-tint`, `border: 1px solid --color-border`, `color: --color-text-secondary`.
+
+## 5. Layout Principles
+- **Grid**: multi-column editorial  -  3-col primary (content / content / sidebar) plus full-width feature rows
+- **Max width**: 1280px (prose column max 680px for article body)
+- **Section padding**: 64px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96px
+- **Whitespace philosophy**: structured  -  whitespace is column gutters and inter-article rules, not empty margins
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `--color-bg`, Level 1 = `--color-surface` (white), Level 2 = `--color-surface-tint`
+- **Shadow tokens**: low = `0 1px 4px rgba(26,22,18,0.06)`; mid = none; high = `0 8px 32px rgba(26,22,18,0.1)` for featured overlays
+- **Border usage**: horizontal rules are the primary separator; `--color-border-rule` for strong breaks, `--color-border` for subtle ones; vertical column rules optional
+
+## 7. Do's and Don'ts
+**Do:**
+- Use Barlow Condensed weight 800 for all headlines  -  the condensed proportions are the system's voice
+- Set Merriweather body text at 18px with `line-height: 1.85`  -  this typeface is designed for long reads
+- Use pull quotes as layout anchors: Barlow Condensed 700, large (28-36px), `color: --color-pull-quote`, `border-left: 4px solid --color-accent`
+- Include bylines, datelines, and reading-time labels using `--color-byline` and `font-size: 13px`
+- Use `border-top: 4px solid --color-accent` to mark feature-tier articles visually
+
+**Don't:**
+- Use Merriweather for UI labels or navigation  -  it's a reading typeface, not a UI typeface
+- Use rounded corners; this aesthetic is flush and ruled, not soft
+- Apply decorative gradients; the warmth comes from the paper tones, not color effects
+- Shrink body type below 17px; Merriweather at small sizes loses its authority
+- Mix editorial red accent with a secondary accent; one signal color for editorial emphasis
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 44px / H1 to 32px / body stays 17px (down from 18px) on mobile
+- **Layout collapse**: 3-col → single column at 768px; sidebar becomes collapsed section at bottom; column rules become horizontal dividers; prose column goes full-width with 20px padding
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Magazine Editorial DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Magazine Editorial aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/maximalist-vibrant.md

@@ -0,0 +1,85 @@
+# Maximalist Vibrant  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Rich, layered, expressive  -  the energy of a design tool's own marketing site turned into a system. Multiple hues live together not in chaos but in deliberate orchestration. Gradients are bold and purposeful, type sizing is used as composition, and the overall effect is one of creative confidence. Use for creative tools, collaboration platforms, marketing-forward SaaS, launch pages, and products aimed at makers, designers, and builders who expect their software to have a personality.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #0E0E14 (page background  -  near-black with purple undertone)
+- `--color-surface`: #17171F (card/panel surface)
+- `--color-border`: #2A2A38 (dividers, input borders)
+- `--color-text-primary`: #F4F4FA (headings, primary content)
+- `--color-text-secondary`: #8888A0 (supporting text, labels)
+- `--color-violet`: #7C5CFC (primary gradient stop / main accent)
+- `--color-pink`: #F040A0 (secondary gradient / hover accent)
+- `--color-cyan`: #00D4FF (tertiary accent  -  used in gradients and highlights)
+- `--color-yellow`: #FFE040 (pop accent  -  used for emphasis, badges)
+- `--color-gradient-primary`: linear-gradient(135deg, #7C5CFC 0%, #F040A0 100%)
+- `--color-gradient-secondary`: linear-gradient(135deg, #00D4FF 0%, #7C5CFC 100%)
+- `--color-accent`: #7C5CFC (default single-color accent for links/focus)
+- `--color-accent-hover`: #9B80FF (interactive accent state)
+
+## 3. Typography Rules
+- **Display font**: DM Sans  -  Google Fonts  -  weights 400, 500, 700, 900
+- **Body font**: DM Sans  -  Google Fonts  -  weights 400, 500
+- **Mono font**: JetBrains Mono  -  for code, data, metrics
+- **Scale**: Display 72px / H1 48px / H2 32px / H3 22px / Body 16px / Small 13px
+- **Line height**: 1.55 for body / 1.05 for display
+- **Letter spacing**: -0.01em for body / -0.03em for display and H1
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&family=JetBrains+Mono&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: `background: --color-gradient-primary`, white text, `font-weight: 700`, `border-radius: 10px`, `padding: 12px 28px`. Hover: lighten gradient via `filter: brightness(1.1)`. Secondary: `background: rgba(124,92,252,0.12)`, `border: 1px solid rgba(124,92,252,0.4)`, `color: #9B80FF`, `border-radius: 10px`. Both have gradient hover glow.
+
+### Cards
+`background: --color-surface`, `border: 1px solid --color-border`, `border-radius: 16px`, `padding: 28px`. Featured cards: gradient border via `background: linear-gradient(--color-surface, --color-surface) padding-box, --color-gradient-primary border-box`, `border: 2px solid transparent`. Hover: `transform: translateY(-2px)`, mild shadow.
+
+### Navigation
+Height 64px, `background: rgba(14,14,20,0.8)`, `backdrop-filter: blur(12px)`, `border-bottom: 1px solid --color-border`. Logo can use gradient fill on wordmark text. Nav items: DM Sans 15px, `color: --color-text-secondary`. Active: gradient underline 2px or full gradient text via `background-clip: text`.
+
+### Inputs
+`background: --color-surface`, `border: 1px solid --color-border`, `border-radius: 10px`, `padding: 12px 14px`, `color: --color-text-primary`, `font-size: 15px`. Focus: `border-color: --color-violet`, `box-shadow: 0 0 0 3px rgba(124,92,252,0.2)`. Placeholder: `--color-text-secondary`.
+
+### Badges / Chips
+Gradient: `background: --color-gradient-primary`, white text, `border-radius: 20px`, `padding: 4px 12px`, `font-size: 12px`, `font-weight: 700`. Yellow pop: `background: --color-yellow`, `color: #0E0E14`, same shape. Muted: `background: rgba(124,92,252,0.15)`, `color: #9B80FF`.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 24px gutters
+- **Max width**: 1280px
+- **Section padding**: 96px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128px
+- **Whitespace philosophy**: balanced  -  dense sections alternate with open hero areas; gradients fill the void
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `--color-bg`, Level 1 = `--color-surface`, Level 2 = `#1F1F2A`
+- **Shadow tokens**: low = `0 4px 16px rgba(0,0,0,0.4)`; mid = `0 8px 32px rgba(0,0,0,0.5)`; glow = `0 0 32px rgba(124,92,252,0.3)`
+- **Border usage**: 1px `--color-border` as baseline; gradient borders for featured/hero components
+
+## 7. Do's and Don'ts
+**Do:**
+- Use the gradient as a design element in its own right  -  full-bleed gradient sections are welcome
+- Mix accent colors deliberately; violet is primary, pink secondary, cyan tertiary  -  not interchangeable
+- Use DM Sans weight 900 for display text; it punches at this size
+- Apply the gradient border technique for cards that need to feel premium
+- Use `--color-yellow` as a true pop accent  -  one badge or highlight per section maximum
+
+**Don't:**
+- Use all four accent colors in one component  -  each component gets at most two
+- Make the background lighter than `#17171F`  -  contrast is the foundation here
+- Apply gradient to body text; gradient is reserved for display and interactive elements
+- Round corners beyond 20px (chips/badges) or 16px (cards); circular shapes break the grid feel
+- Use flat single-color CTAs  -  this palette earns its gradients
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 44px / H1 to 32px on mobile; weight 900 preserved
+- **Layout collapse**: 12-col → single column; gradient hero sections go full-width; padding reduces to 48px
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Maximalist Vibrant DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Maximalist Vibrant aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/neo-swiss-tech.md

@@ -0,0 +1,85 @@
+# Neo Swiss Tech  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Modern Swiss grid discipline fused with tech product precision  -  the aesthetic of tools used by engineers who care about their environment. Mid-dark background that isn't a full terminal black, cool grey palette that's systematic rather than decorative, one electric accent that marks exactly what matters. Tight spacing signals density of thought without feeling cramped. Use for developer tools, productivity apps, command palettes, dashboards, and any product that must feel fast and deliberate.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #141414 (page background  -  precise dark grey)
+- `--color-surface`: #1C1C1C (card/panel surface)
+- `--color-surface-raised`: #242424 (elevated panels, popovers)
+- `--color-border`: #323232 (dividers, input borders)
+- `--color-border-focus`: #4A4A4A (focused/active border)
+- `--color-text-primary`: #EBEBEB (headings, primary content)
+- `--color-text-secondary`: #737373 (supporting text, labels)
+- `--color-text-tertiary`: #484848 (disabled, placeholder)
+- `--color-accent`: #3B82F6 (CTAs, links, active states  -  electric blue)
+- `--color-accent-hover`: #60A5FA (interactive accent state)
+- `--color-accent-dim`: rgba(59,130,246,0.12) (accent tint backgrounds)
+- `--color-success`: #22C55E
+- `--color-error`: #EF4444
+
+## 3. Typography Rules
+- **Display font**: DM Sans  -  Google Fonts  -  weights 400, 500, 700
+- **Body font**: DM Sans  -  Google Fonts  -  weights 400, 500
+- **Mono font**: JetBrains Mono  -  for code, metrics, IDs, timestamps
+- **Scale**: Display 52px / H1 36px / H2 26px / H3 20px / Body 14px / Small 12px
+- **Line height**: 1.6 for body / 1.1 for display
+- **Letter spacing**: 0 for body / -0.02em for display / 0.04em for uppercase labels
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: `background: --color-accent`, white text, `font-weight: 500`, `border-radius: 6px`, `padding: 8px 18px`, `font-size: 14px`. Hover: `background: --color-accent-hover`. Secondary: `background: --color-surface-raised`, `border: 1px solid --color-border`, `color: --color-text-primary`, `border-radius: 6px`. Ghost: transparent, `color: --color-text-secondary`, hover `color: --color-text-primary`.
+
+### Cards
+`background: --color-surface`, `border: 1px solid --color-border`, `border-radius: 8px`, `padding: 20px`. Active/selected: `border-color: --color-accent`, `background: rgba(59,130,246,0.04)`. No shadow on resting state; `box-shadow: 0 2px 8px rgba(0,0,0,0.4)` on hover.
+
+### Navigation
+Height 52px, `border-bottom: 1px solid --color-border`, background `--color-bg`. Items: DM Sans 13px, `font-weight: 500`, `color: --color-text-secondary`. Active: `color: --color-text-primary`, `background: --color-surface`, `border-radius: 6px`, `padding: 5px 10px`. Keyboard shortcut hints visible inline.
+
+### Inputs
+`background: --color-bg`, `border: 1px solid --color-border`, `border-radius: 6px`, `padding: 8px 12px`, `font-size: 14px`, `color: --color-text-primary`. Focus: `border-color: --color-accent`, `box-shadow: 0 0 0 3px --color-accent-dim`. Placeholder: `--color-text-tertiary`.
+
+### Badges / Chips
+`background: --color-surface-raised`, `border: 1px solid --color-border`, `border-radius: 4px`, `padding: 2px 8px`, `font-size: 11px`, `font-family: JetBrains Mono`, `color: --color-text-secondary`. Accent variant: `background: --color-accent-dim`, `border-color: rgba(59,130,246,0.3)`, `color: --color-accent-hover`.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 20px gutters
+- **Max width**: 1280px
+- **Section padding**: 64px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64px
+- **Whitespace philosophy**: tight but breathing  -  data-forward sections use 4px base unit; marketing sections use 8px base unit
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `#141414`, Level 1 = `#1C1C1C`, Level 2 = `#242424`
+- **Shadow tokens**: low = `0 1px 4px rgba(0,0,0,0.5)`; mid = `0 4px 16px rgba(0,0,0,0.6)`; high = `0 12px 40px rgba(0,0,0,0.7)`
+- **Border usage**: 1px borders at every level transition; no border on same-level adjacencies
+
+## 7. Do's and Don'ts
+**Do:**
+- Use the electric blue accent precisely  -  it points to exactly one action at a time
+- Show keyboard shortcuts, IDs, and technical metadata using JetBrains Mono
+- Build compact 52px nav and 48px input height; every pixel of height counts
+- Use the 4px spacing base unit for dense data tables; switch to 8px for content sections
+- Surface `--color-success` and `--color-error` for any status output  -  they're in the system
+
+**Don't:**
+- Round corners beyond 8px  -  this aesthetic is about precision, not friendliness
+- Use the accent color for more than one primary CTA per viewport
+- Mix DM Sans and JetBrains Mono on the same line (alternating is fine; inline mixing is not)
+- Use gradients for fills; single flat accent color only
+- Add decorative shadows to resting cards  -  shadow is reserved for interaction state
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 32px / H1 to 24px on mobile; body stays 14px
+- **Layout collapse**: sidebar → bottom sheet; 12-col → single column; command palette hides keyboard hints; section padding reduces to 32px
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Neo Swiss Tech DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Neo Swiss Tech aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/swiss-minimal.md

@@ -0,0 +1,80 @@
+# Swiss Minimal  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+International Swiss typographic school applied to digital product. Clean, rational, and precise  -  every element earns its place. White space is the primary design material, not a gap between things. The grid is visible in the structure even when invisible on screen. Use this aesthetic for tools, documentation sites, SaaS dashboards, and developer-facing products where clarity signals trust.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #FFFFFF (page background)
+- `--color-surface`: #F7F7F7 (card/panel surface)
+- `--color-border`: #E2E2E2 (dividers, input borders)
+- `--color-text-primary`: #111111 (headings, primary content)
+- `--color-text-secondary`: #6B6B6B (supporting text, labels)
+- `--color-accent`: #D42B2B (CTAs, links, highlights)
+- `--color-accent-hover`: #A81E1E (interactive accent state)
+- `--color-muted`: #ABABAB (placeholder text, disabled)
+
+## 3. Typography Rules
+- **Display font**: Inter  -  Google Fonts  -  weights 300, 400, 500, 700
+- **Body font**: Inter  -  Google Fonts  -  weight 400, 500
+- **Mono font**: JetBrains Mono  -  for code, data, terminal elements
+- **Scale**: Display 64px / H1 40px / H2 28px / H3 20px / Body 16px / Small 13px
+- **Line height**: 1.6 for body / 1.1 for display
+- **Letter spacing**: 0 for body / -0.02em for display and H1
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=JetBrains+Mono&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: background `--color-accent`, white text, `font-weight: 500`, `border-radius: 2px`, `padding: 10px 20px`. No shadow. Hover shifts to `--color-accent-hover`. Secondary: transparent background, `1px solid --color-border`, text `--color-text-primary`.
+
+### Cards
+Background `--color-surface`, `border: 1px solid --color-border`, `border-radius: 2px`, `padding: 24px`. No shadow  -  border provides definition. Content left-aligned with a clear typographic hierarchy.
+
+### Navigation
+Height 56px, `border-bottom: 1px solid --color-border`, background `--color-bg`. Logo/wordmark left. Nav items spaced 32px apart. Active item: `font-weight: 700`, thin `2px solid --color-accent` underline.
+
+### Inputs
+`border: 1px solid --color-border`, `border-radius: 2px`, `padding: 10px 12px`, `font-size: 15px`. Focus: `border-color: --color-text-primary`, no colored ring. Placeholder: `--color-muted`.
+
+### Badges / Chips
+`border: 1px solid --color-border`, `border-radius: 2px`, `padding: 2px 8px`, `font-size: 12px`, `font-weight: 500`, uppercase text, `letter-spacing: 0.04em`. Background `--color-surface`.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 24px gutters
+- **Max width**: 1200px
+- **Section padding**: 96px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128px
+- **Whitespace philosophy**: extreme  -  sections breathe, content never crowds
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `--color-bg`, Level 1 = `--color-surface`, Level 2 = `#EFEFEF`
+- **Shadow tokens**: none for low elevation; `0 1px 3px rgba(0,0,0,0.07)` for modals only
+- **Border usage**: solid 1px at every surface boundary; no decorative borders
+
+## 7. Do's and Don'ts
+**Do:**
+- Let whitespace carry weight  -  resist filling every gap
+- Use font weight and size exclusively for hierarchy (no color contrast as a crutch)
+- Keep border-radius at 0-2px; rounding softens the system's authority
+- One accent color only; never mix accent colors
+- Align everything to the 8px grid
+
+**Don't:**
+- Add shadows to cards or buttons  -  they break the flat surface logic
+- Use more than two font weights on a single screen
+- Use decorative icons or illustration; functional icons only
+- Center large blocks of body text
+- Introduce gradient fills anywhere in the UI
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 40px / H1 to 28px on mobile
+- **Layout collapse**: 12-col → 4-col on mobile; gutters reduce to 16px; section padding reduces to 48px
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Swiss Minimal DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Swiss Minimal aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."

package/templates/design/terminal-native.md

@@ -0,0 +1,83 @@
+# Terminal Native  -  DESIGN.md
+
+## 1. Visual Theme & Atmosphere
+Developer terminal aesthetic  -  the UI feels like it was born in a shell session and grew into a product. Monospace everywhere, dark to the bone, single neon accent cutting through the black. Information density is a feature, not a problem. Use for CLIs with web UIs, developer tools, API explorers, monitoring dashboards, and any product where the primary user has a `.zshrc` file.
+
+## 2. Color Palette & Roles
+- `--color-bg`: #0D0D0D (page background  -  terminal black)
+- `--color-surface`: #161616 (card/panel surface)
+- `--color-surface-raised`: #1E1E1E (elevated panels, dropdowns)
+- `--color-border`: #2A2A2A (dividers, input borders)
+- `--color-text-primary`: #E8E8E8 (headings, primary content)
+- `--color-text-secondary`: #7A7A7A (supporting text, labels, comments)
+- `--color-accent`: #00FF88 (CTAs, active states, highlights  -  terminal green)
+- `--color-accent-hover`: #00CC6E (interactive accent state)
+- `--color-accent-dim`: rgba(0,255,136,0.12) (accent tint for backgrounds)
+- `--color-error`: #FF4C4C (error states)
+- `--color-warning`: #FFB020 (warning states)
+
+## 3. Typography Rules
+- **Display font**: JetBrains Mono  -  Google Fonts  -  weights 400, 700, 800
+- **Body font**: JetBrains Mono  -  Google Fonts  -  weight 400, 500
+- **Mono font**: JetBrains Mono  -  everything is mono; this is the system
+- **Scale**: Display 48px / H1 32px / H2 24px / H3 18px / Body 14px / Small 12px
+- **Line height**: 1.65 for body / 1.2 for display
+- **Letter spacing**: 0 for body / -0.01em for display
+- **Font loading**: `@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&display=swap')`
+
+## 4. Component Stylings
+### Buttons
+Primary: background `--color-accent`, `color: #000000`, `font-family: JetBrains Mono`, `font-weight: 700`, `border-radius: 3px`, `padding: 9px 18px`, `font-size: 13px`. Hover: `--color-accent-hover`. Secondary: transparent, `border: 1px solid --color-accent`, `color: --color-accent`. Both uppercase with `letter-spacing: 0.04em`.
+
+### Cards
+Background `--color-surface`, `border: 1px solid --color-border`, `border-radius: 4px`, `padding: 20px`. Optional left accent bar: `border-left: 2px solid --color-accent`. Content uses strict monospace hierarchy.
+
+### Navigation
+Height 48px, `border-bottom: 1px solid --color-border`, background `--color-bg`. Items in JetBrains Mono 13px. Active: `color: --color-accent`. Prompt-style separator (`>` or `$`) can precede the active item.
+
+### Inputs
+`background: #111111`, `border: 1px solid --color-border`, `border-radius: 3px`, `padding: 9px 12px`, `font-family: JetBrains Mono`, `font-size: 13px`, `color: --color-text-primary`. Focus: `border-color: --color-accent`, `box-shadow: 0 0 0 2px --color-accent-dim`. Cursor blink effect on focus optional.
+
+### Badges / Chips
+`background: --color-accent-dim`, `border: 1px solid rgba(0,255,136,0.25)`, `color: --color-accent`, `border-radius: 3px`, `padding: 2px 8px`, `font-size: 11px`, `font-weight: 700`, uppercase. Error variant uses `--color-error` at same opacity ratios.
+
+## 5. Layout Principles
+- **Grid**: 12-column, 16px gutters
+- **Max width**: 1280px
+- **Section padding**: 48px vertical
+- **Spacing scale**: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64px
+- **Whitespace philosophy**: tight  -  every pixel used; silence is still legible
+
+## 6. Depth & Elevation
+- **Surface hierarchy**: Level 0 = `--color-bg` (#0D0D0D), Level 1 = `--color-surface` (#161616), Level 2 = `--color-surface-raised` (#1E1E1E)
+- **Shadow tokens**: low = `0 1px 3px rgba(0,0,0,0.6)`; mid = `0 4px 12px rgba(0,0,0,0.8)`; glow = `0 0 12px rgba(0,255,136,0.15)`
+- **Border usage**: every surface boundary gets a 1px border; glow border optional on active/selected state
+
+## 7. Do's and Don'ts
+**Do:**
+- Use monospace for everything  -  mixing sans-serif breaks the terminal frame
+- Use the neon accent at full saturation for interactive elements only
+- Show raw data, hex values, and technical strings without sanitizing the aesthetic
+- Use `--color-error` and `--color-warning` for semantic status, not decoration
+- Embrace information density; pack data into compact rows
+
+**Don't:**
+- Round corners beyond 4px  -  terminal UIs are sharp
+- Use gradients anywhere in the layout
+- Add imagery or illustration; icons must be outline/stroke only
+- Use the accent color as a background fill for large areas
+- Lighten the background to improve "accessibility"  -  contrast lives in the text colors
+
+## 8. Responsive Behavior
+- **Mobile breakpoint**: 375px
+- **Tablet breakpoint**: 768px
+- **Touch targets**: minimum 44px
+- **Typography scaling**: Display drops to 28px / body stays 14px  -  monospace reads small
+- **Layout collapse**: sidebar collapses to bottom drawer; grid goes single column; padding reduces to 16px
+
+## 9. Agent Prompt Guide
+Use these prompts with Claude Design or ijfw-design to stay on-system:
+
+- **New screen**: "Build a [screen type] following the Terminal Native DESIGN.md. Match the color tokens and type scale exactly."
+- **Component**: "Add a [component] that fits the Terminal Native aesthetic  -  reference section 4 for styling rules."
+- **Variant**: "Create a [light/dark/compact] variant of this screen. Keep the same token names, adjust the values."