/* ============================================================ STRIDE — Design Tokens Colors, type, spacing, motion. All foundations live here. ============================================================ */ /* ---------- Fonts ---------- Single face across the system: Inter Tight (Google Fonts). Used for the wordmark, display headlines, body, UI, everything. The wordmark "STRIDE" is typeset in Inter Tight Bold/Black at tight tracking; the brand reads as Helvetica-grade Swiss without the licensing overhead. Mono (rarely used, code/meta only): JetBrains Mono. ------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ===== Color — Core Palette ===== */ --stride-ink: #141516; /* Black. Primary text, primary surface for loud register. */ --stride-paper: #DBDBDB; /* Gray. Primary surface for editorial register. */ --stride-white: #FFFFFF; /* Pure white. Reserved for high-contrast moments on ink. */ --stride-flare: #FC593A; /* Red/coral. The loud accent. Used in big blocks. */ --stride-pace: #FEBE37; /* Yellow. The second accent. Pairs with flare. */ /* ===== Color — Ink Scale (text on paper) ===== */ --ink-1: #141516; /* Body, headings */ --ink-2: #2A2C2E; /* Secondary heading */ --ink-3: #5C5E62; /* Body secondary, captions */ --ink-4: #8E9095; /* Meta, hint */ --ink-5: #B8BABE; /* Disabled */ /* ===== Color — Paper Scale (surface tones) ===== */ --paper-0: #FFFFFF; /* Pure white surface */ --paper-1: #F5F5F4; /* Off-white. Default page background. */ --paper-2: #EAEAE8; /* Card / panel */ --paper-3: #DBDBDB; /* Brand gray — the editorial paper tone */ --paper-4: #C7C7C5; /* Divider, edge */ /* ===== Color — On-Ink (text on dark) ===== */ --on-ink-1: #FFFFFF; --on-ink-2: #D6D7D9; --on-ink-3: #95979C; --on-ink-4: #5C5E62; /* ===== Color — Semantic ===== */ --signal-positive: #1F8A5B; --signal-warning: #FEBE37; --signal-danger: #FC593A; --signal-info: #2A6FDB; /* ===== Type Family ===== */ --font-display: "Inter Tight", "Helvetica Neue", "Arial", sans-serif; --font-sans: "Inter Tight", "Helvetica Neue", "Arial", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ===== Type Scale (modular, 1.25 ratio anchored at 16px) ===== Stride uses BIG type. Display sizes are intentionally larger than typical SaaS marketing, to land the editorial-poster register from the moodboard. */ --size-meta: 12px; /* Labels, eyebrows, corner letters */ --size-caption: 13px; --size-body-s: 14px; --size-body: 16px; --size-body-l: 18px; --size-lead: 22px; /* Lede paragraph */ --size-h6: 18px; --size-h5: 22px; --size-h4: 28px; --size-h3: 40px; --size-h2: 56px; --size-h1: 88px; /* Editorial headline */ --size-display: 144px; /* Poster / hero. */ --size-mega: 260px; /* Corner letterforms, wordmark moments */ /* ===== Type Weight ===== */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 900; /* ===== Type Tracking ===== */ --track-display: -0.04em; /* Helvetica likes a touch of negative tracking at size */ --track-headline: -0.02em; --track-body: -0.005em; --track-meta: 0.04em; /* All-caps labels open up */ --track-mega: -0.05em; /* ===== Type Leading ===== */ --lh-display: 0.92; --lh-headline: 1.02; --lh-tight: 1.15; --lh-body: 1.45; --lh-loose: 1.6; /* ===== Spacing (4px base) ===== */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; --s-14: 160px; --s-15: 200px; /* ===== Radius ===== Stride is mostly sharp. Cards are right-angle. The only rounded element is a pill button used in the "loud" register and the small follow-style chip from the social mock. */ --r-0: 0; --r-2: 2px; --r-4: 4px; --r-pill: 999px; /* ===== Borders ===== */ --bd-hair: 1px solid var(--paper-4); --bd-rule: 1px solid var(--ink-1); --bd-thick: 2px solid var(--ink-1); --bd-edge: 1px solid rgba(20, 21, 22, 0.08); /* ===== Elevation ===== No drop shadows on the brand. Elevation comes from color blocking, hairline rules, and generous whitespace. The two shadows below exist only for floating UI (toasts, popovers in product surfaces) and are deliberately understated. */ --shadow-0: none; --shadow-1: 0 1px 0 0 rgba(20, 21, 22, 0.06); --shadow-2: 0 8px 24px -8px rgba(20, 21, 22, 0.18); /* ===== Motion ===== */ --ease-stride: cubic-bezier(0.2, 0.7, 0.1, 1); /* Brand easing. Confident step. */ --ease-pace: cubic-bezier(0.4, 0, 0.2, 1); --dur-quick: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ===== Grid ===== 12-col modular grid. The grid is sometimes visible (faint hairlines) in editorial layouts — see .grid-overlay. */ --grid-cols: 12; --grid-gap: 24px; --grid-max: 1320px; --grid-pad: 40px; } /* ============================================================ Semantic typography. Use these classes for body copy. ============================================================ */ html { font-family: var(--font-sans); color: var(--ink-1); background: var(--paper-1); } body { font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--lh-body); letter-spacing: var(--track-body); color: var(--ink-1); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .t-mega { font-family: var(--font-display); font-size: var(--size-mega); font-weight: var(--w-bold); line-height: var(--lh-display); letter-spacing: var(--track-mega); } .t-display { font-family: var(--font-display); font-size: var(--size-display); font-weight: var(--w-bold); line-height: var(--lh-display); letter-spacing: var(--track-display); } .t-h1 { font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--w-bold); line-height: var(--lh-headline); letter-spacing: var(--track-headline); } .t-h2 { font-family: var(--font-display); font-size: var(--size-h2); font-weight: var(--w-bold); line-height: var(--lh-headline); letter-spacing: var(--track-headline); } .t-h3 { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--track-headline); } .t-h4 { font-family: var(--font-display); font-size: var(--size-h4); font-weight: var(--w-semibold); line-height: var(--lh-tight); } .t-h5 { font-family: var(--font-sans); font-size: var(--size-h5); font-weight: var(--w-semibold); line-height: var(--lh-tight); } .t-h6 { font-family: var(--font-sans); font-size: var(--size-h6); font-weight: var(--w-semibold); line-height: var(--lh-tight); } .t-lead { font-family: var(--font-sans); font-size: var(--size-lead); font-weight: var(--w-regular); line-height: var(--lh-tight); color: var(--ink-2); } .t-body-l { font-size: var(--size-body-l); line-height: var(--lh-body); } .t-body { font-size: var(--size-body); line-height: var(--lh-body); } .t-body-s { font-size: var(--size-body-s); line-height: var(--lh-body); color: var(--ink-3); } .t-caption { font-size: var(--size-caption); line-height: var(--lh-tight); color: var(--ink-3); } .t-meta { font-size: var(--size-meta); font-weight: var(--w-medium); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-3); } .t-mono { font-family: var(--font-mono); font-size: var(--size-body-s); letter-spacing: 0; } /* ============================================================ Stride-specific helpers ============================================================ */ /* The corner letterforms: S T / R D anchored to a frame's corners. Wrap any block in .stride-frame to get them. */ .stride-frame { position: relative; } .stride-frame::before, .stride-frame::after, .stride-frame > .corner-r, .stride-frame > .corner-d { position: absolute; font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--size-meta); letter-spacing: var(--track-meta); color: var(--ink-3); } .stride-frame::before { content: "S"; top: var(--s-5); left: var(--s-5); } .stride-frame::after { content: "T"; top: var(--s-5); right: var(--s-5); } /* The visible grid overlay (editorial register only). */ .grid-overlay { background-image: linear-gradient(to right, rgba(20,21,22,0.06) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }