8 numbers generate
an entire design system.
Like a world generated from a seed. Eight gene values expand into hundreds of design tokens, a full motion vocabulary, and infinite page compositions, deterministically. Same seed, same site. Always.
8 Genes. Infinite Designs.
Every preset below is a distinct aesthetic, minimal premium, warm & inviting, neon cyber, heritage parchment. Pick one and watch hundreds of design properties shift in unison. Then drag the sliders.
Presets, brand-accurate colors
Those 8 numbers just generated your entire visual identity. Here's exactly what they produced.
A Brand Guide, Grown From Yours
Colors, typography, spacing, shadows, animation timing, corner radii, the complete foundation of a brand guide. Not guessed. Derived. Change one gene, every token follows.
Color Palette
Typography
Spacing Scale
Animation Timing
Each bar fills at its actual speed, the fast bar completes quickly, the emphasis bar takes its time. Energy gene: 0.05.
Shadows & Depth
Border Radius
Hundreds of tokens from eight numbers. Here's the complete specification, the recipe and the meal.
The Design Seed
A few dozen bytes of DNA plus a skin material generate a complete design system. The whole specification is deterministic and reproducible: same seed, same site.
{ "$schema": "https://sitecast.com/schemas/theme/v1.json", "meta": { "name": "DNA-Derived Theme", "version": "1.0.0", "description": "Light theme derived from 8 DNA genes. Hue 40°.", "author": "Sitecast DNA Engine", "tags": [ "light", "cool", "formal", "calm" ] }, "dna": { "energy": 0.05, "warmth": 0.6, "contrast": 0.25, "playfulness": 0, "density": 0.6, "era": 0, "luminosity": 0, "gravitas": 0.8 }, "skin": { "material": { "smoothness": 0.52, "regularity": 0.5, "sheen": 0, "transparency": 0, "temperature": 0.56, "saturation": 0.26, "density": 0.6, "organic": 1, "age": 0.4, "patternType": "weave" }, "treatment": { "family": "paper", "_note": "Treatment family inferred from DNA. AI can override with explicit selection." } }}The top section is the recipe, eight gene values plus a skin material (a few dozen bytes). Click any section below to expand. Store the recipe, regenerate the meal anytime.
Same tokens. Completely different material reality. Paper, neon, metal, silk, the skin transforms everything.
One Genome, Six Worlds
Like skins for the AI era. The DNA stays the same, the entire visual vocabulary transforms. Click between neon, letterpress, and pixel art. Same brand. Different universe.
No treatment, pure DNA expression. Whatever the genes produce, you see directly.
Build something extraordinary
Adjust the DNA sliders above, this preview responds. The colors, shadows, and spacing adapts to your genes in real-time.
Try adjusting DNA sliders while viewing different skins. The same gene change produces different visual results through each treatment, warm Neon glows orange, warm Paper gets a cream tint, warm Metal barely shifts.
Tokens and textures are invisible infrastructure. What do they actually build?
Components That Derive Themselves
Buttons, cards, inputs, badges, tabs, typography, every variant is mathematically derived from your genes. Every variant derives from your genes, so nothing drifts off-brand.
Sizes
With Icons
Static components are blueprints. A full motion vocabulary brings them to life.
Physics-Based Motion
Every animation speed, spring constant, and easing curve comes from the Energy and Playfulness genes. Low energy = meditative. High energy = explosive. Hit replay and feel it.
FadeIn
SlideIn
TypewriterText
Confetti
Components + motion compose into dozens of named patterns that AI selects and arranges.
Expressiveness, Earned
Dozens of compositions, each with three expression tiers. High gravitas = minimal (zero atoms, clean HTML). High energy = expressive (gradients, glow, spring physics). The DNA sets the range. Our designers tune within it.
Zero atoms. Pure semantic HTML. Typography-driven.
Selection rule: gravitas > 0.6 & energy < 0.3 · Atoms used: none
Build something
extraordinary
The future of web design, powered by intelligence.
Compositions are vocabulary. Blocks are grammar, AI arranges them with psychological intent.
Layout x Intent x Compositions
Layouts × intents × compositions. Infinite element combinations. Each intent modulates DNA, heroes feel energetic, testimonials feel warm, footers feel restful. One page, one narrative arc.
Layout
Intent
You've experienced every layer. Here's why none of it breaks.
Biology From Physics
Four layers, each emerging from the one below, exactly how reality works. Physics enables genetics. Genetics configures elements. Elements compose into living organisms. You just saw all four.
Physics Layer
Genetics Layer
Elements Layer
Organisms Layer
From Intent to Deployed Site
Brand description to DNA to tokens to components to compositions to page sections to complete website. One direction. No bypasses. No hardcoded values. Guaranteed consistency.
What 8 Genes Produce
A compact specification that expands into a complete, coherent, production-ready design system.
Describe your brand. We cast the site.
Eight genes. Hundreds of tokens. A full motion vocabulary. Every site, coherent by design.