/* Almanac · Atlas tokens: colors, type, radii, shadows, motion.
Import this file in any HTML to get the full token set. It holds tokens and a few element defaults only; how the
product looks (layout, components, spacing in use) is the Almanac site itself, not this file. See AGENTS.md.
Type: Geist for all UI text. Berkeley Mono only for code and literal identifiers. Reducto Serif only inside
rendered-document facsimiles, never for UI headings. */
/* ============================================================
FONTS
============================================================ */
/* Geist is the one UI font, loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@400;500&display=swap');
/* Reducto Serif is for rendered-document facsimiles only (a contract or invoice drawn on a page). It is never a UI
heading: page H1s are Geist (see "page H1" below). The face ships one weight; font-display: block and a
metric-matched Georgia fallback keep a facsimile from reflowing when it loads. */
@font-face {
font-family: "Reducto Serif Fallback";
src: local("Georgia"), local("Times New Roman");
size-adjust: 94%;
ascent-override: 88%;
descent-override: 21%;
line-gap-override: 0%;
}
:root {
/* tooltip rest delay, read by every [data-tip] tooltip */
--tip-delay: 600ms;
/* ============================================================
PRIMITIVE COLOR SCALES (Light mode — default)
============================================================ */
--base-white: #ffffff;
--base-black: #000000;
/* Neutral — Grey (primary neutral scale) */
--grey-50: #fafafa;
--grey-100: #f5f5f5;
--grey-200: #e5e5e5;
--grey-300: #d4d4d4;
--grey-400: #a3a3a3;
--grey-500: #737373;
--grey-600: #525252;
--grey-700: #404040;
--grey-800: #262626;
--grey-900: #171717;
--grey-950: #0a0a0a;
/* Icon buttons: ONE resting ink for glyph-only controls that read as
dark (toolbars, FABs, viewer bars, split buttons) — #262626. Quiet
nav/chrome icons stay grey-500; this token is the darkest an icon
button gets at rest, so nothing paints grey-900/950 until hover. */
--icon-rest: #262626;
/* Brand — Plum (primary brand) */
--plum-50: #f4ebf1;
--plum-100: #f2e0ec;
--plum-200: #e3bdd6;
--plum-300: #d59dc3;
--plum-400: #be7dac;
--plum-500: #a15c8f;
--plum-600: #8a3d76;
--plum-700: #6f255b;
--plum-800: #4b163d; /* logo / primary brand hex */
--plum-900: #380f2d;
--plum-950: #1e0517;
/* Accent — Slate (cool blue) */
--slate-50: #e2e7ec;
--slate-100: #d7dbe4;
--slate-200: #b2bbd2;
--slate-300: #91a3ca;
--slate-400: #6b89c0;
--slate-500: #5270a4;
--slate-600: #3a5786;
--slate-700: #274067;
--slate-800: #142b4b;
--slate-900: #0d1a2d;
--slate-950: #070e1b;
/* Accent — Pine (success / positive) */
--pine-50: #e9edea;
--pine-100: #d2dfd9;
--pine-200: #b2d1c3;
--pine-300: #8cc5aa;
--pine-400: #66b892;
--pine-500: #46a579;
--pine-600: #34845f;
--pine-700: #236145;
--pine-800: #143d2a;
--pine-900: #0b1e15;
--pine-950: #060f0b;
/* Accent — Rust (warm orange) */
--rust-50: #efe8e3;
--rust-100: #edd9d4;
--rust-200: #edbaa9;
--rust-300: #e5a087;
--rust-400: #da8660;
--rust-500: #c5744b;
--rust-600: #ad6137;
--rust-700: #934f27;
--rust-800: #7a3d14;
--rust-900: #401f0c;
--rust-950: #281206;
/* Accent — Carmine (destructive / error) */
--carmine-50: #ebe3e2;
--carmine-100: #e0cccd;
--carmine-200: #dbabae;
--carmine-300: #dd8184;
--carmine-400: #d35b61;
--carmine-500: #b33c41;
--carmine-600: #91252b;
--carmine-700: #6b171b;
--carmine-800: #46070b;
--carmine-900: #2e0506;
--carmine-950: #150405;
/* Accent — Honey (warning / highlight) */
--honey-50: #f1ede2;
--honey-100: #ede2c9;
--honey-200: #ecd6ac;
--honey-300: #ebcb89;
--honey-400: #ebbd60;
--honey-500: #dba943;
--honey-600: #c18d25;
--honey-700: #aa7c1d;
--honey-800: #835f16;
--honey-900: #42300b;
--honey-950: #231906;
/* Accent — Espresso (dark warm brown) */
--espresso-50: #f6eee5;
--espresso-100: #edd9c6;
--espresso-200: #d9ba9e;
--espresso-300: #c09a77;
--espresso-400: #a67d5a;
--espresso-500: #896249;
--espresso-600: #6e4d37;
--espresso-700: #573a26;
--espresso-800: #40291a;
--espresso-900: #2b1a0e;
--espresso-950: #190e06;
/* Accent — Lagoon (cross-workflow reference / Lookup node) */
--lagoon-50: #e2ebec;
--lagoon-100: #cfe0e2;
--lagoon-200: #a9cdd1;
--lagoon-300: #83bcc2;
--lagoon-400: #5aa8b1;
--lagoon-500: #3f8e98;
--lagoon-600: #2d727c;
--lagoon-700: #1f5760;
--lagoon-800: #123c43;
--lagoon-900: #0b2429;
--lagoon-950: #051317;
/* ============================================================
SEMANTIC COLOR TOKENS
============================================================ */
/* Surface */
--bg: var(--grey-50); /* app background */
--bg-secondary: var(--grey-50);
--bg-inverse: #1d1d1d;
--surface: var(--base-white); /* card surface */
--surface-hover: var(--grey-50);
--surface-pressed: var(--grey-100);
/* Text — CANONICAL NEUTRAL TEXT HIERARCHY (3 roles only; Atlas §0.6b)
Every NEUTRAL text color resolves to one of these three. Do NOT use
grey-600 / grey-700 / grey-800 as a *text* color — those greys remain
valid for icons, borders, and fills, but not for type. Semantic text
(pine / carmine / honey / plum / slate / rust) is exempt. */
--text-primary: var(--grey-950); /* main readable content, labels, values, nav, titles */
--text-secondary: var(--grey-500); /* descriptions, metadata, helper text */
--text-tertiary: var(--grey-400); /* timestamps, low-emphasis metadata, disabled */
/* Back-compat aliases — existing rules that reference --fg* keep working
and now resolve onto the 3-role hierarchy above. --fg-primary moves
from grey-900 → grey-950 so primary ink is a SINGLE value (titles and
body share one neutral; hierarchy comes from size/weight, not a second
near-black). */
--fg: var(--text-primary);
--fg-primary: var(--text-primary);
--fg-secondary: var(--text-secondary);
--fg-disabled: var(--text-tertiary);
--fg-error: var(--carmine-600);
--fg-inverse: var(--plum-50);
--fg-inverse-primary: var(--grey-50);
--fg-inverse-secondary: var(--grey-300);
/* Border */
--border: var(--grey-300);
--border-subtle: var(--grey-200);
--border-hover: var(--grey-400);
/* Active border for GENERIC interaction (focused field, active control).
Neutral by design — see Atlas §0.9. Plum is reserved for brand. */
--border-active: var(--grey-500);
/* Icon */
--icon: var(--grey-900);
--icon-hover: var(--grey-600);
--icon-disabled: var(--grey-400);
--icon-inverse: var(--grey-50);
/* Focus — GENERIC focus states are neutral (Atlas §0.9). The canonical
ring is `border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring)`. */
--focus-border: var(--grey-500);
--focus-ring: var(--grey-200);
--focus-ring-destructive: var(--carmine-200);
/* Generic SELECTED / checked states — neutral, NOT plum (Atlas §0.9).
Use these for selected rows, list items, dropdown options, radio cards,
active cell outlines, checked checkboxes — anywhere a control is chosen
rather than branded. */
--select-bg: var(--grey-100); /* selected row / item fill */
--select-bg-soft: var(--grey-50); /* lighter selected fill */
--select-border: var(--grey-400); /* selected card / option border */
--select-strong: var(--grey-900); /* checked checkbox fill, selected dot, active-cell outline */
--select-fg: var(--grey-950); /* text on a selected item */
/* Brand */
--brand: var(--plum-800);
--brand-fg: var(--plum-50);
--brand-subtle-bg: var(--plum-50);
/* ============================================================
SHADOWS / ELEVATION
============================================================ */
--shadow-xs: 0px 1px 2px 0px hsla(60, 2%, 10%, 0.05);
--shadow-sm: 0 8px 24px -4px rgba(15, 16, 20, 0.1);
--shadow-md: 0 12px 32px 4px rgba(15, 16, 20, 0.1);
--shadow-card: 0px 0px 4px 0px rgba(26, 26, 25, 0.12),
0px 8px 16px 0px rgba(26, 26, 25, 0.10);
--shadow-card-soft: 0px 1px 56px 0px rgba(12, 10, 9, 0.04);
--shadow-tooltip: 0px 1px 6px 0px rgba(26, 26, 25, 0.08),
0px 1px 2px 0px rgba(26, 26, 25, 0.12);
/* ============================================================
MOTION — the one system (Atlas §0.11 + §1.63)
============================================================
Every transition / animation in a shared module reads these.
No literal cubic-bezier() anywhere else; durations come from
the scale below. Values were set from what the product already
did (2026-10-15 inventory: 120ms ease on ~200 hover sites,
.34s panel travel, .42s dock/stack glide).
CURVES: pick by what the thing is doing, not by taste.
--ease-standard state change in place (hover fill, color,
border, icon swap). Plain CSS `ease`.
--ease-out a surface ARRIVES or LEAVES: panels,
popovers, dialogs, lightboxes, camera moves.
Fast start, long quiet settle (ease-out-quint).
--ease-glide content changes SIZE IN FLOW: collapse /
expand, the composer dock, stacked cards,
trays. Slightly softer start than --ease-out,
no overshoot.
--ease-hero a one-off continuity move across a layout
(Home prompt box flying into chat). Slow
lift, decisive land. Rare by design.
--ease-loop pulses (in-out). Spinners + shimmers: linear.
DURATIONS: exits run one step shorter than their entrance
where the pair is asymmetric (dock: glide in, move out).
--dur-quick 120ms hover, color, hover-revealed actions
--dur-pop 160ms menus, popovers, dialogs, tooltips
--dur-fade 220ms opacity of a moving surface; cross-fades
--dur-move 340ms panels, collapse/expand, content rise
--dur-glide 420ms dock + tray height, card stacks, canvas
camera; the "more easing" tier
--dur-hero 580ms continuity moves only
DISTANCE: things travel a little, never across the screen.
--rise-pop 4px popover / menu entrance offset
--rise-in 6px content rising into a dock or list
--panel-slide 12px side-panel nudge toward its dock edge
LOOPS (indicate ongoing work; NOT zeroed by reduced motion,
each owner swaps a pulse/shimmer for a still state):
--loop-spin 1s · --loop-pulse 1.6s · --loop-shimmer 1.6s */
--ease-standard: ease;
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-glide: cubic-bezier(.32, .72, 0, 1);
--ease-hero: cubic-bezier(.66, .05, .32, 1);
--ease-loop: ease-in-out;
/* seconds, not ms: --panel-dur / --panel-fade alias these and
existing code may parseFloat() them as seconds */
--dur-quick: .12s;
--dur-pop: .16s;
--dur-fade: .22s;
--dur-move: .34s;
--dur-glide: .42s;
--dur-hero: .58s;
--rise-pop: 4px;
--rise-in: 6px;
--loop-spin: 1s;
--loop-pulse: 1.6s;
--loop-shimmer: 1.6s;
/* ============================================================
SIDE-PANEL MOTION — system primitive (Atlas §1.5a)
============================================================
Aliases of the motion scale above (kept: ~60 call sites use
them). Never give these their own values again.
ONE curve + ONE duration for every side panel that opens and
closes, so panels read as one product instead of one-off
behaviors. Benchmark = the Review drawer's ease-out-quint
"settle" (fast start, long quiet stop — comes to rest rather
than snapping). Two geometries share these tokens:
• Inline panels (a flex sibling of the content) collapse
flex-basis → 0, fade, and nudge --panel-slide toward their
dock edge when closed. Never display:none a panel you want
to animate — discrete display can't tween.
• Floating canvas panels slide fully off their edge; same
curve + duration.
--panel-dur drives travel (flex-basis / min-width / transform);
--panel-fade settles opacity a touch sooner so the surface
reads as solid just before it finishes moving. */
--panel-ease: var(--ease-out);
--panel-dur: var(--dur-move);
--panel-fade: var(--dur-fade);
--panel-slide: 12px;
/* ============================================================
SPACING (4px baseline)
============================================================ */
--space-0-5: 2px;
--space-1: 4px;
--space-1-5: 6px;
--space-2: 8px;
--space-2-5: 10px;
--space-3: 12px;
--space-3-5: 14px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-15: 60px;
--space-16: 64px;
--space-18: 72px;
/* ============================================================
BORDER RADIUS
============================================================ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 12px;
--radius-full: 9999px;
/* Border widths */
--border-width-xs: 0.5px;
--border-width-sm: 1px;
--border-width-md: 2px;
/* ============================================================
TYPOGRAPHY — FAMILIES
============================================================ */
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Arial, sans-serif;
--font-serif: "Reducto Serif", "Reducto Serif Fallback", Georgia, serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* ============================================================
TYPOGRAPHY — TYPE SCALE
The system is intentionally tight: most UI text sits at 12–14px.
============================================================ */
/* Sizes */
--fs-xs-1: 12px;
--fs-xs-2: 13px;
--fs-sm: 14px;
--fs-md: 16px;
--fs-lg-1: 20px;
--fs-lg-2: 24px;
--fs-xl: 32px;
--fs-2xl: 40px;
--fs-3xl: 56px;
/* Weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* Line heights */
--lh-xs: 16px;
--lh-sm: 20px;
--lh-md: 24px;
--lh-lg-1: 28px;
--lh-lg-2: 32px;
--lh-xl: 40px;
/* Berkeley Mono METADATA size — the single size for mono used as a
label / metadata treatment (Atlas §0.6c): table metadata, node
group labels, section eyebrows, small identifiers/counts, schema
metadata, timestamps, secondary technical labels. Do NOT use 10.5 or
11px for these — point the rule at this token. (Mono VALUE roles are
separate and keep their own sizes: landing-table value cells 12px,
in-cell/identifier/code values 11.5–14px.) */
--fs-mono-meta: 10px;
--letter-spacing-default: 0px;
--letter-spacing-tight: -0.01em;
/* ============================================================
AVATAR PALETTE — person avatars only
Shared tokens for circular person avatars across the product
(Home owner cells, Review assignees, notifications, document /
cell activity logs, presence stacks, etc.).
Tone scale picked to feel lively + vibrant — sits at 500 on the
accent ramps so initials read cleanly on white but the tile no
longer looks heavy. White initials at 600 weight are the default
foreground; --av-fg-* overrides exist for tones that need a
darker initial for contrast (none today, kept for future tones).
Surfaces MUST consume these instead of hand-picking dark 700/600
fills — see the avatar tokens below.
============================================================ */
--av-plum: var(--plum-500);
--av-rust: var(--rust-500);
--av-pine: var(--pine-500);
--av-slate: var(--slate-500);
--av-honey: var(--honey-500);
--av-carmine: var(--carmine-500);
--av-espresso: var(--espresso-500);
--av-grey: var(--grey-400);
--av-fg: #ffffff;
}
/* ============================================================
SEMANTIC TYPE RULES
Use these directly: ,
, etc.
Or rely on the element tag — defaults below target raw tags.
============================================================ */
html, body {
font-family: var(--font-sans);
font-size: var(--fs-xs-2); /* 13px base — tight like the product */
line-height: var(--lh-xs);
color: var(--fg-primary);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
}
/* No faux bold/italic anywhere. */
h1, h2, h3, h4 { font-synthesis: none; }
/* ---------- page H1 (ONE source, promoted 2026-09-12) ----------
The top-level page heading is GEIST, not the display serif: 28/1.2 at 400
with -0.015em tracking, left-aligned, `--text-primary` ink. Every page H1
reads these two tokens instead of restating the type, so the treatment is
changed here and nowhere else. No serif headings anywhere in the UI. */
:root {
--h1-font: 400 28px/1.2 var(--font-sans);
--h1-track: -0.015em;
}
/* Headings (sans — Geist) */
h1, .h1 {
font: var(--h1-font);
letter-spacing: var(--h1-track);
color: var(--fg);
}
h2, .h2 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-lg-2);
line-height: var(--lh-lg-2);
color: var(--fg);
}
h3, .h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-lg-1);
line-height: var(--lh-lg-1);
color: var(--fg);
}
h4, .h4 {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-md);
line-height: var(--lh-md);
color: var(--fg);
}
/* Body */
.body-lg {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-sm);
line-height: var(--lh-sm);
}
.body, p {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-xs-2);
line-height: var(--lh-xs);
color: var(--fg-primary);
}
.body-sm, small {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-xs-1);
line-height: var(--lh-xs);
color: var(--fg-secondary);
}
/* Labels / UI */
.label {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-xs-2);
line-height: var(--lh-xs);
color: var(--fg);
}
.label-sm {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-xs-1);
line-height: var(--lh-xs);
color: var(--fg);
}
.caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-xs-1);
line-height: var(--lh-xs);
color: var(--fg-secondary);
}
/* Mono */
code, .code, kbd, pre, .mono {
font-family: var(--font-mono);
font-size: var(--fs-sm);
line-height: var(--lh-sm);
}
/* Inline muted / subtle */
.muted { color: var(--fg-secondary); }
.dim { color: var(--fg-disabled); }
/* Links */
a, .link {
color: var(--plum-700);
text-decoration: none;
transition: color 0.12s ease;
}
a:hover, .link:hover { color: var(--plum-800); }
a:active, .link:active { color: var(--plum-900); }
/* ============================================================
SCROLLBARS — hidden by default, revealed on hover / active scroll.
Permanent scrollbar chrome is visual noise on a product full of
panels, tables, drawers, and popovers. The shared default keeps
scrollable regions clean until the user actually engages with
them.
Firefox: scrollbar-color transparent transparent → invisible.
scrollbar-width: thin keeps it discreet when revealed.
WebKit: ::-webkit-scrollbar-thumb starts transparent; hover or
:focus-within on any ancestor tints it.
============================================================ */
/* ============================================================
FOCUS RING — never the UA blue, anywhere in the product.
Mouse and programmatic focus paint nothing (selection reads from the fill,
§0.9); keyboard-only focus gets a neutral grey ring. Rows that already carry
a selected fill opt out entirely.
============================================================ */
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--focus-border); outline-offset: 1px; }
.fnd:focus-visible, .sb-item:focus-visible, .rm-item:focus-visible { outline: none; }
* {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
*:hover,
*:focus-within {
scrollbar-color: var(--grey-300) transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color 0.15s ease;
}
:hover::-webkit-scrollbar-thumb,
:focus-within::-webkit-scrollbar-thumb {
background: var(--grey-300);
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--grey-400);
background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Textarea resize grip (the diagonal-line "rectangle" WebKit paints in the
corner of any `resize: vertical/both` textarea). It only becomes visible
once the textarea gains a scrollbar — the grip then sits beside the track.
Drop the painted glyph globally; the drag-to-resize affordance still works
(matches the hidden-by-default scrollbar philosophy above). */
::-webkit-resizer { background: transparent; }
/* Native number-input spinner chevrons — generic browser chrome, never shown
(the same philosophy as hidden scrollbars). Numeric fields read as plain
inputs; steppers add noise without real affordance. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* ============================================================
SIDE-PANEL MOTION — shared recipe (see the Side Panel entry)
============================================================
Add `side-panel` to any inline drawer that docks as a flex sibling
of the content. Pair it with the panel's own open ↔ closed geometry:
.my-panel { flex: 0 0 0; min-width: 0; opacity: 0;
transform: translateX(var(--panel-slide));
pointer-events: none; overflow: hidden; }
.has-x .my-panel { flex: 0 0 var(--w); min-width: …;
opacity: 1; transform: none;
pointer-events: auto; }
The transition list is the single source of truth for panel timing.
margin is included so panels whose gap is a margin (not a resizer
gutter) collapse that gap in step with the panel. */
.side-panel {
transition:
flex-basis var(--panel-dur) var(--panel-ease),
min-width var(--panel-dur) var(--panel-ease),
margin var(--panel-dur) var(--panel-ease),
width var(--panel-dur) var(--panel-ease),
transform var(--panel-dur) var(--panel-ease),
opacity var(--panel-fade) ease-out;
}
/* While a resizer is dragged, kill the tween so width tracks the
pointer 1:1 instead of lerping behind it (Spreadsheet's pinned panel,
Policy Builder's rail). */
body.pb-resizing .side-panel,
body.pin-resizing .side-panel { transition: none; }
@media (prefers-reduced-motion: reduce) {
.side-panel { transition: none; }
}
/* Reduced motion, system-wide: every token-driven transition lands
at once. 0.01ms (not 0) so transitionend / animationend still fire
for code that waits on them. Loops are untouched (see the token
comment); local `transition: none` blocks stay valid. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-quick: .01ms; --dur-pop: .01ms; --dur-fade: .01ms;
--dur-move: .01ms; --dur-glide: .01ms; --dur-hero: .01ms;
--rise-pop: 0px; --rise-in: 0px; --panel-slide: 0px;
}
}
/* A segment's label is one line, product-wide; the
segment keeps at least its label's width (min-width: max-content), so a narrow host gets a wider control, never a
two-line one. Covers .mode-seg, .seg-btn and tablists of buttons. */
.mode-seg.mode-seg .mode-btn, .seg-btn.seg-btn, [role="tablist"][role="tablist"] > button { white-space: nowrap; min-width: max-content; }