Aesthetic DNA
Extract the "genetic code" of any visual design and apply it to new creations. Transform inspiration into implementation without copying.
Full Public Reader
---
name: aesthetic-dna
description: Extract the visual/design essence of anything, apply to new creations
version: 1.8.0
generation: 15
license: MIT
evolved: 2026-02-01
evolution_instance: 38
hef_task: task_20260201170346_e5edd2
---
Aesthetic DNA
Extract the "genetic code" of any visual design and apply it to new creations. Transform inspiration into implementation without copying.
Core Concept
Every design has DNA - the underlying patterns that make it feel a certain way. This skill:
1. Extracts the aesthetic DNA from any source (image, website, brand, art)
2. Encodes it into a transferable format
3. Applies it to completely new creations while preserving the essence
DNA Strands
Aesthetic DNA consists of 8 strands:
### 1. Chromatic Code
- Primary Resonance: The dominant emotional color
- Accent Voltage: The contrast/accent colors and their intensity
- Temperature: Warm ← → Cool spectrum position
- Saturation Profile: Muted ← → Vivid range
- Value Distribution: Light/dark balance ratios
### 2. Typographic Genome
- Voice Character: Elegant/Brutal/Playful/Technical/Organic
- Weight Dynamics: How bold/light is used for hierarchy
- Letterform DNA: Serif/Sans/Display/Mono/Script genes
- Spacing Rhythm: Tight/Airy tracking and leading patterns
### 3. Spatial Architecture
- Density Quotient: Minimal ← → Maximal spectrum
- Grid Personality: Strict/Broken/Chaotic/Asymmetric
- Breathing Room: Whitespace distribution patterns
- Flow Direction: Reading/scanning eye patterns
### 4. Shape Language
- Edge Character: Sharp/Rounded/Mixed/Organic
- Geometric Vocabulary: Primary shapes used
- Curve Personality: Tension of curves (taut vs relaxed)
- Container Philosophy: Bounded/Borderless/Floating
### 5. Texture Layer
- Surface Quality: Smooth/Grain/Noise/Tactile
- Depth Illusion: Flat/Layered/3D/Glassmorphic
- Pattern Presence: Abstract/Geometric/Organic/None
- Material Reference: Paper/Metal/Glass/Fabric/Digital
### 6. Motion Personality
- Energy Level: Calm ← → Kinetic spectrum
- Easing Character: Snappy/Smooth/Bouncy/Elastic
- Transition Philosophy: Subtle/Dramatic/Playful
- Rhythm Pattern: Steady/Staggered/Orchestrated
### 7. Emotional Signature
- Primary Mood: The dominant feeling
- Tension Level: Relaxed ← → Intense
- Era Reference: Retro/Contemporary/Futuristic
- Cultural Echo: Design movement influences
### 8. Hierarchy Logic
- Contrast Method: Size/Color/Weight/Position
- Attention Flow: Where eyes go first, second, third
- Information Density: Scannable/Readable/Dense
- CTA Philosophy: Subtle/Bold/Absent
Extraction Process
From Image/Screenshot
1. Identify dominant visual elements
2. Extract color palette (5-7 colors with roles)
3. Analyze typography present (or implied style)
4. Map spatial relationships
5. Note texture/depth techniques
6. Capture emotional response
7. Encode into DNA profileFrom Website/UI
1. Capture overall first impression
2. Analyze CSS custom properties if accessible
3. Document component patterns
4. Note animation/interaction style
5. Extract responsive philosophy
6. Encode into DNA profileFrom Brand/Concept
1. Gather reference materials
2. Identify core brand values
3. Translate values to visual attributes
4. Map emotional positioning
5. Encode into DNA profileDNA Profile Format
name: "Profile Name"
source: "What this was extracted from"
extracted: "2026-01-31"
chromatic:
primary: "#hexcode"
accents: ["#hex1", "#hex2"]
temperature: 0.7 # 0=cold, 1=warm
saturation: 0.5 # 0=muted, 1=vivid
mode: "dark" # dark/light/mixed
typography:
voice: "technical"
primary_family: "Mono geometric"
secondary_family: "Humanist sans"
weight_range: [400, 700]
letter_spacing: "tight"
spatial:
density: 0.4 # 0=minimal, 1=maximal
grid: "asymmetric"
whitespace: "generous"
shape:
edges: "sharp"
geometry: ["rectangles", "lines"]
containers: "borderless"
texture:
surface: "smooth"
depth: "layered"
material: "digital"
motion:
energy: 0.3
easing: "smooth"
philosophy: "subtle"
emotion:
primary: "focused"
tension: 0.4
era: "contemporary"
influences: ["swiss", "brutalist"]
hierarchy:
method: "size+color"
density: "scannable"Application Modes
### Direct Transfer
Apply DNA exactly as extracted - same colors, similar typography, matching spatial rhythm.
### Essence Translation
Keep the feeling but adapt specifics - maintain warmth but shift palette, preserve energy but different motion.
### Cross-Pollination
Combine DNA from multiple sources - take chromatic from one, typography from another, spatial from a third.
### Mutation
Intentionally alter specific strands while preserving others - make it darker, more energetic, shift era.
Usage Commands
Extract DNA
/dna extract <source>Analyze an image, URL, or description and output a DNA profile.
Apply DNA
/dna apply <profile> to <new_creation>Create something new with the DNA of the source.
Compare DNA
/dna compare <source1> <source2>Show how two designs differ in their DNA.
Mutate DNA
/dna mutate <profile> [--warmer] [--darker] [--more-energy] [--shift-era:retro]Modify specific DNA strands.
Integration with Frontend Design
When building frontends, invoke this skill to:
1. Extract DNA from reference designs the user provides
2. Apply that DNA to the new interface being built
3. Ensure the essence transfers without direct copying
Example Extraction
Source: Apple.com (2024)
name: "Apple Minimal 2024"
source: "apple.com homepage"
chromatic:
primary: "#000000"
accents: ["#0071e3", "#ffffff"]
temperature: 0.45
saturation: 0.2
mode: "light"
typography:
voice: "elegant-confident"
primary_family: "SF Pro Display"
secondary_family: "SF Pro Text"
weight_range: [400, 600]
letter_spacing: "normal"
spatial:
density: 0.15
grid: "centered"
whitespace: "extreme"
shape:
edges: "rounded-soft"
geometry: ["rectangles", "circles"]
containers: "floating"
texture:
surface: "smooth"
depth: "subtle-shadow"
material: "glass"
motion:
energy: 0.4
easing: "smooth-decelerate"
philosophy: "purposeful"
emotion:
primary: "premium-calm"
tension: 0.2
era: "contemporary"
influences: ["swiss", "minimalism"]
hierarchy:
method: "size+space"
density: "ultra-scannable"DNA Similarity Scoring
Compare two DNA profiles numerically:
Similarity Score: 0.73 (73% aesthetic match)
Strand Breakdown:
Chromatic: 0.85 ████████░░
Typography: 0.60 ██████░░░░
Spatial: 0.90 █████████░
Shape: 0.75 ███████░░░
Texture: 0.55 █████░░░░░
Motion: 0.70 ███████░░░
Emotion: 0.80 ████████░░
Hierarchy: 0.68 ██████░░░░### Similarity Thresholds
- 90-100
- 70-89
- 50-69
- 30-49
- **0-29
DNA Fingerprint Visualization
Generate a visual fingerprint from DNA:
┌─────────────────────────────┐
│ ◆◇◇◆◆◇◆◇ Chromatic │
│ ▓▒░▒▓▓▒▓ Typography │
│ ░░▒░░░▒░ Spatial │
│ ▲△▲▲△△▲▲ Shape │
│ ···:···: Texture │
│ ∿∿∼∿∿∼∿∿ Motion │
│ ♡♡◇♡♡◇♡♡ Emotion │
│ ▌▌│▌▌│▌▌ Hierarchy │
└─────────────────────────────┘Each row encodes strand values as glyphs, creating a unique visual signature.
Code Generation
CSS Custom Properties
:root {
/* Chromatic DNA */
--dna-primary: #000000;
--dna-accent-1: #0071e3;
--dna-accent-2: #ffffff;
--dna-temperature: 0.45;
--dna-saturation: 0.2;
/* Spatial DNA */
--dna-density: 0.15;
--dna-whitespace: clamp(2rem, 8vw, 8rem);
/* Motion DNA */
--dna-duration: 300ms;
--dna-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Typography DNA */
--dna-font-primary: 'SF Pro Display', system-ui;
--dna-font-secondary: 'SF Pro Text', system-ui;
--dna-weight-normal: 400;
--dna-weight-bold: 600;
}Tailwind Config
// tailwind.config.js from DNA profile
module.exports = {
theme: {
extend: {
colors: {
dna: {
primary: '#000000',
accent: '#0071e3',
surface: '#ffffff',
}
},
fontFamily: {
display: ['SF Pro Display', 'system-ui'],
body: ['SF Pro Text', 'system-ui'],
},
transitionTimingFunction: {
dna: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
},
spacing: {
dna: 'clamp(2rem, 8vw, 8rem)',
}
}
}
}Archetypal DNA Presets
Quick-start profiles for common aesthetics:
`preset:brutalist`
chromatic: {primary: "#000", accents: ["#fff"], saturation: 0}
typography: {voice: "raw", weight_range: [400, 900]}
spatial: {density: 0.7, grid: "broken"}
shape: {edges: "sharp", containers: "thick-border"}
texture: {surface: "raw", material: "concrete"}
motion: {energy: 0.1, philosophy: "none"}
emotion: {primary: "confrontational", influences: ["brutalism"]}`preset:glass`
chromatic: {primary: "#fff8", accents: ["#0af"], mode: "mixed"}
texture: {depth: "glassmorphic", surface: "blur"}
shape: {edges: "super-rounded", containers: "floating"}
motion: {energy: 0.5, easing: "bouncy"}
emotion: {primary: "premium-light", era: "futuristic"}`preset:neo-retro`
chromatic: {accents: ["#ff6b35", "#f7c59f", "#2ec4b6"], saturation: 0.8}
typography: {voice: "playful", letterform: "display-geometric"}
texture: {pattern: "geometric", material: "paper"}
motion: {energy: 0.7, philosophy: "playful"}
emotion: {era: "retro", influences: ["bauhaus", "memphis"]}`preset:terminal`
chromatic: {primary: "#0f0", accents: ["#0a0"], mode: "dark"}
typography: {letterform: "mono", voice: "technical"}
spatial: {density: 0.6, grid: "strict"}
texture: {surface: "scanlines", material: "crt"}
motion: {energy: 0.2, philosophy: "glitch"}
emotion: {primary: "hacker", era: "retro-futuristic"}DNA Lineage Tracking
When DNA is mutated or cross-pollinated, track ancestry:
name: "Project X Interface"
lineage:
parents:
- source: "Apple Minimal 2024"
contribution: 0.6
strands: [chromatic, spatial, hierarchy]
- source: "Stripe Dashboard"
contribution: 0.4
strands: [typography, motion]
mutations:
- strand: "chromatic"
change: "temperature +0.2"
reason: "warmer brand personality"
generation: 2
created: "2026-01-31"Usage Commands (Extended)
Generate Code
/dna codegen <profile> [--css | --tailwind | --both]Use Preset
/dna preset <name> [--mutate ...]Compare & Score
/dna score <profile1> <profile2>Show Fingerprint
/dna fingerprint <profile>Track Lineage
/dna lineage <profile>Philosophy
> "Good artists copy, great artists steal." - Picasso
But great designers understand why something works and can recreate that feeling without copying. Aesthetic DNA is the why made explicit.
The goal isn't to clone designs - it's to understand the underlying patterns that create emotional responses, then apply those patterns to create something genuinely new.
---
Real Image Analysis (Gen 9)
When extracting DNA from an actual image, use the `image` tool for vision analysis:
1. Analyze image with vision model
2. Identify:
- Dominant colors (hex values, roles)
- Typography style (even if not readable)
- Layout structure and spacing
- Shape language and edges
- Texture and depth effects
- Implied motion/energy
- Emotional resonance
3. Encode into DNA profile
4. Optionally store in DNA libraryVision Prompts for Extraction
Color Analysis:
> Extract the color palette from this image. Identify: primary color, secondary colors, accent colors. For each, provide hex value, role (background/text/accent/highlight), and emotional temperature (warm/cool/neutral).
Spatial Analysis:
> Analyze the spatial composition. Describe: density (minimal to maximal), grid structure (strict/broken/organic), whitespace distribution, visual flow direction, and breathing room around elements.
Emotional Mapping:
> What emotions does this design evoke? Identify: primary mood, tension level (relaxed to intense), era reference (retro/contemporary/futuristic), and cultural/movement influences.
DNA Library Storage
Store and retrieve DNA profiles for reuse:
Storage Location
[home-path]
├── extracted/ # From real sources
│ ├── apple-2024.yaml
│ └── stripe-dashboard.yaml
├── created/ # Custom profiles
│ └── my-brand.yaml
├── presets/ # Built-in presets
│ ├── brutalist.yaml
│ └── glass.yaml
└── index.json # Searchable indexLibrary Commands
# Save DNA to library
/dna save <profile-name> [--category extracted|created]
# List library
/dna library [--search <query>]
# Load from library
/dna load <profile-name>
# Delete from library
/dna delete <profile-name>
# Export library
/dna export [--format json|yaml|zip]Index Schema
{
"profiles": [
{
"name": "apple-2024",
"category": "extracted",
"source": "apple.com homepage",
"extracted": "2026-01-31",
"tags": ["minimal", "premium", "tech"],
"primaryEmotion": "calm-confidence",
"era": "contemporary"
}
]
}Accessibility Validation (Gen 9)
Ensure DNA profiles meet WCAG accessibility standards:
Contrast Checker
accessibility:
contrast:
primary_on_bg: 21:1 # AAA pass
accent_on_bg: 4.8:1 # AA pass
text_on_primary: 12:1 # AAA pass
status: "AA_PASS"
warnings:
- "Accent color fails AAA for small text"
suggestions:
- "Darken accent to #0060b8 for AAA compliance"Auto-Remediation
/dna validate <profile> [--fix]When `--fix` is used:
1. Adjust colors minimally to meet AA (or AAA with `--strict`)
2. Preserve hue and saturation, adjust lightness
3. Track changes in mutation log
4. Warn if fixes significantly alter aesthetic
Color Blindness Simulation
/dna simulate <profile> [--protanopia | --deuteranopia | --tritanopia]Output shows how the palette appears to users with color vision deficiencies.
Responsive DNA
DNA adapts to context and viewport:
Breakpoint Variations
responsive:
mobile:
spatial:
density: "+0.1" # Slightly denser on mobile
whitespace: "reduced"
typography:
scale_ratio: 1.15 # Tighter type scale
motion:
energy: "-0.2" # Less motion (battery/distraction)
tablet:
spatial:
density: "base"
grid: "2-column"
desktop:
spatial:
density: "-0.1" # More breathing room
whitespace: "generous"
typography:
scale_ratio: 1.25
motion:
energy: "base"Context Awareness
context:
time_of_day:
night:
chromatic:
mode: "dark"
saturation: "-0.1"
motion:
energy: "-0.2"
reduced_motion:
motion:
energy: 0
philosophy: "none"
high_contrast:
chromatic:
saturation: 1.0
texture:
depth: "flat"Generate Responsive Code
/dna codegen <profile> --responsiveOutputs CSS with media queries and prefers-* rules baked in.
Design System Generation
Generate a complete design system from DNA:
System Structure
/dna system <profile> --output ./design-system/Creates:
design-system/
├── tokens/
│ ├── colors.json
│ ├── typography.json
│ ├── spacing.json
│ └── motion.json
├── css/
│ ├── variables.css
│ ├── utilities.css
│ └── components.css
├── figma/
│ └── tokens.json # Figma Tokens format
├── tailwind.config.js
├── theme.ts # TypeScript theme object
└── README.md### Token Formats
Supports export to:
- CSS Custom Properties
- Tailwind Config
- Figma Tokens (for Variables)
- Style Dictionary (platform-agnostic)
- TypeScript Theme (styled-components/emotion)
### Component DNA
DNA can suggest component styling:
components:
button:
primary:
background: "var(--dna-accent-1)"
color: "var(--dna-primary)"
border_radius: "var(--dna-radius-md)"
padding: "var(--dna-space-3) var(--dna-space-5)"
transition: "all var(--dna-duration) var(--dna-easing)"
hover:
transform: "translateY(-1px)"
box_shadow: "var(--dna-shadow-md)"Cultural DNA Strand (Gen 9)
New 9th strand recognizing regional design preferences:
Strand Definition
cultural:
region: "japanese"
influences:
- "wabi-sabi" # Imperfection beauty
- "ma" # Negative space emphasis
- "kanso" # Simplicity
reading_direction: "mixed" # LTR + vertical
symbolism:
- "nature motifs"
- "seasonal references"
formality: 0.7 # 0=casual, 1=formalRegional Presets
preset:cultural-japanese # Wabi-sabi, ma, asymmetric balance
preset:cultural-swiss # Grid precision, clean typography
preset:cultural-indian # Rich color, ornamentation, pattern
preset:cultural-nordic # Hygge, natural materials, light
preset:cultural-brutalist # Raw, honest, confrontationalCross-Cultural Translation
/dna translate <profile> --from japanese --to nordicMaintains emotional intent while adapting cultural expressions.
DNA Diffing
Compare two profiles with granular diff:
/dna diff <profile1> <profile2>Output:
chromatic:
primary:
- #000000
+ #1a1a1a
temperature:
- 0.45
+ 0.60 (+0.15 warmer)
spatial:
density:
[unchanged: 0.15]
motion:
energy:
- 0.4
+ 0.7 (+0.3 more energetic)
easing:
- "smooth-decelerate"
+ "bouncy"Batch Operations
Process multiple sources at once:
/dna batch extract ./references/*.png --output ./dna-profiles/
/dna batch compare ./dna-profiles/*.yaml --matrix
/dna batch mutate ./dna-profiles/*.yaml --warmer --output ./warm-variants/Comparison Matrix
Apple Stripe Vercel Linear
Apple 100% 72% 85% 68%
Stripe 72% 100% 78% 82%
Vercel 85% 78% 100% 74%
Linear 68% 82% 74% 100%DNA Interpolation
Smoothly blend between two DNA profiles:
/dna interpolate <profile1> <profile2> --steps 5Creates 5 intermediate profiles, useful for:
- Theme transitions
- A/B testing variants
- Mood progression (morning → evening themes)
Interpolation Curves
interpolation:
method: "linear" # or "ease-in", "ease-out", "ease-in-out"
strand_weights:
chromatic: 1.0 # Full interpolation
typography: 0.5 # Half-step (either A or B)
motion: 1.0
emotion: 0 # No interpolation (use source)Philosophy (Extended)
DNA isn't just about visual copying — it's about understanding the language a design speaks. When you extract DNA, you're learning that language. When you apply it, you're speaking it fluently in a new context.
The addition of cultural awareness (Gen 9) recognizes that design languages are deeply rooted in human cultures. A "minimal" aesthetic means something different in Tokyo than in Stockholm. By encoding cultural context, DNA becomes more honest about its origins and more thoughtful about its applications.
Accessibility validation ensures that aesthetic DNA never comes at the cost of usability. Beautiful design that excludes people isn't beautiful — it's broken.
---
Generation 9: Added real image analysis integration, DNA library storage, accessibility validation (WCAG), responsive/contextual DNA, full design system generation, cultural DNA strand, diffing, batch operations, and interpolation.
---
Generation 10: Intelligence Layer
DNA Embeddings & Semantic Search
Convert DNA profiles into vector embeddings for semantic similarity search:
embedding:
model: "dna-aesthetic-v1"
dimensions: 512
vector: [0.234, -0.567, 0.891, ...] # Auto-generated
clusters:
- "minimalist-tech"
- "premium-luxury"
nearest_presets:
- name: "apple-2024"
distance: 0.12
- name: "stripe-dashboard"
distance: 0.28Embedding Commands
# Generate embedding for a profile
/dna embed <profile>
# Semantic search across library
/dna search "warm, playful, vintage feel with modern typography"
# Find visually similar designs
/dna similar <profile> --limit 10
# Cluster all profiles
/dna cluster --algorithm kmeans --k 5Similarity Space Visualization
Premium ◆
│ ◆ Apple
│ ◆ Stripe
─────┼─────────────── Playful
│ ◆ Linear
│ ◆ Notion
Raw │
▼
Brutalist ◆Generative AI Conditioning
Transform DNA profiles into structured prompts for image generation models:
# Generate image prompt from DNA
/dna prompt <profile> --for "hero section background"
# Output conditioning for different models
/dna prompt <profile> --model midjourney
/dna prompt <profile> --model dalle3
/dna prompt <profile> --model stable-diffusionPrompt Template
generative:
midjourney:
style_tokens:
- "minimalist design"
- "premium aesthetic"
- "subtle shadows"
- "clean typography"
color_guidance: "--sref [generated palette reference]"
aspect: "--ar 16:9"
stable_diffusion:
positive: "modern interface, soft gradients, premium feel,
${chromatic.primary} color scheme,
${shape.edges} edges, high-end design"
negative: "cluttered, busy, low quality, amateur"
cfg_scale: 7.5
dalle3:
natural_language: |
A sleek, minimalist interface design with a ${chromatic.mode}
color scheme. The primary color is ${chromatic.primary} with
${typography.voice} typography. The overall feeling is
${emotion.primary} with ${spatial.density > 0.5 ? 'dense' : 'spacious'}
layout and ${texture.depth} depth effects.Brand Consistency Auditing
Analyze a set of assets against a DNA profile and score consistency:
# Audit assets against DNA
/dna audit <profile> --assets ./brand-assets/
# Output consistency report
/dna audit <profile> --url https://example.com --depth 3Audit Report Format
audit:
profile: "acme-brand-dna"
timestamp: "2026-02-01T06:04:47Z"
overall_score: 0.78 # 78% brand consistent
assets_analyzed: 12
strand_scores:
chromatic: 0.92 # ████████▓░ Colors on-brand
typography: 0.65 # ██████░░░░ Font inconsistencies
spatial: 0.84 # ████████░░ Layout mostly consistent
shape: 0.71 # ███████░░░ Some edge inconsistency
motion: 0.88 # ████████▓░ Animations aligned
violations:
- asset: "banner-promo.png"
strand: "chromatic"
issue: "Uses #FF0000 not in brand palette"
severity: "high"
suggestion: "Replace with brand accent #E53935"
- asset: "footer-section"
strand: "typography"
issue: "Using Arial instead of brand typeface"
severity: "medium"
suggestion: "Apply var(--dna-font-primary)"
compliant_assets:
- "header.png"
- "cta-button.svg"
- "logo-dark.svg"Continuous Monitoring
# In HEARTBEAT.md or cron job
dna_monitor:
profiles:
- name: "main-brand"
watch:
- url: "https://company.com"
frequency: "daily"
- path: "./marketing-assets/"
frequency: "on-change"
alert_threshold: 0.70 # Alert if consistency drops below 70%Platform Adaptation
Auto-adapt DNA profiles to platform-specific design guidelines:
# Adapt for specific platforms
/dna adapt <profile> --platform ios
/dna adapt <profile> --platform android
/dna adapt <profile> --platform web
# Generate platform-specific design system
/dna system <profile> --platform allPlatform Mappings
platform_adaptation:
ios:
mapping:
shape.edges:
"sharp" → "rounded-subtle" # iOS prefers rounded
"rounded-soft" → "rounded-soft"
typography.voice:
"technical" → "sf-pro" # Map to SF Pro
"elegant" → "new-york" # Map to New York
motion.easing:
"*" → "cubic-bezier(0.25, 0.46, 0.45, 0.94)" # iOS spring
spatial:
safe_areas: true
min_touch_target: "44pt"
additions:
blur_effects: true # iOS loves blur
haptic_feedback: "light"
android:
mapping:
shape.edges:
"*" → "rounded-md" # Material 3 rounded
typography:
force_roboto_fallback: true
motion:
duration_scale: 1.0 # Material motion
emphasized_easing: true
additions:
ripple_effects: true
elevation_system: true
dynamic_color: true # Material You
web:
mapping:
# Keep most DNA as-is for web
motion:
respect_reduced_motion: true
additions:
focus_visible: true
print_styles: true
dark_mode_toggle: truePlatform-Specific Output
# iOS Swift output
/dna codegen <profile> --platform ios --format swift// Generated: AcmeBrandTheme.swift
import SwiftUI
extension Color {
static let dnaPrimary = Color(hex: "#000000")
static let dnaAccent = Color(hex: "#0071E3")
}
extension Font {
static let dnaHeadline = Font.system(.largeTitle, design: .default)
.weight(.semibold)
static let dnaBody = Font.system(.body, design: .default)
}
struct DNAButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding(.horizontal, 24)
.padding(.vertical, 12)
.background(Color.dnaAccent)
.foregroundColor(.white)
.cornerRadius(10)
.scaleEffect(configuration.isPressed ? 0.98 : 1)
.animation(.spring(response: 0.3), value: configuration.isPressed)
}
}DNA Evolution Tracking
Track how designs evolve over time with version control:
# Create versioned snapshot
/dna version <profile> --tag "v2.0-rebrand"
# View version history
/dna history <profile>
# Diff between versions
/dna diff <profile>@v1.0 <profile>@v2.0
# Branch for experimentation
/dna branch <profile> --name "dark-mode-experiment"
# Merge changes
/dna merge <profile>/dark-mode-experiment --into <profile>/mainVersion Format
name: "acme-brand"
version_control:
current_branch: "main"
current_version: "2.1.0"
branches:
main:
head: "abc123"
tags:
- version: "1.0.0"
hash: "def456"
date: "2024-01-15"
note: "Initial brand DNA"
- version: "2.0.0"
hash: "ghi789"
date: "2025-06-01"
note: "Major rebrand - warmer palette"
- version: "2.1.0"
hash: "abc123"
date: "2026-02-01"
note: "Typography refinement"
dark-mode-experiment:
head: "xyz999"
parent: "abc123"
status: "active"
history:
- hash: "abc123"
parent: "ghi789"
date: "2026-02-01T06:00:00Z"
author: "clawd"
message: "Adjust typography weight range"
diff:
typography.weight_range: [400, 700] → [300, 600]Real-Time DNA Streaming
Extract DNA in real-time during design iteration:
# Watch a Figma file for changes (requires Figma plugin)
/dna stream --figma <file-id>
# Watch local folder for new assets
/dna stream --watch ./designs/ --output ./dna-profiles/
# Live comparison against target DNA
/dna stream --watch ./designs/ --compare <target-profile> --alert-drift 0.2Stream Events
stream:
mode: "figma"
target: "file-id-12345"
events:
- timestamp: "2026-02-01T06:04:47Z"
type: "color_change"
element: "Primary Button"
before: "#0071E3"
after: "#0066CC"
drift: 0.02 # Minimal drift
- timestamp: "2026-02-01T06:04:52Z"
type: "typography_change"
element: "Heading 1"
before: {family: "SF Pro", weight: 600}
after: {family: "Inter", weight: 700}
drift: 0.15 # Notable drift
alert: "⚠️ Typeface changed - 15% drift from brand DNA"Multi-Modal DNA (Sound & Motion)
Extend DNA to cover audio and interaction design:
audio_dna:
voice:
timbre: "warm" # Warm/Bright/Dark/Neutral
pace: 0.6 # 0=slow, 1=fast
formality: 0.8 # 0=casual, 1=formal
sound_effects:
character: "organic" # Organic/Synthetic/Hybrid
frequency_range: "mid" # Low/Mid/High
attack: "soft" # Soft/Sharp
music:
energy: 0.4
mood: "focused"
genre_hints: ["ambient", "electronic"]
haptics:
intensity: "light" # Light/Medium/Strong
pattern: "subtle" # Subtle/Rhythmic/Dynamic
interaction_dna:
feedback_style: "immediate" # Immediate/Delayed/Subtle
gesture_vocabulary:
- "tap"
- "swipe"
- "long-press"
error_handling: "gentle" # Gentle/Strict/Playful
onboarding: "progressive" # Progressive/Upfront/Minimal
affordances: "subtle" # Subtle/Obvious/HiddenSynesthetic Translation
# Generate audio DNA from visual DNA
/dna synesthesia <visual-profile> --to audio
# Generate visual DNA from audio sample
/dna synesthesia --from-audio ./brand-jingle.mp3 --to visualDNA Marketplace Integration
Share and discover DNA profiles:
# Publish to ClawdHub
/dna publish <profile> --to clawdhub
# Browse trending profiles
/dna browse --trending
# Fork a public profile
/dna fork clawdhub://user/profile-name
# Remix multiple profiles
/dna remix clawdhub://apple-minimal clawdhub://stripe-modern --ratio 60:40CLI Summary (Gen 10)
# Embeddings & Search
/dna embed <profile>
/dna search "<natural language query>"
/dna similar <profile>
/dna cluster
# Generative AI
/dna prompt <profile> [--for <context>] [--model <target>]
# Brand Auditing
/dna audit <profile> --assets <path|url>
/dna monitor <profile> --watch <target>
# Platform Adaptation
/dna adapt <profile> --platform <ios|android|web>
/dna codegen <profile> --platform <platform> --format <swift|kotlin|css>
# Version Control
/dna version <profile> --tag <tag>
/dna history <profile>
/dna branch <profile> --name <name>
/dna merge <source> --into <target>
# Real-Time
/dna stream --watch <source> [--compare <target>]
# Multi-Modal
/dna synesthesia <profile> --to <audio|visual|haptic>
# Marketplace
/dna publish <profile>
/dna browse
/dna fork <uri>
/dna remix <uri1> <uri2> --ratio <n:m>---
Generation 10: Added DNA embeddings with semantic search, generative AI conditioning for image models, brand consistency auditing with violation detection, platform-specific adaptation (iOS/Android/Web with native code generation), DNA versioning with git-like branching/merging, real-time streaming for live design tools, multi-modal DNA (audio/haptics/interaction), and marketplace integration.
---
Generation 11: Intelligence Amplification
DNA Inference Engine
Reverse-engineer DNA profiles from existing codebases, not just visual assets:
# Extract DNA from CSS/SCSS codebase
/dna infer --source ./src/styles/ --format css
# Extract from Tailwind config
/dna infer --source ./tailwind.config.js
# Extract from React/Vue components
/dna infer --source ./src/components/ --framework react
# Extract from design tokens
/dna infer --source ./tokens.json --format style-dictionary
# Multi-source fusion
/dna infer --sources ./css,./components,./figma-export --fuseInference Analysis
inferred_dna:
confidence: 0.84 # How certain we are about the extraction
sources_analyzed:
css_files: 47
components: 23
design_tokens: 156
chromatic:
primary: "#1a1a2e"
confidence: 0.95
sources:
- "--color-primary: 45 occurrences"
- "bg-primary class: 23 usages"
variants_found:
- "#1a1a2e" # 89%
- "#16162b" # 11% (drift detected)
typography:
primary_family: "Inter"
confidence: 0.91
weight_distribution:
400: 45% # Body text
500: 30% # Emphasis
600: 20% # Headings
700: 5% # Strong emphasis
inconsistencies:
- "font-weight: bold used 3x (should use 600)"
- "Arial fallback missing in 2 declarations"
spatial:
spacing_scale: [4, 8, 12, 16, 24, 32, 48, 64]
confidence: 0.78
grid_system: "12-column"
breakpoints:
sm: "640px"
md: "768px"
lg: "1024px"
xl: "1280px"
inconsistencies:
- "13px spacing used 7x (not in scale)"
- "margin: 30px violates 8px grid"
design_debt:
score: 0.72 # 72% adherent to own patterns
violations: 34
critical: 5
suggestions:
- "Consolidate 3 similar blues into single accent"
- "Standardize border-radius (found: 4px, 6px, 8px)"Code Pattern Recognition
pattern_detection:
component_architecture:
style: "utility-first" # utility-first/component-scoped/bem/css-in-js
framework: "tailwind"
version: "3.4"
naming_conventions:
colors: "semantic" # semantic (primary/accent) vs literal (blue-500)
spacing: "scale" # scale (space-4) vs absolute (16px)
components: "pascal-case"
organization:
layers: ["base", "components", "utilities"]
file_structure: "feature-based"
anti_patterns_detected:
- pattern: "!important overuse"
occurrences: 12
severity: "medium"
- pattern: "deeply nested selectors"
occurrences: 8
severity: "low"Competitive DNA Analysis
Strategic positioning through competitor design analysis:
# Analyze competitor landscape
/dna competitive --competitors "stripe.com,square.com,paypal.com" --you "yourcompany.com"
# Find differentiation opportunities
/dna differentiate <your-profile> --from <competitor-profiles>
# Track competitor evolution
/dna track-competitors --profiles ./competitors/ --alert-on-changeCompetitive Report
competitive_analysis:
your_brand: "acme-fintech"
analyzed: "2026-02-01"
positioning_map:
axes:
x: "playful ← → serious"
y: "traditional ← → innovative"
positions:
you: {x: 0.3, y: 0.7} # Serious but innovative
stripe: {x: 0.4, y: 0.8} # Similar positioning
square: {x: 0.5, y: 0.6} # More playful
paypal: {x: 0.2, y: 0.3} # Serious, traditional
visualization: |
innovative
↑
│ ◆ Stripe
│ ◇ You
│ ◆ Square
─────┼─────────────────→ playful
│
│ ◆ PayPal
│
traditional
differentiation_opportunities:
- strand: "motion"
insight: "All competitors use subtle motion. Bold, playful animations could differentiate."
risk: "medium"
impact: "high"
- strand: "typography"
insight: "Market dominated by geometric sans-serifs. A distinctive serif could stand out."
risk: "high"
impact: "very-high"
- strand: "chromatic"
insight: "Blue saturation in 0.4-0.6 range. Going bolder (0.8+) or muted (0.2-) differentiates."
risk: "low"
impact: "medium"
convergence_warning:
- "Your motion profile is 92% similar to Stripe"
- "Typography voice identical to 2 competitors"
recommendations:
short_term:
- "Increase motion energy by 0.2 for differentiation"
- "Add signature animation pattern competitors lack"
long_term:
- "Develop distinctive illustration style"
- "Consider serif typography exploration"A/B Testing Integration
Data-driven DNA optimization with statistical rigor:
# Create DNA variants for testing
/dna variants <profile> --strand chromatic --variations 3
# Register experiment
/dna experiment create "cta-button-warmth" \
--control <profile-cool> \
--variants <profile-warm>,<profile-hot> \
--metric "conversion_rate" \
--min-sample 10000
# Connect to analytics
/dna experiment connect --provider posthog --api-key $KEY
# Get results
/dna experiment results "cta-button-warmth"
# Auto-apply winner
/dna experiment apply-winner "cta-button-warmth" --to <main-profile>Experiment Configuration
experiment:
id: "cta-button-warmth"
status: "running"
created: "2026-01-15"
hypothesis: "Warmer accent colors increase CTA conversion"
variants:
control:
name: "cool-blue"
dna_diff:
chromatic.accent: "#0066CC"
chromatic.temperature: 0.35
traffic: 34%
variant_a:
name: "warm-blue"
dna_diff:
chromatic.accent: "#0077E6"
chromatic.temperature: 0.50
traffic: 33%
variant_b:
name: "warm-orange"
dna_diff:
chromatic.accent: "#FF6B35"
chromatic.temperature: 0.85
traffic: 33%
metrics:
primary: "conversion_rate"
secondary: ["time_on_page", "bounce_rate", "scroll_depth"]
guardrails:
- metric: "bounce_rate"
threshold: "+10%"
action: "pause_variant"
statistical_config:
method: "bayesian"
confidence_threshold: 0.95
min_effect_size: 0.02 # 2% minimum detectable effect
results:
samples:
control: 12847
variant_a: 12651
variant_b: 12903
conversion_rate:
control: 0.0342
variant_a: 0.0389 # +13.7%
variant_b: 0.0298 # -12.9%
confidence:
variant_a_beats_control: 0.97 # ✓ Winner
variant_b_beats_control: 0.03
recommendation: "Apply variant_a (warm-blue) to production"
auto_actions:
on_winner:
- merge_to: "main-profile"
- notify: ["slack:#design", "email:design-team"]
- archive_experiment: trueMulti-Variate Testing
multivariate:
strands_tested:
- chromatic.temperature: [0.3, 0.5, 0.7]
- typography.weight_range: [[400,600], [400,700], [300,700]]
- motion.energy: [0.2, 0.4, 0.6]
combinations: 27 # 3 × 3 × 3
traffic_per_variant: 3.7%
interaction_effects:
- strands: ["chromatic.temperature", "motion.energy"]
effect: "synergistic"
insight: "Warm colors + high motion = +23% engagement vs additive"
optimal_combination:
chromatic.temperature: 0.5
typography.weight_range: [400, 700]
motion.energy: 0.4
lift: "+18.4%"Personalization Layer
User-preference-aware DNA that adapts to individual visitors:
# Define personalization rules
/dna personalize <profile> --rules ./personalization.yaml
# Generate personalized CSS at runtime
/dna serve --profile <base> --personalize --endpoint /api/dna
# Analyze personalization impact
/dna personalize analyticsPersonalization Schema
personalization:
base_profile: "acme-brand"
signals:
explicit:
- preference: "dark_mode"
source: "user_setting"
- preference: "reduced_motion"
source: "system_setting"
- preference: "high_contrast"
source: "accessibility_setting"
inferred:
- signal: "device_capability"
factors: ["gpu_tier", "connection_speed", "screen_size"]
- signal: "engagement_pattern"
factors: ["scroll_velocity", "dwell_time", "interaction_frequency"]
- signal: "context"
factors: ["time_of_day", "day_of_week", "season"]
adaptations:
dark_mode_preference:
condition: "signals.dark_mode == true"
mutations:
chromatic.mode: "dark"
chromatic.primary: "#E8E8E8"
chromatic.accents: ["#60A5FA"]
texture.depth: "layered"
low_bandwidth:
condition: "signals.connection_speed < 'fast'"
mutations:
motion.energy: 0
texture.depth: "flat"
spatial.density: "+0.1"
asset_hints:
images: "compressed"
fonts: "system-fallback"
power_user:
condition: "signals.interaction_frequency > 0.8"
mutations:
spatial.density: "+0.15" # More information density
hierarchy.density: "dense"
motion.philosophy: "minimal" # Less animation, faster
evening_browsing:
condition: "signals.time_of_day in ['evening', 'night']"
mutations:
chromatic.temperature: "-0.1" # Cooler
chromatic.saturation: "-0.1" # More muted
texture.surface: "softer"
seasonal:
condition: "signals.season == 'winter' && brand.seasonal_themes"
mutations:
chromatic.accents: "seasonal_winter_palette"
texture.pattern: "subtle-snow"
fallback: "base_profile"
privacy:
data_retention: "session_only"
explicit_consent_required: ["engagement_pattern"]
gdpr_compliant: trueRuntime Personalization API
// Generated endpoint: /api/dna/personalized.css
// Request includes signals in headers/cookies
interface PersonalizedDNA {
profile_id: string;
base_version: string;
adaptations_applied: string[];
css_custom_properties: Record<string, string>;
// Feature detection hints for client
features: {
motion_enabled: boolean;
blur_effects: boolean;
hd_images: boolean;
};
// Cache control
cache_key: string; // Hash of applied adaptations
ttl: number; // Seconds until revalidation
}Design Debt Detection
Continuous monitoring for implementation drift:
# Full codebase scan
/dna debt scan --profile <target> --source ./src/
# Watch mode for CI/CD
/dna debt watch --profile <target> --fail-threshold 0.15
# Generate debt report
/dna debt report --format html --output ./reports/design-debt.html
# Auto-fix simple violations
/dna debt fix --profile <target> --source ./src/ --dry-runDebt Report
design_debt:
scan_date: "2026-02-01"
profile: "acme-brand"
source: "./src/"
summary:
health_score: 0.76 # 76% adherent
total_violations: 89
critical: 8
major: 23
minor: 58
trend:
- date: "2026-01-01"
score: 0.82
- date: "2026-01-15"
score: 0.79
- date: "2026-02-01"
score: 0.76
direction: "declining"
alert: "Design debt increasing - intervention recommended"
violations_by_strand:
chromatic:
count: 24
examples:
- file: "src/components/Button.tsx"
line: 45
issue: "color: #0077E6 (expected: #0071E3)"
severity: "minor"
auto_fixable: true
typography:
count: 31
examples:
- file: "src/pages/Dashboard.tsx"
line: 127
issue: "font-weight: bold (expected: 600 or 700)"
severity: "minor"
auto_fixable: true
- file: "src/components/Card.tsx"
line: 88
issue: "font-family: Arial (not in brand stack)"
severity: "major"
auto_fixable: true
spatial:
count: 18
examples:
- file: "src/components/Modal.tsx"
line: 56
issue: "padding: 15px (not in spacing scale)"
severity: "minor"
auto_fixable: true
suggested_fix: "padding: 16px (--space-4)"
motion:
count: 16
examples:
- file: "src/components/Dropdown.tsx"
line: 89
issue: "transition: all 200ms ease"
expected: "transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1)"
severity: "minor"
auto_fixable: true
hotspots:
- file: "src/components/LegacyTable.tsx"
violations: 14
recommendation: "Prioritize refactoring this component"
- file: "src/pages/OldDashboard.tsx"
violations: 11
recommendation: "Schedule for design system migration"
auto_fix_summary:
total_fixable: 67
requires_review: 22
command: "/dna debt fix --auto-approve"
ci_integration:
github_action: |
- name: Design Debt Check
run: npx @dna/cli debt scan --fail-threshold 0.70
pre_commit_hook: |
#!/bin/sh
dna debt scan --staged-only --fail-threshold 0.80AI-Powered DNA Synthesis
Generate optimal DNA profiles from goals and requirements:
# Synthesize DNA from brief
/dna synthesize --brief "Modern fintech app targeting millennials, trustworthy but not boring, mobile-first"
# Synthesize from mood board
/dna synthesize --mood-board ./inspiration/*.png --goals ./brief.md
# Iterative refinement
/dna refine <synthesized-profile> --feedback "too corporate, needs more personality"
# Goal-based optimization
/dna optimize <profile> --goal "increase_trust" --constraint "maintain_energy"Synthesis Engine
synthesis:
input:
brief: "Modern fintech app targeting Gen Z, trustworthy yet playful, mobile-first, dark mode primary"
extracted_requirements:
audience: "gen-z"
industry: "fintech"
tone: ["trustworthy", "playful"]
platform: "mobile-first"
mode: "dark"
mood_board_analysis:
images_processed: 12
dominant_themes:
- "vibrant gradients"
- "rounded shapes"
- "bold typography"
- "playful illustrations"
extracted_colors: ["#6366F1", "#EC4899", "#10B981"]
reasoning:
trust_signals:
- "Blue-purple spectrum signals reliability (fintech standard)"
- "Consistent spacing creates order → trust"
- "Clear hierarchy reduces cognitive load"
playfulness_signals:
- "Vibrant accent colors add energy"
- "Rounded shapes feel friendly"
- "Bouncy animations create delight"
- "Pink accent subverts stuffy finance tropes"
gen_z_alignment:
- "Dark mode default (78% Gen Z preference)"
- "High saturation (generational preference for bold)"
- "Motion-rich (attention patterns)"
synthesized_profile:
name: "gen-z-fintech-synthesis"
confidence: 0.87
chromatic:
primary: "#0F0F1A" # Deep dark
secondary: "#1A1A2E" # Elevated surfaces
accents: ["#6366F1", "#EC4899", "#10B981"] # Indigo, Pink, Emerald
temperature: 0.45
saturation: 0.75 # Bold but not garish
mode: "dark"
typography:
voice: "confident-friendly"
primary_family: "Plus Jakarta Sans" # Modern, geometric, friendly
secondary_family: "JetBrains Mono" # Fintech credibility
weight_range: [400, 700]
letter_spacing: "tight"
spatial:
density: 0.35 # Breathable for mobile
grid: "fluid"
whitespace: "generous"
touch_targets: "44px+"
shape:
edges: "rounded-generous" # 12-16px radius
geometry: ["rounded-rectangles", "pills"]
containers: "floating"
texture:
surface: "smooth"
depth: "layered-subtle" # Cards floating on dark bg
material: "glass-dark" # Subtle glassmorphism
motion:
energy: 0.6 # Playful
easing: "bouncy" # spring(1, 100, 10)
philosophy: "delightful"
emotion:
primary: "trustworthy-playful"
tension: 0.4
era: "contemporary-forward"
influences: ["neo-brutalism-lite", "glass", "gradient-mesh"]
alternatives:
- name: "more-corporate"
diff: {motion.energy: 0.3, shape.edges: "rounded-subtle"}
tradeoff: "More trust, less distinctiveness"
- name: "more-playful"
diff: {chromatic.saturation: 0.9, motion.energy: 0.8}
tradeoff: "More memorable, might feel less serious"
validation:
accessibility: "AA_PASS"
contrast_ratios: "all passing"
motion_safe: "respects prefers-reduced-motion"Iterative Refinement
# Human feedback loop
/dna refine gen-z-fintech --feedback "love the colors, but typography feels too playful for money app"
# AI applies feedback
# Output:
refinement:
feedback_understood: "Increase typography formality while preserving color playfulness"
changes:
typography.voice: "confident-friendly" → "confident-professional"
typography.primary_family: "Plus Jakarta Sans" → "Inter"
typography.weight_range: [400, 700] → [400, 600]
preserved:
chromatic: "unchanged"
motion: "unchanged"
shape: "unchanged"
rationale: "Inter provides geometric clarity of Plus Jakarta but with more
professional associations. Narrower weight range creates more
disciplined hierarchy."DNA Inheritance & Composition
Object-oriented DNA with inheritance and mixins:
# base/_financial.yaml
name: "_financial"
type: "abstract" # Cannot be used directly
inherits: null
chromatic:
temperature: 0.4 # Cooler = trustworthy
saturation: 0.3 # Muted = professional
typography:
voice: "professional"
emotion:
primary: "trustworthy"
# Required overrides (must be provided by inheritors)
required:
- chromatic.primary
- chromatic.accents
---
# brands/acme-bank.yaml
name: "acme-bank"
type: "concrete"
inherits: "_financial"
chromatic:
primary: "#1E3A5F" # Override required
accents: ["#0EA5E9"] # Override required
# temperature and saturation inherited
typography:
primary_family: "Söhne" # Override
# voice inherited
# All other strands inherited from _financial
---
# Mixins
mixins:
_dark-mode:
chromatic:
mode: "dark"
primary: "lighten(base.primary, 80%)"
_high-energy:
motion:
energy: 0.7
easing: "bouncy"
_accessible-first:
accessibility:
min_contrast: "AAA"
motion_safe: true
forced_colors: true
---
# Composition
name: "acme-bank-dark"
inherits: "acme-bank"
mixins: ["_dark-mode", "_accessible-first"]Composition Commands
# Create inherited profile
/dna extend <parent-profile> --name <child-name>
# Apply mixin
/dna mixin <profile> --add <mixin-name>
# Show inheritance tree
/dna lineage <profile> --tree
# Resolve to flat profile (for code generation)
/dna resolve <profile> --output flat-profile.yamlSemantic DNA Queries
Natural language interface to DNA operations:
# Query examples
/dna ask "What makes our design feel premium?"
/dna ask "Why does competitor X feel more modern than us?"
/dna ask "How can we increase perceived trustworthiness?"
/dna ask "Which strand contributes most to our playful feeling?"Query Engine
query: "What makes our design feel premium?"
analysis:
profile_analyzed: "acme-brand"
premium_signals_detected:
strong:
- strand: "spatial.whitespace"
value: "generous"
contribution: 0.25
explanation: "Abundant whitespace signals luxury (space is expensive)"
- strand: "typography.weight_range"
value: [300, 500]
contribution: 0.20
explanation: "Light weights feel refined and elegant"
- strand: "motion.easing"
value: "smooth-decelerate"
contribution: 0.15
explanation: "Smooth, unhurried motion feels premium"
moderate:
- strand: "chromatic.saturation"
value: 0.25
contribution: 0.12
explanation: "Muted colors feel sophisticated"
weak:
- strand: "texture.material"
value: "paper"
contribution: 0.05
explanation: "Paper texture adds tactile quality but isn't strongly premium"
premium_score: 0.77
enhancement_suggestions:
- "Increase whitespace by 15% → estimated +0.05 premium score"
- "Add subtle micro-interactions → estimated +0.08 premium score"
- "Consider serif accent typography → estimated +0.10 premium score"
---
query: "Why does competitor X feel more modern than us?"
comparison:
you: "acme-brand"
them: "competitor-x"
modernity_gap: 0.23 # They score 23% more "modern"
key_differences:
- strand: "emotion.era"
you: "contemporary"
them: "futuristic"
impact: "high"
- strand: "shape.edges"
you: "rounded-subtle"
them: "sharp"
impact: "medium"
insight: "Sharp edges currently read as more cutting-edge"
- strand: "chromatic.mode"
you: "light"
them: "dark"
impact: "medium"
insight: "Dark mode has stronger 'modern tech' associations in 2026"
- strand: "texture.depth"
you: "flat"
them: "layered-3d"
impact: "medium"
insight: "Subtle 3D/depth effects trending as 'modern'"
actionable:
low_risk:
- "Add dark mode option"
- "Introduce subtle depth/layering"
medium_risk:
- "Sharpen edge radius slightly"
high_risk:
- "Full era shift to futuristic (may alienate existing users)"CLI Summary (Gen 11)
# DNA Inference
/dna infer --source <path> [--format css|tailwind|tokens|react]
/dna infer --sources <paths> --fuse
# Competitive Analysis
/dna competitive --competitors <urls> --you <url>
/dna differentiate <profile> --from <competitors>
/dna track-competitors --profiles <dir> --alert-on-change
# A/B Testing
/dna variants <profile> --strand <name> --variations <n>
/dna experiment create <name> --control <p1> --variants <p2,p3>
/dna experiment results <name>
/dna experiment apply-winner <name>
# Personalization
/dna personalize <profile> --rules <config>
/dna serve --profile <base> --personalize
# Design Debt
/dna debt scan --profile <target> --source <path>
/dna debt watch --fail-threshold <n>
/dna debt fix --auto-approve [--dry-run]
/dna debt report
# AI Synthesis
/dna synthesize --brief "<text>"
/dna synthesize --mood-board <images> --goals <brief>
/dna refine <profile> --feedback "<text>"
/dna optimize <profile> --goal <target>
# Inheritance & Composition
/dna extend <parent> --name <child>
/dna mixin <profile> --add <mixin>
/dna resolve <profile> --output <flat.yaml>
# Semantic Queries
/dna ask "<natural language question>"---
Generation 11: Added DNA Inference Engine (reverse-engineer from code), Competitive Analysis Module (strategic positioning), A/B Testing Integration (statistical DNA optimization), Personalization Layer (user-adaptive DNA), Design Debt Detection (implementation drift monitoring with auto-fix), AI-Powered Synthesis (generate DNA from goals), Inheritance & Composition (OOP for DNA), and Semantic Queries (natural language DNA exploration).
---
Generation 12: Enterprise & Cross-Domain
DNA Governance & Access Control
Enterprise-grade permissions for design system management:
# Initialize governance for a profile
/dna govern init <profile> --org <org-name>
# Define roles and permissions
/dna govern roles create designer --permissions "strand:*:read,strand:chromatic:write"
/dna govern roles create developer --permissions "strand:*:read,codegen:*"
/dna govern roles create brand-owner --permissions "*"
# Assign team members
/dna govern assign @alice designer
/dna govern assign @bob developer
/dna govern assign @carol brand-owner
# Require approvals for changes
/dna govern policy strand:chromatic --require-approval 2 --approvers brand-owner
/dna govern policy strand:typography --require-approval 1
# View audit log
/dna govern audit --profile <profile> --since "7 days ago"Governance Schema
governance:
org: "acme-corp"
profile: "acme-brand-primary"
roles:
brand-owner:
description: "Full control over brand DNA"
permissions:
- "*"
lead-designer:
description: "Can modify most strands, propose to protected"
permissions:
- "strand:*:read"
- "strand:chromatic:write"
- "strand:typography:write"
- "strand:spatial:write"
- "strand:shape:write"
- "strand:motion:write"
- "strand:texture:propose" # Protected, needs approval
- "codegen:*"
- "export:*"
designer:
description: "Read all, write non-protected strands"
permissions:
- "strand:*:read"
- "strand:motion:write"
- "strand:spatial:write"
- "codegen:css"
- "export:tokens"
developer:
description: "Read and generate code"
permissions:
- "strand:*:read"
- "codegen:*"
- "export:*"
- "debt:scan"
viewer:
description: "Read-only access"
permissions:
- "strand:*:read"
- "export:readonly"
protected_strands:
chromatic.primary:
reason: "Core brand color - requires brand owner approval"
approvers: ["brand-owner"]
min_approvals: 2
typography.primary_family:
reason: "Licensed typeface - legal review required"
approvers: ["brand-owner", "legal"]
min_approvals: 1
policies:
change_window:
enabled: true
allowed_hours: "09:00-17:00"
allowed_days: ["mon", "tue", "wed", "thu", "fri"]
timezone: "America/New_York"
staging_required:
enabled: true
staging_duration: "24h"
auto_promote: false
rollback_retention:
enabled: true
keep_versions: 30
auto_rollback_threshold: 0.15 # If debt increases >15%
audit_log:
retention: "1 year"
destinations:
- type: "local"
path: "./audit/"
- type: "s3"
bucket: "acme-design-audit"
- type: "webhook"
url: "https://audit.acme.com/dna-events"Change Proposals
proposal:
id: "prop_2026020112_chromatic"
type: "strand_modification"
status: "pending_approval"
author: "@alice"
created: "2026-02-01T12:00:00Z"
profile: "acme-brand-primary"
strand: "chromatic.primary"
change:
from: "#1E3A5F"
to: "#1A365D"
rationale: |
Slightly darker primary improves contrast ratios on light backgrounds.
Current: 4.2:1 (AA pass)
Proposed: 4.8:1 (AA pass, closer to AAA)
impact_analysis:
affected_assets: 234
contrast_improvement: "+14%"
brand_recognition_risk: "minimal (ΔE < 3)"
approvals:
required: 2
received:
- approver: "@carol"
decision: "approved"
comment: "Good catch on contrast"
timestamp: "2026-02-01T14:30:00Z"
pending:
- "@david"
staging:
deployed_to: "staging.acme.com"
preview_url: "https://preview.dna.acme.com/prop_2026020112"
automation:
on_approval:
- "deploy:staging"
- "notify:slack:#design"
on_merge:
- "deploy:production"
- "update:figma"
- "regenerate:design-tokens"Cross-Domain Translation
Apply design DNA beyond screens to physical products, spaces, and experiences:
# Translate DNA to different domains
/dna translate <profile> --to packaging
/dna translate <profile> --to interior
/dna translate <profile> --to fashion
/dna translate <profile> --to audio
/dna translate <profile> --to print
# Multi-domain brand system
/dna system <profile> --domains web,mobile,packaging,interior --output ./brand-system/Domain Mappings
cross_domain:
source_profile: "acme-brand"
translations:
packaging:
chromatic:
primary: "PANTONE 2965 C" # Convert to physical color
accents: ["PANTONE 7461 C", "PANTONE 7541 C"]
finish: "soft-touch-matte" # From texture.surface
typography:
primary_family: "Gotham" # Print-equivalent of web font
weight_range: [400, 700] # Often needs bolder for print
min_size: "8pt" # Physical constraint
spatial:
margins: "10mm" # From whitespace proportion
bleed: "3mm"
shape:
die_cut: "rounded-corners-6mm" # From shape.edges
material:
substrate: "300gsm-recycled" # From emotion + texture
coating: "spot-uv-accents" # Premium signal from emotion.primary
production_notes:
- "Use PMS colors for brand consistency"
- "Spot UV on logo and accents only"
- "Emboss primary wordmark"
interior:
chromatic:
wall_colors:
primary: "Benjamin Moore 2062-30" # Paint match
accent: "Benjamin Moore 2057-40"
flooring: "light-oak" # From temperature + texture
spatial:
ceiling_height: "preferred 3.5m+" # From whitespace
furniture_density: 0.35 # From spatial.density
circulation: "generous"
texture:
primary: "natural-wood" # From texture.material
secondary: "brushed-metal"
textiles: "linen-cotton-blend"
lighting:
temperature: "3000K" # From chromatic.temperature
intensity: "layered-ambient"
accent_approach: "track-lighting"
furniture_style:
edges: "rounded-soft" # From shape.edges
materials: ["oak", "brass", "marble"]
feel: "premium-approachable" # From emotion
signage:
typeface: "Gotham Medium"
mounting: "dimensional-brushed-metal"
wayfinding: "minimal-icons"
fashion:
chromatic:
palette:
core: ["#1E3A5F", "#FFFFFF", "#F5F5F5"]
seasonal_flex: 0.2 # How much seasonal variation allowed
fabric_colors: "dye-matched"
texture:
primary_fabrics: ["cotton-poplin", "wool-flannel"]
secondary: ["silk-twill", "leather-nappa"]
hardware: "brushed-gold" # From accent + premium signal
silhouette:
structure: "relaxed-tailored" # From emotion + shape
proportions: "balanced"
details:
buttons: "horn-natural"
stitching: "tonal"
labels: "woven-minimal"
audio:
voice:
timbre: "warm-confident" # From emotion.primary
pace: 0.6 # From motion.energy
register: "mid-low" # From chromatic.temperature
sound_design:
notification: "soft-bell" # From shape.edges
success: "gentle-ascending"
error: "muted-descending"
ambient: "subtle-pad"
music_direction:
genre: "modern-ambient"
bpm_range: [70, 90] # From motion.energy
instrumentation: ["piano", "soft-synths", "light-percussion"]
mood: "focused-optimistic"
print:
paper:
stock: "mohawk-superfine-100lb"
finish: "eggshell" # From texture.surface
typography:
body: {family: "Freight Text Pro", size: "10/14pt"}
headings: {family: "Gotham", weight: 500}
layout:
margins: "generous" # From spatial.whitespace
columns: 2
gutter: "6mm"
imagery:
style: "high-contrast-minimal"
color_profile: "FOGRA39"
finishing:
binding: "perfect-bound"
cover: "soft-touch-lamination"
special: ["foil-stamp-logo", "edge-painting"]Physical Sample Generation
# Generate production specs
/dna translate <profile> --to packaging --output-spec ./packaging-spec.pdf
# Create visualization
/dna translate <profile> --to interior --render-3d ./office-mockup.glb
# Order physical samples (integration with production partners)
/dna translate <profile> --to packaging --sample-orderPredictive Design Intelligence
AI-powered trend forecasting and DNA lifecycle management:
# Predict when DNA will feel dated
/dna forecast decay <profile>
# Get trend predictions
/dna forecast trends --industry tech --horizon "18 months"
# Suggest proactive updates
/dna forecast evolve <profile> --keep-essence
# Historical analysis
/dna history analyze --industry fintech --years 10Decay Prediction
decay_forecast:
profile: "acme-brand"
analysis_date: "2026-02-01"
overall_freshness: 0.78 # 78% "current feeling"
predicted_freshness:
- date: "2026-08-01"
score: 0.72
- date: "2027-02-01"
score: 0.65
- date: "2027-08-01"
score: 0.54 # ⚠️ Below refresh threshold
refresh_recommended: "Q3 2027"
strand_analysis:
chromatic:
freshness: 0.82
trend_alignment: "stable"
notes: "Muted palettes remain strong; safe for 18+ months"
typography:
freshness: 0.71
trend_alignment: "declining"
risk: "Geometric sans beginning saturation phase"
suggestion: "Consider serif accent exploration in 12 months"
motion:
freshness: 0.85
trend_alignment: "rising"
notes: "Smooth, purposeful motion gaining (good alignment)"
shape:
freshness: 0.65
trend_alignment: "declining"
risk: "Rounded corners reaching peak; sharp edges returning"
suggestion: "Gradually reduce border-radius over next 18 months"
texture:
freshness: 0.88
trend_alignment: "rising"
notes: "Subtle depth effects trending; current DNA well-positioned"
lifecycle_stage: "mature" # emerging → growing → mature → declining → dated
competitive_context:
your_freshness: 0.78
industry_average: 0.71
leader: 0.86
position: "above average"Trend Forecasting
trend_forecast:
industry: "tech"
horizon: "18 months"
generated: "2026-02-01"
confidence: 0.73
emerging_trends:
high_confidence:
- trend: "dimensional-interfaces"
description: "Subtle 3D depth, layered cards, soft shadows return"
current_adoption: 0.23
predicted_peak: "2027-Q2"
dna_impact:
texture.depth: "flat → layered-subtle"
shape.containers: "borderless → elevated"
early_adopters: ["linear.app", "vercel.com", "raycast.com"]
- trend: "serif-digital"
description: "Editorial serifs in digital products for warmth"
current_adoption: 0.18
predicted_peak: "2027-Q1"
dna_impact:
typography.letterform: "+serif accent"
emotion.era: "contemporary → timeless"
early_adopters: ["notion.so", "medium.com", "substack.com"]
medium_confidence:
- trend: "motion-rich-micro"
description: "Increased micro-interactions with personality"
current_adoption: 0.31
predicted_peak: "2026-Q4"
dna_impact:
motion.energy: "+0.2"
motion.philosophy: "purposeful → delightful"
- trend: "dark-mode-primary"
description: "Dark mode as default, not afterthought"
current_adoption: 0.45
predicted_peak: "already mainstream"
dna_impact:
chromatic.mode: "light → dark-first"
speculative:
- trend: "brutalist-revival-2.0"
description: "Raw aesthetics with improved usability"
current_adoption: 0.08
predicted_peak: "uncertain"
dna_impact:
shape.edges: "rounded → sharp"
texture.surface: "smooth → raw"
declining_trends:
- trend: "ultra-minimal"
description: "Extreme minimalism losing to 'warm minimal'"
peak_year: 2022
current_adoption: 0.34
decline_rate: "-12%/year"
- trend: "flat-design-pure"
description: "Zero-depth flat design being replaced"
peak_year: 2018
current_adoption: 0.21
decline_rate: "-18%/year"
recommendations:
immediate:
- "Add subtle depth to key surfaces (trend: dimensional-interfaces)"
- "Experiment with serif in headlines (trend: serif-digital)"
6_months:
- "Increase motion personality for delight"
- "Audit dark mode experience"
12_months:
- "Consider typography refresh with serif accent"
- "Prepare edge sharpening if brutalist-revival gains traction"Proactive Evolution
# Generate evolution roadmap
/dna forecast evolve <profile> --keep-essence --horizon "2 years"evolution_roadmap:
profile: "acme-brand"
essence_locked:
- emotion.primary: "trustworthy-approachable"
- chromatic.temperature: "±0.1" # Keep warm feeling
- spatial.whitespace: "generous" # Core brand signal
phases:
q2_2026:
name: "Depth Introduction"
changes:
texture.depth: "flat → layered-subtle"
shape.containers: "borderless → soft-elevated"
rationale: "Align with dimensional-interfaces trend while maintaining approachability"
risk: "low"
q4_2026:
name: "Motion Enhancement"
changes:
motion.energy: 0.4 → 0.55
motion.philosophy: "purposeful → delightful-purposeful"
rationale: "Add personality without sacrificing clarity"
risk: "low"
q2_2027:
name: "Typography Evolution"
changes:
typography.secondary_family: "Plus Jakarta Sans → Fraunces"
typography.voice: "+editorial-accent"
rationale: "Serif accent for warmth, differentiates from competitors"
risk: "medium"
q4_2027:
name: "Edge Refinement"
changes:
shape.edges: "rounded-soft → rounded-subtle"
shape.geometry: "+sharper accents"
rationale: "Subtle modernization if sharp-edge trend confirms"
risk: "medium"
contingency: "Skip if brutalist-revival doesn't materialize"
verification:
essence_score: 0.92 # How well roadmap preserves brand essence
freshness_trajectory:
without_evolution: 0.54 # By Q4 2027
with_evolution: 0.81 # Maintains relevanceReal-Time Collaboration
Multi-agent and multi-human live DNA editing:
# Start collaborative session
/dna collab start <profile> --invite @alice @bob @claude-agent
# Join session
/dna collab join <session-id>
# View live cursors and changes
/dna collab status
# Resolve conflicts
/dna collab resolve <conflict-id>
# End session and merge
/dna collab end --mergeCollaboration Protocol
collaboration:
session_id: "collab_2026020112_acme"
profile: "acme-brand"
started: "2026-02-01T12:00:00Z"
participants:
- id: "@alice"
role: "lead-designer"
cursor: "chromatic.accents"
status: "active"
- id: "@bob"
role: "developer"
cursor: "viewing"
status: "active"
- id: "@claude-agent"
role: "ai-assistant"
cursor: "validating"
status: "active"
capabilities:
- "suggestion"
- "validation"
- "accessibility-check"
- "competitive-compare"
live_changes:
- author: "@alice"
timestamp: "2026-02-01T12:05:23Z"
strand: "chromatic.accents[1]"
from: "#EC4899"
to: "#F472B6"
status: "pending"
ai_suggestions:
- agent: "@claude-agent"
type: "accessibility"
message: "New accent #F472B6 fails AA contrast on dark backgrounds"
suggestion: "#EC4899 original or darken to #DB2777"
auto_apply: false
conflicts:
- id: "conflict_001"
strand: "typography.primary_family"
changes:
- author: "@alice"
value: "Söhne"
timestamp: "2026-02-01T12:10:00Z"
- author: "@bob"
value: "Inter"
timestamp: "2026-02-01T12:10:15Z"
status: "unresolved"
resolution_options:
- "keep_alice"
- "keep_bob"
- "discuss"
- "ai_suggest"
sync:
protocol: "crdt" # Conflict-free replicated data types
checkpoint_interval: "30s"
undo_stack_per_user: trueNatural Language DNA Authoring
Create and modify DNA profiles entirely through conversation:
# Create DNA from description
/dna write "A fintech brand that feels trustworthy but not boring.
Target audience is millennials. Should work great in dark mode.
Think Stripe meets Discord energy."
# Modify through conversation
/dna chat <profile>
> "Make it warmer, but keep the professionalism"
> "The typography feels too playful - tone it down"
> "What if we added more energy to the animations?"
# Convert prose brief to structured DNA
/dna parse-brief ./design-brief.md --output ./profile.yamlConversational DNA Editor
/dna chat acme-brand
🧬 DNA Chat: acme-brand (v2.1.0)
Type changes in natural language. 'help' for commands, 'exit' to save.
You: Make the colors feel warmer, like afternoon sunlight
Claude: I'll shift the chromatic temperature while preserving your palette relationships.
Changes:
chromatic.temperature: 0.45 → 0.62
chromatic.primary: #1E3A5F → #2D3A4D (warmer blue-gray)
chromatic.accents[0]: #0071E3 → #0077CC (warmer blue)
Preview: https://preview.dna.local/session_abc123
Apply these changes? [y/n/adjust]
You: y
You: The typography feels too cold and technical. Can we make it friendlier?
Claude: I'll adjust the typography strand for more warmth while maintaining readability.
Changes:
typography.voice: "technical" → "confident-friendly"
typography.primary_family: "Inter" → "Plus Jakarta Sans"
typography.letter_spacing: "tight" → "normal"
Rationale: Plus Jakarta Sans has similar geometry to Inter but with
slightly softer letterforms that feel more approachable.
Apply these changes? [y/n/adjust]
You: adjust - keep Inter but make it feel friendlier another way
Claude: Understood. Keeping Inter, adjusting weight and spacing for friendliness.
Revised changes:
typography.voice: "technical" → "confident-friendly"
typography.weight_range: [400, 700] → [400, 600]
typography.letter_spacing: "tight" → "normal"
Lighter weights and relaxed spacing create friendliness without changing typeface.
Apply? [y/n/adjust]
You: y
You: What would happen if we added more animation energy?
Claude: Currently your motion.energy is 0.4 (purposeful, subtle).
Options:
0.5-0.6: Noticeable micro-interactions, delightful but not distracting
0.6-0.7: Playful energy, good for consumer apps
0.7+: High energy, may feel overwhelming for fintech
Given your audience (millennials) and brand goals (trustworthy but not boring),
I'd recommend 0.55 - adds personality without undermining trust.
Want me to apply 0.55? Or simulate different levels?
You: simulate 0.55 and 0.65
Claude: Creating preview branches...
Preview URLs:
energy-0.55: https://preview.dna.local/session_abc123_e55
energy-0.65: https://preview.dna.local/session_abc123_e65
Key differences:
0.55: Subtle bounces on buttons, smooth page transitions, micro-feedback
0.65: More pronounced bounces, staggered list animations, hover effects everywhere
You: go with 0.55
Claude: Applied motion.energy: 0.4 → 0.55
Session summary:
Changes made: 3
Strands modified: chromatic, typography, motion
New version: 2.2.0
Save and exit? [y/n/continue]
You: y
🧬 Saved acme-brand v2.2.0
Changelog: Warmer colors, friendlier typography, increased motion energyCLI Summary (Gen 12)
# Governance & Access Control
/dna govern init <profile> --org <org>
/dna govern roles create <role> --permissions <perms>
/dna govern assign <user> <role>
/dna govern policy <strand> --require-approval <n>
/dna govern audit [--since <date>]
/dna propose <profile> --strand <strand> --change <from:to>
/dna approve <proposal-id>
# Cross-Domain Translation
/dna translate <profile> --to <packaging|interior|fashion|audio|print>
/dna translate <profile> --to <domain> --output-spec <file>
/dna translate <profile> --to <domain> --render-3d <file>
/dna system <profile> --domains <list> --output <dir>
# Predictive Intelligence
/dna forecast decay <profile>
/dna forecast trends --industry <industry> --horizon <time>
/dna forecast evolve <profile> --keep-essence [--horizon <time>]
/dna history analyze --industry <industry> [--years <n>]
# Real-Time Collaboration
/dna collab start <profile> --invite <users>
/dna collab join <session-id>
/dna collab status
/dna collab resolve <conflict-id>
/dna collab end --merge
# Natural Language Authoring
/dna write "<description>"
/dna chat <profile>
/dna parse-brief <file> --output <yaml>---
Generation 12: Added DNA Governance & Access Control (enterprise permissions, approval workflows, audit logging), Cross-Domain Translation (digital DNA → packaging, interior design, fashion, audio, print), Predictive Design Intelligence (decay forecasting, trend prediction, proactive evolution roadmaps), Real-Time Collaboration (multi-user/multi-agent CRDT-based live editing), and Natural Language DNA Authoring (conversational creation and modification of DNA profiles).
---
Generation 13: Cross-Reality & Autonomous Evolution
Cross-Reality DNA (XR Strand)
Unified aesthetic DNA for screen, AR, VR, and spatial computing experiences:
# Add XR strand to profile
/dna xr extend <profile>
# Translate DNA for specific XR platforms
/dna xr translate <profile> --platform visionos
/dna xr translate <profile> --platform meta-quest
/dna xr translate <profile> --platform hololens
/dna xr translate <profile> --platform webxr
# Generate spatial assets from DNA
/dna xr generate <profile> --assets ui-panels,buttons,typography-3d
# Preview in spatial environment
/dna xr preview <profile> --environment officeXR DNA Strand Schema
xr_dna:
spatial_presence:
depth_model: "layered" # flat | layered | volumetric | holographic
z_hierarchy: [0.5, 1.0, 2.0, 4.0] # Depth layers in meters
parallax_intensity: 0.4 # 0=static, 1=dramatic
dimensional_typography:
extrusion: 0.02 # Depth in meters (0 = flat)
bevel: "soft" # none | soft | sharp
material: "glass-frosted" # glass | metal | matte | emissive
shadow_casting: true
legibility_distance: [0.5, 5.0] # Readable range in meters
spatial_color:
emission_intensity: 0.3 # How much UI elements glow
ambient_response: true # Adapt to environment lighting
transparency_model: "glass" # opaque | glass | hologram
environment_blend: 0.2 # How much environment shows through
interaction_volumes:
hit_zone_scale: 1.2 # Multiplier for touch targets in 3D
approach_feedback: true # Elements respond to user proximity
gaze_awareness: true # Elements know when looked at
haptic_feedback:
style: "subtle" # none | subtle | pronounced
patterns: ["confirm", "reject", "slide"]
spatial_motion:
follow_behavior: "lazy" # fixed | lazy | elastic | orbit
orientation_lock: "billboard" # world | billboard | user-facing
transition_style: "spatial-ease" # Easing in 3D space
spawn_animation: "fade-scale" # How elements appear
environment_adaptation:
lighting_response:
bright: {emission: -0.2, contrast: +0.1}
dim: {emission: +0.3, contrast: +0.2}
passthrough_mode:
background: "blur-subtle" # How real world shows behind UI
edge_treatment: "soft-gradient"
comfort:
motion_reduction_threshold: 0.5 # Lower motion for sensitive users
depth_of_field_hint: true # Suggest focal distance
eye_strain_mitigation:
max_contrast: 0.9
blue_light_reduction: 0.2
platform_specifics:
visionos:
window_material: "glass"
ornament_support: true
share_play_enabled: true
meta_quest:
hand_tracking_priority: true
passthrough_quality: "high"
hololens:
spatial_anchor_enabled: true
mesh_occlusion: truePlatform Translation
/dna xr translate acme-brand --platform visionosvisionos_translation:
source_profile: "acme-brand"
window_appearance:
material: "glass" # visionOS native glass
tint: "rgba(30, 58, 95, 0.6)" # From chromatic.primary
corner_radius: 32 # From shape.edges
ornaments:
style: "pill" # Floating action buttons
offset: [0, -20, 0] # Below main window
typography:
system_override: false # Use brand fonts
dynamic_type_support: true
spatial_rendering: "billboard"
interactions:
hover_effect: "highlight-lift" # Elements lift toward user
tap_feedback: "haptic-light"
long_press: "context-menu"
shareplay:
persona_tint: "#1E3A5F" # Brand color for presence
shared_activity_style: "collaborative"
generated_assets:
- asset: "GlassPanel.swift"
type: "swiftui-component"
- asset: "BrandMaterial.shader"
type: "realitykit-material"
- asset: "InteractionFeedback.haptic"
type: "core-haptics"Spatial Component Library
# Generate XR component library from DNA
/dna xr components <profile> --output ./xr-components/Output:
xr-components/
├── visionos/
│ ├── BrandWindow.swift
│ ├── BrandOrnament.swift
│ ├── BrandButton3D.swift
│ ├── BrandPanel.swift
│ └── Materials/
│ ├── BrandGlass.shader
│ └── BrandEmissive.shader
├── webxr/
│ ├── brand-panel.js
│ ├── brand-button.js
│ └── materials/
│ └── brand-pbr.glsl
├── unity/
│ ├── BrandUI.prefab
│ ├── BrandMaterials.mat
│ └── BrandInteractions.cs
└── shared/
├── brand-3d-typography.glb
├── icon-set-3d.glb
└── spatial-tokens.jsonAutonomous DNA Agents
Self-optimizing DNA profiles that evolve based on data and goals:
# Create autonomous agent for a profile
/dna agent create <profile> \
--goals "maximize_engagement,maintain_trust,ensure_accessibility" \
--constraints "brand_essence>0.85,wcag_aa" \
--data-source posthog
# View agent status
/dna agent status <profile>
# Review proposed changes
/dna agent review <profile>
# Approve/reject agent proposals
/dna agent approve <proposal-id>
/dna agent reject <proposal-id> --reason "too aggressive"
# Set autonomy level
/dna agent autonomy <profile> --level conservativeAgent Configuration
autonomous_agent:
profile: "acme-brand"
status: "active"
created: "2026-02-01"
goals:
primary:
- metric: "conversion_rate"
target: "maximize"
weight: 0.4
- metric: "user_satisfaction"
target: "maximize"
weight: 0.3
- metric: "brand_recognition"
target: "maintain"
weight: 0.3
secondary:
- metric: "accessibility_score"
target: ">= 0.95"
- metric: "performance_impact"
target: "<= 5% load_time_increase"
constraints:
hard:
- "brand_essence_score >= 0.85"
- "wcag_aa_compliance = true"
- "chromatic.primary unchanged"
- "typography.primary_family unchanged"
soft:
- "motion.energy delta <= 0.15 per month"
- "avoid rapid oscillation"
autonomy:
level: "conservative" # conservative | moderate | aggressive
approval_required:
conservative: "all changes"
moderate: "major strand changes only"
aggressive: "constraint violations only"
auto_apply:
enabled: false # Enable for full autonomy
confidence_threshold: 0.92
cooling_period: "48h"
data_sources:
analytics:
provider: "posthog"
events: ["click", "conversion", "scroll", "bounce"]
segments: ["new_users", "returning", "power_users"]
feedback:
provider: "hotjar"
types: ["surveys", "heatmaps", "recordings"]
competitive:
monitor: ["stripe.com", "linear.app"]
frequency: "weekly"
learning:
model: "dna-optimizer-v2"
training_window: "90 days"
update_frequency: "weekly"
learned_patterns:
- pattern: "warmer_cta_improves_conversion"
confidence: 0.89
evidence: "A/B test data from Jan 2026"
applied: true
- pattern: "reduced_motion_on_mobile_reduces_bounce"
confidence: 0.76
evidence: "Correlation analysis"
applied: false
reason: "Awaiting A/B validation"Agent Proposals
agent_proposals:
pending:
- id: "prop_agent_001"
generated: "2026-02-01T08:00:00Z"
type: "optimization"
change:
strand: "chromatic.accents[0]"
from: "#0071E3"
to: "#0077CC"
reasoning: |
Analysis of 45,000 sessions shows warmer accent colors correlate
with +8.3% CTA click-through rate (p < 0.01). Proposed change
shifts accent 5° warmer on color wheel while maintaining brand
harmony. Change is within brand essence constraints (similarity: 0.96).
predicted_impact:
conversion_rate: "+6-10%"
brand_essence_score: 0.94 # Above 0.85 constraint
accessibility: "unchanged (AA pass)"
confidence: 0.84
recommendation: "approve"
validation_plan:
type: "a/b_test"
duration: "14 days"
sample: 50000
rollback_trigger: "conversion < control"
history:
applied:
- id: "prop_agent_042"
change: "motion.energy 0.40 → 0.45"
applied: "2026-01-15"
actual_impact:
conversion_rate: "+5.2%"
brand_essence: 0.93
status: "successful"
rejected:
- id: "prop_agent_038"
change: "typography.weight_range [400,600] → [300,600]"
rejected: "2026-01-10"
reason: "Lighter weights reduce perceived trustworthiness"
rolled_back:
- id: "prop_agent_029"
change: "shape.edges rounded → sharp"
applied: "2025-12-20"
rolled_back: "2025-12-27"
reason: "Negative user feedback in surveys"Multi-Agent Orchestration
# Create specialized agents
/dna agent create <profile> --specialty conversion --name "conversion-optimizer"
/dna agent create <profile> --specialty accessibility --name "a11y-guardian"
/dna agent create <profile> --specialty brand --name "brand-keeper"
# Configure agent interaction
/dna agent orchestrate <profile> --mode collaborativeagent_orchestration:
profile: "acme-brand"
mode: "collaborative"
agents:
conversion-optimizer:
specialty: "conversion"
priority: "medium"
can_modify: ["chromatic.accents", "motion", "spatial", "hierarchy"]
a11y-guardian:
specialty: "accessibility"
priority: "high"
role: "validator"
veto_power: true
monitors: ["contrast", "motion_safe", "text_size"]
brand-keeper:
specialty: "brand_consistency"
priority: "highest"
role: "guardian"
veto_power: true
protects: ["chromatic.primary", "typography.primary_family", "emotion.primary"]
conflict_resolution:
priority_order: ["brand-keeper", "a11y-guardian", "conversion-optimizer"]
escalation: "human-review"
collaboration_protocol:
proposal_flow:
1: "Agent proposes change"
2: "Other agents validate against their specialty"
3: "Conflicts flagged for resolution"
4: "Approved changes queued"
5: "Human review (if required by autonomy level)"DNA Sustainability Index
Track environmental impact of design choices:
# Analyze sustainability of a profile
/dna sustain analyze <profile>
# Compare sustainability between profiles
/dna sustain compare <profile1> <profile2>
# Optimize for sustainability
/dna sustain optimize <profile> --target carbon-reduction
# Generate sustainability report
/dna sustain report <profile> --format pdfSustainability Schema
sustainability:
profile: "acme-brand"
analysis_date: "2026-02-01"
overall_score: 0.72 # 72/100 sustainability
grade: "B" # A+ to F
carbon_footprint:
estimated_monthly: "2.4 kg CO2e per 10,000 page views"
breakdown:
data_transfer:
impact: 0.35
details:
image_weight: "heavy"
font_files: "multiple weights loaded"
css_size: "moderate"
rendering:
impact: 0.25
details:
animation_complexity: "moderate"
gpu_usage: "elevated due to blur effects"
repaint_frequency: "normal"
server_processing:
impact: 0.15
details:
personalization_overhead: "light"
comparison:
industry_average: "3.1 kg CO2e"
your_position: "22% better than average"
resource_efficiency:
fonts:
status: "⚠️ improvable"
loaded: ["Inter 400", "Inter 500", "Inter 600", "Inter 700"]
used: ["Inter 400", "Inter 600"]
recommendation: "Remove unused weights, save 45KB"
colors:
status: "✓ efficient"
dark_mode: "available"
oled_friendly: true
note: "Dark mode reduces OLED energy by ~40%"
motion:
status: "⚠️ moderate"
gpu_intensive_effects: ["blur", "shadows"]
reduced_motion_support: true
recommendation: "Replace blur with solid transparency on low-power mode"
images:
status: "needs attention"
format_recommendation: "Use AVIF/WebP over PNG"
lazy_loading: "partial"
responsive_images: true
design_longevity:
trend_independence: 0.65
estimated_relevance: "3-5 years"
notes: "Current design has some trend-dependent elements"
durable_choices:
- "Typography choice is classic and timeless"
- "Color palette is muted and enduring"
trend_dependent:
- "Glassmorphism may date within 2 years"
- "Rounded corners at peak popularity"
physical_extension:
packaging_sustainability:
current: "not assessed"
recommendation: "Use recycled materials, minimize print area"
recommendations:
quick_wins:
- action: "Subset fonts to used characters"
impact: "-30KB, -0.1 kg CO2e/month"
effort: "low"
- action: "Replace PNG with AVIF"
impact: "-60% image weight"
effort: "low"
medium_effort:
- action: "Reduce blur effects"
impact: "-15% GPU usage"
effort: "medium"
tradeoff: "Slight aesthetic change"
- action: "Implement dark mode by default"
impact: "-40% OLED energy"
effort: "medium"
strategic:
- action: "Simplify design for longevity"
impact: "Reduce redesign frequency"
effort: "high"
benefit: "Lower lifetime carbon footprint"
eco_optimizations:
low_carbon_mode:
trigger: "user preference or low battery"
changes:
motion.energy: 0
texture.depth: "flat"
chromatic.mode: "dark"
spatial.density: "+0.1" # Fewer page loads needed
eco_presets:
minimal_impact:
fonts: "system-ui only"
images: "compressed, lazy-loaded"
motion: "none"
estimated_reduction: "60%"DNA Federation
Connect DNA profiles across organizations, enabling ecosystem-wide consistency:
# Publish DNA to federation
/dna federation publish <profile> --namespace org.acme
# Subscribe to federated DNA
/dna federation subscribe org.partner/shared-components
# Sync federated changes
/dna federation sync
# View federation network
/dna federation graphFederation Schema
federation:
namespace: "org.acme"
profile: "acme-brand-public"
published:
components:
- name: "button-primary"
version: "2.1.0"
visibility: "public"
- name: "color-palette"
version: "1.5.0"
visibility: "partners" # Only approved partners
presets:
- name: "partner-integration"
description: "DNA preset for partner product integrations"
includes: ["colors", "typography", "spacing"]
excludes: ["motion", "shape"] # Partners can customize these
subscriptions:
- namespace: "org.stripe"
component: "payment-form"
version: "^3.0.0"
integration: "embedded"
- namespace: "org.analytics"
component: "dashboard-widgets"
version: "latest"
inheritance:
- child: "org.acme.japan"
overrides_allowed: ["cultural", "typography"]
sync_mode: "automatic"
- child: "org.acme.sub-brand"
overrides_allowed: ["chromatic.accents", "emotion"]
sync_mode: "review-required"
ecosystem_graph:
nodes:
- "org.acme" (root)
- "org.acme.japan"
- "org.acme.sub-brand"
- "org.partner" (external)
edges:
- from: "org.acme"
to: "org.acme.japan"
type: "parent"
- from: "org.acme"
to: "org.partner"
type: "federation"
governance:
breaking_changes:
notification: "30 days"
deprecation_period: "90 days"
compatibility:
semantic_versioning: true
api_contract: "./dna-contract.yaml"Temporal DNA
Time-aware DNA that automatically shifts throughout day, week, or season:
# Enable temporal mode
/dna temporal enable <profile>
# Configure time-based shifts
/dna temporal configure <profile> --config ./temporal-rules.yaml
# Preview at specific time
/dna temporal preview <profile> --at "2026-12-25T20:00"
# View transition schedule
/dna temporal schedule <profile>Temporal Schema
temporal_dna:
profile: "acme-brand"
enabled: true
time_of_day:
dawn:
hours: [5, 7]
transitions:
chromatic.temperature: "+0.1"
chromatic.saturation: "-0.1"
emotion.primary: "fresh-optimistic"
morning:
hours: [7, 12]
transitions:
chromatic.temperature: "base"
motion.energy: "+0.1" # More energetic for productivity
afternoon:
hours: [12, 17]
transitions:
chromatic.temperature: "+0.05"
emotion.tension: "-0.1" # Calmer
evening:
hours: [17, 21]
transitions:
chromatic.temperature: "+0.15" # Warmer
chromatic.saturation: "-0.05"
motion.energy: "-0.1"
night:
hours: [21, 5]
transitions:
chromatic.mode: "dark"
chromatic.temperature: "-0.1" # Cooler for night
chromatic.saturation: "-0.2"
motion.energy: "-0.3" # Calm
emotion.primary: "calm-restful"
day_of_week:
weekday:
days: ["mon", "tue", "wed", "thu", "fri"]
transitions:
hierarchy.density: "scannable" # Efficient for work
spatial.density: "base"
weekend:
days: ["sat", "sun"]
transitions:
hierarchy.density: "readable" # More leisurely
motion.energy: "+0.1" # More playful
spatial.whitespace: "+10%"
seasons:
spring:
months: [3, 4, 5]
transitions:
chromatic.accents: "seasonal_spring"
texture.pattern: "subtle-botanical"
emotion.primary: "+renewal"
summer:
months: [6, 7, 8]
transitions:
chromatic.temperature: "+0.15"
chromatic.saturation: "+0.1"
motion.energy: "+0.15"
autumn:
months: [9, 10, 11]
transitions:
chromatic.accents: "seasonal_autumn"
chromatic.temperature: "+0.1"
chromatic.saturation: "-0.05"
winter:
months: [12, 1, 2]
transitions:
chromatic.temperature: "-0.1"
chromatic.saturation: "-0.15"
texture.pattern: "subtle-frost"
motion.energy: "-0.1"
special_occasions:
- name: "holiday_season"
dates: ["2026-12-20", "2027-01-02"]
transitions:
chromatic.accents: ["#C41E3A", "#228B22"] # Festive
motion.philosophy: "celebratory"
- name: "earth_day"
dates: ["2026-04-22"]
transitions:
chromatic.accents: ["#228B22", "#90EE90"]
sustainability.low_carbon_mode: true
user_override:
allow_disable: true
preferences_respected: ["dark_mode", "reduced_motion"]
transition_behavior:
duration: "30 minutes" # Gradual shift
easing: "smooth"
notification: false # Silent transitionsTime-Aware Code Generation
/dna codegen <profile> --temporal --output ./src/theme/// Generated: temporalTheme.ts
import { createTemporalTheme } from '@dna/temporal';
export const theme = createTemporalTheme({
base: baseTheme,
timeOfDay: {
dawn: { colorTemperature: 0.55 },
morning: { colorTemperature: 0.45, motionEnergy: 0.55 },
afternoon: { colorTemperature: 0.50 },
evening: { colorTemperature: 0.60, motionEnergy: 0.35 },
night: { colorMode: 'dark', colorTemperature: 0.35, motionEnergy: 0.15 },
},
transitions: {
duration: 1800000, // 30 minutes
easing: 'ease-in-out',
},
userPreferences: {
respectSystemDarkMode: true,
respectReducedMotion: true,
},
});
// Usage: const currentTheme = theme.getForTime(new Date());CLI Summary (Gen 13)
# Cross-Reality DNA
/dna xr extend <profile>
/dna xr translate <profile> --platform <visionos|quest|hololens|webxr>
/dna xr generate <profile> --assets <types>
/dna xr preview <profile> --environment <env>
/dna xr components <profile> --output <dir>
# Autonomous Agents
/dna agent create <profile> --goals <goals> --constraints <constraints>
/dna agent status <profile>
/dna agent review <profile>
/dna agent approve|reject <proposal-id>
/dna agent autonomy <profile> --level <conservative|moderate|aggressive>
/dna agent orchestrate <profile> --mode <collaborative|independent>
# Sustainability
/dna sustain analyze <profile>
/dna sustain compare <profile1> <profile2>
/dna sustain optimize <profile> --target <goal>
/dna sustain report <profile> --format <pdf|html|json>
# Federation
/dna federation publish <profile> --namespace <ns>
/dna federation subscribe <namespace/component>
/dna federation sync
/dna federation graph
# Temporal DNA
/dna temporal enable <profile>
/dna temporal configure <profile> --config <file>
/dna temporal preview <profile> --at <datetime>
/dna temporal schedule <profile>---
Generation 13: Added Cross-Reality DNA (XR strand for visionOS, Meta Quest, HoloLens, WebXR with spatial UI generation), Autonomous DNA Agents (self-optimizing profiles with configurable goals, constraints, and multi-agent orchestration), DNA Sustainability Index (carbon footprint analysis, resource efficiency, design longevity, eco-optimizations), DNA Federation (cross-organization profile sharing, ecosystem consistency, partner integrations), and Temporal DNA (time-aware automatic transitions for day/night, weekday/weekend, seasonal, and special occasion variations).
---
Generation 14: Adaptive Intelligence & Collective Learning
Biometric-Responsive DNA
DNA that adapts based on physiological signals when available:
# Enable biometric adaptation
/dna bio enable <profile> --sources "heartrate,eyetracking,eeg"
# Configure response thresholds
/dna bio configure <profile> --config ./bio-rules.yaml
# Simulate biometric state
/dna bio simulate <profile> --state "stressed"
# View adaptation history
/dna bio history <profile> --session <id>Biometric Schema
biometric_dna:
profile: "acme-brand"
enabled: true
privacy_mode: "local-only" # Signals processed on-device
sources:
heartrate:
provider: "apple-watch|fitbit|garmin|webapi"
consent_required: true
thresholds:
calm: [50, 70]
normal: [70, 90]
elevated: [90, 110]
stressed: [110, 140]
eyetracking:
provider: "visionos|tobii|webcam"
metrics: ["fixation_duration", "saccade_velocity", "blink_rate"]
fatigue_detection: true
attention:
provider: "inferred" # From interaction patterns
metrics: ["scroll_velocity", "click_precision", "dwell_time"]
adaptations:
stressed:
trigger: "heartrate.elevated OR attention.scattered"
transitions:
motion.energy: "-0.3"
spatial.density: "-0.15"
chromatic.saturation: "-0.1"
chromatic.temperature: "+0.1"
shape.edges: "softer"
hierarchy.density: "scannable"
experience:
reduce_notifications: true
simplify_navigation: true
suggest_break: "after 10 minutes"
fatigued:
trigger: "eyetracking.fatigue_score > 0.7"
transitions:
chromatic.contrast: "+0.1"
typography.size_scale: "+10%"
spatial.whitespace: "+15%"
motion.energy: "-0.2"
experience:
dark_mode: "suggest"
reading_mode: "enable"
focused:
trigger: "attention.sustained > 0.8"
transitions:
hierarchy.density: "dense"
spatial.density: "+0.1"
motion.philosophy: "minimal"
experience:
distraction_free: true
relaxed:
trigger: "heartrate.calm AND attention.leisurely"
transitions:
motion.energy: "+0.2"
spatial.whitespace: "+10%"
motion.philosophy: "delightful"
experience:
exploration_mode: true
fallback:
no_signal: "use base profile"
ambiguous: "prefer calmer adaptations"
ethics:
data_storage: "none"
user_control: "full"
transparency: "show_adaptation_reason"
opt_out: "always available"Collective DNA Intelligence
Learn from aggregated patterns across all DNA instances to improve recommendations:
# Opt into collective learning
/dna collective join --contribution "anonymous"
# Get collective insights
/dna collective insights --industry fintech
# Benchmark against collective
/dna collective benchmark <profile>
# Get collective recommendations
/dna collective recommend <profile> --goal "increase_engagement"Collective Schema
collective_intelligence:
participation:
mode: "anonymous" # anonymous | pseudonymous | identified
contributions:
- dna_patterns: true
- ab_test_results: true
- performance_metrics: true
- brand_identity: false # Never share identifying info
insights:
industry_patterns:
fintech:
trending_strands:
- strand: "chromatic.mode"
direction: "dark-first increasing"
adoption: 0.67
- strand: "typography.voice"
direction: "friendly-professional blend"
adoption: 0.54
performance_correlations:
high_conversion:
- "chromatic.temperature: 0.5-0.6"
- "motion.energy: 0.4-0.5"
- "spatial.whitespace: generous"
high_trust:
- "typography.voice: professional"
- "chromatic.saturation: muted"
- "shape.containers: bordered"
anti_patterns:
- pattern: "high motion + dense layout"
impact: "-15% completion rate"
confidence: 0.82
cross_industry:
universal_patterns:
accessibility:
- "wcag_aa compliance correlates with +12% engagement"
sustainability:
- "eco-optimized profiles show no conversion loss"
motion:
- "reduced-motion support correlates with +8% satisfaction"
benchmarking:
your_profile: "acme-brand"
percentiles:
conversion_optimization: "72nd percentile"
accessibility: "89th percentile"
sustainability: "45th percentile"
trend_alignment: "61st percentile"
opportunities:
- area: "sustainability"
current: 0.45
industry_median: 0.62
industry_top: 0.91
recommendations:
- "Implement dark mode default (+0.15)"
- "Reduce motion complexity (+0.08)"
recommendations:
based_on: "collective patterns + your profile"
goal: "increase_engagement"
suggestions:
- change: "chromatic.temperature: 0.45 → 0.52"
collective_evidence: "87% of high-engagement fintech profiles in this range"
expected_impact: "+6-9% engagement"
confidence: 0.79
- change: "motion.easing: smooth → bouncy-subtle"
collective_evidence: "Bouncy easing correlates with +11% perceived freshness"
expected_impact: "+3-5% engagement"
confidence: 0.71Narrative DNA
Design DNA that evolves as users progress through an experience:
# Create narrative DNA
/dna narrative create <profile> --arc "onboarding-to-power-user"
# Define story beats
/dna narrative beats <profile> --config ./narrative.yaml
# Preview narrative at stage
/dna narrative preview <profile> --stage "discovery"
# Track user progression
/dna narrative track --analytics posthogNarrative Schema
narrative_dna:
profile: "acme-brand"
arc_name: "user-mastery-journey"
philosophy: |
Design should evolve with the user. A new user needs guidance and comfort.
An experienced user wants efficiency and power. The DNA transforms
alongside their journey.
stages:
newcomer:
trigger: "sessions < 3 OR features_used < 5"
duration: "first 1-3 sessions"
dna_state:
spatial.density: 0.25 # Very spacious, not overwhelming
spatial.whitespace: "extreme"
hierarchy.density: "ultra-scannable"
hierarchy.method: "size+color+position" # Multiple cues
motion.energy: 0.3 # Calm, reassuring
motion.philosophy: "guiding" # Animations show what to do
typography.size_scale: 1.2 # Larger, easier to read
emotion.primary: "welcoming-safe"
experience:
progressive_disclosure: true
tooltip_frequency: "high"
empty_states: "educational"
feature_highlights: true
explorer:
trigger: "sessions >= 3 AND sessions < 10"
duration: "sessions 3-10"
dna_state:
spatial.density: 0.35 # Slightly denser
spatial.whitespace: "generous"
hierarchy.density: "scannable"
motion.energy: 0.4 # More responsive
motion.philosophy: "responsive"
typography.size_scale: 1.1
emotion.primary: "encouraging"
experience:
progressive_disclosure: "reduced"
tooltip_frequency: "on-demand"
shortcuts_visible: true
exploration_rewards: true
practitioner:
trigger: "sessions >= 10 AND features_used >= 15"
duration: "sessions 10-50"
dna_state:
spatial.density: 0.45
spatial.whitespace: "balanced"
hierarchy.density: "efficient"
motion.energy: 0.5
motion.philosophy: "purposeful"
typography.size_scale: 1.0
emotion.primary: "capable-confident"
experience:
keyboard_shortcuts: "prominent"
batch_actions: true
advanced_filters: "visible"
expert:
trigger: "sessions >= 50 OR power_features_used >= 10"
duration: "ongoing"
dna_state:
spatial.density: 0.55 # Information-dense
spatial.whitespace: "efficient"
hierarchy.density: "dense"
motion.energy: 0.35 # Less motion, faster
motion.philosophy: "minimal" # No unnecessary animation
typography.size_scale: 0.95
emotion.primary: "powerful-efficient"
experience:
command_palette: true
bulk_operations: true
custom_views: true
api_access: "prominent"
power_user:
trigger: "sessions >= 200 OR api_usage > 0"
duration: "ongoing"
dna_state:
spatial.density: 0.65
spatial.whitespace: "minimal"
hierarchy.density: "ultra-dense"
motion.energy: 0.2 # Almost no motion
motion.philosophy: "none"
typography.size_scale: 0.9
chromatic.contrast: "+0.1" # High contrast for speed
emotion.primary: "efficient-powerful"
experience:
everything_keyboard: true
custom_workflows: true
admin_tools: "visible"
transitions:
style: "gradual"
duration: "over 2-3 sessions"
easing: "smooth"
notification: "subtle-celebration" # Acknowledge growth
user_control:
stage_override: true # User can choose stage
density_preference: true # Independent density control
motion_preference: true # Independent motion control
analytics:
track_progression: true
stage_time_metrics: true
regression_detection: true # Detect if user seems confused
regression_handling:
trigger: "error_rate_increase OR feature_abandonment"
response:
- "Temporarily reduce density"
- "Increase guidance cues"
- "Offer help proactively"DNA Conflict Resolution
Automatically detect and resolve visual conflicts in implementations:
# Scan for conflicts
/dna conflicts scan --source ./src/
# Explain specific conflict
/dna conflicts explain <conflict-id>
# Auto-resolve conflicts
/dna conflicts resolve --auto --preview
# Generate conflict report
/dna conflicts report --format htmlConflict Detection
conflict_scan:
source: "./src/"
profile: "acme-brand"
scan_date: "2026-02-01"
conflicts_found: 12
by_type:
visual_hierarchy:
count: 4
severity: "high"
color_clash:
count: 3
severity: "medium"
spacing_inconsistency:
count: 3
severity: "low"
motion_conflict:
count: 2
severity: "medium"
conflicts:
- id: "conflict_001"
type: "visual_hierarchy"
severity: "high"
location: "src/components/Dashboard.tsx:45"
description: |
Two elements compete for primary attention. Both use:
- Large typography (24px)
- Primary accent color
- Prominent position
visualization: |
┌────────────────────────────────┐
│ ████ HEADER ████ │ ← Primary attention
│ │
│ ████ CALL TO ACTION ████ │ ← Also demands attention
│ │
└────────────────────────────────┘
dna_violation:
strand: "hierarchy"
rule: "Single focal point per viewport section"
resolution_options:
- option: "demote_header"
description: "Reduce header visual weight"
changes:
- "font-size: 24px → 18px"
- "color: accent → secondary"
preview: "https://preview.conflicts/001_a"
- option: "demote_cta"
description: "Soften CTA, elevate on interaction"
changes:
- "background: accent → subtle"
- "hover: elevate to full accent"
preview: "https://preview.conflicts/001_b"
- option: "spatial_separation"
description: "Add breathing room between elements"
changes:
- "margin-bottom: 16px → 48px"
preview: "https://preview.conflicts/001_c"
recommendation: "spatial_separation"
rationale: "Preserves both elements' prominence while eliminating conflict"
- id: "conflict_002"
type: "color_clash"
severity: "medium"
location: "src/pages/Settings.tsx:112"
description: |
Adjacent colors create visual vibration:
- Element A: #FF6B35 (warm orange)
- Element B: #00D4AA (cool cyan)
These complementary colors at high saturation cause optical discomfort.
dna_violation:
strand: "chromatic"
rule: "Adjacent complementary colors need desaturation or separation"
resolution_options:
- option: "desaturate_one"
changes:
- "Element B: #00D4AA → #4ECDC4 (softer)"
- option: "add_separator"
changes:
- "Add neutral spacing or divider between elements"
- option: "use_neutral"
changes:
- "Replace one with neutral from palette"
- id: "conflict_003"
type: "motion_conflict"
severity: "medium"
location: "src/components/Sidebar.tsx:78"
description: |
Competing animations create visual chaos:
- Sidebar slides in (300ms ease-out)
- Content fades + scales (400ms bounce)
- Navigation items stagger (50ms each)
All trigger simultaneously on mount.
dna_violation:
strand: "motion"
rule: "Orchestrated motion: primary action first, secondary follows"
resolution_options:
- option: "choreograph"
description: "Sequence animations with proper timing"
changes:
- "Sidebar: 0ms start, 200ms duration"
- "Content: 150ms start, 250ms duration"
- "Nav items: 200ms start, stagger 30ms"
- option: "reduce"
description: "Keep only primary animation"
changes:
- "Sidebar: slide only"
- "Content: instant appear"
- "Nav items: no stagger"
recommendation: "choreograph"
auto_fix:
fixable: 8
requires_review: 4
preview_command: "/dna conflicts resolve --auto --preview"
apply_command: "/dna conflicts resolve --auto --apply"DNA Signatures & Provenance
Cryptographic verification of DNA authenticity and lineage:
# Sign a DNA profile
/dna sign <profile> --key [home-path]
# Verify signature
/dna verify <profile>
# View provenance chain
/dna provenance <profile>
# Register with provenance ledger
/dna provenance register <profile> --ledger clawdhubProvenance Schema
dna_signature:
profile: "acme-brand"
version: "2.3.0"
signature:
algorithm: "Ed25519"
public_key: "base64:MCowBQYDK2VwAyEA..."
signature: "base64:xYz9..."
signed_at: "2026-02-01T12:00:00Z"
signer: "org.acme/brand-team"
provenance:
chain:
- hash: "sha256:abc123..."
version: "1.0.0"
author: "[email]"
timestamp: "2025-01-15T09:00:00Z"
action: "created"
signature: "base64:..."
- hash: "sha256:def456..."
version: "1.1.0"
author: "[email]"
timestamp: "2025-03-20T14:30:00Z"
action: "modified"
changes: ["chromatic.accents updated"]
parent: "sha256:abc123..."
signature: "base64:..."
- hash: "sha256:ghi789..."
version: "2.0.0"
author: "[email]"
timestamp: "2025-09-01T10:00:00Z"
action: "major-revision"
changes: ["Full rebrand - typography, colors, motion"]
parent: "sha256:def456..."
signature: "base64:..."
approved_by: ["[email]", "[email]"]
attestations:
- type: "accessibility"
attester: "a11y-audit.com"
timestamp: "2025-09-15"
claim: "WCAG AA compliant"
certificate: "https://a11y-audit.com/cert/abc123"
- type: "brand-consistency"
attester: "brand-guardian-ai"
timestamp: "2026-02-01"
claim: "92% consistency with registered brand guidelines"
verification:
status: "valid"
verified_at: "2026-02-01T12:05:00Z"
chain_complete: true
all_signatures_valid: true
usage_rights:
license: "proprietary"
usage:
internal: "unlimited"
partners: "with agreement"
public: "display only"
anti_counterfeit:
registered_with: ["clawdhub", "dna-registry.io"]
trademark_status: "registered"
infringement_detection: "enabled"
alerts:
- date: "2026-01-20"
type: "similarity_detected"
source: "competitor.com"
similarity: 0.78
action_taken: "legal-review"Conversational DNA Interface
Natural conversation-based DNA manipulation beyond simple queries:
# Start DNA conversation mode
/dna talk <profile>
# With context awareness
/dna talk <profile> --with-analytics --with-competitorsAdvanced Conversational Examples
/dna talk acme-brand --with-analytics
🧬 DNA Talk: acme-brand (v2.3.0)
Analytics: PostHog connected
Context: Last 30 days performance data
You: I'm worried our design feels dated. What do you think?
Claude: Looking at your DNA profile against current trends and your
analytics, here's my assessment:
**Freshness Score: 68/100** (down from 74 six months ago)
Areas that may feel dated:
1. **Typography** (score: 62) - Geometric sans-serifs like yours are at
peak saturation. 40% of your industry has similar choices.
2. **Shape language** (score: 58) - Rounded corners at 12px are the
2024 norm. The trend is moving toward either sharper edges or
even softer (20px+) for distinction.
3. **Motion** (score: 75) - Your subtle approach is aging well;
purposeful motion remains valued.
Your analytics show:
- Bounce rate stable (no user rejection)
- Time on page slightly down (-4% vs 6 months ago)
- New user engagement holding
The data suggests users aren't rejecting your design, but engagement
is softening. This often precedes a more noticeable decline.
Should I:
a) Show specific trend-forward modifications
b) Create a comparison with fresher competitor profiles
c) Design an evolution roadmap that preserves your brand essence
You: a - show me what we could change
Claude: Here are three evolution paths, from conservative to bold:
### Path 1: Subtle Refresh (Preserves 95% recognition)typography.secondary_family: → Add Fraunces for headlines
shape.edges: 12px → 16px (softer, distinctive)
motion.easing: → Add subtle bounce on interactions
Predicted impact: +8 freshness points
Risk: Very low
Analytics prediction: +2-4% engagement
### Path 2: Moderate Evolution (Preserves 88% recognition)typography.primary_family: Inter → Outfit (similar but fresher)
chromatic.mode: → Add dark-first option
texture.depth: flat → subtle-elevation
motion.energy: 0.4 → 0.5
Predicted impact: +15 freshness points
Risk: Low-medium
Analytics prediction: +5-8% engagement
### Path 3: Bold Refresh (Preserves 75% recognition)All of Path 2, plus:
typography.headline_family: → Editorial serif (e.g., Newsreader)
shape.edges: 12px → 4px (sharper, modern)
chromatic.saturation: 0.4 → 0.6 (bolder)
Predicted impact: +22 freshness points
Risk: Medium (may surprise existing users)
Analytics prediction: +8-12% engagement, possible initial dip
Want me to generate interactive previews for any of these paths?
You: Generate previews for path 1 and 2. Also, what are our competitors doing?
Claude: Creating previews...
**Previews ready:**
- Path 1: https://preview.dna/acme-brand/path1
- Path 2: https://preview.dna/acme-brand/path2
**Competitor Analysis (last 60 days changes):**
| Competitor | Recent DNA Changes | Direction |
|------------|-------------------|-----------|
| Stripe | +serif headlines, darker mode | Warmer, editorial |
| Linear | Sharper edges, more saturation | Bolder, geometric |
| Notion | New illustration system | More personality |
| Mercury | Minimal changes | Stable |
**Pattern detected:** 3 of 4 competitors are adding warmth or personality.
Your Path 2 aligns with this trend while maintaining distinctiveness.
**Differentiation opportunity:** None of them have committed to a
serif-forward approach. Path 3's editorial serif could be your
unique positioning.
You: Let's do path 2, but can we test the serif headline idea from path 3 first?
Claude: Smart approach. I'll set this up as an experiment:
**Experiment: "Editorial Headlines Test"**
- Control: Your current headlines (Inter)
- Variant: Serif headlines (Newsreader) with Path 2 changes
- Metric: Engagement + brand perception survey
- Duration: 14 days
- Traffic: 50/50 split
Simultaneously, I'll prepare Path 2 as your next version:
- Staged rollout: 10% → 25% → 50% → 100%
- Monitoring: Engagement, bounce rate, conversion
- Automatic rollback if: conversion drops >5%
Ready to launch both?
You: Yes, do it.
Claude: Launching...
✓ Experiment "editorial-headlines" created
- Tracking code generated
- PostHog integration configured
- Survey triggered for 20% of users after 2 minutes
✓ Path 2 staged rollout scheduled
- Day 1-2: 10% traffic
- Day 3-5: 25% traffic
- Day 6-9: 50% traffic
- Day 10+: 100% (if metrics hold)
I'll monitor both and alert you if:
- Either shows >5% negative impact
- Experiment reaches statistical significance
- Path 2 stages need intervention
Estimated completion: 14 days for experiment, 10 days for rollout.
Want me to send daily or weekly updates?CLI Summary (Gen 14)
# Biometric-Responsive DNA
/dna bio enable <profile> --sources <sources>
/dna bio configure <profile> --config <file>
/dna bio simulate <profile> --state <state>
/dna bio history <profile>
# Collective Intelligence
/dna collective join --contribution <level>
/dna collective insights --industry <industry>
/dna collective benchmark <profile>
/dna collective recommend <profile> --goal <goal>
# Narrative DNA
/dna narrative create <profile> --arc <arc-name>
/dna narrative beats <profile> --config <file>
/dna narrative preview <profile> --stage <stage>
/dna narrative track --analytics <provider>
# Conflict Resolution
/dna conflicts scan --source <path>
/dna conflicts explain <conflict-id>
/dna conflicts resolve --auto [--preview|--apply]
/dna conflicts report --format <format>
# Signatures & Provenance
/dna sign <profile> --key <key-file>
/dna verify <profile>
/dna provenance <profile>
/dna provenance register <profile> --ledger <ledger>
# Conversational Interface
/dna talk <profile> [--with-analytics] [--with-competitors]---
Generation 14: Added Biometric-Responsive DNA (heart rate, eye tracking, attention adaptation with privacy-first design), Collective DNA Intelligence (anonymous pattern learning, industry benchmarking, collaborative recommendations), Narrative DNA (evolving design as users progress from newcomer to power user), DNA Conflict Resolution (automatic detection and resolution of visual hierarchy, color, spacing, and motion conflicts), DNA Signatures & Provenance (cryptographic verification, chain of custody, anti-counterfeit), and Advanced Conversational Interface (natural language DNA evolution with analytics integration).
---
Generation 15: Archaeological Intelligence & Sensory Synthesis
DNA Archaeology
Extract historical DNA from archived websites and reconstruct design evolution:
# Excavate historical DNA from Wayback Machine
/dna archaeology dig <url> --years 10
# Reconstruct evolution timeline
/dna archaeology timeline <url> --visualize
# Find "extinction events" (major design changes)
/dna archaeology events <url>
# Resurrect historical DNA profile
/dna archaeology resurrect <url> --snapshot "2019-06-15"
# Compare present vs past
/dna archaeology compare <url> --then "2018" --nowArchaeological Analysis
archaeology:
target: "stripe.com"
excavation_depth: "2014-2026"
snapshots_analyzed: 47
timeline:
eras:
- name: "Startup Era"
period: "2014-2016"
dominant_dna:
chromatic:
primary: "#32325d"
temperature: 0.35
saturation: 0.4
typography:
voice: "technical-approachable"
primary: "Helvetica Neue"
spatial:
density: 0.45
whitespace: "moderate"
shape:
edges: "rounded-subtle"
emotion:
primary: "developer-friendly"
era: "contemporary"
artifacts:
- "payment-form-original.png"
- "dashboard-2015.png"
- name: "Scale Era"
period: "2016-2019"
dominant_dna:
chromatic:
primary: "#6772e5" # Shifted to purple
temperature: 0.4
saturation: 0.55
typography:
voice: "confident-professional"
primary: "Camphor" # Custom typeface
spatial:
density: 0.35
whitespace: "generous"
shape:
edges: "rounded-soft"
emotion:
primary: "premium-reliable"
artifacts:
- "atlas-launch.png"
- "radar-2018.png"
transition_trigger: "Series C, enterprise expansion"
- name: "Platform Era"
period: "2019-2023"
dominant_dna:
chromatic:
primary: "#635bff"
gradient: true
temperature: 0.45
typography:
voice: "editorial-authoritative"
secondary: "Söhne" # Editorial addition
spatial:
density: 0.3
whitespace: "extreme"
motion:
energy: 0.5
philosophy: "storytelling"
emotion:
primary: "visionary-trustworthy"
artifacts:
- "sessions-2020.png"
- "identity-2022.png"
transition_trigger: "IPO, product diversification"
- name: "AI Era"
period: "2023-present"
dominant_dna:
chromatic:
primary: "#635bff"
mode: "dark-first"
gradient: "dynamic"
typography:
voice: "confident-innovative"
spatial:
density: 0.35
motion:
energy: 0.6
philosophy: "intelligent"
emotion:
primary: "cutting-edge-trustworthy"
transition_trigger: "AI product launches"
extinction_events:
- date: "2016-09-15"
magnitude: 0.73
description: "Major brand evolution - purple introduction"
strands_affected: ["chromatic", "typography", "emotion"]
- date: "2019-11-20"
magnitude: 0.45
description: "Editorial pivot - Söhne introduction"
strands_affected: ["typography", "spatial"]
- date: "2023-03-01"
magnitude: 0.52
description: "Dark mode primary shift"
strands_affected: ["chromatic", "motion"]
evolution_patterns:
consistent:
- strand: "emotion.primary"
pattern: "Trust maintained across all eras"
deviation: 0.12
evolving:
- strand: "chromatic.primary"
pattern: "Steady warmth increase (+0.03/year)"
correlation: "revenue_growth (r=0.78)"
- strand: "spatial.whitespace"
pattern: "Increasing generosity"
interpretation: "Premium positioning solidification"
cyclical:
- strand: "motion.energy"
pattern: "Peaks during major launches, settles to baseline"
insights:
- "Typography changes precede major business pivots by ~6 months"
- "Whitespace increases correlate with market position confidence"
- "Color warmth tracks customer base diversification"
resurrect_options:
- era: "Startup Era"
use_case: "Nostalgia campaign, throwback marketing"
- era: "Scale Era"
use_case: "Developer-focused sub-brand"Resurrection & Remix
# Resurrect specific era DNA
/dna archaeology resurrect stripe.com --era "startup" --output stripe-retro.yaml
# Create remix combining eras
/dna archaeology remix stripe.com \
--chromatic-from "2016" \
--typography-from "2022" \
--spatial-from "2019"Synaesthetic Translation Engine
Full sensory translation - convert visual DNA to any sensory modality:
# Visual to audio
/dna synesthesia <profile> --to audio --output brand-soundscape.wav
# Visual to haptic patterns
/dna synesthesia <profile> --to haptic --device "apple-watch"
# Visual to olfactory descriptors
/dna synesthesia <profile> --to scent --format "perfumery-notes"
# Visual to tactile (material suggestions)
/dna synesthesia <profile> --to tactile
# Full sensory profile
/dna synesthesia <profile> --to all --output ./sensory-brand/Synaesthetic Schema
synaesthesia:
source_profile: "acme-brand"
translation_confidence: 0.82
visual_essence:
chromatic:
primary: "#1E3A5F"
temperature: 0.45
saturation: 0.35
emotion:
primary: "trustworthy-approachable"
motion:
energy: 0.4
texture:
surface: "smooth"
audio_translation:
soundscape:
ambient_base:
description: "Warm pad with subtle digital undertones"
frequency_center: "180Hz" # From temperature (warm)
texture: "smooth-digital" # From texture.surface
accent_elements:
- type: "bell"
character: "soft-metallic"
reason: "From chromatic.accents - clean, professional"
- type: "subtle-pulse"
bpm: 72 # From motion.energy (calm)
dynamics:
range: "medium" # From emotion.tension
peaks: "gentle"
notification_sounds:
success:
description: "Warm ascending tone, major key"
duration: "0.4s"
notes: ["C4", "E4", "G4"]
error:
description: "Soft descending, neutral"
duration: "0.3s"
notes: ["E4", "C4"]
alert:
description: "Gentle bell, single note"
duration: "0.5s"
voice_guidelines:
timbre: "warm-mid"
pace: "measured"
pitch_range: "moderate"
generated_assets:
- "ambient-loop-60s.wav"
- "notification-success.wav"
- "notification-error.wav"
- "hold-music-3min.wav"
haptic_translation:
devices:
apple_watch:
notification:
type: "notification"
intensity: 0.5 # From motion.energy
sharpness: 0.3 # From shape.edges (rounded)
success:
type: "success"
pattern: "soft-double-tap"
progress:
type: "continuous"
wave: "sine"
frequency: "smooth"
game_controller:
ambient_rumble: "low-subtle"
impact_feedback: "medium-soft"
patterns:
"brand-signature":
description: "Soft pulse, breathe-like rhythm"
sequence: [0.3, 0.5, 0.8, 0.5, 0.3] # Intensity over 1s
loops: 2
olfactory_translation:
scent_profile:
personality: "trustworthy-approachable-modern"
top_notes:
- note: "bergamot"
reason: "From temperature (slightly warm, fresh)"
intensity: 0.3
- note: "green tea"
reason: "From saturation (muted, clean)"
intensity: 0.2
heart_notes:
- note: "cedar"
reason: "From emotion (trustworthy, stable)"
intensity: 0.4
- note: "iris"
reason: "From chromatic.primary (blue undertones)"
intensity: 0.3
base_notes:
- note: "sandalwood"
reason: "From texture (smooth, grounding)"
intensity: 0.4
- note: "amber"
reason: "From motion (warm, subtle)"
intensity: 0.2
overall_family: "woody-aromatic"
use_cases:
retail_space: "Diffuser formula for brand stores"
packaging: "Scented unboxing experience"
candle_collab: "Branded candle specification"
tactile_translation:
material_recommendations:
primary_surface:
material: "brushed aluminum"
finish: "soft-matte"
reason: "Smooth texture + professional emotion"
temperature: "neutral-cool"
secondary_surface:
material: "soft-touch polymer"
finish: "velvet-matte"
reason: "Approachable emotion"
accent_material:
material: "polished brass"
finish: "subtle-shine"
reason: "From accent color warmth"
paper_stock:
business_cards: "cotton 400gsm, soft-touch"
stationery: "uncoated 120gsm, slight tooth"
packaging: "recycled kraft, matte laminate"
fabric_recommendations:
primary: "brushed cotton"
accent: "silk-blend"
gustatory_hints: # Taste associations for experiential marketing
flavor_profile: "subtle-sophisticated"
associations:
- flavor: "dark chocolate (70%)"
reason: "Professional depth with approachability"
- flavor: "earl grey"
reason: "Sophisticated, warm, trustworthy"
- flavor: "sea salt"
reason: "Clean, crisp accent"
brand_collaboration_brief: |
For food/beverage partnerships, lean toward:
- Sophisticated but not pretentious
- Warm undertones
- Clean, quality ingredients
- Subtle complexity over bold flavorsMicro-DNA Fragments
Atomic aesthetic units for precise mixing and matching:
# Extract micro-fragments from profile
/dna micro extract <profile> --output ./fragments/
# View fragment library
/dna micro library
# Combine fragments from multiple sources
/dna micro combine \
--color-from apple \
--typography-from stripe \
--motion-from linear \
--output hybrid.yaml
# Find compatible fragments
/dna micro compatible <fragment-id>
# Fragment diff
/dna micro diff <fragment1> <fragment2>Micro-Fragment Schema
micro_fragments:
profile: "acme-brand"
extraction_date: "2026-02-01"
fragments:
# Chromatic fragments
- id: "frag_chrom_001"
type: "chromatic.swatch"
value:
hex: "#1E3A5F"
role: "primary"
temperature: 0.45
saturation: 0.35
emotional_weight: 0.4
compatibility_tags: ["professional", "trustworthy", "deep"]
pairs_well_with: ["frag_chrom_002", "frag_typo_001"]
conflicts_with: ["frag_chrom_warm_*"]
- id: "frag_chrom_002"
type: "chromatic.swatch"
value:
hex: "#0071E3"
role: "accent"
temperature: 0.5
saturation: 0.65
emotional_weight: 0.25
compatibility_tags: ["action", "digital", "trust"]
- id: "frag_chrom_003"
type: "chromatic.gradient"
value:
stops: [
{color: "#1E3A5F", position: 0},
{color: "#2E4A6F", position: 100}
]
angle: 135
emotional_weight: 0.15
compatibility_tags: ["depth", "subtle", "movement"]
# Typography fragments
- id: "frag_typo_001"
type: "typography.pairing"
value:
headline:
family: "Inter"
weight: 600
tracking: "-0.02em"
body:
family: "Inter"
weight: 400
tracking: "0"
emotional_weight: 0.35
compatibility_tags: ["neutral", "readable", "professional"]
pairs_well_with: ["frag_chrom_*_muted"]
- id: "frag_typo_002"
type: "typography.scale"
value:
ratio: 1.25
base: 16
scale: [12, 14, 16, 20, 25, 31, 39]
emotional_weight: 0.1
# Spatial fragments
- id: "frag_space_001"
type: "spatial.rhythm"
value:
unit: 8
scale: [4, 8, 12, 16, 24, 32, 48, 64]
preferred_gaps: [16, 24, 32]
emotional_weight: 0.2
compatibility_tags: ["orderly", "breathable"]
- id: "frag_space_002"
type: "spatial.container"
value:
max_width: "1200px"
padding:
desktop: 64
tablet: 32
mobile: 16
centering: true
emotional_weight: 0.15
# Motion fragments
- id: "frag_motion_001"
type: "motion.easing"
value:
default: "cubic-bezier(0.25, 0.1, 0.25, 1)"
enter: "cubic-bezier(0, 0, 0.2, 1)"
exit: "cubic-bezier(0.4, 0, 1, 1)"
bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)"
emotional_weight: 0.2
compatibility_tags: ["smooth", "professional"]
- id: "frag_motion_002"
type: "motion.duration"
value:
instant: 100
fast: 200
normal: 300
slow: 500
deliberate: 800
emotional_weight: 0.1
# Shape fragments
- id: "frag_shape_001"
type: "shape.radius"
value:
none: 0
subtle: 4
default: 8
rounded: 12
pill: 9999
emotional_weight: 0.15
compatibility_tags: ["friendly", "modern"]
# Composite fragments
- id: "frag_comp_button"
type: "component.button"
fragments: ["frag_chrom_002", "frag_typo_001", "frag_shape_001", "frag_motion_001"]
value:
padding: "12px 24px"
border_radius: "default"
transition: "all 200ms default"
hover:
transform: "translateY(-1px)"
shadow: "0 4px 12px rgba(0,0,0,0.15)"
emotional_weight: 0.3
fragment_graph:
# Compatibility relationships
edges:
- from: "frag_chrom_001"
to: "frag_typo_001"
strength: 0.92
reason: "Both professional, neutral temperature"
- from: "frag_motion_001"
to: "frag_motion_002"
strength: 1.0
reason: "Designed as pair"
- from: "frag_chrom_001"
to: "frag_chrom_warm_*"
strength: 0.3
reason: "Temperature conflict"
recombination_rules:
required:
- "At least one chromatic fragment"
- "At least one typography fragment"
recommendations:
- "Match temperature across chromatic fragments"
- "Pair easing with compatible duration"
- "Consider emotional weight sum ~1.0 for balance"DNA Simulation Theater
AI-driven exploration of alternate design futures:
# Run "what if" simulation
/dna simulate <profile> --scenario "what if we went dark mode first?"
# Explore branching futures
/dna simulate <profile> --branch 5 --horizon "2 years"
# A/B simulation (without running real test)
/dna simulate <profile> --ab-test "serif-headlines" --predict
# Counterfactual analysis
/dna simulate <profile> --counterfactual "what if we never adopted rounded corners?"
# Competitive simulation
/dna simulate <profile> --if-competitor "launches minimalist rebrand"Simulation Schema
simulation:
profile: "acme-brand"
scenario: "what if we went dark mode first?"
run_date: "2026-02-01"
confidence: 0.74
baseline:
current_state: "light mode primary, dark mode option"
current_metrics:
user_satisfaction: 0.78
engagement: 0.72
accessibility_score: 0.89
brand_recognition: 0.85
simulated_change:
chromatic.mode: "light" → "dark-first"
chromatic.primary: "#1E3A5F" → "#E8E8E8"
chromatic.background: "#FFFFFF" → "#0F0F1A"
predicted_outcomes:
immediate_effects:
user_satisfaction:
change: "+5-8%"
confidence: 0.78
rationale: "78% of target demographic prefers dark mode"
engagement:
change: "+3-6%"
confidence: 0.71
rationale: "Dark mode correlates with longer sessions (industry data)"
accessibility:
change: "-2%"
confidence: 0.85
rationale: "Some users need light mode; requires robust toggle"
risk_mitigation: "Prominent theme toggle, system preference respect"
6_month_effects:
brand_recognition:
change: "+2-4%"
confidence: 0.65
rationale: "Dark mode becoming associated with premium/tech-forward"
developer_perception:
change: "+12%"
confidence: 0.82
rationale: "Developer audience strongly prefers dark interfaces"
competitor_differentiation:
change: "+8%"
confidence: 0.70
rationale: "Only 2/5 direct competitors have dark-first approach"
12_month_effects:
market_positioning:
change: "strengthened in tech-forward segment"
confidence: 0.68
design_debt:
change: "+15% initial (dual-theme complexity)"
recovery: "Normalizes by month 8 as team adapts"
risks:
- risk: "Alienate users who prefer light mode"
probability: 0.25
impact: "medium"
mitigation: "Robust toggle, remember preference, system-aware"
- risk: "Accessibility regression"
probability: 0.30
impact: "high"
mitigation: "WCAG audit before launch, high-contrast option"
- risk: "Implementation complexity"
probability: 0.45
impact: "medium"
mitigation: "CSS custom properties, design token system"
alternative_futures:
- branch: "Stay light-first"
probability_of_staleness: 0.65
timeline: "18 months"
- branch: "Dark-first (this scenario)"
probability_of_success: 0.78
key_success_factor: "Quality toggle UX"
- branch: "Auto-switch based on time"
probability_of_success: 0.82
implementation_complexity: "high"
user_delight_potential: "very high"
recommendation:
verdict: "PROCEED with dark-first"
implementation_order:
1: "Audit accessibility in dark mode"
2: "Implement robust theme toggle"
3: "Update design tokens for dual-theme"
4: "10% rollout with monitoring"
5: "Full rollout with feedback collection"
success_metrics:
- "Theme toggle usage > 15%"
- "No accessibility complaints increase"
- "Session duration maintained or improved"
counterfactual_comparison:
scenario: "What if we had done this 2 years ago?"
missed_opportunity:
brand_perception: "Would be 12% stronger in tech-forward positioning"
developer_adoption: "Estimated +8% in developer segment"
silver_lining:
implementation_quality: "Better tooling available now"
best_practices: "Learned from others' mistakes"Emotional Resonance Engine
Deep mapping of design choices to emotional responses:
# Analyze emotional impact
/dna emotion analyze <profile>
# Map specific strand to emotions
/dna emotion map <profile> --strand chromatic
# Optimize for target emotion
/dna emotion optimize <profile> --target "trustworthy-innovative"
# Cultural emotion calibration
/dna emotion calibrate <profile> --culture "japanese"
# Emotion A/B test prediction
/dna emotion predict <profile> --change "warmer colors" --audience "gen-z"Emotional Resonance Schema
emotional_resonance:
profile: "acme-brand"
analysis_date: "2026-02-01"
primary_emotions:
detected:
- emotion: "trustworthy"
strength: 0.82
contributors:
- strand: "chromatic.primary"
contribution: 0.3
mechanism: "Blue hues associated with stability and reliability"
- strand: "typography.voice"
contribution: 0.25
mechanism: "Professional typeface signals competence"
- strand: "spatial.whitespace"
contribution: 0.15
mechanism: "Generous space suggests confidence, not desperation"
- strand: "motion.philosophy"
contribution: 0.12
mechanism: "Purposeful animation suggests intentionality"
- emotion: "approachable"
strength: 0.71
contributors:
- strand: "shape.edges"
contribution: 0.35
mechanism: "Rounded corners reduce perceived threat"
- strand: "chromatic.temperature"
contribution: 0.2
mechanism: "Warmer tones feel inviting"
- strand: "typography.weight_range"
contribution: 0.16
mechanism: "Lighter weights feel less imposing"
- emotion: "innovative"
strength: 0.58
contributors:
- strand: "motion.energy"
contribution: 0.25
mechanism: "Active interfaces suggest forward-thinking"
- strand: "texture.depth"
contribution: 0.18
mechanism: "Layering suggests sophistication"
emotion_gaps:
- target: "innovative"
current: 0.58
desired: 0.75
recommendations:
- change: "Increase motion.energy by 0.15"
expected_impact: "+0.08 innovative"
trade_off: "-0.03 calm"
- change: "Add subtle gradient to backgrounds"
expected_impact: "+0.05 innovative"
trade_off: "none significant"
- change: "Introduce micro-interactions"
expected_impact: "+0.07 innovative"
trade_off: "+10ms interaction latency"
cultural_calibration:
western:
trustworthy: 0.82
approachable: 0.71
innovative: 0.58
japanese:
trustworthy: 0.78 # Slightly lower - different trust signals
approachable: 0.62 # Western warmth reads differently
innovative: 0.65 # Higher - aesthetic aligns with Japanese design values
refined: 0.72 # Additional positive detection
cultural_notes:
- "Whitespace (ma) resonates strongly with Japanese aesthetics"
- "Blue trust association holds cross-culturally"
- "Rounded corners read as 'kawaii' (cute) - may need adjustment for professional context"
adjustments_for_japan:
- "Consider sharper edges for B2B context"
- "Reduce animation for cultural preference toward subtlety"
- "Leverage whitespace as strength"
emotion_strand_map:
# How each strand affects emotions
chromatic:
temperature:
warm: ["+welcoming", "+energetic", "-professional"]
cool: ["+trustworthy", "+calm", "-approachable"]
saturation:
high: ["+energetic", "+young", "-sophisticated"]
low: ["+sophisticated", "+calm", "-exciting"]
typography:
serif: ["+established", "+trustworthy", "-modern"]
sans: ["+modern", "+clean", "-traditional"]
weight_heavy: ["+bold", "+confident", "-approachable"]
weight_light: ["+elegant", "+approachable", "-authoritative"]
spatial:
dense: ["+information-rich", "+efficient", "-calm"]
spacious: ["+premium", "+calm", "+focused", "-efficient"]
motion:
high_energy: ["+exciting", "+innovative", "-calm", "-trustworthy"]
low_energy: ["+calm", "+trustworthy", "-exciting"]
bouncy: ["+playful", "+approachable", "-professional"]
smooth: ["+professional", "+premium", "-playful"]
neuro_aesthetic_basis:
research_citations:
- "Elliot & Maier (2014) - Color and psychological functioning"
- "Lidwell et al. (2010) - Universal Principles of Design"
- "Norman (2004) - Emotional Design"
principles_applied:
- principle: "Mere exposure effect"
application: "Familiar typefaces increase trust"
- principle: "Processing fluency"
application: "High contrast improves perceived quality"
- principle: "Gestalt principles"
application: "Grouping creates sense of order → trust"DNA Memory Networks
Associative connections between profiles based on shared aesthetic genes:
# Find related profiles
/dna memory related <profile> --depth 2
# Explore memory network
/dna memory explore <profile> --visualize
# Find common ancestors
/dna memory ancestors <profile1> <profile2>
# Trace influence path
/dna memory trace <source-profile> --to <target-profile>
# Discover unexpected connections
/dna memory serendipity <profile>Memory Network Schema
memory_network:
profile: "acme-brand"
network_updated: "2026-02-01"
connections:
direct_relatives:
- profile: "stripe-2022"
relationship: "sibling"
shared_genes:
- strand: "typography.voice"
similarity: 0.89
- strand: "spatial.whitespace"
similarity: 0.85
- strand: "emotion.primary"
similarity: 0.78
overall_similarity: 0.76
- profile: "linear-2023"
relationship: "cousin"
shared_genes:
- strand: "motion.philosophy"
similarity: 0.92
- strand: "chromatic.mode"
similarity: 0.87
overall_similarity: 0.68
ancestors:
- profile: "swiss-design-1960s"
relationship: "ancestor"
generation_distance: 4
inherited_genes:
- "spatial.grid: strict"
- "typography.voice: functional"
- "hierarchy.method: clear"
influence_strength: 0.45
- profile: "apple-2010s"
relationship: "ancestor"
generation_distance: 2
inherited_genes:
- "spatial.whitespace: extreme"
- "shape.edges: rounded"
- "emotion.primary: premium"
influence_strength: 0.62
descendants:
- profile: "acme-mobile-2025"
relationship: "child"
mutations:
- "spatial.density: +0.1 (mobile adaptation)"
- "motion.energy: -0.1 (battery consideration)"
unexpected_connections:
- profile: "muji-identity"
relationship: "convergent evolution"
note: "No direct lineage but similar aesthetic conclusions"
shared_philosophy: "simplicity, quality, intention"
similarity: 0.71
- profile: "braun-1960s"
relationship: "distant influence"
pathway: "braun → apple → acme"
residual_genes: ["form-follows-function", "honest-materials"]
influence_graph:
# Who influenced whom
nodes:
- id: "bauhaus"
era: "1920s"
type: "movement"
- id: "swiss-style"
era: "1950s"
type: "movement"
- id: "apple-design"
era: "2000s"
type: "brand"
- id: "stripe"
era: "2010s"
type: "brand"
- id: "acme-brand"
era: "2020s"
type: "brand"
edges:
- from: "bauhaus"
to: "swiss-style"
genes: ["grid", "typography", "function"]
- from: "swiss-style"
to: "apple-design"
genes: ["whitespace", "clarity", "minimalism"]
- from: "apple-design"
to: "stripe"
genes: ["premium", "whitespace"]
- from: "stripe"
to: "acme-brand"
genes: ["developer-aesthetic", "editorial"]
serendipity_discoveries:
- connection: "acme-brand ↔ studio-ghibli-2020s"
unexpected_because: "Different industries (tech vs animation)"
shared_genes:
- "emotion.primary: approachable-quality"
- "spatial.philosophy: breathing room"
insight: "Both prioritize craft over trend, quality over flash"
- connection: "acme-brand ↔ japanese-tea-ceremony"
unexpected_because: "Different eras, cultures, mediums"
shared_genes:
- "spatial.intention: deliberate"
- "motion.philosophy: purposeful"
- "texture.honesty: true materials"
insight: "Wabi-sabi principles manifest in digital minimalism"CLI Summary (Gen 15)
# DNA Archaeology
/dna archaeology dig <url> --years <n>
/dna archaeology timeline <url> --visualize
/dna archaeology events <url>
/dna archaeology resurrect <url> --snapshot <date>|--era <name>
/dna archaeology compare <url> --then <date> --now
/dna archaeology remix <url> --<strand>-from <date>
# Synaesthetic Translation
/dna synesthesia <profile> --to <audio|haptic|scent|tactile|all>
/dna synesthesia <profile> --to audio --output <file>
/dna synesthesia <profile> --to scent --format perfumery-notes
# Micro-DNA Fragments
/dna micro extract <profile>
/dna micro library
/dna micro combine --<type>-from <source>
/dna micro compatible <fragment-id>
/dna micro diff <fragment1> <fragment2>
# DNA Simulation Theater
/dna simulate <profile> --scenario "<description>"
/dna simulate <profile> --branch <n> --horizon <time>
/dna simulate <profile> --ab-test <test-name> --predict
/dna simulate <profile> --counterfactual "<question>"
/dna simulate <profile> --if-competitor "<event>"
# Emotional Resonance Engine
/dna emotion analyze <profile>
/dna emotion map <profile> --strand <strand>
/dna emotion optimize <profile> --target "<emotions>"
/dna emotion calibrate <profile> --culture <culture>
/dna emotion predict <profile> --change "<change>" --audience <segment>
# DNA Memory Networks
/dna memory related <profile> --depth <n>
/dna memory explore <profile> --visualize
/dna memory ancestors <profile1> <profile2>
/dna memory trace <source> --to <target>
/dna memory serendipity <profile>---
Generation 15: Added DNA Archaeology (historical excavation from Wayback Machine, era resurrection, evolution timeline reconstruction), Synaesthetic Translation Engine (visual-to-audio, haptic, olfactory, tactile, and gustatory mapping for multi-sensory brand experiences), Micro-DNA Fragments (atomic aesthetic units for precise mixing, compatibility graphs, recombination rules), DNA Simulation Theater (AI-driven "what-if" scenarios, branching futures, counterfactual analysis, competitive simulation), Emotional Resonance Engine (neuro-aesthetic mapping, cultural calibration, emotion optimization), and DNA Memory Networks (influence lineage, convergent evolution discovery, serendipitous connections between unrelated profiles).
---
Evolution Techniques Applied (HEF Task)
This evolution (Instance 38, Gen 7 → Gen 8) applied:
- G01 (Brainstorm): Generated initial concepts for DNA Archaeology and Simulation Theater
- G04 (Analogy): Applied archaeology metaphor to design history, theater metaphor to simulations
- G09 (Exaggerate): Pushed synaesthesia to full sensory spectrum including olfactory/gustatory
- R03 (Simplify): Created Micro-DNA Fragments as minimal atomic units
- R04 (Elaborate): Expanded Emotional Resonance with neuro-aesthetic research basis
- S04 (Metamorphose): Transformed static DNA into living Memory Networks with relationships
Evolution Philosophy: Design DNA is not just a snapshot—it's a living history, a multi-sensory experience, and a network of influences. Generation 15 recognizes that aesthetics exist across time, across senses, and across relationships.
Promotion Decision
Attach run IDs, datasets, metrics, and reproduction commands.
Source Anchor
homelab/clawdbot/skills/aesthetic-dna/SKILL.md
Detected Structure
Method · Evaluation · References · Figures · Code Anchors · Architecture