mirror of
https://github.com/CyberMind-FR/secubox-deb.git
synced 2026-07-29 18:36:55 +00:00
CyberMind-FR
fec2ec11d3
- Update Home.md with full SecuBox system overview - Add Architecture-Boot.md (5-layer boot chain, CSPN compliance) - Add Design-System.md (6-module color system, typography) - Add Developer-Guide.md (stack, conventions, patterns) - Add Modules.md (all 125 modules with screenshots) - Update _Sidebar.md with comprehensive navigation - Fix fb_dashboard.py type hint for _read_from_socket Wiki now covers: system overview, architecture, modules, security, development guidelines, Eye Remote, and all hardware platforms. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
185 lines
3.7 KiB
Markdown
185 lines
3.7 KiB
Markdown
# Design System
|
|
|
|
SecuBox uses a **six-module color system** with complementary pairs for visual consistency across all interfaces.
|
|
|
|
---
|
|
|
|
## Module Colors
|
|
|
|
| Module | Code | Color | Hex | Description |
|
|
|--------|------|-------|-----|-------------|
|
|
| **AUTH** | 01 | Orange (Coral Auth) | `#C04E24` | Authentication, zero-trust |
|
|
| **WALL** | 02 | Yellow (Amber Shield) | `#9A6010` | Firewall, nftables |
|
|
| **BOOT** | 03 | Red (Coral Launch) | `#803018` | Deployment, provisioning |
|
|
| **MIND** | 04 | Violet (Violet Mind) | `#3D35A0` | AI, behavioral analysis, nDPId |
|
|
| **ROOT** | 05 | Green (Teal Root) | `#0A5840` | Terminal CLI, Debian system |
|
|
| **MESH** | 06 | Blue (Blue Mesh) | `#104A88` | Network, WireGuard, Tailscale |
|
|
|
|
### Complementary Pairs
|
|
|
|
- **Red ↔ Green** (BOOT ↔ ROOT) — System deployment and operation
|
|
- **Yellow ↔ Violet** (WALL ↔ MIND) — Security and intelligence
|
|
- **Blue ↔ Orange** (MESH ↔ AUTH) — Network and access control
|
|
|
|
---
|
|
|
|
## Color Palette Details
|
|
|
|
### AUTH (Orange)
|
|
```css
|
|
--auth-main: #C04E24;
|
|
--auth-light: #E8845A;
|
|
--auth-xlt: #FAECE7;
|
|
--auth-dark: #7A2A10;
|
|
```
|
|
|
|
### WALL (Yellow/Amber)
|
|
```css
|
|
--wall-main: #9A6010;
|
|
--wall-light: #CC8820;
|
|
--wall-xlt: #FDF3E0;
|
|
--wall-dark: #5A3808;
|
|
```
|
|
|
|
### BOOT (Red)
|
|
```css
|
|
--boot-main: #803018;
|
|
--boot-light: #C06040;
|
|
--boot-xlt: #FAECE7;
|
|
--boot-dark: #5A1E0A;
|
|
```
|
|
|
|
### MIND (Violet)
|
|
```css
|
|
--mind-main: #3D35A0;
|
|
--mind-light: #7068D0;
|
|
--mind-xlt: #EEEDFE;
|
|
--mind-dark: #241D6A;
|
|
```
|
|
|
|
### ROOT (Green/Teal)
|
|
```css
|
|
--root-main: #0A5840;
|
|
--root-light: #148C66;
|
|
--root-xlt: #E1F5EE;
|
|
--root-dark: #063828;
|
|
```
|
|
|
|
### MESH (Blue)
|
|
```css
|
|
--mesh-main: #104A88;
|
|
--mesh-light: #2C70C0;
|
|
--mesh-xlt: #E6F1FB;
|
|
--mesh-dark: #08305A;
|
|
```
|
|
|
|
---
|
|
|
|
## Light Theme Base Colors
|
|
|
|
```css
|
|
--bg: #FFFFFF;
|
|
--surface: #FAFAF8;
|
|
--surface2: #F4F3EF;
|
|
--border: #E2E0D8;
|
|
--border2: #C8C6BE;
|
|
--text: #1A1A18;
|
|
--muted: #6B6963;
|
|
```
|
|
|
|
---
|
|
|
|
## Dark Theme (Eye Remote / Dashboard)
|
|
|
|
```css
|
|
--cosmos-black: #0a0a0f;
|
|
--gold-hermetic: #c9a84c;
|
|
--cinnabar: #e63946;
|
|
--matrix-green: #00ff41;
|
|
--void-purple: #6e40c9;
|
|
--cyber-cyan: #00d4ff;
|
|
--text-primary: #e8e6d9;
|
|
--text-muted: #6b6b7a;
|
|
```
|
|
|
|
---
|
|
|
|
## Typography
|
|
|
|
### Font Stack
|
|
- **Display/Heading**: Space Grotesk (300-700)
|
|
- **Body**: Space Grotesk 400
|
|
- **Monospace/Code**: JetBrains Mono (400, 700)
|
|
|
|
### Usage
|
|
|
|
```css
|
|
/* Display - titles */
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: -2px;
|
|
color: var(--root-main);
|
|
|
|
/* Heading */
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.4px;
|
|
|
|
/* Body */
|
|
font-size: 14-16px;
|
|
font-weight: 400;
|
|
line-height: 1.6-1.7;
|
|
|
|
/* Code/Terminal */
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
```
|
|
|
|
---
|
|
|
|
## Brand Identities
|
|
|
|
| Brand | Color | Usage |
|
|
|-------|-------|-------|
|
|
| **SecuBox·** | Green (Root) | Main product brand |
|
|
| **Gondwana** | Violet (Mind) | Public/external brand |
|
|
| **CyberMind** | Orange (Auth) | Internal/confidential brand |
|
|
|
|
---
|
|
|
|
## Module Icons/Symbols
|
|
|
|
| Module | Symbol | Description |
|
|
|--------|--------|-------------|
|
|
| AUTH | Hexagonal target | Controlled access, verified identity |
|
|
| WALL | Flaming brick wall | nftables, inbound/outbound rules |
|
|
| BOOT | Rocket | Provisioning, fast boot, deployment |
|
|
| MIND | Robot | Automation, behavioral analysis |
|
|
| ROOT | $>_ prompt | Console access, low-level system |
|
|
| MESH | Network gear | WireGuard, Tailscale, mesh topology |
|
|
|
|
---
|
|
|
|
## Spacing System
|
|
|
|
| Size | Pixels | Usage |
|
|
|------|--------|-------|
|
|
| XS | 4px | Icon gaps |
|
|
| S | 8px | Chips |
|
|
| M | 16px | Padding |
|
|
| L | 24px | Sections |
|
|
| XL | 40px | Margins |
|
|
| 2XL | 56px | Cover |
|
|
|
|
---
|
|
|
|
## Grid System
|
|
|
|
- 12-column grid
|
|
- Gap: 8px
|
|
- Border radius: 14px (cards), 6px (swatches), 3px (small elements)
|
|
|
|
---
|
|
|
|
*© 2026 CyberMind · Notre-Dame-du-Cruet, Savoie*
|