Design System
Earthy, organic, bioluminescent -- a design language from the forest floor
Harvested from the damp woodland floor and the ghostly glow of bioluminescent fungi. Deep forest blacks anchor the palette while mushroom tans bring warmth, and ethereal cyan-green accents pulse like foxfire in the dark.
Fraunces brings organic, slightly wonky letterforms to headings -- its soft serifs feel grown rather than drawn. DM Sans provides clean, readable body text like the clear air between trees.
Like the branching patterns of hyphae, spacing grows in measured increments. Dense where connections cluster, open where the forest breathes. A base unit of 4px multiplied by organic ratios.
On Fungal Geometry
Mycelium networks follow neither strict grids nor pure randomness. They branch at roughly consistent angles, filling space efficiently. Our spacing scale mirrors this: predictable increments that feel organic rather than mechanical.
Buttons shaped like smooth mushroom caps -- rounded, tactile, and glowing with bioluminescent energy when active. The primary action pulses with the signature foxfire cyan; secondary actions remain grounded in earth tones.
Input fields sit in the dark loam like prepared substrate, their borders barely visible until focused, when they illuminate with a soft bioluminescent glow -- the organism responding to interaction.
Content containers shaped by their purpose -- some glow with the mycelium network's luminescence, others are grounded and earthy like a mushroom cap emerging from the humus. Each holds its contents like a hollow log harboring life.
A simple container in the dark loam. Minimal borders, generous padding, and a quiet presence on the forest floor.
Connected to the network. A luminous gradient border signals that this card carries active, interconnected information.
Warm earth tones with a subtle radial gradient that suggests the rounded dome of a fruiting body emerging from bark.
Floating spore particles drift across this card as subtle dot patterns. Use it for content that feels like it is dispersing outward, spreading knowledge like spores on the wind.
Mycorrhizal fungi form mutualistic relationships with over 90% of plant species. The fungus extends the plant's root network, accessing water and minerals the roots cannot reach alone.
Signals from the network. Each alert carries a distinct luminescence -- informational violet, successful cyan, cautionary ochre, and critical rust. Like chemical signals passing through hyphae, they communicate urgency through color alone.
Mycelium Signal
The network has detected new organic matter on the forest floor. Hyphae are extending toward the substrate for decomposition analysis.
Colonization Complete
Mycelium has fully colonized the substrate. Primordia are forming. Expect fruiting bodies within 7-14 days under current humidity conditions.
Humidity Dropping
Ambient humidity has fallen below 80%. The fruiting chamber requires misting to prevent primordia from aborting. Increase frequency of FAE cycles.
Contamination Detected
Green mold (Trichoderma) spotted in sector 4B. Isolate the affected substrate immediately. The competing organism is aggressive and will outcompete the culture if not contained.
Structured information arranged like a mycologist's field log. Muted rows with gentle hover states let each specimen entry stand clearly against the dark substrate.
| Species | Habitat | Cap Color | Edibility | Status |
|---|---|---|---|---|
| Mycena chlorophos | Subtropical forest | Pale green (luminous) | Unknown | Bioluminescent |
| Cantharellus cibarius | Mixed woodland | Golden yellow | Choice edible | Fruiting |
| Amanita muscaria | Birch, pine forest | Scarlet with white warts | Toxic | Warning |
| Pleurotus ostreatus | Dead hardwood | Grey to blue-grey | Choice edible | Cultivated |
| Trametes versicolor | Dead logs, stumps | Multicolored zones | Medicinal | Perennial |
Small classification markers, like the spore print colors a mycologist uses to identify species. Glowing variants signal active states; muted tones indicate archived or dormant data.
The philosophy underlying this system draws from the biology of fungi -- organisms that connect, decompose, transform, and illuminate the darkness.
Dark backgrounds are the substrate. Content emerges from the dark like fruiting bodies from loam. Light is earned, not given freely -- use bioluminescent accents sparingly for maximum impact.
Like the mycelium network that links trees across a forest, UI elements should feel interconnected. Consistent spacing, shared color tokens, and cohesive type create a unified organism.
Prefer rounded shapes, soft gradients, and natural proportions over sharp angles and mechanical grids. Nature does not render in 90-degree corners.
Use bioluminescent color as a signaling mechanism. Cyan for primary actions, green for success, violet for information. Like real bioluminescence, the glow should feel purposeful, not decorative.