Resources

Token Export

Style Dictionary–compatible JSON and CSS custom properties. All values match the production app (urbs-card-recharge-totem.vercel.app).

Style Dictionary JSON
{
  "color": {
    "primary":        { "value": "#2ECE78" },
    "primary-dark":   { "value": "#25A862" },
    "accent":         { "value": "#00B4AE" },
    "bg":             { "value": "#F0F2F5" },
    "surface":        { "value": "#FFFFFF" },
    "surface-raised": { "value": "#FFFFFF" },
    "surface-sunken": { "value": "#F0F2F5" },
    "dark-panel":     { "value": "#1C2A3A" },
    "text":           { "value": "#1A2332" },
    "text-secondary": { "value": "#526679" },
    "text-muted":     { "value": "#5E6F81" },
    "border":         { "value": "#E5E8ED" },
    "border-strong":  { "value": "#C8CDD5" },
    "success":        { "value": "#2ECE78" },
    "error":          { "value": "#E5484D" },
    "warning":        { "value": "#F5A623" }
  },
  "spacing": {
    "1":  { "value": "4px"  },
    "xs": { "value": "6px"  },
    "2":  { "value": "8px"  },
    "3":  { "value": "12px" },
    "4":  { "value": "16px" },
    "6":  { "value": "24px" },
    "8":  { "value": "32px" },
    "12": { "value": "48px" },
    "16": { "value": "64px" }
  },
  "radius": {
    "xs":   { "value": "6px"   },
    "sm":   { "value": "8px"   },
    "md":   { "value": "10px"  },
    "lg":   { "value": "12px"  },
    "xl":   { "value": "14px"  },
    "2xl":  { "value": "16px"  },
    "full": { "value": "999px" }
  },
  "shadow": {
    "xs": { "value": "0 1px 2px rgba(16, 24, 40, 0.04)" },
    "sm": { "value": "0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04)" },
    "md": { "value": "0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04)" },
    "lg": { "value": "0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.04)" }
  },
  "typography": {
    "sans": { "value": "'Outfit', system-ui, -apple-system, sans-serif" },
    "mono": { "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', monospace" }
  }
}
CSS custom properties
:root {
  --color-primary:        #2ECE78;
  --color-primary-dark:   #25A862;
  --color-accent:         #00B4AE;
  --color-bg:             #F0F2F5;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #F0F2F5;
  --color-dark-panel:     #1C2A3A;
  --color-text:           #1A2332;
  --color-text-secondary: #526679;
  --color-text-muted:     #5E6F81;
  --color-border:         #E5E8ED;
  --color-border-strong:  #C8CDD5;

  --space-1:  4px;
  --space-xs: 6px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-2xl:  16px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.04);

  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
}

Source of truth: rico-mello/urbs-design-systemsrc/styles/tokens.css