/* ============================================================
LibreWin Global Type System
Source: commons/index.html — catalogued 2026-06-29
Font: Geist (Google Fonts, 300–700)
============================================================
HOW TO USE
──────────
1. Link this file AFTER style.css, BEFORE any page-level CSS:
2. This file sets global typography and defines every
named type role as a utility class.
3. Dark mode is default (:root). Light tokens activate on
[data-theme="light"] or via prefers-color-scheme.
TYPE ROLES (use these class names in markup)
─────────────────────────────────────────────
Page title lockup
.gt-title-the "The" eyebrow above the page name
.gt-title-name Page / product name (H1 scale)
Editorial header
.gt-headline Lead sentence below the page name (H2 scale, light weight)
.gt-deck Intro paragraph / deck copy
Section structure
.gt-kicker Section label — mono, caps, small
.gt-section-h2 Section heading (H2 in article context)
.gt-section-h3 Card / sub-section heading (H3)
Body
.gt-body Default body paragraph (inherits from )
.gt-body-sm Smaller body, used in cards and captions
.gt-body-muted Body-sm in a muted tone
.gt-list-item List items inside .l-section ul li
Cards
.gt-card-title Publication card H3 (large card title)
.gt-card-body Body copy inside a card
Navigation & UI chrome
.gt-nav-logo Nav bar brand name
.gt-sidebar-label TOC section label (mono, caps, tiny)
.gt-sidebar-link TOC nav link
.gt-btn-label Button / pill label (12–13 px, medium)
.gt-tag Metadata tag — italic, muted
.gt-contact-label Micro label above a contact row
.gt-contact-link Contact row anchor
Callout
.gt-blockquote Pull-quote / blockquote
============================================================ */
/* ── Color tokens — Dark (default) ── */
:root {
/* Background */
--gt-bg: #0a0a0b;
--gt-surface: #111113;
--gt-surface-hover: #16161a;
/* Text roles */
--gt-text: #e4e4e8; /* primary body */
--gt-text-heading: #fafafa; /* headings, card titles */
--gt-text-muted: #b0b0ba; /* secondary body, deck */
--gt-text-faint: #818189; /* kickers, labels, tags */
--gt-text-tag: #9a9aa4; /* pub tags, meta */
/* Borders */
--gt-border: #1e1e22;
--gt-border-subtle: #2a2a30;
/* Accent — buttons only, never changes between modes */
--gt-accent: #2c5282;
--gt-accent-hover: #1a3a5c;
/* Accent text — blue used on text, NOT buttons
Dark default: lighter for legibility on dark bg */
--gt-accent-text: #5a9fd4;
/* Typography */
--gt-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Cantarell, sans-serif;
--gt-font-mono: 'Geist', monospace;
}
/* ── Color tokens — Light ── */
[data-theme="light"] {
--gt-bg: #ffffff;
--gt-surface: #f4f4f5;
--gt-surface-hover: #e4e4e7;
--gt-text: #3f3f46;
--gt-text-heading: #09090b;
--gt-text-muted: #5a5a63;
--gt-text-faint: #818189;
--gt-text-tag: #6e6e78;
--gt-border: #e4e4e7;
--gt-border-subtle: #d4d4d8;
--gt-accent: #2c5282;
--gt-accent-hover: #1a3a5c;
/* Light: use the darker button blue — readable on white */
--gt-accent-text: #2c5282;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] {
--gt-bg: #ffffff;
--gt-surface: #f4f4f5;
--gt-surface-hover: #e4e4e7;
--gt-text: #3f3f46;
--gt-text-heading: #09090b;
--gt-text-muted: #5a5a63;
--gt-text-faint: #818189;
--gt-text-tag: #6e6e78;
--gt-border: #e4e4e7;
--gt-border-subtle: #d4d4d8;
--gt-accent: #2c5282;
--gt-accent-hover: #1a3a5c;
--gt-accent-text: #2c5282;
}
}
/* ── Base body ── */
body {
font-family: var(--gt-font-sans);
font-size: 16px;
line-height: 1.8;
color: var(--gt-text);
background: var(--gt-bg);
-webkit-font-smoothing: antialiased;
}
/* ============================================================
TYPE ROLE CLASSES
============================================================ */
/* ── Page title lockup ── */
/* "The" eyebrow — italic, light, small-caps feel
Dark: #818189 (--gt-text-faint)
Light: #818189 */
.gt-title-the {
font-family: var(--gt-font-sans);
font-size: 25px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.04em;
line-height: 1;
color: var(--gt-text-faint);
}
/* Page / product name — H1 scale, bold
Dark: #fafafa (--gt-text-heading)
Light: #09090b */
.gt-title-name {
font-family: var(--gt-font-sans);
font-size: clamp(36px, 3.2vw, 48px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--gt-text-heading);
}
/* ── Editorial header ── */
/* Lead sentence below page name — H2 scale, regular weight
Dark: #b0b0ba (--gt-text-muted)
Light: #5a5a63 */
.gt-headline {
font-family: var(--gt-font-sans);
font-size: clamp(18px, 2.4vw, 26px);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--gt-text-muted);
}
/* Intro paragraph / deck below headline
Dark: #b0b0ba Light: #5a5a63
17px — slightly larger than body for editorial weight */
.gt-deck {
font-family: var(--gt-font-sans);
font-size: 17px;
font-weight: 400;
line-height: 1.7;
color: var(--gt-text-muted);
}
/* ── Section structure ── */
/* Section kicker — mono, all-caps, tiny
e.g. "What It Is", "The Boundary"
Dark: #818189 Light: #818189
Note: page inline style overrides to 11px; canonical is 11px */
.gt-kicker {
font-family: var(--gt-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
color: var(--gt-text-faint);
}
/* Section H2 — article section heading
Dark: #fafafa Light: #09090b */
.gt-section-h2 {
font-family: var(--gt-font-sans);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--gt-text-heading);
}
/* Card / sub-section H3 — principle cards, contact cards
Dark: #fafafa Light: #09090b */
.gt-section-h3 {
font-family: var(--gt-font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.4;
color: var(--gt-text-heading);
}
/* ── Body ── */
/* Standard body paragraph (inherits base)
Dark: #b0b0ba Light: #5a5a63 */
.gt-body {
font-family: var(--gt-font-sans);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--gt-text-muted);
}
/* Smaller body — cards, captions
Dark: #b0b0ba Light: #5a5a63 */
.gt-body-sm {
font-family: var(--gt-font-sans);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--gt-text-muted);
}
/* List item inside article sections
Dark: #b0b0ba Light: #5a5a63 */
.gt-list-item {
font-family: var(--gt-font-sans);
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: var(--gt-text-muted);
}
/* ── Cards ── */
/* Publication card title — large H3 variant
Dark: #fafafa Light: #09090b */
.gt-card-title {
font-family: var(--gt-font-sans);
font-size: 23px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--gt-text-heading);
}
/* Body copy inside a card
Dark: #b0b0ba Light: #5a5a63 */
.gt-card-body {
font-family: var(--gt-font-sans);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: var(--gt-text-muted);
}
/* ── Navigation & UI chrome ── */
/* Nav bar brand name
Dark: #e4e4e8 Light: #3f3f46 */
.gt-nav-logo {
font-family: var(--gt-font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--gt-text);
}
/* TOC sidebar section label — mono, all-caps, micro
Dark: #818189 Light: #818189 */
.gt-sidebar-label {
font-family: var(--gt-font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
color: var(--gt-text-faint);
}
/* TOC sidebar nav link
Dark: #b0b0ba Light: #5a5a63 */
.gt-sidebar-link {
font-family: var(--gt-font-sans);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: var(--gt-text-muted);
}
/* Button / pill label — primary action buttons
Uses accent bg + white text — size set per variant */
.gt-btn-label {
font-family: var(--gt-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
color: #ffffff;
}
/* Metadata / pub tag — italic, light
Dark: #9a9aa4 Light: #6e6e78 */
.gt-tag {
font-family: var(--gt-font-sans);
font-size: 12px;
font-weight: 400;
font-style: italic;
color: var(--gt-text-tag);
}
/* Contact row micro label — above email address
Dark: #818189 Light: #818189 */
.gt-contact-label {
font-family: var(--gt-font-mono);
font-size: 8px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gt-text-faint);
}
/* Contact row anchor — email / URL
Dark: #4a7fb5 Light: #4a7fb5 */
.gt-contact-link {
font-family: var(--gt-font-sans);
font-size: 12px;
font-weight: 500;
color: var(--gt-accent);
text-decoration: none;
}
.gt-contact-link:hover {
text-decoration: underline;
}
/* ── Code block (pre) ── */
/* Rounded gray bubble for multi-line code / debug chains
Dark: #111113 bg, #1e1e22 border, #b0b0ba text
Light: #f4f4f5 bg, #e4e4e7 border, #5a5a63 text */
.gt-code-block {
font-family: var(--gt-font-mono);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: var(--gt-text-muted);
background: var(--gt-surface);
border: 1px solid var(--gt-border);
border-radius: 8px;
padding: 20px;
overflow-x: auto;
display: block;
white-space: pre;
}
/* ── Buttons ── */
/* Primary — filled accent, white label
Used for main CTAs: "GitHub", "Download", primary actions */
.gt-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--gt-font-sans);
font-size: 14px;
font-weight: 500;
height: 36px;
padding: 0 18px;
box-sizing: border-box;
border-radius: 6px;
border: none;
cursor: pointer;
text-decoration: none;
background: var(--gt-accent);
color: #ffffff;
transition: background 150ms;
white-space: nowrap;
}
.gt-btn-primary:hover { background: var(--gt-accent-hover); }
/* Outline — transparent bg, subtle border, body-colored label
Used alongside a primary button as a secondary action */
.gt-btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--gt-font-sans);
font-size: 14px;
font-weight: 500;
height: 36px;
padding: 0 18px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid var(--gt-border-subtle);
cursor: pointer;
text-decoration: none;
background: transparent;
color: var(--gt-text);
transition: border-color 150ms, color 150ms;
white-space: nowrap;
}
.gt-btn-outline:hover { border-color: var(--gt-text-muted); }
/* Ghost / theme toggle — subtle border, muted label
Used for low-emphasis actions: theme switch, icon buttons */
.gt-btn-ghost {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--gt-font-sans);
font-size: 12px;
font-weight: 400;
height: 36px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid var(--gt-border-subtle);
cursor: pointer;
text-decoration: none;
background: transparent;
color: var(--gt-text-faint);
transition: color 150ms, border-color 150ms, background 150ms;
white-space: nowrap;
}
.gt-btn-ghost:hover {
color: var(--gt-text-muted);
background: var(--gt-surface);
}
/* Ghost bare — no border, no bg, just text + icon
Used for the most subtle actions where even a border is too heavy */
.gt-btn-ghost-bare {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--gt-font-sans);
font-size: 12px;
font-weight: 400;
height: 36px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 6px;
border: none;
cursor: pointer;
text-decoration: none;
background: transparent;
color: var(--gt-text-faint);
transition: color 150ms, background 150ms;
white-space: nowrap;
}
.gt-btn-ghost-bare:hover {
color: var(--gt-text-muted);
background: var(--gt-surface);
}
/* ── Section numbering ── */
/* Large section number — mono, faint, runs above the section H2
e.g. "3" before "Runtime architecture"
Dark: --gt-text-faint Light: --gt-text-faint */
.gt-section-number {
font-family: var(--gt-font-mono);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1;
color: var(--gt-text-faint);
}
/* Subsection H3 — numbered sub-heading, e.g. "3.1 Weave Native: API translation"
Sits below a section H2, above a body paragraph
Dark: --gt-text-heading Light: --gt-text-heading */
.gt-subsection-h3 {
font-family: var(--gt-font-sans);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--gt-text-heading);
}
/* ── Inline code ── */
/* Inline code span within prose
Dark: white text (#ffffff) on pure black (#000000) bg
Light: black text (#000000) on pure white (#ffffff) bg */
.gt-code-inline {
font-family: var(--gt-font-mono);
font-size: 14px;
font-weight: 400;
padding: 1px 5px;
border-radius: 3px;
background: #000000;
color: #ffffff;
}
[data-theme="light"] .gt-code-inline {
background: #ebebeb;
color: #000000;
}
@media (prefers-color-scheme: light) {
[data-theme="auto"] .gt-code-inline {
background: #ebebeb;
color: #000000;
}
}
/* ── Callout ── */
/* Pull-quote / blockquote — accent left border
Dark: #fafafa Light: #09090b */
.gt-blockquote {
font-family: var(--gt-font-sans);
font-size: 17px;
font-weight: 400;
line-height: 1.6;
color: var(--gt-text-heading);
border-left: 2px solid var(--gt-accent);
padding-left: 20px;
margin: 0;
}