Design Aesthetic Reference
Crystal Core
Faceted Geometry & Prismatic Light
A gemstone-inspired design language drawn from translucent facets, prismatic refractions, and the rich color formations of amethyst, quartz, citrine, and sapphire — translated into luminous digital interfaces.
Typography
Faceted Elegance
geometric precision meets gemstone luxury
Display / Raleway 700
Prismatic
Heading / Raleway 600
Luminous Headlines
Accent / Cormorant Garamond
Gemstone elegance & crystal clarity
Body / Inter 400
Optimized for legibility against translucent, layered surfaces. The humanist warmth of Inter keeps Crystal Core approachable beneath its gemstone luxury.
Technical / Space Grotesk
FACET COUNT: 57 | REFRACTIVE INDEX: 1.544
Label / Raleway 600
Interface Labels & Tags
Type Scale
Font Pairings
Raleway + Inter
Elegant crystal facets meet crisp readability
Raleway + Cormorant Garamond
Full luxury: geometric meets classic serif
Space Grotesk + Inter
Technical precision meets friendly readability
Color Palette
The Mineral Kingdom
every color traced to a real gemstone
Components
Crystal-Cut Cards
translucent surfaces lit from within
Faceted Geometry
Angular, polygon-based shapes that evoke the cut surfaces of gemstones. Hexagons, triangles, and irregular polyhedra define the layout language.
Geometry AngularTranslucent Layering
Surfaces with variable opacity reveal color and content beneath, like light passing through a thin crystal slab. Depth without weight.
Glass DepthPrismatic Dispersion
Rainbow-spectrum accents and gradient edges simulate white light splitting into spectral bands through a prism. Reserved for focal points.
Prismatic AccentInternal Luminescence
Elements appear to glow from within, as if lit by light trapped inside a crystal cavity. Radial gradients and soft box-shadows achieve this effect.
Glow RadialGeode Gradients
Banded color transitions that mirror the concentric layers visible when a geode is cracked open. From deep amethyst through rose quartz to clear quartz.
Gradient BandedIridescent States
Color-shifting hover and focus states replicate the play-of-color seen in opal and labradorite. Interactive feedback drawn from the mineral world.
Hover InteractiveVisual Effects
CSS Crystal Techniques
prismatic light and mineral depth, zero image assets
Geode Gradient
Banded multi-stop linear gradient mimics the concentric color layers inside a cracked geode.
Prismatic Shift
Oversized background with animated position creates the color play of light moving through a prism.
Crystal Facets
Angled linear gradients at varying degrees simulate the flat planes of a cut gemstone.
Internal Glow
Blurred radial gradient with pulsing animation creates light trapped inside a crystal cavity.
Fracture Lines
Ultra-thin angled linear gradients create the hairline cracks found in natural mineral specimens.
Opal Shimmer
Scattered radial gradients in spectral colors with drift animation replicate opal play-of-color.
Interactive Elements
Crystal Buttons
refracted light and gemstone depth
When a beam of light enters a gemstone, it refracts, splits into spectral hues, and exits through angled facets in unpredictable, luminous patterns. This interplay of transparency, color dispersion, and geometric precision is the foundation of every Crystal Core design decision.— The Crystal Core Design Philosophy
Enter the Geode
precious, luminous & groundedCrystal Core translates the raw geological beauty of mineral specimens into digital form. Dark backgrounds, jewel-toned surfaces, and prismatic light — like holding a polished gemstone up to the light.
Back to the Surface