diff --git a/design/BrandBook.md b/design/BrandBook.md new file mode 100755 index 0000000..c72cf6a --- /dev/null +++ b/design/BrandBook.md @@ -0,0 +1,50 @@ +# 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. diff --git a/design/HelixForge.jpg b/design/HelixForge.jpg new file mode 100755 index 0000000..da4b8d6 Binary files /dev/null and b/design/HelixForge.jpg differ diff --git a/design/components.html b/design/components.html new file mode 100644 index 0000000..8f2fd54 --- /dev/null +++ b/design/components.html @@ -0,0 +1,149 @@ + + + + + + HelixForge Design System Playground + + + + + + +
+ + +
+
+ Design Token System v1.0 +

HelixForge Components

+

Uniting the natural-language art of discovery with the precise science of delivery.

+
+ + +
+

// Action Interactive Modules (Buttons)

+
+ + + + + + + + + + Evolve system asset → + +
+
+ + +
+

// Structural Components (Milled Blocks)

+
+ + +
+
+ Strand 01 // Discovery +

Human Meaning Sandbox

+

Where software capabilities are thoroughly explored through descriptive dialogue before they are built.

+
+ + +
+
+ Strand 02 // Delivery +

Machine Precision Engine

+

Continuous code compilation, executable verification frameworks, and deterministic truth metrics.

+
+ +
+
+ + +
+

// Layout Paradigms (The Double Helix Split Dashboard)

+
+ + +
+
HF-DISCOVER_NODE
+

<intent_playground>

+ +
+ Status: Ready to analyze + +
+
+ + +
+
HF-DELIVERY_NODE
+

// EXECUTABLE_TRUTH_OUTPUT

+
+

▶ Compiling capability structure...

+

struct CapabilityMesh {

+

id: uuid::Uuid,

+

intent: String,

+

rigor_score: f64,

+

}

+

✔ Verification passed: 100% test integrity achieved.

+
+
+ Metrics: 0.04ms propagation delay + Production Ready +
+
+ +
+
+ + + + +
+ + + diff --git a/design/global.css b/design/global.css new file mode 100644 index 0000000..74423f8 --- /dev/null +++ b/design/global.css @@ -0,0 +1,20 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +@layer utilities { + /* Engineering Desktop Matrix Pattern Background */ + .bg-forge-matrix { + background-image: radial-gradient(#222c3a 1px, transparent 1px); + background-size: 24px 24px; + } + + /* Precision glow effects */ + .glow-cyan { + box-shadow: 0 0 20px rgba(77, 238, 234, 0.15); + } + + .glow-coral { + box-shadow: 0 0 20px rgba(255, 107, 107, 0.15); + } +} diff --git a/design/tailwind.config.js b/design/tailwind.config.js new file mode 100644 index 0000000..d76e391 --- /dev/null +++ b/design/tailwind.config.js @@ -0,0 +1,33 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./*.{html,js}"], + theme: { + extend: { + colors: { + forge: { + bg: '#0B0F13', + 'bg-muted': '#141A22', + border: '#222C3A', + cyan: '#4DEEEA', + blue: '#247BA0', + coral: '#FF6B6B', + amber: '#FFA06A', + text: '#F8FAFC', + 'text-muted': '#94A3B8', + } + }, + fontFamily: { + sans: ['"Plus Jakarta Sans"', 'Inter', 'sans-serif'], + mono: ['"JetBrains Mono"', 'Fira Code', 'monospace'], + }, + backgroundImage: { + 'helix-gradient': 'linear-gradient(135deg, #4DEEEA 0%, #247BA0 40%, #FF6B6B 80%, #FFA06A 100%)', + 'helix-glow': 'radial-gradient(circle, rgba(77,238,234,0.12) 0%, rgba(255,107,107,0.04) 50%, transparent 100%)', + }, + animation: { + 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', + } + }, + }, + plugins: [], +}