130 lines
3.1 KiB
TypeScript
130 lines
3.1 KiB
TypeScript
// ─── Design Tokens ───────────────────────────────────────────────────
|
|
// Single source of truth for all design values.
|
|
// Changing a value here should update the entire site.
|
|
// CSS custom properties in globals.css mirror these for Tailwind usage.
|
|
// ─────────────────────────────────────────────────────────────────────
|
|
|
|
/** Color palette — use Tailwind classes (e.g. `bg-tenext-dark`) when possible */
|
|
export const colors = {
|
|
// Backgrounds
|
|
bgDark: "#1F1F1F",
|
|
bgCardDark: "#282828",
|
|
bgCardBorder: "#3F3F3F",
|
|
bgWhite: "#FFFFFF",
|
|
|
|
// Accent
|
|
accentTeal: "#45D0BD",
|
|
accentBlue: "#44B6E9",
|
|
accentRed: "#EF6464",
|
|
accentRedHover: "#F57E7E",
|
|
|
|
// Purple palette
|
|
purpleStart: "#8258C8",
|
|
purpleMid: "#6766C8",
|
|
purpleEnd: "#2C84C8",
|
|
cardPurple: "#343F78",
|
|
cardPurple2: "#56619E",
|
|
cardLavender: "#AC8DE0",
|
|
|
|
// Text
|
|
textMuted: "#87899B",
|
|
textWhite: "#FFFFFF",
|
|
textDark: "#1F1F1F",
|
|
|
|
// Surfaces
|
|
surfaceMuted: "#ECF0F4",
|
|
} as const;
|
|
|
|
/** Spacing tokens — predefined values only, no arbitrary px */
|
|
export const spacing = {
|
|
/** Vertical padding for page sections */
|
|
sectionPaddingY: {
|
|
sm: "60px",
|
|
md: "80px",
|
|
lg: "100px",
|
|
xl: "120px",
|
|
},
|
|
/** Horizontal page gutter */
|
|
pageGutter: "20px",
|
|
/** Max width for boxed containers */
|
|
containerMaxWidth: "1260px",
|
|
/** Container inner padding */
|
|
containerPaddingX: "15px",
|
|
/** Gap between cards in grids */
|
|
cardGap: "20px",
|
|
/** Gap between components within a section */
|
|
componentGap: {
|
|
sm: "30px",
|
|
md: "40px",
|
|
lg: "50px",
|
|
},
|
|
} as const;
|
|
|
|
/** Border radius tokens */
|
|
export const borderRadius = {
|
|
card: "25px",
|
|
button: "25px",
|
|
buttonPill: "9999px",
|
|
tag: "15px",
|
|
navbar: "10px",
|
|
section: "25px",
|
|
} as const;
|
|
|
|
/** Typography scale */
|
|
export const typography = {
|
|
hero: {
|
|
size: "clamp(38px, 5.9vw, 100px)",
|
|
weight: 700,
|
|
lineHeight: 1.1,
|
|
letterSpacing: "-0.03em",
|
|
},
|
|
sectionTitle: {
|
|
size: "clamp(32px, 4vw, 56px)",
|
|
weight: 500,
|
|
lineHeight: 1.1,
|
|
letterSpacing: "-0.03em",
|
|
},
|
|
cardTitle: {
|
|
size: "30px",
|
|
weight: 500,
|
|
lineHeight: "1.16666em",
|
|
letterSpacing: "-0.03em",
|
|
},
|
|
body: {
|
|
size: "16px",
|
|
weight: 400,
|
|
lineHeight: 1.6,
|
|
},
|
|
small: {
|
|
size: "14px",
|
|
weight: 500,
|
|
lineHeight: 1,
|
|
},
|
|
tag: {
|
|
size: "12px",
|
|
weight: 600,
|
|
lineHeight: 1,
|
|
letterSpacing: "0.1em",
|
|
textTransform: "uppercase" as const,
|
|
},
|
|
} as const;
|
|
|
|
/** Shadow tokens */
|
|
export const shadows = {
|
|
cardHover:
|
|
"0 22px 55px rgba(31, 31, 31, 0.16), 0 0 0 1px rgba(69, 208, 189, 0.22)",
|
|
buttonHover: "0 15px 30px rgba(239, 100, 100, 0.28)",
|
|
scrollBtn: "0 12px 30px rgba(0, 0, 0, 0.14)",
|
|
} as const;
|
|
|
|
/** Animation presets */
|
|
export const animations = {
|
|
/** Reveal-on-scroll */
|
|
revealDuration: "0.72s",
|
|
revealEase: "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
/** Card / button hover */
|
|
hoverDuration: "0.32s",
|
|
hoverEase: "ease",
|
|
hoverLift: "-4px",
|
|
} as const;
|