/* DocReadi — typography (Quiet Ledger v1.0) ============================================================ Three families. All permissively licensed. 1. Manrope (SIL OFL) — display, headings, wordmark base 2. Inter (SIL OFL) — body, UI, forms, tables 3. JetBrains Mono (Apache) — amounts, IDs, JSON, model names Wordmark sits at Manrope Bold (700). Display headings step down (h1=700, h2/h3=600) so the wordmark is always the heaviest thing on a page. Pair this file with tokens-css-vars.css. Order in doesn't matter — variables in this file fall back to the same hex values when tokens-css-vars.css isn't present. */ /* === Web font loading ========================================== */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* === Base ====================================================== */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif); font-weight: 400; font-size: var(--font-size-base, 16px); line-height: var(--line-height-base, 24px); color: var(--color-text-default, #1E293B); background: var(--color-surface, #F7F9FB); } /* === Type scale ================================================= Use these utility classes directly, or rely on the corresponding Tailwind classes generated from tokens-tailwind.config.js. */ .text-xs { font-size: 12px; line-height: 16px; } .text-sm { font-size: 14px; line-height: 20px; } .text-base { font-size: 16px; line-height: 24px; } .text-lg { font-size: 18px; line-height: 28px; } .text-xl { font-size: 20px; line-height: 28px; letter-spacing: -0.005em; } .text-2xl { font-size: 24px; line-height: 32px; letter-spacing: -0.012em; } .text-3xl { font-size: 32px; line-height: 40px; letter-spacing: -0.018em; } .text-4xl { font-size: 40px; line-height: 48px; letter-spacing: -0.022em; } .text-5xl { font-size: 48px; line-height: 56px; letter-spacing: -0.025em; } /* === Headings ================================================== Hierarchy steps DOWN from the wordmark. wordmark = 700 (Bold) h1 = 700 h2/h3 = 600 h4 = 600 */ h1, .h1 { font-family: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif); font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: -0.022em; color: var(--color-text, #0F172A); } h2, .h2 { font-family: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif); font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -0.018em; color: var(--color-text, #0F172A); } h3, .h3 { font-family: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.012em; color: var(--color-text, #0F172A); } h4, .h4 { font-family: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.005em; color: var(--color-text, #0F172A); } /* === Specialised contexts ===================================== Tabular figures everywhere money and counts appear. */ .tabular, table.amounts td, table.amounts th { font-feature-settings: "tnum" on, "lnum" on; font-variant-numeric: tabular-nums; } code, pre, .mono { font-family: var(--font-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace); font-size: 0.92em; line-height: 1.55; font-feature-settings: "tnum" on; } pre { background: var(--color-surface-muted, #EEF2F6); border: 0.5px solid var(--color-border, #E2E8F0); border-radius: var(--radius-card, 12px); padding: 12px 14px; overflow-x: auto; } /* === Wordmark utility ========================================== Apply to inline elements when rendering "DocReadi" in HTML contexts where the SVG isn't ergonomic (email clients, plain templates, etc). For canonical use prefer logo-wordmark.svg. Markup pattern: Doc​Readi The zero-width space inside .gap is the felt-not-obvious visual breath between Doc and Readi — felt at display sizes, invisible at small sizes. */ .wordmark { font-family: var(--font-display, "Manrope", ui-sans-serif, system-ui, sans-serif); font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; color: var(--color-primary, #16324F); } .wordmark .gap { letter-spacing: 0.04em; } .wordmark .di { color: var(--color-accent, #2CB7C9); } /* === Self-hosting note ========================================= For environments that can't rely on Google Fonts (CSP, offline, privacy), replace the @import at the top with @font-face rules pointing at your own woff2 files: @font-face { font-family: "Manrope"; font-weight: 500 700; font-style: normal; font-display: swap; src: url("/static/fonts/Manrope.woff2") format("woff2-variations"); } @font-face { font-family: "Inter"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("/static/fonts/Inter.woff2") format("woff2-variations"); } @font-face { font-family: "JetBrains Mono"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("/static/fonts/JetBrainsMono.woff2") format("woff2-variations"); } Subset to Latin Extended unless you ship outside that range. Latin-Extended subset is ~30 KB per family vs ~140 KB unsubsetted. */