Crystal Design System

8 gemstone themes. 5 crystallization presets. Fibonacci spacing. 60+ components. One system that powers an entire portfolio.

Dual-Axis System

8 Themes × 5 Crystallizations

Every theme can be combined with any crystallization preset, producing 40 unique visual identities from a single token system.

clean
dream
edge
luxe
bold
diamond
onyx
garnet
sapphire
amethyst
citrine
ruby
emerald
Crystal in the Wild

Powering Real Projects

Crystal themes and components are used across the Artasce portfolio, from internal tools to client-facing products.

OpsCenter

Live

Internal command console

onyx×edge

artasce.com

Live

Agency portfolio

diamond×clean

Mademoiselle

Development

Fashion e-commerce

amethyst×dream

Fibonacci Spacing

Every spacing value follows a Fibonacci-inspired scale, creating natural visual harmony across all components.

4
8
16
24
40
64
104
168
272

4 → 8 → 16 → 24 → 40 → 64 → 104 → 168 → 272

Start Building with Crystal

Explore the documentation, browse components in Storybook, or dive into the showcase to see Crystal in action.