/* ========================================================================== DESIGN TOKENS — Josa Elegado Single source of truth for material, ink, type, spacing, motion. See DESIGN.md for the direction contract these values serve. The notebook is the interface, not a picture inside it. Warm white paper, graphite ink, deep plum used once per viewport, soft lavender for non-text marks only. No beige, no kraft, no grain, no distress. ========================================================================== */ :root { /* ---- Paper — warm white, not yellow, not aged ----------------------- */ --color-paper: #faf8f4; /* the page itself */ --color-paper-raised: #fefdfb; /* a fresh sheet laid on the pad */ --color-paper-sunk: #f2efe9; /* a recessed band, quieter than the page */ /* ---- Ink — graphite, faintly cool against warm paper ---------------- */ --color-ink: #22242a; /* body + headings 14.5:1 */ --color-ink-soft: #54575e; /* secondary prose 6.7:1 */ --color-ink-faint: #6c7078; /* mono metadata, captions 4.7:1 */ /* Ruled lines and hairlines. The rule is the faintest mark on the page: you should notice it only when you go looking for it. */ --color-rule: rgba(34, 36, 42, 0.055); /* notebook ruling */ --color-hairline: rgba(34, 36, 42, 0.13); /* structural rules, borders */ --color-hairline-strong: rgba(34, 36, 42, 0.24); /* ---- Plum — the signature. One job per viewport: a primary action, a link, a diagram stroke, an annotation. Never a background field, never two things at once. ------------------------------------------------- */ --color-plum: #5c2e6b; /* on paper 9.6:1 */ --color-plum-deep: #42204e; /* pressed / hover */ --color-plum-wash: rgba(92, 46, 107, 0.06); --color-plum-rule: rgba(92, 46, 107, 0.16); /* the margin line */ --color-on-plum: #f6f1f8; /* on plum 9.1:1 */ /* ---- Lavender — non-text only. Secondary connectors, highlight washes, the second tier of a diagram. Never carries a word. ----------------- */ --color-lavender: #b9a5ce; --color-lavender-wash: #ede7f3; --color-on-ink: #f7f5f1; /* ---- Typography ---- Five faces, five jobs. Bodoni Moda — display only, >=28px. Chosen for construction, not fashion: Bodoni drew letters mathematically, which is the right ancestor for an engineer's page. Libre Franklin — body and interface. Franklin Gothic lineage, the American editorial and technical-drawing workhorse. Invisible. Fragment Mono — the page's own voice: title-block fields, dates, stage labels, figure numbers. Metadata and measurement, never costume. Kalam — the everyday hand. Margin notes and sketch labels, a dozen words at a time. Never body copy, never navigation, never large. La Belle Aurore — the pen. One written line on one page; --font-script. */ --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif; /* Reading text is set in the same monospace as the metadata: the whole page reads as something typed into a log rather than published at you. The two stay separate tokens so body can be reverted without touching metadata. Fragment Mono ships one weight, so nothing in this system may lean on font-weight for emphasis — see `font-synthesis: none` in base.css. */ --font-sans: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-hand: "Kalam", cursive; /* The pen: a fine-nib hand written at speed, for the one written line on the site. Swapping this value alone is not enough — the thesis line's size is measured for this face (see .hero__thesis-line--turn). Alternatives are set up side by side in type-specimen.html. */ --font-script: "La Belle Aurore", "Snell Roundhand", cursive; --font-reading-fallback: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif; /* Bodoni carries its own optical sizing; nothing extra to dial in. Kept as a token because existing surfaces reference it. */ --serif-personality: normal; --text-xs: clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem); --text-sm: clamp(0.83rem, 0.80rem + 0.14vw, 0.91rem); /* A monospace reads optically larger than a proportional face at the same size, and it sets much wider. Starting the ramp lower buys back four or five characters a line on a phone without the text feeling small; the desktop end of the clamp is unchanged. */ --text-base: clamp(0.94rem, 0.88rem + 0.26vw, 1.09rem); --text-md: clamp(1.13rem, 1.06rem + 0.32vw, 1.31rem); --text-lg: clamp(1.35rem, 1.22rem + 0.6vw, 1.75rem); --text-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --text-2xl: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); --text-3xl: clamp(2.6rem, 1.9rem + 3.1vw, 4.4rem); --text-4xl: clamp(3.2rem, 2.2rem + 4.6vw, 5.6rem); --leading-tight: 1.06; --leading-snug: 1.28; --leading-normal: 1.55; --leading-relaxed: 1.75; --tracking-tight: -0.015em; /* didones do not want to be crushed */ --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.13em; /* ---- Spacing (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --space-12: 8rem; --space-13: 10rem; /* ---- Layout ---- */ --content-width: 78rem; --content-width-narrow: 42rem; --content-width-text: 34rem; --page-margin: clamp(1.25rem, 4vw, 4rem); --grid-gap: clamp(1rem, 2vw, 1.75rem); --radius-sm: 2px; --radius-md: 3px; /* The ruling pitch. Also the leading of the one paragraph per page that is set to land on the lines. */ --rule-pitch: 1.75rem; /* ---- Elevation — a sheet resting on the pad, lit from upper-left. Warm, low, down-and-right. Nothing floats. --------------------------- */ --shadow-paper: 0 1px 1px rgba(34, 30, 26, 0.05), 0 3px 6px -2px rgba(34, 30, 26, 0.07), 0 10px 18px -8px rgba(34, 30, 26, 0.10); --shadow-paper-lift: 0 1px 2px rgba(34, 30, 26, 0.06), 0 6px 12px -3px rgba(34, 30, 26, 0.09), 0 20px 32px -12px rgba(34, 30, 26, 0.14); --shadow-deep: 0 2px 3px rgba(34, 30, 26, 0.07), 0 10px 20px -4px rgba(34, 30, 26, 0.11), 0 34px 48px -18px rgba(34, 30, 26, 0.18); /* ---- Motion — a line being drawn, an underline pulled, a note revealed. Exponential ease-out from an already-visible default. ---------------- */ --ease-ink: cubic-bezier(0.22, 0.61, 0.25, 1); --ease-draw: cubic-bezier(0.16, 0.84, 0.28, 1); --duration-fast: 160ms; --duration-base: 320ms; --duration-slow: 560ms; --duration-draw: 900ms; /* ---- LEGACY ALIASES ------------------------------------------------ The collage system is being replaced one section at a time. These keep not-yet-migrated sections rendering coherently on the new paper instead of collapsing. Delete each alias as its last consumer is rebuilt; none of them may appear in new work. */ --color-beige: var(--color-paper-sunk); --color-beige-deep: var(--color-hairline); --color-ink-line: var(--color-hairline); --color-ink-line-strong: var(--color-hairline-strong); --color-eggplant: var(--color-plum); --color-eggplant-deep: var(--color-plum-deep); --color-eggplant-tint: var(--color-plum-wash); --color-lavender-soft: var(--color-lavender-wash); --color-on-eggplant: var(--color-on-plum); --color-kraft: #cdc3b4; --color-kraft-deep: #b0a494; --color-sticky: var(--color-paper-raised); --color-sticky-deep: var(--color-paper-sunk); --color-status-process: var(--color-plum); --color-status-accessioned: var(--color-ink-faint); --color-status-catalogued: var(--color-ink-soft); --font-serif: var(--font-display); --ease-page: var(--ease-ink); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-draw: 0ms; } }