/* ============================================================================ PoolUp Design Tokens v1.0 Synthesized from 20 owner-liked Dribbble shots (modern social / social-media agency / AI app landing family). Only patterns recurring in 3+ shots were promoted. These tokens are the single source of truth for color, type, spacing, radius, motion, and elevation. Do NOT hand-pick values outside this file. Style rule: no em dashes or en dashes anywhere. ============================================================================ */ :root { /* -------------------------------------------------------------------------- COLOR (role-based, not hue-based) Dominant cross-shot signal: warm near-black ink on a warm off-white paper, softened by dusty taupe/mauve neutrals, punctuated by ONE saturated accent. -------------------------------------------------------------------------- */ /* Ink and paper (the spine of the system, recurs in 16+ / 12+ shots) */ --color-ink: #130F0E; /* primary text, dark sections, footers */ --color-ink-soft: #2B2522; /* secondary text on paper */ --color-paper: #F9F7F7; /* default page canvas (warm off-white) */ --color-paper-warm: #F4ECD5; /* alt warm canvas for editorial blocks */ --color-surface: #FFFFFF; /* cards / raised surfaces on paper */ --color-surface-sunk: #EFEBEA; /* insets, wells, code, track */ /* Dusty neutrals (the calming mid-tones, recurs in 10+ shots) */ --color-neutral-50: #F2F0EF; --color-neutral-100: #E4DFDD; --color-neutral-200: #C9C0BD; --color-neutral-300: #ACA5A3; /* muted captions, disabled */ --color-neutral-400: #846C5F; /* taupe label, meta */ --color-neutral-500: #5C483F; /* warm border on dark, deep meta */ /* Borders / hairlines */ --color-border: #E2DCDA; /* hairline on paper */ --color-border-strong: #1A1614; /* brutalist 2px outline (cards/buttons) */ --color-border-on-dark: #34302E; /* hairline inside dark sections */ /* THE ACCENT (every shot has exactly one saturated pop; blue+violet is the most frequent family, amber is the most frequent energy secondary). Use accent for ONE primary action per view. Never two competing accents. */ --color-accent: #5526DC; /* electric indigo (primary CTA, links) */ --color-accent-hover: #4319C0; --color-accent-press: #3712A0; --color-accent-soft: #ECE7FB; /* tint fill behind accent content */ --color-accent-ink: #FFFFFF; /* text/icon on accent */ /* SECONDARY ENERGY POP (sparingly: badges, "live" pulse, highlight underline, stat numbers). Amber recurs as the warm counterweight to cool accent.) */ --color-energy: #F6C401; /* warm amber */ --color-energy-ink: #130F0E; /* text on amber */ /* Status (kept inside the family, not generic) */ --color-success: #2E8B57; --color-warning: #F6C401; --color-danger: #E53124; --color-info: #3260A7; /* Inverted / dark-section roles (shots use full-bleed near-black sections) */ --color-dark-bg: #130F0E; --color-dark-surface: #1E1916; --color-dark-text: #F4ECD5; --color-dark-text-soft: #B8A4BE; /* Gradients (used sparingly for hero glow / accent wash, recurs in agency shots) */ --gradient-accent: linear-gradient(135deg, #5526DC 0%, #9D6BFF 100%); --gradient-energy: linear-gradient(135deg, #F6C401 0%, #FF9904 100%); --gradient-ink: linear-gradient(180deg, #1E1916 0%, #130F0E 100%); /* -------------------------------------------------------------------------- TYPOGRAPHY Cross-shot: oversized bold display + clean neutral body, strong hierarchy. Display = geometric/expressive grotesk. Body = neutral grotesk. Mono = data/labels (uppercase micro-labels recur across UI shots). -------------------------------------------------------------------------- */ --font-display: "Clash Display", "Space Grotesk", "Syne", system-ui, sans-serif; --font-body: "Inter", "Geist", system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", "Space Mono", ui-monospace, monospace; /* Modular type scale (ratio 1.250 major third, base 16px) */ --text-xs: 0.75rem; /* 12px micro-label / mono caption */ --text-sm: 0.875rem; /* 14px meta, secondary */ --text-base: 1rem; /* 16px body */ --text-lg: 1.25rem; /* 20px lead paragraph */ --text-xl: 1.563rem; /* 25px card title */ --text-2xl: 1.953rem; /* 31px section title */ --text-3xl: 2.441rem; /* 39px sub-hero */ --text-4xl: 3.815rem; /* 61px hero headline (desktop) */ --text-5xl: 5.96rem; /* 95px oversized statement hero */ --leading-tight: 1.05; /* display headlines (tight, almost touching) */ --leading-snug: 1.2; /* sub-headings */ --leading-normal: 1.55; /* body */ --tracking-tight: -0.03em; /* large display */ --tracking-normal: 0em; --tracking-label: 0.14em; /* uppercase mono micro-labels */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* hero statement weight */ /* -------------------------------------------------------------------------- SPACING (8px base, generous whitespace is a hard cross-shot rule) -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px section padding (desktop) */ --space-10: 8rem; /* 128px hero / major section rhythm */ --container-max: 1240px; --content-measure: 68ch; /* max body line length */ --grid-gutter: var(--space-5); /* -------------------------------------------------------------------------- RADIUS (shots split between soft-rounded social cards and crisp panels; dominant signal = generously rounded cards, pill CTAs, but NOT blobby) -------------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; /* default card radius */ --radius-lg: 24px; /* feature panels / media */ --radius-xl: 32px; /* hero containers */ --radius-pill: 999px; /* buttons, chips, tags, avatars */ /* -------------------------------------------------------------------------- ELEVATION (low, soft, warm-tinted shadows; brutalist 2px outline is the primary "lift" for cards in the agency-style shots. Use ONE or the OTHER per surface, never both heavily.) -------------------------------------------------------------------------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(19, 15, 14, 0.05); --shadow-md: 0 8px 24px rgba(19, 15, 14, 0.07); --shadow-lg: 0 20px 48px rgba(19, 15, 14, 0.10); --shadow-accent:0 12px 32px rgba(85, 38, 220, 0.22); /* glow under CTA */ --outline-card: 2px solid var(--color-border-strong); /* brutalist edge */ --outline-focus:3px solid var(--color-accent); /* -------------------------------------------------------------------------- MOTION (smooth fade/slide reveals, restrained, NO bounce/elastic) -------------------------------------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 160ms; /* hover, focus, small state */ --dur-base: 240ms; /* default transition */ --dur-slow: 420ms; /* entrance reveals */ --dur-cinema: 720ms; /* hero stagger */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default UI ease */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moves */ --ease-emphasis:cubic-bezier(0.16, 1, 0.3, 1); /* entrance reveals */ --reveal-distance: 24px; /* fade-up travel for staggered content */ --stagger-step: 70ms; /* delay between staggered siblings */ /* -------------------------------------------------------------------------- Z-INDEX -------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; } /* Optional dark mode mapping (full-bleed dark sections reuse these) */ [data-theme="dark"] { --color-ink: #F4ECD5; --color-ink-soft: #B8A4BE; --color-paper: #130F0E; --color-paper-warm: #1E1916; --color-surface: #1E1916; --color-surface-sunk:#171311; --color-border: #34302E; --color-accent: #9D6BFF; /* lift accent for dark contrast */ --color-accent-soft:#241B3E; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-cinema: 1ms; --reveal-distance: 0px; --stagger-step: 0ms; } }