/* ============================================================ Hubstream Dataspace — Design Tokens ============================================================ A two-mode system: • Cinematic (marketing surfaces) — deep black, vignettes, full-bleed imagery • Operational (app surfaces) — warm off-white, hairlines, dense rows Both modes share one accent: Hubstream orange (#FF5100). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ---------- BRAND ---------- A single accent color carries the entire system. Resist adding more hues — variation comes from texture, not chroma. */ --ds-orange: #FF5100; /* Hubstream brand orange — interactive accent, links, focus */ --ds-orange-hover: #FF6A24; /* lighter, for hover states only */ --ds-orange-deep: #C73E00; /* deeper, for pressed/visited */ /* ---------- CINEMATIC SURFACE (marketing) ---------- Near-black with green undertone, like cinema curtains. Never pure #000. */ --ds-ink-900: #0E0E10; /* page background — cinematic */ --ds-ink-800: #161618; /* raised surface */ --ds-ink-700: #1F1F22; /* card / vignette base */ --ds-ink-600: #2A2A2E; /* hairline on dark */ --ds-ink-500: #3A3A40; /* muted divider on dark */ /* ---------- OPERATIONAL SURFACE (app) ---------- Warm off-white. Pulls from the rice-paper / cream-ticket palette so the marketing and product worlds feel like the same brand. */ --ds-paper-50: #FAF8F3; /* page background — operational */ --ds-paper-100: #F4F0E6; /* alt rows, sidebars */ --ds-paper-200: #ECE6D5; /* the ticket cream */ --ds-paper-300: #DDD5C0; /* hairline on light */ --ds-paper-400: #B8B0A0; /* muted divider on light */ /* ---------- TEXT ---------- */ --ds-text-on-dark: #F4F0E6; /* headlines on cinematic */ --ds-text-on-dark-muted: #A8A296; /* body / metadata on cinematic */ --ds-text-on-dark-faint: #6B665D; /* captions / overlines on cinematic */ --ds-text-on-light: #14140F; /* headlines on operational */ --ds-text-on-light-muted: #5C584E; /* body / metadata on operational */ --ds-text-on-light-faint: #8A8475; /* captions / overlines on operational */ /* ---------- SEMANTIC (use sparingly) ---------- The brand is single-accent. These exist only for app states where orange would be wrong (e.g. "destructive" is not "primary"). */ --ds-signal-alert: #C73E00; /* same family as orange-deep */ --ds-signal-warn: #B58A00; /* mustard, sits next to cream */ --ds-signal-ok: #2F6B3D; /* dim forest, never neon */ --ds-signal-info: #2A4A6B; /* ink blue, for chips only */ /* ---------- TYPOGRAPHY ---------- */ --ds-font-display: "Source Serif 4", "Iowan Old Style", "Charter", Georgia, serif; --ds-font-body: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale — modular ratio 1.25 from a 16px base. Display sizes break the ratio for cinematic impact. */ --ds-text-2xs: 11px; /* overlines, table meta */ --ds-text-xs: 12px; --ds-text-sm: 14px; --ds-text-md: 16px; /* body */ --ds-text-lg: 18px; --ds-text-xl: 22px; /* sub-headlines */ --ds-text-2xl: 28px; --ds-text-3xl: 36px; --ds-text-4xl: 48px; --ds-text-5xl: 64px; --ds-text-6xl: 88px; /* page-level display */ --ds-text-hero: 132px; /* hero only — set with line-height: 0.92 */ /* Line heights */ --ds-leading-display: 0.96; --ds-leading-tight: 1.12; --ds-leading-snug: 1.28; --ds-leading-body: 1.5; --ds-leading-loose: 1.7; /* Letter spacing */ --ds-tracking-display: -0.02em; /* tighten serif headlines */ --ds-tracking-body: 0; --ds-tracking-overline: 0.18em; /* mono overlines, all-caps */ --ds-tracking-mono: 0.02em; /* ---------- SPACING ---------- 4px base. Marketing pages use the larger end (lg → 4xl); app surfaces stay tight (xs → md) for density. */ --ds-space-2xs: 4px; --ds-space-xs: 8px; --ds-space-sm: 12px; --ds-space-md: 16px; --ds-space-lg: 24px; --ds-space-xl: 32px; --ds-space-2xl: 48px; --ds-space-3xl: 64px; --ds-space-4xl: 96px; --ds-space-5xl: 144px; /* ---------- RADII ---------- The system is square-leaning. Cards are crisp; only chips/buttons round. Never go above 12px on a structural element. */ --ds-radius-none: 0; --ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-pill: 999px; /* ---------- ELEVATION ---------- Cinematic surfaces use vignettes (radial shadows in art), not box-shadows. Operational surfaces use flat hairlines + a single subtle shadow. */ --ds-shadow-hairline-light: inset 0 0 0 1px var(--ds-paper-300); --ds-shadow-hairline-dark: inset 0 0 0 1px var(--ds-ink-600); --ds-shadow-card: 0 1px 0 rgba(20, 20, 15, 0.04), 0 8px 24px -12px rgba(20, 20, 15, 0.12); --ds-shadow-pop: 0 12px 48px -16px rgba(0, 0, 0, 0.5); /* ---------- TEXTURES ---------- Reference once at the root; reuse across pages. */ --ds-tex-paper: url("assets/rice-paper-2.png"); --ds-tex-paper-2: url("assets/paper-3.png"); --ds-tex-concrete: url("assets/concrete-wall.png"); --ds-tex-grid: url("assets/noisy_grid.webp"); --ds-tex-dots: url("assets/dotted_pattern.png"); --ds-tex-mirror: url("assets/design-mirror-bg.jpg"); --ds-tex-mirror-light: url("assets/lighter-mirror.jpg"); --ds-tex-h-line: url("assets/h_line.png"); --ds-tex-v-line: url("assets/v_line.png"); /* ---------- LAYOUT ---------- Marketing: 1280 max, generous gutters. App: full-bleed, internal panels at 1440 max. */ --ds-content-narrow: 720px; /* article body */ --ds-content-text: 960px; /* hero text block */ --ds-content-wide: 1280px; /* marketing container */ --ds-content-full: 1440px; /* app shell */ --ds-gutter: clamp(16px, 4vw, 64px); /* ---------- MOTION ---------- Cinematic surfaces ease slow & long. App surfaces snap. */ --ds-ease-cinematic: cubic-bezier(0.2, 0.7, 0.1, 1); --ds-ease-snap: cubic-bezier(0.4, 0, 0.2, 1); --ds-dur-instant: 80ms; --ds-dur-quick: 160ms; --ds-dur-base: 260ms; --ds-dur-slow: 520ms; --ds-dur-cinematic: 900ms; } /* ============================================================ Surface modes — apply to a wrapper to inherit the right defaults. ============================================================ */ .ds-surface-cinematic { background: var(--ds-ink-900); color: var(--ds-text-on-dark); font-family: var(--ds-font-body); } .ds-surface-operational { background: var(--ds-paper-50); color: var(--ds-text-on-light); font-family: var(--ds-font-body); } /* ============================================================ Shared primitives — used in the showcase but small enough to live here. ============================================================ */ /* Overline — small mono caps used for section labels, "01 / Origin", etc. */ .ds-overline { font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: var(--ds-tracking-overline); text-transform: uppercase; font-weight: 500; } /* Display headline — serif, tight tracking, near-flat leading. */ .ds-display { font-family: var(--ds-font-display); font-weight: 400; line-height: var(--ds-leading-display); letter-spacing: var(--ds-tracking-display); text-wrap: balance; } /* Body — sans, generous leading, comfortable measure. */ .ds-body { font-family: var(--ds-font-body); font-weight: 400; line-height: var(--ds-leading-body); font-size: var(--ds-text-md); text-wrap: pretty; } /* Hairline — the one structural rule. 1px on light, 1px on dark. Use on table rows, card edges, marketing section dividers. */ .ds-hairline-x { height: 1px; background: currentColor; opacity: 0.16; border: 0; } .ds-hairline-y { width: 1px; background: currentColor; opacity: 0.16; border: 0; }