{ "$schema": "https://design-tokens.github.io/community-group/format/", "color": { "brand": { "primary": { "50": { "value": "#F4F8F5", "description": "Background sección destacada" }, "100": { "value": "#E8F0EB", "description": "Background suave, hover state" }, "300": { "value": "#A8C8B5", "description": "Backgrounds suaves, badges" }, "500": { "value": "#4D8A6D", "description": "Acento medio, hover de botones" }, "700": { "value": "#2F5C46", "description": "Botones primarios, links activos" }, "900": { "value": "#1F3A2E", "description": "Texto sobre claro, headings serios" } }, "accent": { "100": { "value": "#FAEAE0", "description": "Background de bloques destacados" }, "400": { "value": "#E08A5F", "description": "Iconos decorativos, badges" }, "600": { "value": "#C25E33", "description": "CTAs secundarios destacados, alertas no críticas" }, "900": { "value": "#7A3517", "description": "Énfasis muy fuerte" } } }, "neutral": { "50": { "value": "#F7F8F7" }, "100": { "value": "#EDEFED" }, "200": { "value": "#DDE0DD" }, "300": { "value": "#C4C9C4" }, "400": { "value": "#9DA29D" }, "500": { "value": "#7A807A" }, "700": { "value": "#4A4E4A" }, "900": { "value": "#262826" }, "950": { "value": "#161816" }, "white": { "value": "#FFFFFF" } }, "semantic": { "success": { "100": { "value": "#E0F0E6" }, "500": { "value": "#4DAA73" }, "700": { "value": "#2D7A4F" } }, "warning": { "100": { "value": "#FAEFD3" }, "500": { "value": "#DA9A2C" }, "700": { "value": "#9A6B0E" } }, "danger": { "100": { "value": "#FAE0DA" }, "500": { "value": "#D85940" }, "700": { "value": "#A8331F" } }, "info": { "100": { "value": "#DDEDF5" }, "500": { "value": "#3D8AAA" }, "700": { "value": "#1F5C7A" } } } }, "typography": { "fontFamily": { "display": { "value": "'Instrument Serif', Georgia, serif" }, "sans": { "value": "'Inter', system-ui, -apple-system, sans-serif" }, "mono": { "value": "'JetBrains Mono', ui-monospace, monospace" } }, "fontSize": { "xs": { "value": "0.75rem", "lineHeight": "1.5" }, "sm": { "value": "0.875rem", "lineHeight": "1.5" }, "base": { "value": "1rem", "lineHeight": "1.6" }, "lg": { "value": "1.125rem", "lineHeight": "1.5" }, "xl": { "value": "1.25rem", "lineHeight": "1.4" }, "2xl": { "value": "1.5rem", "lineHeight": "1.3" }, "3xl": { "value": "1.875rem", "lineHeight": "1.3" }, "4xl": { "value": "2.25rem", "lineHeight": "1.2" }, "5xl": { "value": "3rem", "lineHeight": "1.1" }, "6xl": { "value": "3.75rem", "lineHeight": "1.05" }, "7xl": { "value": "4.5rem", "lineHeight": "1.0" } }, "fontWeight": { "regular": { "value": "400" }, "medium": { "value": "500" }, "semibold": { "value": "600" }, "bold": { "value": "700" } } }, "spacing": { "1": { "value": "0.25rem" }, "2": { "value": "0.5rem" }, "3": { "value": "0.75rem" }, "4": { "value": "1rem" }, "6": { "value": "1.5rem" }, "8": { "value": "2rem" }, "12": { "value": "3rem" }, "16": { "value": "4rem" }, "24": { "value": "6rem" }, "32": { "value": "8rem" } }, "borderRadius": { "sm": { "value": "4px" }, "md": { "value": "6px" }, "lg": { "value": "10px" }, "xl": { "value": "14px" }, "2xl": { "value": "20px" }, "full": { "value": "9999px" } }, "shadow": { "xs": { "value": "0 1px 2px rgba(22, 24, 22, 0.05)" }, "sm": { "value": "0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04)" }, "md": { "value": "0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04)" }, "lg": { "value": "0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05)" }, "xl": { "value": "0 20px 25px rgba(22, 24, 22, 0.1), 0 10px 10px rgba(22, 24, 22, 0.04)" }, "glow": { "value": "0 0 0 4px rgba(47, 92, 70, 0.15)" } }, "breakpoint": { "sm": { "value": "640px" }, "md": { "value": "768px" }, "lg": { "value": "1024px" }, "xl": { "value": "1280px" }, "2xl": { "value": "1536px" } }, "container": { "narrow": { "value": "720px" }, "default": { "value": "1200px" }, "wide": { "value": "1440px" } }, "motion": { "duration": { "fast": { "value": "150ms" }, "base": { "value": "250ms" }, "slow": { "value": "400ms" } }, "easing": { "out": { "value": "cubic-bezier(0.16, 1, 0.3, 1)" }, "in": { "value": "cubic-bezier(0.7, 0, 0.84, 0)" }, "inOut": { "value": "cubic-bezier(0.65, 0, 0.35, 1)" } } } }