Crystal/Showcase

Design Tokens

The foundational building blocks of the Crystal Design System. All tokens are available as CSS custom properties and can be consumed via the@artasce/crystal-tokenspackage.

Colors

Primary, accent, surface, and semantic color tokens

Typography

Font families, sizes, weights, and line heights

Display

Body Text

Monospace

Spacing

Fibonacci-based spacing scale (4px to 272px)

Themes

Eight Crystal themes with full token sets

Quick Reference

CSS Import
@import '@artasce/crystal-tokens/css';

/* Or in Next.js */
import '@artasce/crystal-tokens/css';
Usage
.my-component {
  background: var(--crystal-surface);
  color: var(--crystal-text);
  border: 1px solid var(--crystal-border);
  padding: var(--spacing-4); /* 24px */
}