tokEns

/* CSS Custom Properties */
.card {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.card-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-3);
}

.card:hover {
  border-color: var(--color-brand-primary);
  transition: border-color var(--duration-fast)
    var(--ease-out);
}

{/* Tailwind CSS Classes */}
<div className="
  bg-white
  border border-neutral-200
  rounded-md
  p-6
  shadow-sm
  hover:border-orange-500
  transition-colors duration-fast
">
  <h3 className="
    font-display text-3xl
    leading-tight tracking-tight
    text-text-primary
  ">
    Card Title
  </h3>
  <p className="
    font-body text-base
    text-text-secondary
    mt-3
  ">
    Card body text using semantic
    colour tokens.
  </p>
  <span className="
    font-mono text-xs
    text-orange-500
  ">
    $14.5M
  </span>
</div>

// TypeScript Imports
import {
  colors,
  typography,
  spacing,
  radius,
  shadow,
  motion,
} from '@kazam-au/tokens';

// Access primitive values
colors.primitive.orange[500]
// → '#FF4D00'

// Access semantic tokens
colors.semantic.brand.primary
// → '#FF4D00' (resolves reference)

colors.semantic.text.primary
// → '#1A1A2E'

// Typography composites
typography.styles.display.hero
// → { fontFamily, fontSize, fontWeight,
//     lineHeight }

// Spacing scale
spacing[4]  // → '16px'
spacing[8]  // → '32px'

// Motion
motion.duration.fast     // → '150ms'
motion.easing['ease-out']
// → [0, 0, 0.2, 1]

// Use in styled components or
// inline styles
const chartColors = [
  colors.primitive.orange[500],
  colors.primitive.blue[500],
  colors.semantic.status.success,
  colors.semantic.status.warning,
];