/* ── Typography tokens ───────────────────────────────────────── One font family, two reading contexts (see layouts/page.css and layouts/studio.css), and a fixed named type scale. Components reference the --type-* tokens below by name, never a raw font-size/weight/line-height value. See ../README.md for why Inter and JetBrains Mono, and for the full scale rationale. */ /* Self-hosted, Latin subset, variable weight - no third-party request at runtime. Licensed under the SIL Open Font License; see ../fonts/LICENSE-*.txt. */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Font families ─────────────────────────────────────────── */ --font-sans: 'Inter Variable', Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── Named type scale ────────────────────────────────────────── Each level is font + size + weight + line-height (+ letter- spacing where it matters). Pick by purpose, not by pixel value: Display - the single largest mark on a page (home hero). Heading XL - page title (h1). Heading L - section title (h2). Heading M - card/subsection title (h3), also Quote author line. Heading S - minor heading (h4), dense Studio subsections. Heading XS - minor heading (h5). Heading 2XS - minor heading (h6), micro-label-adjacent. Body Large - lead paragraph, tagline, summary/subtitle copy. Body - default running text. Small - metadata, secondary detail, table cells. Caption - badge/tag text, all-caps micro-labels. Label - form field labels. Quote - the Quote component's statement text. Code - inline code and fenced code blocks. Display and Heading XL are fluid (clamp()) between a 390px and a 1440px viewport (Issue 37) - the two sizes large enough to otherwise dominate a narrow viewport or need to be scaled down disproportionately rather than just reflowing text. Every other level is small enough already that a single flat size reads fine at every width, so it stays a plain rem value - no separate mechanism, this is the Design System's only fluid-type approach, reused rather than duplicated if a future level ever needs it. */ --type-display-family: var(--font-sans); /* Deliberately close to Heading XL's own clamp (a constant ~0.25rem above it at every viewport) - the home hero should read as the strongest mark on the page without dwarfing a section heading like "Featured Project" (Heading L) two steps down the scale. A previous pass (2.5rem max) made that ratio too wide - user feedback after Issue 37 shipped. */ --type-display-size: clamp(1.75rem, 1.657rem + 0.38vw, 2rem); --type-display-weight: 700; --type-display-line-height: 1.2; --type-display-letter-spacing: -0.02em; --type-heading-xl-family: var(--font-sans); --type-heading-xl-size: clamp(1.5rem, 1.407rem + 0.38vw, 1.75rem); --type-heading-xl-weight: 700; --type-heading-xl-line-height: 1.25; --type-heading-xl-letter-spacing: -0.01em; --type-heading-l-family: var(--font-sans); --type-heading-l-size: 1.375rem; --type-heading-l-weight: 700; --type-heading-l-line-height: 1.25; --type-heading-l-letter-spacing: normal; --type-heading-m-family: var(--font-sans); --type-heading-m-size: 1.125rem; --type-heading-m-weight: 600; --type-heading-m-line-height: 1.3; --type-heading-m-letter-spacing: normal; --type-heading-s-family: var(--font-sans); --type-heading-s-size: 1rem; --type-heading-s-weight: 600; --type-heading-s-line-height: 1.35; --type-heading-s-letter-spacing: normal; --type-heading-xs-family: var(--font-sans); --type-heading-xs-size: 0.875rem; --type-heading-xs-weight: 600; --type-heading-xs-line-height: 1.4; --type-heading-xs-letter-spacing: normal; --type-heading-2xs-family: var(--font-sans); --type-heading-2xs-size: 0.8125rem; --type-heading-2xs-weight: 600; --type-heading-2xs-line-height: 1.4; --type-heading-2xs-letter-spacing: 0.01em; --type-body-lg-family: var(--font-sans); --type-body-lg-size: 1.125rem; --type-body-lg-weight: 400; --type-body-lg-line-height: 1.6; --type-body-lg-letter-spacing: normal; --type-body-family: var(--font-sans); --type-body-size: 1rem; --type-body-weight: 400; --type-body-line-height: 1.65; --type-body-letter-spacing: normal; --type-small-family: var(--font-sans); --type-small-size: 0.875rem; --type-small-weight: 400; --type-small-line-height: 1.55; --type-small-letter-spacing: normal; --type-caption-family: var(--font-sans); --type-caption-size: 0.78rem; --type-caption-weight: 500; --type-caption-line-height: 1.4; --type-caption-letter-spacing: 0.02em; --type-label-family: var(--font-sans); --type-label-size: 0.8125rem; --type-label-weight: 500; --type-label-line-height: 1.4; --type-label-letter-spacing: 0.01em; --type-quote-family: var(--font-sans); --type-quote-size: 1.375rem; --type-quote-weight: 500; --type-quote-line-height: 1.55; --type-quote-letter-spacing: normal; --type-code-family: var(--font-mono); --type-code-size: 0.9em; --type-code-weight: 400; --type-code-line-height: 1.7; --type-code-letter-spacing: normal; /* Reading mode (see layouts/article.css) loosens line-height beyond the --type-body default - comfortable long-form measure, not the denser rhythm forms/tables need. */ --type-reading-line-height: 1.7; }