Design Token Demo

This component demonstrates our design token system in action.

Color Tokens

Primary 500
Success 500
Warning 500

Typography Scale

Extra Small (12px)
Small (14px)
Base (16px)
Large (18px)
Extra Large (20px)

Spacing & Effects

Card with Small Shadow

Uses: bg-neutral-50, p-6, rounded-lg, shadow-sm

Card with Large Shadow

Uses: bg-neutral-50, p-6, rounded-xl, shadow-lg

Interactive Elements

CSS Variables

This element uses CSS variables directly:

  • background: var(--betab2b-color-brand-primary-50)
  • border: var(--betab2b-color-brand-primary-200)
  • color: var(--betab2b-color-brand-primary-800)