/* Dice Party Design System: concatenated token bundle Sources (in order): colors.css, typography.css, spacing.css, effects.css Generated from docs/design/imported/_ds/tokens/*.css. The Google-Fonts font request was removed from typography.css; fonts load via a in the marketing base instead. */ /* =========================================================================== Dice Party - Color tokens Two coexisting palettes: 1. Dark SaaS surface scale (admin + portal) → dp-* / semantic aliases 2. Marketing atmosphere (gradient + glass) → brand hues + mk-* aliases =========================================================================== */ :root { /* --- Ink / surface scale (near-black, cool) ------------------------------ */ --ink-950: #05070B; /* page base */ --ink-900: #0A0D19; /* deepest gradient stop */ --ink-850: #0B0F1F; /* mid gradient stop */ --ink-825: #070917; /* nav glass base */ --ink-800: #0F1624; /* elevated surface/panel */ --ink-700: #1F2937; /* border / divider */ --ink-600: #374151; /* strong border */ --ink-500: #9CA3AF; /* muted text */ --ink-300: #D1D5DB; --ink-100: #E5E7EB; /* primary text */ --white: #FFFFFF; --black: #000000; /* --- Indigo accent (SaaS primary) ---------------------------------------- */ --indigo-300: #A5B4FC; --indigo-400: #818CF8; --indigo-500: #6366F1; /* the accent */ --indigo-600: #4F46E5; /* --- Brand atmosphere hues (marketing gradient + glow) ------------------- */ --brand-violet: #854CFF; /* primary atmospheric violet */ --brand-teal: #00E4C0; /* cyan/teal glow */ --brand-coral: #FF756B; /* warm coral */ --brand-gold: #F5B82E; /* Mello's star / hat accent */ /* --- Semantic status ----------------------------------------------------- */ --green-500: #22C55E; /* success */ --red-400: #F97373; /* danger */ --amber-500: #F59E0B; /* warning / "new" */ --amber-400: #FBBF24; /* ========================================================================= Semantic aliases - author against these, not raw scale values ========================================================================= */ /* SaaS surfaces */ --color-bg: var(--ink-950); --color-surface: var(--ink-800); --color-surface-sunken: rgba(0, 0, 0, 0.30); --color-surface-hover: rgba(255, 255, 255, 0.05); --color-border: var(--ink-700); --color-border-strong: var(--ink-600); --text-primary: var(--ink-100); --text-secondary: var(--ink-300); --text-muted: var(--ink-500); --text-on-accent: var(--white); --accent: var(--indigo-500); --accent-hover: var(--indigo-600); --accent-soft: rgba(99, 102, 241, 0.20); --focus-ring: rgba(99, 102, 241, 0.55); --status-success: var(--green-500); --status-danger: var(--red-400); --status-warning: var(--amber-500); /* Marketing (light text on atmosphere) */ --mk-text: var(--white); --mk-text-muted: rgba(255, 255, 255, 0.80); --mk-text-faint: rgba(255, 255, 255, 0.55); --mk-card-bg: rgba(255, 255, 255, 0.05); --mk-card-border: rgba(255, 255, 255, 0.10); --mk-glass-bg: rgba(255, 255, 255, 0.10); --mk-glass-border: rgba(255, 255, 255, 0.20); --mk-nav-bg: rgba(7, 9, 23, 0.90); /* The signature full-page marketing gradient (one continuous atmosphere) */ --mk-gradient: radial-gradient(160% 160% at 22% 10%, rgba(133, 76, 255, 0.85) 0%, rgba(133, 76, 255, 0) 55%), radial-gradient(130% 130% at 82% 8%, rgba(0, 228, 192, 0.62) 0%, rgba(0, 228, 192, 0) 55%), radial-gradient(150% 150% at 50% 72%, rgba(255, 117, 107, 0.38) 0%, rgba(255, 117, 107, 0) 62%), linear-gradient(200deg, #0c1024 0%, #0b0f1f 55%, #0a0d19 100%); /* @kind color */ } /* =========================================================================== Dice Party - Typography tokens Inter for everything; JetBrains Mono for metrics, IDs, code. =========================================================================== */ :root { /* Families */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Weights */ --fw-light: 300; /* @kind other */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ --fw-extrabold:800; /* @kind other */ /* Type scale (rem). SaaS UI lives small (xs–lg); marketing reaches display. */ --fs-xs: 0.75rem; /* 12px - meta, badges, mono IDs */ --fs-sm: 0.875rem; /* 14px - SaaS body default */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px - page titles */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px - marketing h2 */ --fs-4xl: 2.25rem; /* 36px */ --fs-5xl: 3rem; /* 48px - marketing h1 */ --fs-6xl: 3.75rem; /* 60px - marketing h1 (lg) */ /* Line heights */ --lh-tight: 1.05; /* @kind other */ --lh-snug: 1.25; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ /* Letter spacing */ --tracking-tight: -0.02em; /* @kind other */ --tracking-normal: 0; /* @kind other */ --tracking-wide: 0.05em; /* @kind other */ /* ---- Semantic roles ---------------------------------------------------- */ /* Marketing */ --type-display: var(--fw-bold) var(--fs-6xl)/var(--lh-tight) var(--font-sans); /* @kind other */ --type-h1: var(--fw-bold) var(--fs-5xl)/var(--lh-tight) var(--font-sans); /* @kind other */ --type-h2: var(--fw-semibold) var(--fs-3xl)/var(--lh-snug) var(--font-sans); /* @kind other */ --type-lead: var(--fw-regular) var(--fs-xl)/var(--lh-relaxed) var(--font-sans); /* @kind other */ /* SaaS */ --type-page-title: var(--fw-semibold) var(--fs-lg)/var(--lh-snug) var(--font-sans); /* @kind other */ --type-section-label: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-sans); /* @kind other */ --type-body: var(--fw-regular) var(--fs-sm)/var(--lh-relaxed) var(--font-sans); /* @kind other */ --type-meta: var(--fw-regular) var(--fs-xs)/var(--lh-normal) var(--font-sans); /* @kind other */ } /* =========================================================================== Dice Party - Spacing, radii, container tokens 4px base grid. =========================================================================== */ :root { /* Spacing scale */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-24: 6rem; /* 96 - marketing section rhythm */ /* Radii - SaaS is restrained (md), marketing is soft (2xl) */ --radius-sm: 0.25rem; /* 4 - pills, chips inside tables */ --radius-md: 0.375rem; /* 6 - SaaS panels, buttons, inputs */ --radius-lg: 0.5rem; /* 8 - marketing CTA buttons */ --radius-xl: 0.75rem; /* 12 - glass chips */ --radius-2xl: 1rem; /* 16 - marketing cards / illustration frames */ --radius-full: 9999px; /* avatars, dots, pills */ /* Containers */ --container-sm: 42rem; /* portal reading column */ --container-md: 56rem; /* dashboard content */ --container-lg: 72rem; /* marketing sections */ --container-xl: 80rem; /* marketing nav/footer */ /* Layout fixtures */ --sidebar-width: 13rem; /* 208px - dashboard sidebar */ --topbar-height: 3.5rem; /* 56px - dashboard topbar */ } /* =========================================================================== Dice Party - Effects: shadows, blur, borders, motion =========================================================================== */ :root { /* Shadows - marketing leans on big soft drop shadows under glass cards */ --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.35); /* mk-card */ --shadow-illus: 0 20px 50px rgba(0, 0, 0, 0.45); /* framed illustration */ --shadow-illus-sm: 0 14px 30px rgba(0, 0, 0, 0.35); --shadow-chip: 0 10px 25px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); /* SaaS subtle lift */ --shadow-glow-violet: 0 0 60px rgba(133, 76, 255, 0.45); /* Backdrop blur (frosted glass) */ --blur-glass: blur(12px); /* @kind other */ --blur-nav: blur(8px); /* @kind other */ /* Border widths */ --border-hairline: 1px; /* @kind other */ --border-accent: 2px; /* @kind other */ /* Motion - gentle, never bouncy. Mello is calm. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ /* Float keyframe durations (marketing hero accents) */ --float-dur: 6s; /* @kind other */ --float-dur-slow: 10s; /* @kind other */ } /* Shared float animation used by marketing accents */ @keyframes dp-float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } /* Pulse for live/active status dots */ @keyframes dp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }