47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
|
/**
|
||
|
|
* Design tokens — the single source of truth for the brand.
|
||
|
|
* These mirror the CSS variables in styles/globals.css and feed the Tailwind preset.
|
||
|
|
* Change the brand once, here, and every app that consumes the preset updates.
|
||
|
|
*/
|
||
|
|
export const tokens = {
|
||
|
|
color: {
|
||
|
|
// Neutrals are tinted (warm), never pure black/gray — an Impeccable anti-slop rule.
|
||
|
|
bg: "#232022",
|
||
|
|
surface: "#2b282a",
|
||
|
|
surface2: "#333031",
|
||
|
|
border: "#3a3638",
|
||
|
|
text: "#F5F1EC",
|
||
|
|
muted: "#A99F97",
|
||
|
|
// Brand — warm gold on warm dark.
|
||
|
|
brand: "#DCBB4F",
|
||
|
|
brandBright: "#F5CD15",
|
||
|
|
brandDark: "#998643",
|
||
|
|
// Semantic
|
||
|
|
success: "#3F9E6A",
|
||
|
|
warning: "#DCBB4F",
|
||
|
|
danger: "#C0562F",
|
||
|
|
info: "#5B8DB8",
|
||
|
|
},
|
||
|
|
radius: { sm: "6px", md: "10px", lg: "14px", xl: "20px" },
|
||
|
|
font: {
|
||
|
|
display: '"Montserrat", system-ui, sans-serif',
|
||
|
|
sans: '"Open Sans", system-ui, sans-serif',
|
||
|
|
mono: '"JetBrains Mono", ui-monospace, monospace',
|
||
|
|
},
|
||
|
|
// Layered, tinted shadows — depth instead of a flat plane.
|
||
|
|
shadow: {
|
||
|
|
sm: "0 1px 2px 0 rgb(20 16 18 / 0.20)",
|
||
|
|
md: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
|
||
|
|
lg: "0 12px 32px -8px rgb(20 16 18 / 0.40), 0 4px 8px -4px rgb(20 16 18 / 0.24)",
|
||
|
|
glow: "0 0 0 1px rgb(220 187 79 / 0.20), 0 8px 28px -6px rgb(220 187 79 / 0.28)",
|
||
|
|
},
|
||
|
|
// Motion — smooth, never bouncy/elastic (Impeccable anti-slop rule).
|
||
|
|
ease: {
|
||
|
|
out: "cubic-bezier(0.22, 1, 0.36, 1)",
|
||
|
|
inOut: "cubic-bezier(0.65, 0, 0.35, 1)",
|
||
|
|
},
|
||
|
|
duration: { fast: "120ms", base: "180ms", slow: "320ms" },
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export type Tokens = typeof tokens;
|