{ "$schema": "https://design-tokens.github.io/community-group/format/", "color": { "bg": { "light": "#ffffff", "dark": "#101216" }, "surface": { "light": "#f6f7f9", "dark": "#1a1c22" }, "text": { "light": "#1c1e21", "dark": "#e7e9ec" }, "textMuted": { "light": "#6b7280", "dark": "#888780" }, "border": { "light": "rgba(0, 0, 0, 0.15)", "dark": "rgba(255, 255, 255, 0.15)" }, "accent": { "light": "#185fa5", "dark": "#378add" }, "accentContrast": { "light": "#ffffff", "dark": "#042c53" }, "danger": { "light": "#a32d2d", "dark": "#d96a6a" }, "success": { "light": "#0f6e56", "dark": "#4fc39e" }, "warning": { "light": "#9a6b1f", "dark": "#d9a94f" } }, "radius": { "sm": "4px", "md": "8px", "lg": "12px" }, "space": { "1": "4px", "2": "8px", "3": "12px", "4": "16px", "15": "6px", "25": "10px", "35": "14px", "05": "2px" }, "fontSize": { "xs": "11px", "sm": "12px", "md": "13px", "lg": "14px", "xl": "16px", "2xl": "18px" }, "weight": { "normal": 400, "medium": 500, "semibold": 600 }, "leading": { "tight": 1.35, "normal": 1.55 }, "border": { "subtle": "color-mix(in srgb, var(--ua-color-border) 60%, transparent)" }, "shadow": { "1": { "light": "0 1px 2px rgba(0, 0, 0, 0.06)", "dark": "0 1px 2px rgba(0, 0, 0, 0.3)" }, "2": { "light": "0 4px 12px rgba(0, 0, 0, 0.1)", "dark": "0 4px 12px rgba(0, 0, 0, 0.4)" }, "3": { "light": "0 10px 28px rgba(0, 0, 0, 0.12)", "dark": "0 10px 28px rgba(0, 0, 0, 0.45)" }, "4": { "light": "0 18px 44px rgba(0, 0, 0, 0.14)", "dark": "0 18px 44px rgba(0, 0, 0, 0.5)" }, "accent": { "light": "0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent)", "dark": "0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent)" }, "accentStrong": { "light": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent)", "dark": "0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)" } }, "motion": { "duration": { "fast": "0.15s", "base": "0.2s", "slow": "0.25s" }, "ease": "cubic-bezier(0.2, 0.8, 0.2, 1)", "easeOut": "cubic-bezier(0.16, 1, 0.3, 1)" }, "focus": { "ring": "0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent)", "ringInset": "inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent)" }, "control": { "height": { "sm": "28px", "md": "34px", "lg": "40px" } }, "layer": { "dropdown": 100, "sticky": 200, "overlay": 300, "modal": 400, "toast": 500 } }