[ MvM / DESIGN_SYSTEM / TOKENS ]

Design Tokens

Design tokens are the visual design atoms of the design system. They define colors, typography, spacing, and more as reusable CSS custom properties.

Primary Orange

--neo-orange-50

var(--neo-orange-50)

--neo-orange-100

var(--neo-orange-100)

--neo-orange-200

var(--neo-orange-200)

--neo-orange-300

var(--neo-orange-300)

--neo-orange-400

var(--neo-orange-400)

--neo-orange-500

var(--neo-orange-500)

--neo-orange-600

var(--neo-orange-600)

--neo-orange-700

var(--neo-orange-700)

--neo-orange-800

var(--neo-orange-800)

--neo-orange-900

var(--neo-orange-900)

Semantic Colors

--neo-success

#22c55e

--neo-warning

#f59e0b

--neo-error

#ef4444

--neo-info

#3b82f6

Usage

CSS Custom Properties

.my-component {
  background: var(--neo-glass-bg);
  border: 1px solid var(--neo-glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--neo-gray-100);
  box-shadow: var(--neo-glass-shadow);
}