/* ============================================================ better-english — "paper vault" design language SINGLE SOURCE OF TRUTH for the mockups. Every page links this file first, then its own .css for page-specific content only. All design tokens live in :root below — treat these as the spec when building the GPUI theme. Reference: r/ObsidianMD "cute vault" (AnuPpuccin theme + New Spirit Condensed). See README.md. ============================================================ */ /* Faces are VENDORED, not fetched: mockups/devtools/fonts.css carries the @font-face rules and mockups/devtools/fonts/ the woff2 files, so every page renders identically offline and by double-click over file://. The Google Fonts @import that used to live here was removed in Phase 2 of plans/mockup-redesign-roadmap.md — it was the mockups' last CDN dependency. Provenance and licences: mockups/devtools/fonts/SOURCES.md. */ /* BEGIN GENERATED TOKENS */ /* Generated by scripts/gen-paper-tokens.py from design/paper-tokens.json — DO NOT EDIT BY HAND. */ :root { /* ---- surfaces ---- */ --tan: #F1E4CD; /* natural background — window, ribbon, gaps, right pane */ --tan-edge: #dccaae; /* window border */ --card: #FBF5EA; /* elevated card fill (sidebar / note / calendar) */ --card-brd: #B98C63; /* card outline + hairline dividers */ /* ---- ink ---- */ --ink: #2b1c11; /* headings */ --body: #4a3323; /* body text */ --muted: #71634e; /* labels, chevrons, icons */ --faint: #978870; /* dim days / "Empty" placeholders */ --link: #8a6933; /* links */ /* ---- accents ---- */ --pink-a: #F0C273; /* active tab pill (top of gradient) */ --pink-b: #CE9540; /* active tab pill (bottom) */ --purple: #8a6933; /* calendar month title, today, "this month" dates */ --hover-green: #ce954038; /* button/nav hover wash */ --hover-green-ink: #2b1c11; /* text on hover wash */ --hover-purple: #efdcbe; /* calendar-day hover circle */ /* ---- tags ---- */ --tag-green-bg: #bee59c; /* tag pill fill */ --tag-green-ink: #3f681a; /* tag pill text */ --tag-purple-bg: #c39ce5; /* tag pill fill */ --tag-purple-ink: #582287; /* tag pill text */ --tag-orange-bg: #f0c273; /* tag pill fill */ --tag-orange-ink: #6c4e1b; /* tag pill text */ --tag-blue-bg: #9cc5e5; /* tag pill fill */ --tag-blue-ink: #1e5178; /* tag pill text */ --tag-pink-bg: #E9A6AE; /* tag pill fill */ --tag-pink-ink: #86212d; /* tag pill text */ --tag-red-bg: #e5ab9c; /* tag pill fill */ --tag-red-ink: #7a311f; /* tag pill text */ /* ---- folders ---- */ --folder-purple-face: #c39ce5; /* folder card face */ --folder-purple-flap: #ad89cf; /* folder card flap */ --folder-tan-face: #f0c273; /* folder card face */ --folder-tan-flap: #d4aa68; /* folder card flap */ --folder-pink-face: #E9A6AE; /* folder card face */ --folder-pink-flap: #ce929d; /* folder card flap */ --folder-green-face: #bee59c; /* folder card face */ --folder-green-flap: #a8c98d; /* folder card flap */ /* ---- extras ---- */ --cyan: #317477; /* gpui base.cyan only — no cyan in this palette; derived to fit */ /* ---- shadows ---- */ --shadow-card: 0 1px 2px rgba(43,28,17,.10); /* card elevation */ --shadow-win: 0 30px 80px rgba(0,0,0,.5); /* window drop shadow (mockup surround only) */ /* ---- type ---- */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "New Spirit", "New Spirit Condensed", "Fraunces 72pt", "Fraunces", "DM Serif Display", Georgia, serif; /* ---- geometry ---- */ --radius-card: 11px; --radius-win: 12px; --gap: 4px; /* gap between floating panes (shows the tan) */ /* default 4-column shell; pages override --cols on .body if needed */ --cols: 42px 260px minmax(0,1fr) 258px; } /* Dark variant proposal (roadmap D1) — preview with . */ :root[data-theme="dark"] { /* ---- surfaces ---- */ --tan: #1a1612; /* natural background — window, ribbon, gaps, right pane */ --tan-edge: #0e0c09; /* window border */ --card: #28231d; /* elevated card fill (sidebar / note / calendar) */ --card-brd: #50463a; /* card outline + hairline dividers */ /* ---- ink ---- */ --ink: #f3eee8; /* headings */ --body: #dfd7cd; /* body text */ --muted: #aea293; /* labels, chevrons, icons */ --faint: #867969; /* dim days / "Empty" placeholders */ --link: #b68143; /* links */ /* ---- accents ---- */ --pink-a: #8d693f; /* active tab pill (top of gradient) */ --pink-b: #765632; /* active tab pill (bottom) */ --purple: #b58247; /* calendar month title, today, "this month" dates */ --hover-green: #ba8f5e42; /* button/nav hover wash */ --hover-green-ink: #f3eee8; /* text on hover wash */ --hover-purple: #624e37; /* calendar-day hover circle */ /* ---- tags ---- */ --tag-green-bg: #364825; /* tag pill fill */ --tag-green-ink: #bee39e; /* tag pill text */ --tag-purple-bg: #382548; /* tag pill fill */ --tag-purple-ink: #c39ee3; /* tag pill text */ --tag-orange-bg: #483b25; /* tag pill fill */ --tag-orange-ink: #e3c99e; /* tag pill text */ --tag-blue-bg: #253948; /* tag pill fill */ --tag-blue-ink: #9ec5e3; /* tag pill text */ --tag-pink-bg: #48252f; /* tag pill fill */ --tag-pink-ink: #e39eb0; /* tag pill text */ --tag-red-bg: #482c25; /* tag pill fill */ --tag-red-ink: #e3ac9e; /* tag pill text */ /* ---- folders ---- */ --folder-purple-face: #9169b5; /* folder card face */ --folder-purple-flap: #805ca3; /* folder card flap */ --folder-tan-face: #b89151; /* folder card face */ --folder-tan-flap: #a37f49; /* folder card flap */ --folder-pink-face: #ba6d82; /* folder card face */ --folder-pink-flap: #a56075; /* folder card flap */ --folder-green-face: #82a960; /* folder card face */ --folder-green-flap: #739457; /* folder card flap */ /* ---- extras ---- */ --cyan: #7bbac1; /* gpui base.cyan only — no cyan in this palette; derived to fit */ /* ---- shadows ---- */ --shadow-card: 0 1px 2px rgba(0,0,0,.35); /* card elevation */ --shadow-win: 0 30px 80px rgba(0,0,0,.6); /* window drop shadow (mockup surround only) */ } :root[data-theme="ink-black"] { --ink-black-background: #000000; /* Ink Black paper and surrounding workspace */ --ink-black-foreground: #f2f2f7; /* Primary text and adaptive pen default on Ink Black */ --ink-black-secondary: #aeaeb2; /* Secondary text and icons on Ink Black */ --ink-black-accent: #82b1ff; /* Links, focus and active controls on Ink Black */ --ink-black-control-background: #1c1c1e; /* Raised controls and code backgrounds on Ink Black */ --ink-black-selection: #294566; /* Selection fill on Ink Black */ --ink-black-ruling: #3a3a3c; /* Paper ruling, control borders and dividers on Ink Black */ } /* END GENERATED TOKENS */ /* BEGIN GENERATED UI TOKENS */ /* Generated by scripts/gen-paper-tokens.py from design/paper-tokens.json — DO NOT EDIT BY HAND. */ /* Mockup-only UI tokens (Phase 5a's colour sweep). These are NOT in the apps: they reach mockups/theme.css and mockups/devtools/themes.js and nothing else. Every palette candidate in design/paper-tokens.json declares all of them, which is what makes a dark variant render the four design pages correctly instead of dark-on-dark. */ :root { --ink-section: #2b1c11; /* in-note section heading (h2) */ --tree: #4a3323; /* file-tree / nav row text */ --prop-value: #4a3323; /* Properties panel value text */ --bullet: #978870; /* list bullet dot in the note body */ --star-on: #4a3323; /* filled rating star */ --star-off: #978870; /* empty rating star */ --cal-day: #4a3323; /* calendar day number (in-month) */ --cal-today: #8a6933; /* calendar today number and its dot */ --cal-day-hover: #8a6933; /* calendar day number on hover */ --cal-hl-a: #f0c273; /* calendar day highlight wash A */ --cal-hl-b: #bee59c; /* calendar day highlight wash B */ --cal-hl-c: #E9A6AE; /* calendar day highlight wash C */ --cal-hl-d: #9cc5e5; /* calendar day highlight wash D */ --cal-today-wash: #E9A6AE; /* calendar today wash (planner view) */ --tab-active-ink: #86212d; /* active tab pill label, on the pink gradient */ --tab-active-sheen: rgba(255,255,255,.5); /* inset top highlight on the active tab pill */ --card-brd-hover: #dccaae; /* card outline on hover (index gallery) */ --code-bg: rgba(0,0,0,.05); /* inline background */ --check: #2b1c11; /* checkbox tick and checked outline */ --plate: #FBF5EA; /* plate behind a database card cover glyph */ --chip-green-bg: #bee59c; /* planner tag pill fill */ --chip-green-ink: #3f681a; /* planner tag pill text */ --chip-pink-bg: #E9A6AE; /* planner tag pill fill */ --chip-pink-ink: #86212d; /* planner tag pill text */ --chip-tan-bg: #f0c273; /* planner tag pill fill */ --chip-tan-ink: #6c4e1b; /* planner tag pill text */ --chip-purple-bg: #c39ce5; /* planner tag pill fill */ --chip-purple-ink: #582287; /* planner tag pill text */ --chip-lit-a: #f0c273; /* literature chip gradient, left stop */ --chip-lit-b: #E9A6AE; /* literature chip gradient, right stop */ --chip-lit-ink: #6c4e1b; /* literature chip text */ --chip-cap-a: #c39ce5; /* capture chip gradient, left stop */ --chip-cap-b: #c39ce5; /* capture chip gradient, right stop */ --chip-cap-ink: #582287; /* capture chip text */ --shadow-card-hover: 0 4px 14px rgba(120,90,50,.12); /* card elevation on hover (index gallery) */ } :root[data-theme="dark"] { --ink-section: #f3eee8; /* in-note section heading (h2) */ --tree: #dfd7cd; /* file-tree / nav row text */ --prop-value: #dfd7cd; /* Properties panel value text */ --bullet: #867969; /* list bullet dot in the note body */ --star-on: #dfd7cd; /* filled rating star */ --star-off: #867969; /* empty rating star */ --cal-day: #dfd7cd; /* calendar day number (in-month) */ --cal-today: #b58247; /* calendar today number and its dot */ --cal-day-hover: #b58247; /* calendar day number on hover */ --cal-hl-a: #483b25; /* calendar day highlight wash A */ --cal-hl-b: #364825; /* calendar day highlight wash B */ --cal-hl-c: #48252f; /* calendar day highlight wash C */ --cal-hl-d: #253948; /* calendar day highlight wash D */ --cal-today-wash: #48252f; /* calendar today wash (planner view) */ --tab-active-ink: #e39eb0; /* active tab pill label, on the pink gradient */ --tab-active-sheen: rgba(255,255,255,.14); /* inset top highlight on the active tab pill */ --card-brd-hover: #0e0c09; /* card outline on hover (index gallery) */ --code-bg: rgba(255,255,255,.07); /* inline background */ --check: #f3eee8; /* checkbox tick and checked outline */ --plate: #28231d; /* plate behind a database card cover glyph */ --chip-green-bg: #364825; /* planner tag pill fill */ --chip-green-ink: #bee39e; /* planner tag pill text */ --chip-pink-bg: #48252f; /* planner tag pill fill */ --chip-pink-ink: #e39eb0; /* planner tag pill text */ --chip-tan-bg: #483b25; /* planner tag pill fill */ --chip-tan-ink: #e3c99e; /* planner tag pill text */ --chip-purple-bg: #382548; /* planner tag pill fill */ --chip-purple-ink: #c39ee3; /* planner tag pill text */ --chip-lit-a: #483b25; /* literature chip gradient, left stop */ --chip-lit-b: #48252f; /* literature chip gradient, right stop */ --chip-lit-ink: #e3c99e; /* literature chip text */ --chip-cap-a: #382548; /* capture chip gradient, left stop */ --chip-cap-b: #9169b5; /* capture chip gradient, right stop */ --chip-cap-ink: #c39ee3; /* capture chip text */ --shadow-card-hover: 0 4px 14px rgba(0,0,0,.45); /* card elevation on hover (index gallery) */ } /* END GENERATED UI TOKENS */ /* ============================================================ Static object tokens — hand-written, deliberately NOT generated and deliberately NOT per-palette (Phase 5a). Phase 5a's rule: a colour becomes a PALETTE token (design/paper-tokens.json, the "ui" group above) when it is chrome that must follow the theme, and a STATIC token here when it is neither chrome nor theme-dependent. Three kinds qualify: 1. OS chrome. The macOS window-control dots are the same three colours in every application and in both appearances. 2. The mockup surround. `--surround` is the desktop *behind* the app window; it is a property of the screenshot, not of the app. 3. Content stand-ins. The posters, book spines, album covers, course art and the little sheet-of-paper glyph stand in for real cover images and real documents. A PDF's cover does not recolour when you switch to dark mode, so neither do these — and inventing a dark value for each would be a design decision, which Phase 5a is forbidden to make. Every one of these was a literal in a page rule before this phase; the values are unchanged, so nothing moves. Phase 6 should read (3) again: if a designed dark wants the paper glyph and the object edges/elevations to darken, they are the first candidates to be promoted into the "ui" group. ============================================================ */ :root { /* macOS window controls */ --traffic-red: #ff5f57; --traffic-amber: #febc2e; --traffic-green: #28c840; /* the desktop behind the app window (mockup surround only) */ --surround: #221c26; /* object edges and elevations for the content stand-ins */ --edge-08: rgba(0,0,0,.08); --edge-10: rgba(0,0,0,.1); --edge-12: rgba(0,0,0,.12); --edge-spine: rgba(0,0,0,.25); --shadow-object: 0 2px 5px rgba(0,0,0,.12); --shadow-object-soft: 0 2px 5px rgba(0,0,0,.1); --shadow-art: 0 2px 6px rgba(0,0,0,.12); --shadow-art-soft: 0 2px 6px rgba(0,0,0,.08); --shadow-art-deep: 0 2px 6px rgba(0,0,0,.16); --shadow-art-album: 0 2px 6px rgba(0,0,0,.2); --shadow-pressed: inset 0 1px 3px rgba(0,0,0,.18); /* The custom folder's other two colours (Phase 4 of plans/prodigus-cohesion-roadmap.md, retuned after Max's report — see the roadmap's Phase 4 defect note). They are still not in design/paper-tokens.json: they add nothing to any palette, so the five generated app outputs stay untouched. THE FOLDER IS A PHYSICAL OBJECT. Its outline is printed ink and its inner sheet is paper, and neither may INVERT with the app's appearance. Phase 4 shipped them as var(--ink) / var(--card), which do invert: on every dark variant the outline became the palette's near-white ink, so the folder wore a thick white sticker outline, and the sheet became the near-black card, so the page inside it read as a hole. On `ink-black` (--ink #f2f2f7, --card #1c1c1e) that is at its worst, and it is what Max reported. So these are the TRACED material colours — #3c2d22 outline, #fcefcb sheet, from mockups/inspiration/v1-2026-04-vault-cute/icons/ — carrying a minority share of the palette's own ink/card. That share is the ambient light, and it does for these two exactly what the generated --folder--face / -flap pairs already do for the other two: DIM for a dark appearance (#a98fd6 -> #8d75bb) rather than invert. The material always wins the mix, so the result can never cross over. Which token each one borrows is deliberate: - the stroke takes 18% of --ink, so a dark palette LIFTS it (#3c2d22 -> ~#5d5048). Pure #3c2d22 on ink-black's #1c1c1e card is a 1.3:1 silhouette — the folder's outer edge disappears into the desk. The lift buys ~2.0:1 in every dark variant while staying the darkest thing in the illustration. - the sheet takes 12% of --card, so a dark palette DIMS it (#fcefcb -> ~#e1d6b6). Undimmed cream next to dimmed face tints glares. Verified across all 17 variants (mockups/gus/build.py --audit-art, the page-rendering half): the stroke stays at least 1.7x darker than the darkest of that variant's eight folder tints, and the sheet at least 1.2x lighter than its lightest flap. color-mix() is already used in the mockups (pages/components.css) and needs no script, so a page opened by double-click over file:// gets this for free. --folder--face / -flap are the other two, and they are generated palette tokens (see the block above). All four are drawn by mockups/devtools/object-art.js, emitted from mockups/gus/src/objects/. */ --folder-stroke: color-mix(in srgb, #3c2d22 82%, var(--ink)); --folder-sheet: color-mix(in srgb, #fcefcb 88%, var(--card)); /* The handwritten voice — Phase 2b-b of plans/prodigus-cohesion-roadmap.md. An ACCENT face, never a body face. It reaches exactly three places (a margin note, a callout and a signature line, all in mockups/pages/) and --body / --sans never resolve to it. It defaults to var(--sans), i.e. NO handwriting, so a page opened by double-click with no design toolbar renders exactly as it did before this phase. mockups/devtools/toolbar.js writes the real stack when the `hand` role is switched on. WHICH FACE IS ACTUALLY LOADED, stated here because an unstated substitution is worse than no handwriting face at all: **Caveat** (SIL OFL 1.1, vendored under devtools/fonts/caveat/ with its licence). It is NOT the face prodigus-site uses. The site self-hosts "Quarry Handwritten", a Mixfont-generated TTF (internal name "Nox Rapture"); its grant is a web page rather than a licence file that travels with the bytes, it carries no copyright or licence name records, its own OS/2 fsType is 0x0004 — Preview & Print embedding only, which contradicts the grant it is redistributed under — and it has 74 glyphs, missing '&', parentheses, the em dash, the ellipsis and every accented Latin letter. It is deliberately not vendored here. Full finding: mockups/devtools/fetch-fonts.py, `caveat`. */ --hand: var(--sans); /* Superseded by the real folder art above; kept because nothing else has claimed the name and a gloss may return as a deliberate choice. */ --folder-gloss: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.06)); /* the sheet-of-paper glyph (home, components) */ --paper-fill: #f4ecc0; --paper-edge: #ddd08d; --paper-rule: #cabd7d; /* cover-art stand-ins — posters (home, components) */ --art-poster-1: linear-gradient(160deg,#5a6b86,#2c3346 70%,#171c2b); --art-poster-2: linear-gradient(160deg,#8a3a3a,#c0574a 45%,#3a1414); --art-poster-3: linear-gradient(160deg,#c98aa8,#8f5a72 60%,#4a2c3a); --art-poster-4: linear-gradient(160deg,#d8d2c0,#9a948a 60%,#4a463f); --art-poster-5: linear-gradient(160deg,#3a4a5a,#6a7a8a 55%,#20262e); --art-poster-6: linear-gradient(160deg,#6a8a6a,#3a5a3a 60%,#1c2a1c); /* book spines (home, components) */ --art-book-1: linear-gradient(160deg,#c96a6a,#7a2f2f); --art-book-2: linear-gradient(160deg,#5a86a8,#2c4a63); --art-book-3: linear-gradient(160deg,#c9a24a,#7a5f2a); --art-book-4: linear-gradient(160deg,#6a9a7a,#2f5a3f); /* album covers (home, components, daily-note) */ --art-album-1: linear-gradient(135deg,#c98a6a,#7a4a3a); --art-album-2: linear-gradient(135deg,#8a8ac9,#3a3a6a); --art-album-3: linear-gradient(135deg,#c96a9a,#5a2c4a); --art-album-4: linear-gradient(135deg,#6ac9a8,#2c5a4a); --art-album-hero: linear-gradient(135deg,#c98a6a,#7a4a3a 60%,#3a2420); /* reading covers (daily-note) */ --art-cover-a: linear-gradient(160deg,#3a5a6e,#20323f); --art-cover-b: linear-gradient(160deg,#6e5a3a,#3f3320); --art-cover-c: linear-gradient(160deg,#5a3a4e,#2b1c26); --art-cover-d: linear-gradient(160deg,#2b2b32,#111116); --art-cover-e: linear-gradient(160deg,#4a4a52,#232327); --art-cover-f: linear-gradient(160deg,#3a4a3a,#1c261c); /* course art (daily-note) */ --art-course-1: linear-gradient(135deg,#f3d9e2,#dfe9c6 60%,#bcd6c0); --art-course-2: linear-gradient(135deg,#d9d2e8,#b7b3cf 55%,#8f8aa8); --art-course-3: linear-gradient(135deg,#f0c9b0,#d99a86 60%,#a86b5f); --art-course-4: linear-gradient(135deg,#efd7ea,#e0b7d6 55%,#c58fbf); --art-course-5: linear-gradient(135deg,#f6e2b0,#e9c98a 55%,#d8b46a); } /* ============================================================ Entry-kind tints — hand-written, deliberately NOT generated (Phase 1 of plans/prodigus-cohesion-roadmap.md). These are a PORT, not a design decision: every value below is copied byte-for-byte out of `ios/Sources/EntryKindStyle.swift`, which is the single source of truth for how a vault entry looks in the shipping app — one fixed light value and one fixed dark value per file kind, each chosen against three rules the Swift file documents (tint the icon never the filename; colour is never the only signal; no file tint may sit near the system accent). `mockups/pages/home-view.html` is the first mockup that reproduces a real app screen, and it needs them. They are NOT palette tokens: they do not belong to `current` or `honey` or `honey-site`, they belong to the file type, and the app applies the same pair under every theme. That is why they live here beside the other static tokens and not in design/paper-tokens.json's `ui` group — putting them there would force all 13 draft variants to restate a value none of them gets to choose. Appearance, not palette, is what flips them. The design toolbar applies a dark palette as inline custom properties and sets no attribute, so `mockups/components/shell.js` derives the effective appearance from the resolved `--card` luminance and writes `data-appearance` on . With no toolbar on the page the attribute is absent and the light pairs apply, which is what a bare double-click over file:// should show. ============================================================ */ :root { --kind-markdown: #00706e; /* teal — doc.text */ --kind-pdf: #c0281f; /* red — doc.richtext */ --kind-epub: #6b21a8; /* purple — book */ --kind-docx: #1e3a8a; /* navy — doc.text.fill */ --kind-pptx: #b45309; /* orange — rectangle.on.rectangle.angled */ --kind-html: #3f6212; /* olive/lime — globe */ --kind-typst: #0369a1; /* sky — t.square */ --kind-ink-note: #4b5563; /* graphite — pencil.and.outline */ } :root[data-appearance="dark"] { --kind-markdown: #4dd0c8; --kind-pdf: #ff6b5e; --kind-epub: #c79bff; --kind-docx: #8fb6ff; --kind-pptx: #ffb25c; --kind-html: #a3e635; --kind-typst: #7dd3fc; --kind-ink-note: #b9bdc6; } /* Hand-written, deliberately NOT generated: card border width. The mockups have always drawn a 1px card outline, so this default changes nothing — it exists so the design toolbar's Layout slider (mockups/devtools/toolbar.js) has a token to drive, and so Phase 5 can retune the outline in one place. */ :root { --card-brd-w: 1px; } /* ============================================================ Type scale — hand-written, deliberately NOT generated (Phase 2). Before this block the mockups carried 95 `font-size:` literals in 24 distinct sizes across 7 files, with no scale and no way to compare one proportion against another. Every one of them now names a token here, so the ladder is a thing you can look at, and the design toolbar's Type section can rescale all of it at once. These are TODAY's values, not a redesign: Phase 5 is where the ladder becomes a design decision and where it may earn a generated token in design/paper-tokens.json. Exactly three literals moved, all sub-pixel drift in files nobody measured, all recorded in the roadmap: index.html's .sub 15 -> 15.5 (body copy), its .cardlink p / .blurb 13.5 -> 13 (paragraph copy) and components.css's .token .val 9.5 -> 9. Reference targets from mockups/inspiration/, for comparison rather than imitation: H1 ~50pt (ours 46), section headers 14pt (ours 11), mono captions 12pt at .04em tracking (ours 12 at .04em — the one row that already matches). ============================================================ */ :root { /* display ladder — var(--display) */ --fs-d1: 46px; /* page title — home, components */ --fs-d2: 43px; /* note title */ --fs-d3: 40px; /* daily-note title */ --fs-d4: 24px; /* in-note section heading */ --fs-d5: 22px; /* daily-note card heading */ --fs-d6: 21px; /* calendar month title */ --fs-d7: 18px; /* card section header */ --fs-d8: 16px; /* album title */ /* text ladder — var(--sans) */ --fs-t1: 15.5px; /* body copy */ --fs-t2: 14px; /* secondary paragraph, overflow glyph */ --fs-t3: 13px; /* UI default: title-bar glyphs, tag pills, properties */ --fs-t4: 12.5px; /* file-tree rows, check lines */ --fs-t5: 12px; /* chips, nav icons, small close glyphs */ --fs-t6: 11px; /* tab labels, calendar days, section rows, badges */ --fs-t7: 10.5px; /* dense list rows, captions on tan */ --fs-t8: 10px; /* uppercase micro-labels, chevrons */ --fs-t9: 9px; /* table headers, album artist */ --fs-t10: 8.5px; /* caption caps */ --fs-t11: 8px; /* calendar weekday header, poster captions */ /* mono ladder — var(--mono) */ --fs-m1: 12px; /* mono caption — the reference's measured size */ --fs-m2: 11px; /* mono file path */ --fs-m3: 10px; /* mono meta label */ --fs-m4: 9px; /* mono value readout */ --tracking-mono: .04em; /* the reference's measured mono tracking */ /* oversized decorative glyphs (emoji posters, + and x affordances) */ --fs-g1: 52px; --fs-g2: 17px; --fs-g3: 15px; /* ---- mono face ---- Referenced by components.html/.css since Phase 0 and undefined until now: this repo bundled no monospace at all. Phase 2 vendors three candidates and makes JetBrains Mono the default; the toolbar's Fonts section overrides it per set. See plans/mockup-redesign-roadmap.md Phase 2. */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ============================================================ Variable-font axis hook — hand-written (Phase 0 of plans/prodigus-cohesion-roadmap.md). prodigus-site does not just name Fraunces, it drives its `opsz` / `SOFT` / `WONK` axes, and its own style guide says "Fraunces without its variation settings is a different, blander typeface". So the toolbar's `site` font set has to be able to set them, or the A/B compares against something the site does not actually render. Both custom properties are UNSET by default, so both rules below resolve to `normal` — the CSS initial value — and a page with no toolbar renders exactly as it did before. The design toolbar writes them only when the selected display face declares axes. Two, not one, because the site itself uses two: body/heading text at `"opsz" 100, "SOFT" 40, "WONK" 1`, and the hero at `"opsz" 144, "SOFT" 0, "WONK" 0, "wght" 800`. Axis names a face does not have are ignored by the font, which is why the inherited rule on `html` is safe for the sans and mono faces too. ============================================================ */ html { font-variation-settings: var(--display-vsettings, normal); } h1, .page-title, .date-title, .note-title { font-variation-settings: var(--display-hero-vsettings, var(--display-vsettings, normal)); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--surround); /* neutral surround behind the app window */ font-family: var(--sans); color: var(--body); -webkit-font-smoothing: antialiased; } /* ============================================================ Window — the app frame. Fills the viewport, flex column so the .body grid takes the remaining height. ============================================================ */ .window { width: min(1300px, calc(100vw - 20px)); height: calc(100vh - 24px); margin: 12px auto; display: flex; flex-direction: column; background: var(--tan); border-radius: var(--radius-win); overflow: hidden; box-shadow: var(--shadow-win); border: 1px solid var(--tan-edge); } /* ============================================================ Title / tab bar — sits on the tan. `.topbar` is canonical; `.titlebar` is an accepted alias. ============================================================ */ .topbar, .titlebar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; background: var(--tan); } .traffic { display: flex; gap: 7px; } .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot.red{background:var(--traffic-red)}.dot.amber{background:var(--traffic-amber)}.dot.green{background:var(--traffic-green)} .tb-search, .titlebar-tools { color: var(--muted); font-size: var(--fs-t3); margin-left: 2px; display: flex; gap: 2px; } .icon-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 26px; height: 26px; border-radius: 6px; font-size: var(--fs-t3); } .icon-btn.right { margin-left: auto; } .tabs, .tabstrip { display: flex; align-items: center; gap: 10px; margin: 0 auto; } .tab { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-t6); font-weight: 600; letter-spacing: 1.3px; padding: 5px 14px; border-radius: 9px; color: var(--muted); text-decoration: none; } .tab .pin, .tab-icon { font-size: var(--fs-t6); opacity: .8; } .tab.active { background: var(--pink-a); color: var(--tab-active-ink); } .tab.active .x { opacity: .6; font-size: var(--fs-t5); margin-left: 2px; } .tb-add, .tab-add { border: 0; background: transparent; color: var(--muted); font-size: var(--fs-g2); cursor: pointer; line-height: 1; } .tb-more { margin-left: auto; color: var(--muted); font-size: var(--fs-t2); } /* ============================================================ Body grid — sidebar | main | (right). Fills remaining height; children scroll internally instead of growing the page. ============================================================ */ .body { display: grid; grid-template-columns: var(--cols); background: var(--tan); padding-bottom: 8px; flex: 1 1 auto; min-height: 0; } /* ============================================================ Cards & panes .card — elevation mixin (lighter fill, hairline, rounded, shadow) sidebar — left card; HUGS its content, top-aligned, scrolls if tall main — center card; fills height; the ONLY scrolling content pane right pane — tan (natural bg); holds a calendar card + transparent content ============================================================ */ .card { background: var(--card); border: var(--card-brd-w, 1px) solid var(--card-brd); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .sidebar, .left-panel { margin: var(--gap) var(--gap) var(--gap) 0; padding: 8px 8px 18px; align-self: start; /* hug content */ max-height: calc(100% - 8px); overflow-y: auto; } .note, .db { /* center scrolling card */ margin: var(--gap); padding: 28px 42px 48px; min-height: 0; overflow-y: auto; } /* The shared chrome row (components/ipad-chrome.css) at the note card's top edge. The card scrolls, so the row is sticky rather than absolute; sticky stops at the scroller's padding, so the card drops its top padding and the row takes the card's side padding back to its 12 inset. */ .note:has(> .document-toolbar-slot) { padding-top: 0; } .note > .document-toolbar-slot { position: sticky; left: auto; right: auto; margin: 0 -30px 18px; } .rightpane, .right-panel { /* tan pane, scrolls independently */ padding: 4px 8px 8px 4px; background: var(--tan); min-height: 0; overflow-y: auto; } /* ============================================================ Calendar (Calendar plugin). `.cal` is canonical; `.mini-cal` and `.cal-grid` are accepted aliases. Lives in a `.cal-card`. ============================================================ */ .cal-card { padding: 12px 12px 8px; margin-bottom: 14px; } .cal-head, .mini-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-title, .mini-cal-title { font-family: var(--display); font-weight: 600; font-size: var(--fs-d6); color: var(--purple); } .cal-title .mon, .mini-cal-title .mon { font-style: normal; } .cal-title .yr, .mini-cal-title .yr { color: var(--purple); } .cal-nav, .mini-cal-nav { display: flex; align-items: center; gap: 8px; color: var(--muted); } .cal-nav button, .mini-cal-nav button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-t2); border-radius: 6px; } .cal-nav .today, .today-lbl { font-size: var(--fs-t10); font-weight: 700; letter-spacing: 1.4px; color: var(--muted); } .cal, .mini-cal, .cal-grid { width: 100%; border-collapse: collapse; } .cal th, .mini-cal th, .cal-grid th { font-size: var(--fs-t11); font-weight: 700; letter-spacing: .2px; color: var(--faint); padding-bottom: 6px; } .cal td, .mini-cal td, .cal-grid td { text-align: center; font-size: var(--fs-t6); font-weight: 500; color: var(--cal-day); height: 22px; position: relative; } .cal td.dim, .mini-cal td.dim, .cal-grid td.dim { color: var(--faint); font-weight: 400; } .cal td.today, .mini-cal td.today, .cal-grid td.today { color: var(--cal-today); font-weight: 700; } .cal td.today::after, .mini-cal td.today::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--cal-today); } /* ============================================================ File tree / nav list. `.tree` is canonical; `.nav-list` alias. ============================================================ */ .sb-tools, .filenav-tools { display: flex; align-items: center; gap: 2px; padding: 4px 6px 10px; color: var(--muted); } .sb-tools button, .filenav-tools button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-t3); padding: 3px; border-radius: 5px; } .sb-tools .sp, .filenav-tools .spacer { flex: 1; } .tree, .nav-list { list-style: none; margin: 0; padding: 0; } .tree li, .nav-list li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-t4); letter-spacing: .2px; color: var(--tree); padding: 4px 6px; border-radius: 6px; white-space: nowrap; cursor: default; } .tree .chev { color: var(--muted); font-size: var(--fs-t8); width: 9px; display: inline-block; } .tree .child { padding-left: 18px; } .nav-ico { width: 16px; text-align: center; font-size: var(--fs-t5); } /* ============================================================ Hover accents (from the OP's notes): buttons/nav -> GREEN, calendar days -> PURPLE ============================================================ */ .icon-btn:hover, .sb-tools button:hover, .filenav-tools button:hover, .tree li:hover, .nav-list li:hover, .cal-nav button:hover, .mini-cal-nav button:hover, .tb-add:hover, .tab-add:hover, .tb-more:hover, .tab:not(.active):hover { background: var(--hover-green); color: var(--hover-green-ink); } .cal td:hover, .mini-cal td:hover, .cal-grid td:not(.dim):hover, .cal-grid td.dim:hover { cursor: pointer; color: var(--cal-day-hover); background: radial-gradient(circle 11px at 50% 50%, var(--hover-purple) 99%, transparent 100%); } /* responsive: drop the right pane on narrow viewports */ @media (max-width: 1180px) { :root { --cols: 42px 206px minmax(0,1fr); } .rightpane, .right-panel { display: none; } } /* Shared document/ink tokens also apply to standalone component specimens. Board surfaces may inherit local theme overrides without a separate palette. */ :root, .board-window { --board-canvas-fill: var(--tan); --board-page: var(--card); --board-foreground: var(--ink); --board-secondary: var(--muted); --board-rule: var(--card-brd); --board-dot: color-mix(in srgb, var(--muted) 28%, transparent); --board-adaptive-ink: var(--ink); --board-reference-ink: var(--link); --board-highlight-wash: color-mix(in srgb, var(--tag-orange-ink) 24%, transparent); --board-page-filter: none; --board-page-blend: multiply; --board-highlight-blend: normal; --board-pdf-ink: var(--tag-red-ink); --board-ink-note: var(--board-hand-ink); --board-html-ink: var(--tag-green-ink); --board-note-ink: var(--tag-blue-ink); --board-paper-fill: var(--board-page); --board-paper-ink: var(--board-foreground); --board-paper-heading: var(--board-foreground); --board-paper-meta: var(--board-secondary); --board-paper-kicker: var(--board-secondary); --board-paper-edge: var(--board-rule); --board-paper-head-edge: var(--board-rule); --board-paper-head: color-mix(in srgb, var(--board-page) 88%, var(--board-foreground)); --board-paper-lines: var(--board-rule); --board-note-fill: color-mix(in srgb, var(--board-page) 92%, var(--board-foreground)); --board-hand-ink: var(--board-adaptive-ink); --board-highlight-rule: var(--board-reference-ink); --board-highlight-ink: var(--board-foreground); --board-highlight-fill: var(--board-highlight-wash); --board-stamp-edge: var(--board-rule); --board-stamp-ink: var(--board-secondary); --board-note-pin: var(--board-pen-red); --board-note-kicker: var(--board-secondary); --board-note-tail: var(--board-secondary); --board-mustard: var(--board-reference-ink); --board-purple: var(--board-reference-ink); --board-sync: var(--board-pen-green); --board-paper-wash-left: transparent; --board-paper-wash-right: transparent; --board-pen-red: #d94f55; --board-pen-blue: #387ed1; --board-pen-green: #27865a; --shadow-board-chrome: 0 4px 16px rgba(0,0,0,.13); --shadow-board-paper: 0 6px 18px rgba(0,0,0,.18); --shadow-board-ink: 0 1px 1px transparent; } /* ============================================================ Shared shell components — drawn by components/shell.js from the one vault datasource (data/vault.js). Every page's navigator, tab bar and calendar use these rules; pages only size them. ============================================================ */ /* Vault navigator. The card sits --gap from the PHYSICAL bottom edge; the home-indicator inset goes inside it, as the counts line's bottom padding (never less than 10). env() is 0 outside a device frame. */ .vault-sidebar { min-width: 0; min-height: 0; height: calc(100% - 8px); margin: var(--gap) var(--gap) var(--gap) 0; padding: 8px 8px max(10px, calc(env(safe-area-inset-bottom, 0px) - var(--gap))); align-self: stretch; display: flex; flex-direction: column; overflow: hidden; } .vault-sidebar[hidden] { display: none; } /* Vault pages (navigator | main | right) share the vault column width of board and home (260, not the generated shell default). :where() keeps a page's own --cols winning. The navigator has no left margin of its own. */ .vault-body { padding-left: var(--gap); } :where(.vault-body) { --cols: 260px minmax(0,1fr) 258px; } @media (max-width: 1180px) { :where(.vault-body) { --cols: 206px minmax(0,1fr); } } /* The shell hides the navigator with display:none, so its column goes too. */ .window.sidebar-hidden > .vault-body { --cols: minmax(0,1fr) 258px; } @media (max-width: 1180px) { .window.sidebar-hidden > .vault-body { --cols: minmax(0,1fr); } } .vault-sidebar > .cal-card { margin: 0 2px 12px; } .vault-name { margin: 0 8px 8px; font-size: var(--fs-t8); color: var(--muted); letter-spacing: 1.2px; font-weight: 700; } .vault-sidebar > nav { min-height: 0; overflow-y: auto; } /* The navigator's own type (board-card follow-up Phase 8): rows at --fs-t2, references at --fs-t5. Indent comes from the row's --depth. */ .vault-tree li { font-size: var(--fs-t2); padding: 0; } .vault-tree li[hidden] { display: none; } .vault-tree .tree-row { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; padding: 5px 6px 5px calc(6px + var(--depth, 0) * 16px); border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } .vault-tree span.tree-row { cursor: default; } .vault-tree li:hover { background: transparent; } .vault-tree .tree-row:hover { background: var(--hover-green); color: var(--hover-green-ink); } .vault-tree .tree-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .vault-tree .entry-label { overflow: hidden; text-overflow: ellipsis; } .vault-tree .chev { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 10px; transition: transform .12s ease; } .vault-tree .chev .pdt-ico { width: 10px; height: 10px; } .vault-tree [aria-expanded="true"] > .chev, .vault-tree .chev.is-open { transform: rotate(90deg); } .vault-tree .folder-row-item { color: var(--ink); font-weight: 600; } .vault-tree .current-entry > .tree-row, .vault-tree .home-entry > [aria-current="page"] { background: color-mix(in srgb, var(--pink-a) 25%, transparent); color: var(--ink); font-weight: 600; } .vault-tree .reference-entry { font-size: var(--fs-t5); color: var(--muted); } .vault-tree .reference-entry > .tree-row { border-left: 1px solid var(--card-brd); border-radius: 0 6px 6px 0; margin-left: calc(var(--depth, 0) * 16px - 4px); padding-left: 10px; width: calc(100% - var(--depth, 0) * 16px + 4px); } .vault-tree .reference-entry > .tree-row:hover { color: var(--ink); } /* A board row: the chevron is its own button (expand), the name opens it. */ .vault-tree .board-row { gap: 0; padding: 0; cursor: default; } .vault-tree .board-row:hover { background: transparent; color: inherit; } .vault-tree .chev-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; padding: 0 0 0 calc(6px + var(--depth, 0) * 16px); border: 0; background: none; color: var(--muted); cursor: pointer; } .vault-tree .board-open { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none; } .vault-tree .board-open:hover { background: var(--hover-green); color: var(--hover-green-ink); } .vault-tree .current-entry > .board-row > .board-open { background: color-mix(in srgb, var(--pink-a) 25%, transparent); color: var(--ink); font-weight: 600; } .vault-tree .reference-entry .entry-icon, .vault-tree .reference-entry .entry-icon .pdt-ico { width: 12px; height: 12px; } .ref-link { flex: none; width: 14px; color: var(--link); font-size: var(--fs-t5); text-align: center; } /* The navigator folder: the traced folder art (object-art.js) at 16x14. At this size the art's 2.6-unit outline would draw under half a pixel, so the stroke is thickened here to read as the same inked object as Home's. */ .folder-mini { width: 16px; height: 14px; display: inline-block; flex: none; } .folder-mini svg g { stroke-width: 5.5; } .entry-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; font-size: var(--fs-t5); color: var(--muted); } .entry-icon .pdt-ico { width: 14px; height: 14px; } /* The app's per-kind tints (EntryKindStyle), shared with the home graph. */ .entry-icon.kind-markdown { color: var(--kind-markdown); } .entry-icon.kind-pdf { color: var(--kind-pdf); } .entry-icon.kind-epub { color: var(--kind-epub); } .entry-icon.kind-docx { color: var(--kind-docx); } .entry-icon.kind-pptx { color: var(--kind-pptx); } .entry-icon.kind-html { color: var(--kind-html); } .entry-icon.kind-typst { color: var(--kind-typst); } .entry-icon.kind-board { color: var(--kind-ink-note); } .sidebar-foot { display: flex; gap: 9px; padding: 12px 8px 0; color: var(--faint); font-size: var(--fs-t8); border-top: 1px dashed var(--card-brd); margin-top: auto; } /* Calendar days that have a daily note. */ .cal td.has-note { color: var(--ink); font-weight: 700; } .cal td a { color: inherit; text-decoration: none; display: block; } .cal td.is-current { background: radial-gradient(circle 11px at 50% 50%, color-mix(in srgb, var(--pink-a) 70%, transparent) 99%, transparent 100%); } .tabs .tab[aria-current="page"] { cursor: default; } /* A narrow window scrolls its tab strip rather than wrapping tab labels. */ .topbar .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; } .topbar .tab { white-space: nowrap; flex: none; } .window > .topbar { flex-shrink: 0; } /* Wiki links in rendered vault notes (components/markdown.js). */ .wikilink { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 3px; } a.wikilink:hover { text-decoration-color: var(--link); } .wikilink.is-unresolved { color: var(--muted); text-decoration-style: dashed; }