Crystal Design System

A gemstone-themed design system with 8 themes, Fibonacci spacing, and 60+ components.

Welcome to the Crystal Design System documentation.

Crystal is a multi-axis design system built for the ArtasceOne monorepo. It combines gemstone-inspired themes (Axis 1) with crystallization presets (Axis 2) to produce a wide range of visual identities from a single token system.

Quick Start

pnpm add @artasce/crystal-tokens @artasce/crystal-ui

Wrap your app with CrystalProvider:

import { CrystalProvider } from '@artasce/crystal-ui';

export default function Layout({ children }) {
  return (
    <CrystalProvider theme="diamond" crystallization="clean">
      {children}
    </CrystalProvider>
  );
}

Core Concepts

Themes

8 gemstone themes: Diamond, Onyx, Garnet, Sapphire, Amethyst, Citrine, Ruby, Emerald

Spacing

Fibonacci scale: 4 → 8 → 16 → 24 → 40 → 64 → 104 → 168 → 272

Components

60+ components from Crystal primitives to shadcn/ui with Crystal theming

Motion

GSAP-powered animations with ScrollTrigger, ScrollSmoother, and SplitText

Architecture

Crystal is distributed as three packages:

Package	Purpose
`@artasce/crystal-tokens`	Design tokens via Style Dictionary v4 (CSS, JSON, Dart)
`@artasce/crystal-ui`	React components, shadcn/ui primitives, device mockups
`@artasce/crystal-wordpress`	WordPress theme + plugin with Elementor widgets

Dual-Axis System

Crystal's power comes from combining two independent axes:

Axis 1 — Themes control color palettes: background, foreground, accent, border, and surface colors. Each theme is a complete palette.

Axis 2 — Crystallizations control shape and personality: border-radius, shadow depth, blur, border width, and motion timing. Five presets (Clean, Dream, Edge, Luxe, Bold) define different visual characters.

Any theme can be combined with any crystallization, producing 40+ unique visual combinations from just 13 variables.