1  ---
  2  layout: page
  3  title: "#B4mad Design System"
  4  description: "Corporate design system for all #B4mad Industries web properties"
  5  ---
  6  
  7  # #B4mad Design System
  8  
  9  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.
 10  
 11  ---
 12  
 13  ## Color Palette
 14  
 15  ### Primary
 16  
 17  | Role | Name | Hex | Usage |
 18  |------|------|-----|-------|
 19  | **Accent** | DarkSeaGreen4 | `#458B74` | Brand color, links, highlights, borders |
 20  | **Accent Light** | — | `#5AAD92` | Hover states, headings, inline code |
 21  | **Accent Dark** | — | `#346B59` | Pressed states, scrollbar hover |
 22  | **Accent Glow** | — | `rgba(69, 139, 116, 0.4)` | Glows, text-shadow, pulse animations |
 23  
 24  ### Backgrounds (Dark Mode — Default)
 25  
 26  | Role | Hex | Usage |
 27  |------|-----|-------|
 28  | **Primary** | `#0A0E14` | Page background |
 29  | **Secondary** | `#111820` | Code blocks, pre elements |
 30  | **Card** | `#151C25` | Card backgrounds |
 31  | **Card Hover** | `#1A2330` | Card hover state |
 32  
 33  ### Text
 34  
 35  | Role | Hex | Usage |
 36  |------|-----|-------|
 37  | **Primary** | `#E0E6ED` | Headings, body text |
 38  | **Secondary** | `#8899AA` | Paragraphs, descriptions |
 39  | **Muted** | `#556677` | Footer, meta text, agent roles |
 40  
 41  ### Borders
 42  
 43  | Role | Value | Usage |
 44  |------|-------|-------|
 45  | **Default** | `#1E2A36` | Cards, dividers, table borders |
 46  | **Accent** | `rgba(69, 139, 116, 0.3)` | Active/hover borders, section lines |
 47  
 48  ### Semantic
 49  
 50  | Role | Hex | Usage |
 51  |------|-----|-------|
 52  | **Danger** | `#E74C3C` | Errors, destructive actions |
 53  | **Warning** | `#F39C12` | Caution, alerts |
 54  | **Info** | `#3498DB` | Informational highlights |
 55  
 56  ---
 57  
 58  ## Typography
 59  
 60  ### Font Stack
 61  
 62  | Role | Font | Fallbacks |
 63  |------|------|-----------|
 64  | **Body** | Inter | -apple-system, BlinkMacSystemFont, sans-serif |
 65  | **Code** | JetBrains Mono | monospace |
 66  
 67  Both loaded via Google Fonts:
 68  ```
 69  Inter: 300, 400, 600, 700, 900
 70  JetBrains Mono: 400, 700
 71  ```
 72  
 73  ### Heading Hierarchy
 74  
 75  | Level | Size | Weight | Notes |
 76  |-------|------|--------|-------|
 77  | **H1** (hero) | 3.5rem | 900 | Letter-spacing: -0.03em |
 78  | **H1** (page) | 2.5rem | 900 | Gradient fill (text → accent-light) |
 79  | **H2** | 1.5rem | 700 | Bottom border, 2.5rem top margin |
 80  | **H3** | 1.2rem | 600 | Accent-light color |
 81  | **Body** | 1rem (16px) | 400 | Line-height: 1.7 |
 82  | **Small/Meta** | 0.85rem | — | Used for card text, nav items |
 83  | **Section Label** | 0.75rem | 700 | Uppercase, 0.15em letter-spacing |
 84  
 85  ---
 86  
 87  ## Spacing & Layout
 88  
 89  ### Border Radius
 90  
 91  | Token | Value | Usage |
 92  |-------|-------|-------|
 93  | `--radius` | 8px | Cards, buttons, code blocks |
 94  | `--radius-lg` | 16px | Hero cards, large containers |
 95  | Pill | 999px | Tags, status badges, nav pills |
 96  
 97  ### Container
 98  
 99  - **Max width:** 1200px
