Added initial brandbook and design resources

2026-05-22 23:50:31 +02:00
parent 4025e8947d
commit efa088ec8a
5 changed files with 252 additions and 0 deletions
--- a/design/BrandBook.md
+++ 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.
--- a/design/HelixForge.jpg
+++ b/design/HelixForge.jpg
--- a/design/components.html
+++ b/design/components.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HelixForge Design System Playground</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      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: ['Inter', 'sans-serif'],
+            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%)',
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .bg-forge-matrix {
+      background-image: radial-gradient(#222c3a 1px, transparent 1px);
+      background-size: 24px 24px;
+    }
+  </style>
+</head>
+<body class="bg-forge-bg text-forge-text font-sans p-8 bg-forge-matrix min-h-screen">
+
+  <div class="max-w-6xl mx-auto space-y-12">
+    
+    <!-- HEADER BRANDING -->
+    <header class="border-b border-forge-border pb-6 relative overflow-hidden">
+      <div class="absolute top-0 right-0 w-64 h-64 bg-helix-glow pointer-events-none"></div>
+      <span class="text-xs font-mono uppercase tracking-widest text-forge-cyan">Design Token System v1.0</span>
+      <h1 class="text-4xl font-bold tracking-tight mt-1">HelixForge Components</h1>
+      <p class="text-forge-text-muted mt-2 max-w-2xl">Uniting the natural-language art of discovery with the precise science of delivery.</p>
+    </header>
+
+    <!-- SECTION: BUTTON INTERACTION -->
+    <section class="space-y-4">
+      <h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Action Interactive Modules (Buttons)</h2>
+      <div class="flex flex-wrap gap-4 items-center bg-forge-bg-muted p-6 rounded-lg border border-forge-border">
+        
+        <!-- Primary Action -->
+        <button class="relative group px-6 py-2.5 rounded font-medium text-neutral-950 overflow-hidden transition-transform active:scale-95">
+          <span class="absolute inset-0 bg-helix-gradient transition-opacity group-hover:opacity-90"></span>
+          <span class="relative z-10 font-bold tracking-wide">Forge Capability</span>
+        </button>
+
+        <!-- Secondary Action -->
+        <button class="px-6 py-2.5 rounded font-mono text-sm border border-forge-border text-forge-text-muted hover:text-forge-cyan hover:border-forge-cyan bg-forge-bg transition-colors">
+          [explore_intent]
+        </button>
+
+        <!-- Inline Link -->
+        <a href="#" class="text-sm font-medium text-forge-coral hover:text-forge-amber transition-colors flex items-center gap-1">
+          Evolve system asset &rarr;
+        </a>
+      </div>
+    </section>
+
+    <!-- SECTION: CONTAINER CARDS -->
+    <section class="space-y-4">
+      <h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Structural Components (Milled Blocks)</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        
+        <!-- Discovery Block -->
+        <div class="bg-forge-bg-muted border border-forge-border hover:border-forge-cyan/50 transition-all duration-300 p-6 rounded relative overflow-hidden group">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-forge-cyan/5 blur-xl rounded-full group-hover:bg-forge-cyan/10 transition-all duration-500"></div>
+          <span class="text-xs font-mono uppercase tracking-widest text-forge-cyan">Strand 01 // Discovery</span>
+          <h3 class="text-xl font-bold mt-2 mb-2">Human Meaning Sandbox</h3>
+          <p class="text-forge-text-muted text-sm leading-relaxed">Where software capabilities are thoroughly explored through descriptive dialogue before they are built.</p>
+        </div>
+
+        <!-- Delivery Block -->
+        <div class="bg-forge-bg-muted border border-forge-border hover:border-forge-coral/50 transition-all duration-300 p-6 rounded relative overflow-hidden group">
+          <div class="absolute -top-12 -right-12 w-24 h-24 bg-forge-coral/5 blur-xl rounded-full group-hover:bg-forge-coral/10 transition-all duration-500"></div>
+          <span class="text-xs font-mono uppercase tracking-widest text-forge-coral">Strand 02 // Delivery</span>
+          <h3 class="text-xl font-bold mt-2 mb-2">Machine Precision Engine</h3>
+          <p class="text-forge-text-muted text-sm leading-relaxed">Continuous code compilation, executable verification frameworks, and deterministic truth metrics.</p>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- SECTION: THE SPLIT SCREEN SYSTEM -->
+    <section class="space-y-4">
+      <h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Layout Paradigms (The Double Helix Split Dashboard)</h2>
+      <div class="grid grid-cols-1 lg:grid-cols-2 border border-forge-border rounded overflow-hidden">
+        
+        <!-- Left Side: Discovery -->
+        <div class="bg-forge-bg p-8 border-b lg:border-b-0 lg:border-r border-forge-border relative">
+          <div class="absolute top-2 right-2 font-mono text-[10px] text-forge-cyan/40">HF-DISCOVER_NODE</div>
+          <h4 class="text-sm font-mono uppercase text-forge-cyan mb-4">&lt;intent_playground&gt;</h4>
+          <textarea class="w-full h-48 bg-forge-bg-muted border border-forge-border rounded p-4 text-sm text-forge-text placeholder-forge-text-muted/50 focus:outline-none focus:border-forge-cyan" placeholder="Describe the software capability you wish to forge in natural language..."></textarea>
+          <div class="mt-4 flex justify-between items-center">
+            <span class="text-xs text-forge-text-muted">Status: Ready to analyze</span>
+            <button class="text-xs font-mono bg-forge-border hover:bg-forge-border/80 px-3 py-1.5 rounded text-forge-text">Parse Intent</button>
+          </div>
+        </div>
+
+        <!-- Right Side: Delivery -->
+        <div class="bg-forge-bg-muted p-8 relative">
+          <div class="absolute top-2 right-2 font-mono text-[10px] text-forge-coral/40">HF-DELIVERY_NODE</div>
+          <h4 class="text-sm font-mono uppercase text-forge-coral mb-4">// EXECUTABLE_TRUTH_OUTPUT</h4>
+          <div class="bg-forge-bg font-mono text-xs p-4 rounded border border-forge-border text-forge-cyan overflow-x-auto space-y-1">
+            <p class="text-forge-text-muted"><span class="text-forge-amber">▶ Compiling</span> capability structure...</p>
+            <p><span class="text-forge-text">struct</span> <span class="text-forge-amber">CapabilityMesh</span> {</p>
+            <p class="pl-4">id: <span class="text-forge-text">uuid::Uuid</span>,</p>
+            <p class="pl-4">intent: <span class="text-forge-text">String</span>,</p>
+            <p class="pl-4">rigor_score: <span class="text-forge-text">f64</span>,</p>
+            <p>}</p>
+            <p class="text-forge-coral">✔ Verification passed: 100% test integrity achieved.</p>
+          </div>
+          <div class="mt-4 flex justify-between items-center">
+            <span class="text-xs text-forge-text-muted">Metrics: 0.04ms propagation delay</span>
+            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-forge-coral/10 text-forge-coral border border-forge-coral/20">Production Ready</span>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- FOOTER DIVIDER -->
+    <footer class="pt-6 border-t border-forge-border text-center">
+      <p class="text-xs font-mono text-forge-text-muted">HelixForge Design Framework Matrix. Intent &rarr; Structure &rarr; Composable Progress.</p>
+    </footer>
+
+  </div>
+
+</body>
+</html>
--- a/design/global.css
+++ 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);
+  }
+}
--- a/design/tailwind.config.js
+++ 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: [],
+}