{
  "content": "\nThe canonical visual identity for all **#B4mad Industries** web properties. This system defines colors, typography, spacing, and component patterns used across our sites and documentation.\n\n---\n\n## Color Palette\n\n### Primary\n\n| Role | Name | Hex | Usage |\n|------|------|-----|-------|\n| **Accent** | DarkSeaGreen4 | `#458B74` | Brand color, links, highlights, borders |\n| **Accent Light** | — | `#5AAD92` | Hover states, headings, inline code |\n| **Accent Dark** | — | `#346B59` | Pressed states, scrollbar hover |\n| **Accent Glow** | — | `rgba(69, 139, 116, 0.4)` | Glows, text-shadow, pulse animations |\n\n### Backgrounds (Dark Mode — Default)\n\n| Role | Hex | Usage |\n|------|-----|-------|\n| **Primary** | `#0A0E14` | Page background |\n| **Secondary** | `#111820` | Code blocks, pre elements |\n| **Card** | `#151C25` | Card backgrounds |\n| **Card Hover** | `#1A2330` | Card hover state |\n\n### Text\n\n| Role | Hex | Usage |\n|------|-----|-------|\n| **Primary** | `#E0E6ED` | Headings, body text |\n| **Secondary** | `#8899AA` | Paragraphs, descriptions |\n| **Muted** | `#556677` | Footer, meta text, agent roles |\n\n### Borders\n\n| Role | Value | Usage |\n|------|-------|-------|\n| **Default** | `#1E2A36` | Cards, dividers, table borders |\n| **Accent** | `rgba(69, 139, 116, 0.3)` | Active/hover borders, section lines |\n\n### Semantic\n\n| Role | Hex | Usage |\n|------|-----|-------|\n| **Danger** | `#E74C3C` | Errors, destructive actions |\n| **Warning** | `#F39C12` | Caution, alerts |\n| **Info** | `#3498DB` | Informational highlights |\n\n---\n\n## Typography\n\n### Font Stack\n\n| Role | Font | Fallbacks |\n|------|------|-----------|\n| **Body** | Inter | -apple-system, BlinkMacSystemFont, sans-serif |\n| **Code** | JetBrains Mono | monospace |\n\nBoth loaded via Google Fonts:\n```\nInter: 300, 400, 600, 700, 900\nJetBrains Mono: 400, 700\n```\n\n### Heading Hierarchy\n\n| Level | Size | Weight | Notes |\n|-------|------|--------|-------|\n| **H1** (hero) | 3.5rem | 900 | Letter-spacing: -0.03em |\n| **H1** (page) | 2.5rem | 900 | Gradient fill (text → accent-light) |\n| **H2** | 1.5rem | 700 | Bottom border, 2.5rem top margin |\n| **H3** | 1.2rem | 600 | Accent-light color |\n| **Body** | 1rem (16px) | 400 | Line-height: 1.7 |\n| **Small/Meta** | 0.85rem | — | Used for card text, nav items |\n| **Section Label** | 0.75rem | 700 | Uppercase, 0.15em letter-spacing |\n\n---\n\n## Spacing \u0026 Layout\n\n### Border Radius\n\n| Token | Value | Usage |\n|-------|-------|-------|\n| `--radius` | 8px | Cards, buttons, code blocks |\n| `--radius-lg` | 16px | Hero cards, large containers |\n| Pill | 999px | Tags, status badges, nav pills |\n\n### Container\n\n- **Max width:** 1200px\n- **Content max width:** 800px (page-content)\n- **Padding:** 2rem (desktop), 1rem (mobile)\n\n### Grid\n\n- **Card grid:** `repeat(auto-fill, minmax(320px, 1fr))`, gap 1.25rem\n- **Agent grid:** `repeat(auto-fill, minmax(200px, 1fr))`, gap 1rem\n\n---\n\n## Components\n\n### Cards\n\n- Background: `--bg-card` → `--bg-card-hover` on hover\n- Border: `--border` → `--border-accent` on hover\n- Top accent line (2px gradient) appears on hover\n- Lift effect: `translateY(-2px)` + box-shadow on hover\n- Transition: 0.3s ease\n\n### Navigation\n\n- Sticky header with blur backdrop (`blur(20px)`)\n- Semi-transparent background: `rgba(10, 14, 20, 0.85)`\n- Nav links: pill-shaped hover with accent background\n- Mobile: hamburger toggle → vertical dropdown\n\n### Code Blocks\n\n- **Inline:** accent-light color, card background, 1px border, 4px radius\n- **Block:** secondary background, border, 8px radius, 1.25rem padding\n\n### Status Badge\n\n- Pill shape (999px radius)\n- JetBrains Mono font\n- Accent border, card background\n- Blinking cursor animation\n\n### Page List\n\n- Full-width link cards\n- Slide-right effect on hover (`translateX(4px)`)\n- Title + description layout\n\n---\n\n## Effects \u0026 Animation\n\n| Effect | Details |\n|--------|---------|\n| **Background grid** | Subtle 60px grid lines at 3% opacity |\n| **Glow orb** | Radial gradient, 20s drift animation |\n| **Scanline** | 2px horizontal line, 8s vertical sweep |\n| **Pulse dot** | Status indicator, 2s ease-in-out |\n| **Card hover** | 2px lift + shadow + top accent line |\n| **Link glow** | text-shadow on hover |\n\n---\n\n## Responsive Breakpoints\n\n| Breakpoint | Changes |\n|------------|---------|\n| **≤ 768px** | Hero text shrinks, card grid → 1 col, hamburger nav, agent grid → 2 col |\n| **≤ 480px** | Hero text smaller, agent grid → 1 col |\n\n---\n\n## Logo Usage\n\nThe #B4mad wordmark uses:\n- **Font:** Inter, weight 900\n- **Hash symbol:** Accent color (`#458B74`) with glow (`text-shadow: 0 0 12px`)\n- **Status dot:** 8px accent circle with pulse animation\n- Minimum clear space: 0.5rem around the mark\n\nNo standalone logo asset yet — the wordmark **is** the logo.\n\n---\n\n## Dark / Light Mode\n\nCurrently **dark mode only**. All CSS custom properties are defined for the dark theme. Light mode support is planned but not yet implemented.\n\n---\n\n## Implementation\n\nThe canonical CSS lives at:\n```\nassets/css/style.css\n```\n\nAll values use CSS custom properties (`:root` vars) for consistency. When building new pages or components, always reference the design tokens rather than hard-coding values.\n\n### CSS Custom Properties Reference\n\n```css\n:root {\n  --accent: #458B74;\n  --accent-light: #5aad92;\n  --accent-dark: #346b59;\n  --accent-glow: rgba(69, 139, 116, 0.4);\n  --bg-primary: #0a0e14;\n  --bg-secondary: #111820;\n  --bg-card: #151c25;\n  --bg-card-hover: #1a2330;\n  --text-primary: #e0e6ed;\n  --text-secondary: #8899aa;\n  --text-muted: #556677;\n  --border: #1e2a36;\n  --border-accent: rgba(69, 139, 116, 0.3);\n  --danger: #e74c3c;\n  --warning: #f39c12;\n  --info: #3498db;\n  --radius: 8px;\n  --radius-lg: 16px;\n}\n```\n",
  "dateModified": "0001-01-01T00:00:00Z",
  "datePublished": "0001-01-01T00:00:00Z",
  "description": "The canonical visual identity for all #B4mad Industries web properties. This system defines colors, typography, spacing, and component patterns used across our sites and documentation.\nColor Palette Primary Role Name Hex Usage Accent DarkSeaGreen4 #458B74 Brand color, links, highlights, borders Accent Light — #5AAD92 Hover states, headings, inline code Accent Dark — #346B59 Pressed states, scrollbar hover Accent Glow — rgba(69, 139, 116, 0.4) Glows, text-shadow, pulse animations Backgrounds (Dark Mode — Default) Role Hex Usage Primary #0A0E14 Page background Secondary #111820 Code blocks, pre elements Card #151C25 Card backgrounds Card Hover #1A2330 Card hover state Text Role Hex Usage Primary #E0E6ED Headings, body text Secondary #8899AA Paragraphs, descriptions Muted #556677 Footer, meta text, agent roles Borders Role Value Usage Default #1E2A36 Cards, dividers, table borders Accent rgba(69, 139, 116, 0.3) Active/hover borders, section lines Semantic Role Hex Usage Danger #E74C3C Errors, destructive actions Warning #F39C12 Caution, alerts Info #3498DB Informational highlights Typography Font Stack Role Font Fallbacks Body Inter -apple-system, BlinkMacSystemFont, sans-serif Code JetBrains Mono monospace Both loaded via Google Fonts:\n",
  "formats": {
    "html": "https://brenner-axiom.codeberg.page/design-system/",
    "json": "https://brenner-axiom.codeberg.page/design-system/index.json",
    "markdown": "https://brenner-axiom.codeberg.page/design-system/index.md"
  },
  "readingTime": 3,
  "section": "",
  "tags": null,
  "title": "#B4mad Design System",
  "url": "https://brenner-axiom.codeberg.page/design-system/",
  "wordCount": 636
}