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-system
→ src/styles/tokens.css