122 lines
4.4 KiB
JSON
122 lines
4.4 KiB
JSON
{
|
||
"meta": {
|
||
"project": "mk-design-system",
|
||
"sourceApproach": "tailwindcss-v4",
|
||
"primaryFont": "Roboto",
|
||
"fontType": "variable-woff2",
|
||
"colorMode": "light",
|
||
"version": "0.1.0"
|
||
},
|
||
"colors": {
|
||
"primary": { "DEFAULT": "#e91e63", "gradientStart": "#EC407A", "gradientEnd": "#D81B60" },
|
||
"secondary": { "DEFAULT": "#7b809a", "gradientStart": "#747b8a", "gradientEnd": "#495361" },
|
||
"semantic": {
|
||
"success": { "DEFAULT": "#4caf50", "gradientStart": "#66bb6a", "gradientEnd": "#43a047" },
|
||
"warning": { "DEFAULT": "#fb8c00", "gradientStart": "#ffa726", "gradientEnd": "#fb8c00" },
|
||
"danger": { "DEFAULT": "#f44335", "gradientStart": "#ef5350", "gradientEnd": "#e53935" },
|
||
"info": { "DEFAULT": "#1a73e8", "gradientStart": "#49a3f1", "gradientEnd": "#1a73e8" }
|
||
},
|
||
"neutrals": {
|
||
"white": "#ffffff",
|
||
"black": "#000000",
|
||
"light": "#f0f2f5",
|
||
"dark": "#344767",
|
||
"gray": {
|
||
"100": "#f8f9fa",
|
||
"200": "#f0f2f5",
|
||
"300": "#dee2e6",
|
||
"500": "#adb5bd",
|
||
"600": "#6c757d",
|
||
"900": "#212529"
|
||
}
|
||
}
|
||
},
|
||
"typography": {
|
||
"fontFamilies": {
|
||
"sans": "Roboto, Helvetica, Arial, sans-serif",
|
||
"serif": "Roboto Slab, serif",
|
||
"mono": "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
|
||
},
|
||
"fontFiles": {
|
||
"roboto": "public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2",
|
||
"robotoItalic":"public/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2",
|
||
"robotoSlab": "public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2",
|
||
"materialIcons":"public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2"
|
||
},
|
||
"weightRange": "100–900 (variable font)",
|
||
"sizes": {
|
||
"xs": "0.75rem",
|
||
"sm": "0.875rem",
|
||
"base": "1rem",
|
||
"lg": "1.125rem",
|
||
"xl": "1.25rem",
|
||
"2xl": "1.5rem",
|
||
"3xl": "1.875rem",
|
||
"4xl": "2.25rem",
|
||
"5xl": "3rem"
|
||
},
|
||
"lineHeights": { "base": "1.5", "tight": "1.25", "relaxed": "1.75" }
|
||
},
|
||
"spacing": {
|
||
"note": "Tailwind v4 default scale — rem-based, no custom overrides needed",
|
||
"common": {
|
||
"1": "0.25rem", "2": "0.5rem", "3": "0.75rem",
|
||
"4": "1rem", "6": "1.5rem", "8": "2rem",
|
||
"12": "3rem", "16": "4rem", "24": "6rem"
|
||
}
|
||
},
|
||
"shadows": {
|
||
"soft": {
|
||
"xs": "0 2px 9px -5px rgba(0,0,0,0.15)",
|
||
"sm": "0 0.3125rem 0.625rem 0 rgba(0,0,0,0.12)",
|
||
"md": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)",
|
||
"lg": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)"
|
||
},
|
||
"blur": "0 20px 27px rgba(0,0,0,0.05)",
|
||
"colored": {
|
||
"note": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba({r},{g},{b},0.4)",
|
||
"primary": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(233,30,99,0.4)",
|
||
"secondary": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(210,210,210,0.4)",
|
||
"success": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(76,175,80,0.4)",
|
||
"warning": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(251,140,0,0.4)",
|
||
"danger": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(244,67,54,0.4)",
|
||
"info": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(26,115,232,0.4)",
|
||
"dark": "0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(64,64,64,0.4)"
|
||
}
|
||
},
|
||
"borders": {
|
||
"radius": {
|
||
"xs": "0.1rem",
|
||
"sm": "0.125rem",
|
||
"md": "0.375rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"2xl": "1rem",
|
||
"full":"9999px"
|
||
},
|
||
"width": { "default": "1px" }
|
||
},
|
||
"gradients": {
|
||
"angle": "195deg",
|
||
"note": "All gradients use the 195deg angle — do not change",
|
||
"variants": {
|
||
"primary": "linear-gradient(195deg, #EC407A, #D81B60)",
|
||
"secondary": "linear-gradient(195deg, #747b8a, #495361)",
|
||
"success": "linear-gradient(195deg, #66bb6a, #43a047)",
|
||
"warning": "linear-gradient(195deg, #ffa726, #fb8c00)",
|
||
"danger": "linear-gradient(195deg, #ef5350, #e53935)",
|
||
"info": "linear-gradient(195deg, #49a3f1, #1a73e8)",
|
||
"dark": "linear-gradient(195deg, #42424a, #191919)",
|
||
"light": "linear-gradient(195deg, #ebeff4, #ced4da)"
|
||
}
|
||
},
|
||
"breakpoints": {
|
||
"note": "Tailwind v4 defaults",
|
||
"sm": "640px",
|
||
"md": "768px",
|
||
"lg": "1024px",
|
||
"xl": "1280px",
|
||
"2xl": "1536px"
|
||
}
|
||
}
|