134 lines
4.8 KiB
JSON
134 lines
4.8 KiB
JSON
{
|
|
"$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)" }
|
|
}
|
|
}
|
|
}
|