A Living Design System
Phino is a design system that grows instead of being assembled. A compact genetic seed expresses into a complete interface: colors, motion, depth, layout, time, touch, and sound, all harmonically linked by the golden ratio.
Most design systems are collections of components. Tokens are chosen by hand, documented in spreadsheets, and maintained through convention. Change one value and you ripple through a cascade of manual adjustments. The system works, but it doesn't breathe.
Phino takes a different approach. Instead of defining every value directly, you define a genome: a compact set of genes that express into a full phenotype. Change one gene and the entire system recalculates harmonically. The math that governs this expression is rooted in phi (1.618...), the golden ratio found throughout natural growth patterns.
The name "Phino" (phi + no, from the Greek) reflects this foundation. The golden ratio isn't just a style choice. It's the mathematical constant that produces proportions humans consistently perceive as balanced. Phino uses it everywhere: spacing scales, font sizes, color distribution, animation timing, shadow depth, grid rhythms.
The architecture follows a pattern borrowed from biology: genotype to phenotype. In genetics, a compact DNA sequence (genotype) expresses into the observable characteristics of an organism (phenotype). Phino works the same way. A ColorGenome with five genes (hue, saturation, lightness, accent hue, and neutral saturation) expresses into a complete color system: ten-step primary and accent scales, semantic surface colors, accessible text pairings, and tinted brand colors. One genome, hundreds of derived values, all mathematically consistent.
This is what we mean by a design system that breathes. It doesn't just hold values. It generates them.
The Genome Concept
Every aspect of Phino's output is expressed from a genome. Change one gene, and the entire phenotype shifts in harmony, like adjusting the DNA of an organism rather than painting its fur.
A Phino genome is intentionally small. The color genome has just five genes. The motion genome has three. This compression is the point: a small input space means every configuration produces a coherent, usable result. There are no "broken" combinations because the expression math enforces harmony.
When you set genome="ocean" in your app, you're not choosing a static theme. You're planting a seed. The expression functions calculate hundreds of design tokens from that seed: color scales, contrast-safe text colors, shadow depths, animation curves, spacing rhythms, and more.
Here's what expression looks like in practice. A ColorGenome might contain:
- hue: 210 (steel blue)
- saturation: 55
- lightness: 52
- accentHue: 340 (warm rose)
- neutralSaturation: 8
From these five values, expressGenome() produces a ColorPhenotype containing:
- A primary scale of ten shades (0-9), logarithmically distributed
- An accent scale of ten shades
- A neutral scale for text and backgrounds
- Semantic surfaces (base, raised, sunken, overlay) that respect dark/light mode
- Text colors (primary, secondary, tertiary, disabled, on-primary) with WCAG AA contrast guarantees
- Tint colors that are automatically contrast-checked against surfaces
- Border colors at three intensity levels
Every pillar works this way. The Bloom genome (three genes: energy, complexity, personality) expresses into a complete motion system with duration curves, easing functions, stagger timings, and spring configurations. One gene change shifts every animation in your app coherently.
The preset genomes (ocean, sunset, forest, aurora, midnight, ember, glacier, sakura, desert, arctic) are just starting points. The real power is that you can create your own genome with any gene values, and the system guarantees a usable, harmonically consistent result.
The Pillars
Phino organizes design into pillars, each governing a sensory domain. Together they form a complete interface language: not just visual, but spatial, temporal, tactile, and auditory.
Each pillar has its own genome type, expression function, and phenotype output. They're independent but designed to harmonize. When Bloom's motion energy is high, Chronos's time perception adjusts to match. When Chromata shifts to a dark palette, Locus's shadows deepen proportionally.
The current pillars are: Chromata (color), Bloom (motion), Locus (depth and space), Tropos (interaction), Chronos (time), Haptica (touch), Strata (layout), Sonora (audio), and Persona (presentation, visual personality, and component styling). More can be added as new sensory domains emerge.
A brief tour:
Chromata generates color from five genes. Ten-step scales, semantic surfaces, automatic dark mode inversion, WCAG-compliant contrast. The foundation everything else builds on.
Bloom governs motion: how things move, how long transitions take, how elements stagger. Three genes (energy, complexity, personality) express into duration scales, easing curves, and spring physics.
Locus controls spatial depth. Shadows, elevation layers, parallax coefficients, and z-index mapping. Makes interfaces feel like they occupy real space.
Tropos defines interaction physics. How buttons resist a press, how sliders feel springy, how scroll momentum builds. Expressed from responsiveness, resistance, and momentum genes.
Chronos manages time perception. Pulse rates, tick intervals, decay curves, and the system's sense of temporal rhythm. Controls how content ages, updates, and breathes over time.
Haptica handles touch targets, gesture thresholds, and physical feedback parameters. Ensures every interactive element meets accessibility minimums while feeling intentionally sized.
Strata produces layout grids, spacing rhythms, and responsive breakpoints. Column counts and gap sizes follow Fibonacci sequences scaled by phi.
Sonora maps interface events to audio feedback: subtle tones for navigation, confirmations, errors. Opt-in and respectful of user preferences.
Persona controls presentation details: border radii, corner softness, visual weight, and component-level styling. It gives each genome its distinctive visual character.
Each pillar can be configured independently, but the preset genomes provide coordinated defaults across all of them. The Lab page on this site lets you adjust every gene in real time and see the phenotype shift live.
Reading This Post
You're experiencing Progressive Depth right now. Use the toggle above to switch between Skim, Read, and Deep Dive modes. Each reveals a different layer of this post.
Every section is written in three layers, named after a forest ecosystem. Canopy is the topmost layer, always visible, stating the key claim. Understory adds context and reasoning. Mycelium goes deep with full details, examples, and technical specifics.
The proportions follow the golden ratio: if a canopy is roughly 50 words, the understory is about 80, and the mycelium about 130. This creates a natural deepening rather than an abrupt jump between levels.
Progressive Depth ships as @bytequilt/progressive-depth, an open package that provides headless components, hooks, and styled defaults. The three reading modes (canopy for Skim, standard for Read, and deep for Deep Dive) control which layers are visible.
The implementation is lightweight: CSS max-height and opacity transitions handle the expand/collapse, with prefers-reduced-motion respected automatically. No JavaScript animation library required.
On this blog, the Phino design system provides the visual treatment. The progressive-depth toggle uses Phino's primary color scale, Bloom's transition timing, and Locus's shadow depth, all derived from whatever genome is currently active. Switch your genome in the floating control panel and watch the toggle adapt.
Every post on this blog will support Progressive Depth. Choose your level and read at your pace.
What's Next
Explore the Phino ecosystem: visit the Lab to edit genomes in real time, browse Specimens for preset galleries, or dive into the Docs to start building.
Upcoming blog posts will cover individual pillars in depth: how Chromata's expression math works, how Bloom derives easing curves from personality genes, and how Locus creates spatial hierarchy from a single elevation seed. We'll share design philosophy, implementation patterns, and the thinking behind the system.
This blog is also a testbed. The interface you're reading adapts to your chosen genome. Switch between ocean, sunset, forest, or any preset in the floating Lily panel and experience how a living design system responds.
Some posts will be short, just a canopy and understory exploring a single idea. Others will go deep into implementation, with code examples and architectural diagrams. Progressive Depth isn't a mandate; it's a tool. Sections that don't benefit from three layers won't have them.
To start building with Phino:
Wrap your app in PhinoProvider, choose a genome, and every component inherits a complete, harmonically consistent design system. No token spreadsheets. No manual color picking. Just genes and expression.
Welcome to Phino. We're glad you're here.