A design system carved from crystal cross-sections, strata layers, gemstone facets, and geode interiors. Where deep time meets digital surfaces.
Drawn from mineral specimens, agate slices, and geological strata. Each color named for its source formation.
Geologica for display and headings, IBM Plex Sans for body text, IBM Plex Mono for specimen data and labels.
SiO2 · Hardness 7 · Hexagonal
Built on a 4px base unit, like layers of sediment deposited over deep time.
Faceted edges with crystalline highlights. Each variant named for its mineral source.
Input fields shaped like core sample data entries. Focus states emit a crystalline glow.
Mineral specimen cards with agate, geode, crystal, and malachite banding headers.
Concentric bands of microcrystalline quartz formed in volcanic vesicles over millions of years. Each band records a change in mineral-rich groundwater.
Hollow rock cavities lined with inward-pointing crystals. The purple hue comes from trace iron impurities and natural irradiation.
Translucent pink variety of quartz. The color originates from trace amounts of titanium, iron, or manganese in the crystal lattice.
Banded copper carbonate mineral with distinctive green swirls. Forms in the oxidizing zone of copper ore deposits alongside azurite.
A plagioclase feldspar displaying brilliant iridescent optical effects known as labradorescence. The schiller effect is caused by light refracting between sub-microscopic lamellae of different compositions.
Status messages styled as mineral indicators. Each alert type corresponds to a distinct mineral.
Tab navigation styled as geological survey waypoints.
Tabular specimen data in the style of a mineralogical reference sheet.
| Mineral | Formula | Crystal System | Hardness | Luster |
|---|---|---|---|---|
| Quartz | SiO2 | Hexagonal | 7 | Vitreous |
| Fluorite | CaF2 | Cubic | 4 | Vitreous |
| Topaz | Al2SiO4(F,OH)2 | Orthorhombic | 8 | Vitreous |
| Corundum | Al2O3 | Trigonal | 9 | Adamantine |
| Galena | PbS | Cubic | 2.5 | Metallic |
| Calcite | CaCO3 | Trigonal | 3 | Vitreous / Pearly |
Mineral-coded classification labels for specimen tagging and status indicators.
Three divider styles reflecting different geological formations: crystal, faceted, and strata.
Crystal (simple)
Faceted (zig-zag clip-path)
Strata (layered bands)
The geological forces that shaped this design system.
Every element follows a lattice of consistent spacing and alignment. Like atoms in a crystal, components snap to a defined grid with predictable relationships.
Information layers stack like geological strata. Background, surface, and elevated elements each occupy a distinct depth, creating clear visual hierarchy.
Colors derive from real mineral specimens. Each hue serves a semantic purpose rooted in its geological origin, from amethyst's authority to citrine's warmth.
Interactions reveal inner facets like cutting a gemstone. Hover states, focus rings, and transitions expose luminous surfaces beneath the exterior.
Animations move at geological pace. Transitions are deliberate and smooth, never jarring. Like mineral formation, the interface reveals itself gradually.
Repeating patterns, like agate bands, provide rhythm without monotony. Each repetition carries subtle variation that rewards close inspection.