100  - **Content max width:** 800px (page-content)
101  - **Padding:** 2rem (desktop), 1rem (mobile)
102  
103  ### Grid
104  
105  - **Card grid:** `repeat(auto-fill, minmax(320px, 1fr))`, gap 1.25rem
106  - **Agent grid:** `repeat(auto-fill, minmax(200px, 1fr))`, gap 1rem
107  
108  ---
109  
110  ## Components
111  
112  ### Cards
113  
114  - Background: `--bg-card` → `--bg-card-hover` on hover
115  - Border: `--border` → `--border-accent` on hover
116  - Top accent line (2px gradient) appears on hover
117  - Lift effect: `translateY(-2px)` + box-shadow on hover
118  - Transition: 0.3s ease
119  
120  ### Navigation
121  
122  - Sticky header with blur backdrop (`blur(20px)`)
123  - Semi-transparent background: `rgba(10, 14, 20, 0.85)`
124  - Nav links: pill-shaped hover with accent background
125  - Mobile: hamburger toggle → vertical dropdown
126  
127  ### Code Blocks
128  
129  - **Inline:** accent-light color, card background, 1px border, 4px radius
130  - **Block:** secondary background, border, 8px radius, 1.25rem padding
131  
132  ### Status Badge
133  
134  - Pill shape (999px radius)
135  - JetBrains Mono font
136  - Accent border, card background
137  - Blinking cursor animation
138  
139  ### Page List
140  
141  - Full-width link cards
142  - Slide-right effect on hover (`translateX(4px)`)
143  - Title + description layout
144  
145  ---
146  
147  ## Effects & Animation
148  
149  | Effect | Details |
150  |--------|---------|
151  | **Background grid** | Subtle 60px grid lines at 3% opacity |
152  | **Glow orb** | Radial gradient, 20s drift animation |
153  | **Scanline** | 2px horizontal line, 8s vertical sweep |
154  | **Pulse dot** | Status indicator, 2s ease-in-out |
155  | **Card hover** | 2px lift + shadow + top accent line |
156  | **Link glow** | text-shadow on hover |
157  
158  ---
159  
160  ## Responsive Breakpoints
161  
162  | Breakpoint | Changes |
163  |------------|---------|
164  | **≤ 768px** | Hero text shrinks, card grid → 1 col, hamburger nav, agent grid → 2 col |
165  | **≤ 480px** | Hero text smaller, agent grid → 1 col |
166  
167  ---
168  
169  ## Logo Usage
170  
171  The #B4mad wordmark uses:
172  - **Font:** Inter, weight 900
173  - **Hash symbol:** Accent color (`#458B74`) with glow (`text-shadow: 0 0 12px`)
174  - **Status dot:** 8px accent circle with pulse animation
175  - Minimum clear space: 0.5rem around the mark
176  
177  No standalone logo asset yet — the wordmark **is** the logo.
178  
179  ---
180  
181  ## Dark / Light Mode
182  
183  Currently **dark mode only**. All CSS custom properties are defined for the dark theme. Light mode support is planned but not yet implemented.
184  
185  ---
186  
187  ## Implementation
188  
189  The canonical CSS lives at:
190  ```
191  assets/css/style.css
192  ```
193  
194  All 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.
195  
196  ### CSS Custom Properties Reference
197  
198  ```css
199  :root {
200    --accent: #458B74;
201    --accent-light: #5aad92;
202    --accent-dark: #346b59;
203    --accent-glow: rgba(69, 139, 116, 0.4);
204    --bg-primary: #0a0e14;
205    --bg-secondary: #111820;
206    --bg-card: #151c25;
207    --bg-card-hover: #1a2330;
208    --text-primary: #e0e6ed;
209    --text-secondary: #8899aa;
210    --text-muted: #556677;
211    --border: #1e2a36;
212    --border-accent: rgba(69, 139, 116, 0.3);
213    --danger: #e74c3c;
214    --warning: #f39c12;
215    --info: #3498db;
216    --radius: 8px;
217    --radius-lg: 16px;
218  }
219  ```