/* ========================================================================== RUBRIK — TYPE SYSTEM -------------------------------------------------------------------------- Derived by inventorying every unique type layer in the reference build (26 at desktop / 31 at tablet / 27 at mobile) and consolidating them into one ordered scale. SCALE ROLE px @375 @768 @1440 --------------------------------------------------------------------------- D1 display hero headline (largest on the canvas) 36 54 80 D2 display oversized numeral (testimonial stat) 32 52 72 D3 display closing statement (Teaser100) 30 40 52 H1 heading section heading 24 38 44 H2 heading card heading 24 32 40 H3 heading panel / sub heading 22 28 36 H4 heading FAQ question 20 24 28 H5 heading small heading 20 22 24 H6 heading lead / FAQ answer 20 20 20 P1 body BASE BODY SIZE 14 14 14 P2 body small print / dense UI 12 12 12 L1 label mono eyebrow / kicker / tab label 12 12 12 TRACKING RAMP — tighter as size grows, per the brief: P2/P1 +1% → H6 0% → H5 −0.5% → H4 −1% → H3 −1.5% → H2/H1 −2% → D3 −2.5% → D2/D1 −3% L1 (mono) sits outside the ramp at +5%, as small monospace caps need it. FLUIDITY — mobile is a fixed step; 768→1440 interpolates linearly; ≥1440 is capped (the canvas itself is capped at 1440). The `rem` term in each clamp() keeps the scale responsive to the user's browser font-size setting. ========================================================================== */ :root { /* ---- Sizes: mobile step (base, <768px) ---- */ --rb-sys-text-d1-size: 36px; --rb-sys-text-d2-size: 32px; --rb-sys-text-d3-size: 30px; --rb-sys-text-h1-size: 24px; --rb-sys-text-h2-size: 24px; --rb-sys-text-h3-size: 22px; --rb-sys-text-h4-size: 20px; --rb-sys-text-h5-size: 20px; --rb-sys-text-h6-size: 20px; --rb-sys-text-p1-size: 14px; --rb-sys-text-p2-size: 12px; --rb-sys-text-l1-size: 12px; /* ---- Line heights (unitless) ---- */ --rb-sys-text-d1-leading: 0.92; --rb-sys-text-d2-leading: 0.92; --rb-sys-text-d3-leading: 0.94; --rb-sys-text-h1-leading: 0.96; --rb-sys-text-h2-leading: 0.96; --rb-sys-text-h3-leading: 1; --rb-sys-text-h4-leading: 1.1; --rb-sys-text-h5-leading: 1.15; --rb-sys-text-h6-leading: 1.3; --rb-sys-text-p1-leading: 1.5; --rb-sys-text-p2-leading: 1.5; --rb-sys-text-l1-leading: 1.5; /* ---- Tracking ---- */ --rb-sys-text-d1-tracking: -0.03em; --rb-sys-text-d2-tracking: -0.03em; --rb-sys-text-d3-tracking: -0.025em; --rb-sys-text-h1-tracking: -0.02em; --rb-sys-text-h2-tracking: -0.02em; --rb-sys-text-h3-tracking: -0.015em; --rb-sys-text-h4-tracking: -0.01em; --rb-sys-text-h5-tracking: -0.005em; --rb-sys-text-h6-tracking: 0em; --rb-sys-text-p1-tracking: 0.01em; --rb-sys-text-p2-tracking: 0.01em; --rb-sys-text-l1-tracking: 0.05em; /* ---- Weights ---- */ --rb-sys-text-d1-weight: var(--rb-ref-weight-regular); --rb-sys-text-d2-weight: var(--rb-ref-weight-medium); --rb-sys-text-d3-weight: var(--rb-ref-weight-medium); --rb-sys-text-h1-weight: var(--rb-ref-weight-medium); --rb-sys-text-h2-weight: var(--rb-ref-weight-medium); --rb-sys-text-h3-weight: var(--rb-ref-weight-medium); --rb-sys-text-h4-weight: var(--rb-ref-weight-medium); --rb-sys-text-h5-weight: var(--rb-ref-weight-medium); --rb-sys-text-h6-weight: var(--rb-ref-weight-regular); --rb-sys-text-p1-weight: var(--rb-ref-weight-regular); --rb-sys-text-p2-weight: var(--rb-ref-weight-regular); --rb-sys-text-l1-weight: var(--rb-ref-weight-medium); } @media (min-width: 768px) { :root { --rb-sys-text-d1-size: clamp(54px, 1.5179rem + 3.869vw, 80px); --rb-sys-text-d2-size: clamp(52px, 1.8214rem + 2.9762vw, 72px); --rb-sys-text-d3-size: clamp(40px, 1.6429rem + 1.7857vw, 52px); --rb-sys-text-h1-size: clamp(38px, 1.9464rem + 0.8929vw, 44px); --rb-sys-text-h2-size: clamp(32px, 1.4286rem + 1.1905vw, 40px); --rb-sys-text-h3-size: clamp(28px, 1.1786rem + 1.1905vw, 36px); --rb-sys-text-h4-size: clamp(24px, 1.2143rem + 0.5952vw, 28px); --rb-sys-text-h5-size: clamp(22px, 1.2321rem + 0.2976vw, 24px); } } /* -------------------------------------------------------------------------- TYPE CLASSES Presentational, so heading LEVEL stays free to follow document outline. `.rb-h2` is a look; `

` is a level. Never conflate them. -------------------------------------------------------------------------- */ .rb-d1, .rb-d2, .rb-d3, .rb-h1, .rb-h2, .rb-h3, .rb-h4, .rb-h5, .rb-h6 { font-family: var(--rb-sys-font-functional); text-wrap: balance; margin: 0; } .rb-d1 { font-size: var(--rb-sys-text-d1-size); line-height: var(--rb-sys-text-d1-leading); letter-spacing: var(--rb-sys-text-d1-tracking); font-weight: var(--rb-sys-text-d1-weight); } .rb-d2 { font-size: var(--rb-sys-text-d2-size); line-height: var(--rb-sys-text-d2-leading); letter-spacing: var(--rb-sys-text-d2-tracking); font-weight: var(--rb-sys-text-d2-weight); } .rb-d3 { font-size: var(--rb-sys-text-d3-size); line-height: var(--rb-sys-text-d3-leading); letter-spacing: var(--rb-sys-text-d3-tracking); font-weight: var(--rb-sys-text-d3-weight); } .rb-h1 { font-size: var(--rb-sys-text-h1-size); line-height: var(--rb-sys-text-h1-leading); letter-spacing: var(--rb-sys-text-h1-tracking); font-weight: var(--rb-sys-text-h1-weight); } .rb-h2 { font-size: var(--rb-sys-text-h2-size); line-height: var(--rb-sys-text-h2-leading); letter-spacing: var(--rb-sys-text-h2-tracking); font-weight: var(--rb-sys-text-h2-weight); } .rb-h3 { font-size: var(--rb-sys-text-h3-size); line-height: var(--rb-sys-text-h3-leading); letter-spacing: var(--rb-sys-text-h3-tracking); font-weight: var(--rb-sys-text-h3-weight); } .rb-h4 { font-size: var(--rb-sys-text-h4-size); line-height: var(--rb-sys-text-h4-leading); letter-spacing: var(--rb-sys-text-h4-tracking); font-weight: var(--rb-sys-text-h4-weight); } .rb-h5 { font-size: var(--rb-sys-text-h5-size); line-height: var(--rb-sys-text-h5-leading); letter-spacing: var(--rb-sys-text-h5-tracking); font-weight: var(--rb-sys-text-h5-weight); } .rb-h6 { font-size: var(--rb-sys-text-h6-size); line-height: var(--rb-sys-text-h6-leading); letter-spacing: var(--rb-sys-text-h6-tracking); font-weight: var(--rb-sys-text-h6-weight); } /* Body */ .rb-p1, .rb-p2 { font-family: var(--rb-sys-font-functional); margin: 0; } .rb-p1 { font-size: var(--rb-sys-text-p1-size); line-height: var(--rb-sys-text-p1-leading); letter-spacing: var(--rb-sys-text-p1-tracking); font-weight: var(--rb-sys-text-p1-weight); } .rb-p2 { font-size: var(--rb-sys-text-p2-size); line-height: var(--rb-sys-text-p2-leading); letter-spacing: var(--rb-sys-text-p2-tracking); font-weight: var(--rb-sys-text-p2-weight); } /* Mono label — eyebrows, kickers, tab labels, footer column headings */ .rb-l1 { font-family: var(--rb-sys-font-label); font-size: var(--rb-sys-text-l1-size); line-height: var(--rb-sys-text-l1-leading); letter-spacing: var(--rb-sys-text-l1-tracking); font-weight: var(--rb-sys-text-l1-weight); margin: 0; } .rb-l1--caps { text-transform: uppercase; } /* Modifiers ------------------------------------------------------------- */ .rb-text--narrative { font-family: var(--rb-sys-font-narrative); } .rb-text--label { font-family: var(--rb-sys-font-label); } .rb-text--regular { font-weight: var(--rb-ref-weight-regular); } .rb-text--medium { font-weight: var(--rb-ref-weight-medium); } .rb-text--bold { font-weight: var(--rb-ref-weight-bold); } .rb-text--primary { color: var(--rb-sys-fg-primary); } .rb-text--secondary { color: var(--rb-sys-fg-secondary); } .rb-text--tertiary { color: var(--rb-sys-fg-tertiary); } .rb-text--muted { color: var(--rb-sys-fg-muted); } .rb-text--slate { color: var(--rb-sys-fg-slate); } .rb-text--brand { color: var(--rb-sys-fg-brand); } .rb-text--on-dark { color: var(--rb-sys-fg-on-dark); } .rb-text--balance { text-wrap: balance; } .rb-text--pretty { text-wrap: pretty; } /* Measure caps — keeps long-form copy inside a readable line length */ .rb-measure-xs { max-width: 32ch; } .rb-measure-sm { max-width: 46ch; } .rb-measure-md { max-width: 60ch; } .rb-measure-lg { max-width: 72ch; }