/** * PrintifySign — Landing Design Tokens * * File: assets/inspiration/landing-tokens.css * Phase: v2.0 Phase 2A — Landing Experience Foundation * Status: NEW file. Pure token declarations, no selectors with rules. * * ─── PURPOSE ───────────────────────────────────────────────────────────── * Single source of truth for all design-system values used by landing.css * and (eventually) future landing partials. Splitting tokens from rules * keeps both files maintainable. * * ─── SCOPE ─────────────────────────────────────────────────────────────── * Only :root { --token: value; } declarations. * No selector targeting body, html, or elements. * No @media, @supports, or other at-rules. * * ─── RULES ─────────────────────────────────────────────────────────────── * - Two type weights only (400 regular, 500 medium). No 600/700. * - One brand color (gold). Material accents declared but reserved. * - All spacing values from token scale, no magic numbers in landing.css. * - Section vpad: clamp(80px, 10vw, 140px). NEVER reduce below 80px. */ :root { /* ═══════════════════════════════════════════════════════════════════ COLOR SYSTEM ═══════════════════════════════════════════════════════════════════ */ /* Dark palette — used by hero, future material spotlight, future footer */ --psd-l-ink: #0a0a0a; --psd-l-ink-soft: #1a1a1a; --psd-l-ink-warm: #1f1d1a; /* Light palette — used by strip, feed section, future trust */ --psd-l-paper: #faf9f7; --psd-l-paper-cool: #f5f4f0; --psd-l-paper-deep: #ece9e2; /* Text colors */ --psd-l-text-primary: #0a0a0a; --psd-l-text-secondary: #5c5950; --psd-l-text-muted: #8a8579; --psd-l-text-inverse: #f5f4f0; --psd-l-text-inverse-muted: #a39e93; /* Brand accent — the single brand color, used with restraint */ --psd-l-gold: #d4a960; --psd-l-gold-deep: #b88a3d; --psd-l-gold-soft: #e6c885; --psd-l-gold-glow: rgba(212, 169, 96, 0.55); --psd-l-gold-glow-soft: rgba(212, 169, 96, 0.25); /* Material accents — RESERVED for future material spotlight section. Declared here so future phases reference tokens, not literals. NOT used in Phase 2A. */ --psd-l-neon-pink: #ff3d8a; --psd-l-neon-pink-glow: rgba(255, 61, 138, 0.65); --psd-l-neon-cyan: #4dd4ff; --psd-l-neon-cyan-glow: rgba(77, 212, 255, 0.55); --psd-l-warm-white: #fff5e0; --psd-l-warm-white-glow: rgba(255, 245, 224, 0.4); /* Border / divider tokens — semi-transparent for cleanest layering */ --psd-l-border-light: rgba(10, 10, 10, 0.06); --psd-l-border-light-hover: rgba(10, 10, 10, 0.12); --psd-l-border-light-firm: rgba(10, 10, 10, 0.18); --psd-l-border-dark: rgba(255, 255, 255, 0.08); --psd-l-border-dark-hover: rgba(255, 255, 255, 0.18); /* ═══════════════════════════════════════════════════════════════════ TYPOGRAPHY SYSTEM ═══════════════════════════════════════════════════════════════════ */ /* Font stacks — system-first, so no webfont blocks LCP */ --psd-l-font-display: "Söhne", "Inter Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --psd-l-font-body: "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --psd-l-font-editorial: "GT Sectra", "Tiempos Headline", "Iowan Old Style", Georgia, "Times New Roman", serif; --psd-l-font-mono: ui-monospace, "SF Mono", Monaco, Consolas, monospace; /* Type scale — clamp for responsive */ --psd-l-type-hero: clamp(38px, 4.4vw, 66px); --psd-l-type-section: clamp(28px, 3.2vw, 44px); --psd-l-type-deck: 17px; --psd-l-type-deck-sm: 16px; --psd-l-type-body: 14px; --psd-l-type-meta: 13px; --psd-l-type-chip: 13.5px; --psd-l-type-eyebrow: 11.5px; --psd-l-type-nav: 14px; /* Weights — strictly two */ --psd-l-weight-regular: 400; --psd-l-weight-medium: 500; /* Line-heights */ --psd-l-leading-tight: 1.05; --psd-l-leading-snug: 1.2; --psd-l-leading-normal: 1.5; --psd-l-leading-relaxed: 1.6; /* Letter-spacing */ --psd-l-tracking-tight: -1.5px; --psd-l-tracking-snug: -0.5px; --psd-l-tracking-normal: 0; /* Phase 2C refinement: tracking-wide 2.5px → 3px — wider tracking on eyebrow labels reads as more editorial / less brand-templated. */ --psd-l-tracking-wide: 3px; /* ═══════════════════════════════════════════════════════════════════ SPACING SYSTEM Vertical rhythm tokens. Use these everywhere. No magic numbers. ═══════════════════════════════════════════════════════════════════ */ --psd-l-space-1: 4px; --psd-l-space-2: 8px; --psd-l-space-3: 12px; --psd-l-space-4: 16px; --psd-l-space-5: 24px; --psd-l-space-6: 32px; --psd-l-space-7: 48px; --psd-l-space-8: 64px; --psd-l-space-9: 80px; --psd-l-space-10: 140px; /* Composite spacing — the non-negotiable rhythm */ --psd-l-section-vpad: clamp(80px, 10vw, 140px); --psd-l-section-gutter: clamp(20px, 4vw, 48px); --psd-l-content-max-w: 1440px; --psd-l-text-max-w: 640px; /* readable line length cap */ /* ═══════════════════════════════════════════════════════════════════ MOTION SYSTEM Four duration tokens, two easings. No more. ═══════════════════════════════════════════════════════════════════ */ --psd-l-ease-cinematic: cubic-bezier(0.2, 0.8, 0.2, 1); --psd-l-ease-standard: ease; --psd-l-ease-soft: ease-in-out; --psd-l-dur-fast: 180ms; --psd-l-dur-medium: 280ms; --psd-l-dur-slow: 450ms; --psd-l-dur-hero: 1400ms; /* ═══════════════════════════════════════════════════════════════════ LAYOUT TOKENS ═══════════════════════════════════════════════════════════════════ */ --psd-l-radius-sm: 6px; --psd-l-radius-md: 12px; --psd-l-radius-lg: 18px; --psd-l-radius-xl: 24px; --psd-l-radius-pill: 999px; --psd-l-nav-height: 72px; --psd-l-z-nav: 50; --psd-l-z-scroll-cue: 10; /* Shadow tokens — used sparingly */ --psd-l-shadow-card: 0 1px 3px rgba(10,10,10,0.06), 0 4px 14px rgba(10,10,10,0.04); --psd-l-shadow-card-lift: 0 2px 6px rgba(10,10,10,0.08), 0 16px 36px rgba(10,10,10,0.1); --psd-l-shadow-hero-stage: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); }