generated from Nicholai/astro-template
218 lines
5.9 KiB
JSON
218 lines
5.9 KiB
JSON
{
|
||
"meta": {
|
||
"name": "Kampüs Cadıları Design System",
|
||
"version": "1.0.0",
|
||
"lastUpdated": "2025-05-19"
|
||
},
|
||
"brand": {
|
||
"identity": {
|
||
"name": "Kampüs Cadıları",
|
||
"tagline": "Feminist Bi' Dünya",
|
||
"description": "A feminist university student organization fighting for equality, freedom, and secularism.",
|
||
"voice": {
|
||
"tone": ["Bold", "Rebellious", "Inclusive", "Energetic", "Unapologetic"],
|
||
"keywords": ["Solidarity", "Freedom", "Struggle", "Sisterhood"]
|
||
}
|
||
},
|
||
"assets": {
|
||
"logo": {
|
||
"path": "components/Logo.tsx",
|
||
"aspectRatio": "1:1",
|
||
"usage": "Use 'brand.deep' color on light backgrounds, 'brand.lilac' on dark backgrounds."
|
||
}
|
||
}
|
||
},
|
||
"colors": {
|
||
"palette": {
|
||
"lilac": {
|
||
"base": "#EADDFA",
|
||
"dark": "#D0B5EA",
|
||
"description": "Primary background color, resembling poster paper."
|
||
},
|
||
"purple": {
|
||
"base": "#6B2C91",
|
||
"description": "Primary brand color for accents and highlights."
|
||
},
|
||
"deep": {
|
||
"base": "#2D0F41",
|
||
"description": "Used for text, borders, and high contrast elements (replaces black)."
|
||
},
|
||
"red": {
|
||
"base": "#ED1C24",
|
||
"description": "Action color, used for calls to action and emphasis."
|
||
},
|
||
"accent": {
|
||
"base": "#9D4EDD",
|
||
"yellow": "#FFC107"
|
||
},
|
||
"surface": {
|
||
"paper": "#FFFCF9",
|
||
"white": "#FFFFFF"
|
||
}
|
||
},
|
||
"semantic": {
|
||
"text": {
|
||
"primary": "#2D0F41",
|
||
"inverse": "#FFFFFF",
|
||
"muted": "#6B2C91"
|
||
},
|
||
"background": {
|
||
"default": "#EADDFA",
|
||
"paper": "#FFFCF9",
|
||
"card": "#FFFFFF",
|
||
"inverse": "#2D0F41"
|
||
},
|
||
"border": {
|
||
"default": "#2D0F41",
|
||
"focus": "#6B2C91"
|
||
},
|
||
"status": {
|
||
"success": "#2E7D32",
|
||
"error": "#ED1C24",
|
||
"warning": "#FFC107",
|
||
"info": "#29B6F6"
|
||
}
|
||
}
|
||
},
|
||
"typography": {
|
||
"families": {
|
||
"primary": {
|
||
"name": "Inter",
|
||
"fallback": "sans-serif",
|
||
"weights": [400, 500, 600, 700],
|
||
"usage": "Body text, UI elements, long-form content."
|
||
},
|
||
"display": {
|
||
"name": "Oswald",
|
||
"fallback": "sans-serif",
|
||
"weights": [400, 500, 600, 700],
|
||
"usage": "Headings, navigation, buttons, impact text."
|
||
},
|
||
"marker": {
|
||
"name": "Permanent Marker",
|
||
"fallback": "cursive",
|
||
"weights": [400],
|
||
"usage": "Stickers, badges, handwritten notes, emphasis."
|
||
}
|
||
},
|
||
"scale": {
|
||
"xs": { "size": "0.75rem", "lineHeight": "1rem" },
|
||
"sm": { "size": "0.875rem", "lineHeight": "1.25rem" },
|
||
"base": { "size": "1rem", "lineHeight": "1.5rem" },
|
||
"lg": { "size": "1.125rem", "lineHeight": "1.75rem" },
|
||
"xl": { "size": "1.25rem", "lineHeight": "1.75rem" },
|
||
"2xl": { "size": "1.5rem", "lineHeight": "2rem" },
|
||
"3xl": { "size": "1.875rem", "lineHeight": "2.25rem" },
|
||
"4xl": { "size": "2.25rem", "lineHeight": "2.5rem" },
|
||
"5xl": { "size": "3rem", "lineHeight": "1" },
|
||
"6xl": { "size": "3.75rem", "lineHeight": "1" },
|
||
"7xl": { "size": "4.5rem", "lineHeight": "1" },
|
||
"8xl": { "size": "6rem", "lineHeight": "1" },
|
||
"9xl": { "size": "8rem", "lineHeight": "1" }
|
||
}
|
||
},
|
||
"layout": {
|
||
"spacing": {
|
||
"baseUnit": 4,
|
||
"scale": {
|
||
"1": "4px",
|
||
"2": "8px",
|
||
"3": "12px",
|
||
"4": "16px",
|
||
"6": "24px",
|
||
"8": "32px",
|
||
"12": "48px",
|
||
"16": "64px",
|
||
"24": "96px",
|
||
"32": "128px"
|
||
}
|
||
},
|
||
"grid": {
|
||
"columns": 12,
|
||
"gutter": "24px",
|
||
"maxWidth": "1280px"
|
||
},
|
||
"breakpoints": {
|
||
"sm": "640px",
|
||
"md": "768px",
|
||
"lg": "1024px",
|
||
"xl": "1280px",
|
||
"2xl": "1536px"
|
||
}
|
||
},
|
||
"components": {
|
||
"button": {
|
||
"base": {
|
||
"fontFamily": "Oswald",
|
||
"fontWeight": "700",
|
||
"textTransform": "uppercase",
|
||
"letterSpacing": "wider",
|
||
"borderRadius": "0.5rem", // rounded-lg
|
||
"borderWidth": "2px",
|
||
"transition": "all 0.3s ease"
|
||
},
|
||
"variants": {
|
||
"primary": {
|
||
"backgroundColor": "#6B2C91",
|
||
"color": "#FFFFFF",
|
||
"borderColor": "#2D0F41",
|
||
"boxShadow": "4px 4px 0px #2D0F41"
|
||
},
|
||
"secondary": {
|
||
"backgroundColor": "transparent",
|
||
"color": "#2D0F41",
|
||
"borderColor": "#2D0F41"
|
||
}
|
||
}
|
||
},
|
||
"card": {
|
||
"base": {
|
||
"backgroundColor": "#FFFFFF",
|
||
"borderWidth": "4px",
|
||
"borderColor": "#2D0F41",
|
||
"borderRadius": "1.5rem", // rounded-2xl or rounded-3xl
|
||
"boxShadow": "12px 12px 0px rgba(45,15,65,0.2)"
|
||
},
|
||
"hover": {
|
||
"transform": "translateY(-4px)",
|
||
"boxShadow": "16px 16px 0px #6B2C91"
|
||
}
|
||
},
|
||
"sticker": {
|
||
"transform": "rotate(-2deg)",
|
||
"borderWidth": "2px",
|
||
"borderColor": "#2D0F41",
|
||
"boxShadow": "4px 4px 0px #2D0F41"
|
||
}
|
||
},
|
||
"animation": {
|
||
"duration": {
|
||
"fast": "200ms",
|
||
"normal": "300ms",
|
||
"slow": "500ms",
|
||
"long": "1000ms"
|
||
},
|
||
"easing": {
|
||
"default": "ease-in-out",
|
||
"bounce": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
||
},
|
||
"custom": {
|
||
"marquee": "linear infinite 25s",
|
||
"float": "ease-in-out infinite 6s",
|
||
"blob": "infinite 7s"
|
||
}
|
||
},
|
||
"media": {
|
||
"textures": {
|
||
"noise": "url('https://www.transparenttextures.com/patterns/noise-lines.png')",
|
||
"paper": "url('https://www.transparenttextures.com/patterns/cream-paper.png')",
|
||
"dust": "url('https://www.transparenttextures.com/patterns/dust.png')",
|
||
"halftone": "radial-gradient(circle, #2D0F41 1px, transparent 1px)"
|
||
},
|
||
"effects": {
|
||
"blendMode": "multiply",
|
||
"grayscale": "grayscale(100%)",
|
||
"duotone": "mix-blend-mode: luminosity"
|
||
}
|
||
}
|
||
} |