Files
helix-forge/design/BrandBook.md

51 lines
2.8 KiB
Markdown
Executable File

# HelixForge — Brand Identity & Design System
**Version 1.0 (2026)**
> "HelixForge envisions a world where software capabilities evolve with understanding, not guesswork. We evolve software capabilities by uniting human understanding and executable precision."
---
## 1. Executive Vision & Philosophy
HelixForge balances two opposing but complementary forces, structured like a double helix:
- **The Strand of Discovery (Human Meaning):** Soft, organic text, fluid transitions, readable natural language typography, and spacious playgrounds that encourage exploration and natural-language clarity.
- **The Strand of Delivery (Machine Precision):** Sharp borders, high-contrast monochrome bases, technical micro-interactions, data-dense layout matrices, and strict geometric structural grids.
---
## 2. Color Palette & Tailwind Configuration
The color palette directly mirrors the industrial crucible and the glowing double helix logo: a dark, tech-heavy canvas illuminated by shifting cyan-to-coral/amber gradients and sparks of the forge.
### Color Specifications
- **Forge Background (`#0B0F13`):** The deep, industrial workspace base.
- **Forge Muted BG (`#141A22`):** Surfaces, cards, and secondary content blocks.
- **Forge Border (`#222C3A`):** Hard engineering limits and structured guidelines.
- **Strand 1 - Discovery Cyan (`#4DEEEA`):** Technical clarity, discovery, and active paths.
- **Strand 1 - Deep Blue (`#247BA0`):** Structural anchors.
- **Strand 2 - Delivery Coral (`#FF6B6B`):** Intent execution, human energy, and active sparks.
- **Strand 2 - Amber Spark (`#FFA06A`):** Highlights, metrics, and warnings.
- **Text Primary (`#F8FAFC`):** Crisp high-contrast visibility.
- **Text Muted (`#94A3B8`):** Human commentary and descriptive context.
The complete Tailwind CSS plugin config configuration can be found in `tailwind.config.js`.
---
## 3. Typography Architecture
- **Headings (Structure & Precision):** A geometric, slightly futuristic Sans-Serif design system font (e.g., *Inter*, *Plus Jakarta Sans*, or *Syncopate* for logos) to represent rigid frameworks.
- **Body Copy (Human Meaning):** Highly readable, modern human-centric Sans-Serif system fonts (*Inter*, *SF Pro*, or *Roboto*).
- **Executable Code (The Truth):** High-fidelity, perfectly aligned monospaced layout systems (*JetBrains Mono*, *Fira Code*).
---
## 4. System File Directory (Assets Included)
The attached ZIP archive contains all ready-to-implement structural assets for the Tailwind system layout implementation:
1. `tailwind.config.js` - Color definitions, typography extending, background gradients.
2. `global.css` - Custom utilities, ambient glows, dot matrices, and custom animations.
3. `components.html` - Raw HTML playground templates featuring Buttons, Cards, Dividers, and Split Screen UI layouts.
---
© 2026 HelixForge. All Rights Reserved. Built for evolution.