/* ============================================================ 3 SIDED CUBE — DESIGN TOKENS (cube-tokens.css) Single source of truth for this prototype, mirrored from the live website so the two can be handed back and forth without a colour drifting: 3sidedcube/3sc-website · src/styles/globals.css (@theme) 3sidedcube/3sc-website · src/constants/design-tokens.ts Names are --cube-* on purpose: retro.css, components.css, story.css and beats.css in this repo were already written as var(--cube-x, var(--local-x, #hex)), so simply defining these makes every existing component resolve to the real 3SC values instead of its fallback. PORTING BACK: each token below names its Tailwind counterpart, so a React port is a rename, not a redesign — --cube-pink is bg-primary-pink, --cube-shadow-m is shadow-m, .cube-headline-1 is text-heading-1. ============================================================ */ :root { /* ---------- brand ---------- */ --cube-green: #00ed71; /* primary-green · green-600 */ --cube-pink: #f70087; /* primary-pink · pink-500 */ --cube-pink-deep: #f40256; /* pink-600 */ --cube-pink-bright: #fd00c1; /* pink-400 */ --cube-green-lime: #a0ff1f; /* green-500 */ --cube-green-soft: #6ce97f; /* secondary-green */ --cube-yellow: #ffd100; /* secondary-yellow */ --cube-purple: #9747ff; /* secondary-purple */ /* ---------- category ---------- */ --cube-cat-blue: #00a3ff; --cube-cat-orange: #ff7a00; --cube-cat-teal: #00d4b2; --cube-cat-red: #ff3860; --cube-cat-lime: #aeee00; --cube-cat-lavender: #b490ff; --cube-cat-cyan: #00e5ff; /* ---------- neutral ---------- */ --cube-white: #ffffff; --cube-black: #000000; --cube-ink: #0a0a0a; /* neutral-gray-dark */ --cube-gray: #e5e5e5; /* neutral-gray */ --cube-gray-100: #ffffff; --cube-gray-200: #f8f8f8; --cube-gray-300: #eaeaea; --cube-gray-400: #dddddd; --cube-gray-500: #c3c3c3; --cube-gray-600: #5b5b5b; --cube-gray-700: #000000; --cube-gray-750: #1d1c1c; --cube-gray-light: #ededed; --cube-gray-dark: #5d5d5d; --cube-gray-charcoal:#2c2c2c; --cube-secondary-700: #d9d9d9; --cube-secondary-800: #c3c3c3; --cube-secondary-950: #e9e9e9; --cube-secondary-1100: #f4f4f4; --cube-secondary-card: #d5d5d5; /* ---------- the hard offset shadows ---------- */ --cube-shadow-ss: 2px 2px 0 0 rgba(0,0,0,1); --cube-shadow-s: 3px 3px 0 0 rgba(0,0,0,1); --cube-shadow-m: 4px 4px 0 0 rgba(0,0,0,1); --cube-shadow-m-light: 4px 4px 0 0 rgba(0,0,0,.2); --cube-shadow-l: 6px 6px 0 0 rgba(0,0,0,1); --cube-shadow-xl: 8px 8px 0 0 rgba(0,0,0,1); --cube-shadow-brand: 10px 10px 0 0 #000; /* shadow-brand-black */ --cube-shadow-m-green: 4px 4px 0 0 #00ed71; --cube-shadow-brand-green: 10px 10px 0 0 #00ed71; --cube-shadow-brand-pink: 10px 10px 0 0 #f70087; /* ---------- radius / border ---------- */ --cube-radius-none: 0px; --cube-radius-xs: 4px; --cube-radius-s: 8px; --cube-radius-m: 12px; --cube-radius-xl: 24px; --cube-border-s: 2px; --cube-border-m: 3px; /* ---------- type ---------- */ --cube-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --cube-font-secondary: 'Anonymous Pro', ui-monospace, monospace; --cube-text-tiny: .625rem; --cube-text-small: .8125rem; --cube-text-body: 1rem; --cube-text-1_25xl: 1.25rem; --cube-text-1_5xl: 1.375rem; --cube-text-2_25xl: 1.625rem; --cube-text-2_5xl: 1.75rem; --cube-text-3_25xl: 2rem; --cube-text-3_5xl: 2.125rem; --cube-text-4_25xl: 2.5rem; --cube-text-4_5xl: 2.625rem; --cube-text-5xl: 2.75rem; --cube-text-5_25xl: 3rem; --cube-text-5_5xl: 3.125rem; --cube-text-6_25xl: 3.5rem; --cube-text-6_5xl: 4rem; /* ---------- motion ---------- The website animates with Framer Motion springs. CSS equivalents, so the feel carries over and a React port can go straight back to the spring: button/input/dropdown spring stiffness 500, damping 30 (zeta ~0.67) tap duration .1, easeIn card duration .6, spring stiffness 100 Highlight wipe duration .3, damping 4 (overshoots) */ --cube-ease-spring: cubic-bezier(.34, 1.30, .64, 1); --cube-ease-bounce: cubic-bezier(.34, 1.56, .64, 1); --cube-ease-in: cubic-bezier(.4, 0, 1, 1); --cube-ease-out: cubic-bezier(.16, 1, .3, 1); --cube-dur-tap: .1s; --cube-dur-quick: .2s; --cube-dur-base: .3s; --cube-dur-slow: .6s; /* the interaction the whole kit shares: lift on hover, press into the page */ --cube-lift-y: -2px; --cube-lift-shadow: 5px 5px 0 0 rgba(0,0,0,1); --cube-press-xy: 2px; --cube-press-shadow: 1px 1px 0 0 rgba(0,0,0,1); } /* ============================================================ TYPOGRAPHY — the website's TYPOGRAPHY tokens as classes. Desktop values, with their mobile values under 768px. NOTE their headlines are weight 900, not 800 — load Poppins 900. ============================================================ */ .cube-display-1 { font: 700 3rem/1.1 var(--cube-font-primary); letter-spacing: -.03em; } .cube-headline-1 { font: 900 4.5rem/1.2 var(--cube-font-primary); letter-spacing: -.02em; } .cube-headline-2 { font: 900 1.875rem/1.2 var(--cube-font-primary); letter-spacing: -.01em; } .cube-headline-3 { font: 900 1.625rem/1.2 var(--cube-font-primary); letter-spacing: -.01em; } .cube-subtitle-1 { font: 500 1.5rem/1.3 var(--cube-font-primary); letter-spacing: -.01em; } .cube-subtitle-2 { font: 500 1.25rem/1.3 var(--cube-font-primary); letter-spacing: 0; } .cube-body { font: 400 1rem/1.5 var(--cube-font-secondary); letter-spacing: 0; } .cube-body-long { font: 400 1rem/1.6 var(--cube-font-primary); letter-spacing: 0; } .cube-body-bold { font: 700 1rem/1.5 var(--cube-font-secondary); letter-spacing: 0; } @media (max-width: 767px) { .cube-display-1 { font-size: 2.25rem; letter-spacing: -.02em; } .cube-headline-1 { font-size: 1.875rem; letter-spacing: -.01em; } .cube-headline-2 { font-size: 1.5rem; letter-spacing: 0; } .cube-headline-3 { font-size: 1.375rem; letter-spacing: 0; } .cube-subtitle-1 { font-size: 1.125rem; } .cube-subtitle-2 { font-size: .875rem; } .cube-body, .cube-body-long, .cube-body-bold { font-size: .875rem; } }