/* ============================================================ tokens.css — Usable Materials design tokens v0.1 ============================================================ Flow Session 2 — applies the Visual Thesis v0.1 decisions as overrides on Pico v2 classless. Cascade order in : 1. pico.classless.min.css (CDN, loads first) 2. tokens.css (this file, overrides Pico) Source of truth for token values: Visual Thesis v0.1 on the project Tool page (UM Marketing → Workshop Tools → usablematerials.com — v0.1). Numbers without an explicit Visual Thesis source are baseline defaults marked with TUNE — review on first eyes-on pass and sharpen in subsequent Flow sessions. ============================================================ */ /* --- Font loads --- */ /* Three families, three roles, no overlap (Visual Thesis v0.1) */ @import url('https://cdn.jsdelivr.net/npm/@fontsource/cal-sans@5/400.css'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@300;400;700&display=swap'); /* --- Tokens + Pico overrides -------------------------------- Targeting :root AND [data-theme="light"] both — Pico v2 puts some color properties under [data-theme] selectors which beat :root on specificity. Hitting both keeps overrides reliable. ============================================================ */ :root, :root:not([data-theme="dark"]), [data-theme="light"] { /* === Color tokens (Visual Thesis v0.1) === */ --um-newsprint: #e7e4df; /* substrate */ --um-ink: #1d1916; /* type, rules */ --um-seafoam: #00ffc5; /* signal, accent */ --um-white: #ffffff; /* card backgrounds */ --um-beige: #c7c1b5; /* illustration insets, section zones */ --um-seafoam-dark: #55a493; /* control-panel variant, link tone */ /* === Font tokens (Visual Thesis v0.1) === */ --um-font-display: "Cal Sans", system-ui, sans-serif; --um-font-structural: "Outfit", system-ui, sans-serif; --um-font-reading: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif; /* === Pico v2 overrides — surface === */ --pico-background-color: var(--um-newsprint); --pico-color: var(--um-ink); --pico-card-background-color: var(--um-white); --pico-card-sectioning-background-color: var(--um-white); --pico-card-border-color: var(--um-ink); /* === Pico v2 overrides — type color === */ --pico-h1-color: var(--um-ink); --pico-h2-color: var(--um-ink); --pico-h3-color: var(--um-ink); --pico-h4-color: var(--um-ink); --pico-h5-color: var(--um-ink); --pico-h6-color: var(--um-ink); --pico-muted-color: var(--um-ink); --pico-muted-border-color: var(--um-ink); /* === Pico v2 overrides — accent === Links resolve to Seafoam-Dark by default — pure Seafoam reads too loud against Newsprint. Hover lifts to Seafoam (the signal). TUNE — alternative read of the Visual Thesis is to use Seafoam directly for links and accept the loudness as intentional signal. */ --pico-primary: var(--um-seafoam-dark); --pico-primary-hover: var(--um-ink); --pico-primary-focus: var(--um-seafoam); --pico-primary-inverse: var(--um-newsprint); --pico-primary-background: var(--um-seafoam); --pico-primary-border: var(--um-ink); --pico-primary-underline: var(--um-seafoam-dark); /* === Pico v2 overrides — font family === */ --pico-font-family: var(--um-font-reading); --pico-font-family-sans-serif: var(--um-font-reading); } /* --- Type role assignments ---------------------------------- Three faces, three roles, no overlap (Visual Thesis v0.1): CalSans → h1 only (display) Outfit 600 → h2-h6, nav, structural labels Atkinson HN → body, captions, metadata ============================================================ */ body { font-family: var(--um-font-reading); font-weight: 300; /* Step 5 tuning — one step lighter than Regular */ } h1 { font-family: var(--um-font-display); font-weight: 400; letter-spacing: -0.03em; /* Visual Thesis: ~-0.03em tight tracking */ font-size: clamp(3rem, 9vw, 6rem); /* Step 4 tuning — was 2.5/6vw/4.5; pushed to load-bearing-thesis register */ line-height: 1.05; } h2, h3, h4, h5, h6, nav { font-family: var(--um-font-structural); font-weight: 600; } /* --- Structural elements ------------------------------------ Visual Thesis names the rule as a structural element ("fat rule") rather than decoration. Override Pico's hairline. ============================================================ */ hr { border: none; border-top: 1px solid var(--um-ink); /* Step 4 tuning — was 4px; body breaks now defer to the H1 rule */ margin: 2.5rem 0; opacity: 1; } /* --- Description / subtitle treatment ----------------------- The default Kirby template emits

on non-home pages. Bare Pico styles it as a normal paragraph; here we give it a subtitle treatment — slightly larger, slightly muted, pulled away from body text below. TUNE — exact size and opacity are baseline defaults. ============================================================ */ p.description { font-family: var(--um-font-structural); /* Step 5 tuning — Outfit, not Atkinson */ font-size: 1.75rem; font-weight: 600; /* Step 5 tuning — SemiBold structural */ line-height: 1.25; color: var(--um-ink); margin-block-end: 2rem; } /* ============================================================ LAYOUT — Flow Session 2 / Step 3 ============================================================ Site header + top nav + 12-column article grid + sticky TOC. Reference page: /softwareless-thinking ============================================================ */ /* --- Site header -------------------------------------------- Top horizontal nav. Logo left, content-driven links right with vertical pipe dividers. Lives outside

. ============================================================ */ .site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; max-width: 1400px; /* TUNE */ margin-inline: auto; padding: 2rem max(2rem, 5vw); } .site-logo { flex: 0 0 auto; display: inline-block; text-decoration: none; color: inherit; } .logo-mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 5.5rem; /* Step 4 tuning — was 4rem */ height: 5.5rem; border-radius: 50%; background: var(--um-ink); color: var(--um-newsprint); font-family: var(--um-font-display); font-weight: 400; font-size: 2.25rem; /* Step 4 tuning — was 1.6rem; ratio held */ line-height: 0.85; letter-spacing: -0.03em; text-transform: uppercase; } /* --- Top nav ------------------------------------------------- Two-line labels (max-width clamps multi-word titles to wrap), vertical pipe dividers via border-inline-start on li+li. Current section gets a baseline rule. ============================================================ */ .top-nav { flex: 0 1 auto; } .top-nav ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; align-items: stretch; } .top-nav li { list-style: none; margin: 0; padding-inline: 1.25rem; border-inline-start: 1px solid var(--um-ink); max-width: 10rem; /* allows two-line labels */ } .top-nav li:first-child { border-inline-start: none; padding-inline-start: 0; } .top-nav a { font-family: var(--um-font-structural); font-weight: 600; font-size: 0.95rem; line-height: 1.15; color: var(--um-ink); text-decoration: none; display: inline-block; } .top-nav a:hover, .top-nav a:focus-visible { color: var(--um-seafoam-dark); } .top-nav a[aria-current="page"] { border-block-end: 2px solid var(--um-ink); padding-block-end: 0.15rem; } /* --- Article shell + 12-column grid ------------------------- H1 spans full (12). Description spans 9 (3/4). Body spans 8 (2/3). TOC spans 4 (1/3) and is sticky. Collapses on small. ============================================================ */ main.article { max-width: 1400px; /* TUNE — match site-header */ margin-inline: auto; padding-inline: max(2rem, 5vw); padding-block: 1rem 6rem; } .article-layout { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; /* Step 5 tuning — kill Pico's
card treatment so the Newsprint substrate shows through cleanly. */ background: transparent; padding: 0; border: none; border-radius: 0; box-shadow: none; } .article-layout > .version-stamp { grid-column: 1 / -1; } .article-layout > .article-title { grid-column: 1 / 11; /* Step 5 tuning — 10 of 12 cols (~83%), was 1 / -1 */ } .article-layout > .description { grid-column: 1 / 10; /* 9 of 12 — 3/4 */ } .article-layout > .article-body { grid-column: 1 / 9; /* 8 of 12 — 2/3 */ min-width: 0; /* prevent grid blowout */ } .article-layout > .article-toc { grid-column: 9 / -1; /* 4 of 12 — right 1/3 */ position: sticky; top: 2rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; } @media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .article-layout > .description, .article-layout > .article-body, .article-layout > .article-toc { grid-column: 1 / -1; } .article-layout > .article-toc { position: static; max-height: none; margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 2px solid var(--um-ink); } } /* --- Version stamp ------------------------------------------ Small bold caps line above the page title. ============================================================ */ .version-stamp { font-family: var(--um-font-structural); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--um-ink); margin-block-start: 1rem; margin-block-end: 1rem; } /* --- Article title rule ------------------------------------- Heavy rule below the h1. Thickness in EM so it scales with the h1 clamp() and approximates CalSans's stroke at the rendered size. The 0.1em ratio is a starting approximation — TUNE against eyes-on output. ============================================================ */ .article-title { border-block-end: 0.14em solid var(--um-ink); /* Step 4 tuning — was 0.1em; matches CalSans stroke at scale */ padding-block-end: 0.2em; margin-block-end: 0.6em; } /* --- Sticky article TOC ------------------------------------- Right-side in-page TOC. Server-generated from h2/h3 in the article body. JS-free. ============================================================ */ .article-toc h2 { font-family: var(--um-font-structural); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--um-ink); opacity: 0.55; margin-block-end: 0.75rem; } .article-toc ul { list-style: none; margin: 0; padding: 0; /* Step 5 tuning — vertical rule removed */ } .article-toc li { list-style: none; margin: 0; padding-block: 0.4rem; padding-inline: 0; /* Step 5 tuning — was 1rem (rule indent gone) */ line-height: 1.3; } .article-toc li.toc-h3 { padding-inline-start: 1rem; /* Step 5 tuning — h3 indent reduced from 2rem */ font-size: 0.85rem; } .article-toc a { font-family: var(--um-font-structural); font-weight: 600; font-size: 0.875rem; color: var(--um-ink); text-decoration: none; display: inline-block; } .article-toc a:hover, .article-toc a:focus-visible { color: var(--um-seafoam-dark); } /* --- In-section nav (child listing on hub-shape pages) ------ Bottom-of-page child listing. Restrained — not a hero. ============================================================ */ .in-section { display: block; /* override Pico's nav { display: flex } */ margin-block-start: 4rem; padding-block-start: 2rem; border-block-start: 1px solid var(--um-ink); /* Step 4 tuning — was 2px */ } .in-section h2 { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; margin-block-end: 1rem; } .in-section ul { display: block; /* override Pico's nav ul { display: flex } */ list-style: none; margin: 0; padding: 0; } .in-section li { list-style: none; margin: 0; padding-block: 0.4rem; font-size: 0.95rem; /* Step 4 tuning — restrain item type */ }