generated from coulomb/repo-seed
Added initial brandbook and design resources
This commit is contained in:
50
design/BrandBook.md
Executable file
50
design/BrandBook.md
Executable file
@@ -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.
|
||||||
BIN
design/HelixForge.jpg
Executable file
BIN
design/HelixForge.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
149
design/components.html
Normal file
149
design/components.html
Normal file
@@ -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 →
|
||||||
|
</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"><intent_playground></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 → Structure → Composable Progress.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
20
design/global.css
Normal file
20
design/global.css
Normal file
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
33
design/tailwind.config.js
Normal file
33
design/tailwind.config.js
Normal file
@@ -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: [],
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user