/* ============================================================ Accompli · design tokens Extracted from "Accompli Brand Book V2.html" (brand book 1.1 · 07·09·2026). The brand book is the source of truth; where this file and the book differ, the book wins and this file is corrected. Sections 1 Fonts @font-face for the three families (local woff2) 2 Colour base hue, status, semantic surfaces 3 Type families, display / interface / reference scales 4 Spacing, radii scale, radii, component measures, dot lattice 4b Measures dot-system constants and component sizes read from the book's component source (06 · 07 · 08) 5 Texture, shadow washes, grain, the one shadow 6 Motion easing, durations, hover / press 6c Page motion the rule the hero wave sets (page v2): forming, stagger, lift, pass, hold; the hero reveal's step 7 Helpers texture layers and base styles used by every page ============================================================ */ /* ------------------------------------------------------------ 1 · Fonts — Newsreader (display), Lexend (interface), Geist Mono (references). Latin subsets, shipped locally so every page opens from a double-click with no network. ------------------------------------------------------------ */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("fonts/newsreader-latin.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/newsreader-italic-latin.woff2") format("woff2"); } @font-face { font-family: "Lexend"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("fonts/lexend-latin.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/geist-mono-latin.woff2") format("woff2"); } /* ------------------------------------------------------------ 2 · Colour — one hue, three surfaces, one accent. Ink for text and marks on light; Mint for fills and marks on dark; Deep for accent text and issued documents. State is carried by chip tone, never by hue alone. ------------------------------------------------------------ */ :root { /* Base */ --ac-ink: #1b1f1c; /* Ink · text, marks on light, dark surface */ --ac-deep: #2f6e52; /* Deep · accent text on light, issued-document surface */ --ac-mint: #a9dcc4; /* Mint ink · fills, marks on dark, asset ground */ --ac-mint-tint: #d6eee2; /* Mint tint · text on Deep, second tone on Sage */ --ac-sage: #e6eae6; /* Sage · tables, seal ground */ --ac-grey: #eceeec; /* Grey · panels, asset ground */ --ac-canvas: #f3f5f3; /* Canvas · page and card ground */ --ac-white: #ffffff; /* White · hairline cards */ --ac-mute: #5a6a60; /* Mute · secondary text, eyebrows */ /* Status — the only colour beyond the hue, used sparingly */ --ac-status-open: #b8482f; --ac-status-review: #b98a1b; --ac-status-met: var(--ac-deep); /* Semantic · Light surface (product) */ --surface-page: var(--ac-canvas); --surface-card: var(--ac-white); --surface-panel: var(--ac-grey); --surface-table: var(--ac-sage); --surface-asset: var(--ac-mint); --text-body: var(--ac-ink); --text-secondary: var(--ac-mute); --text-accent: var(--ac-deep); --border-hairline: rgba(27, 31, 28, 0.08); --border-rule: rgba(27, 31, 28, 0.12); --mark-on-light: var(--ac-ink); --mark-on-dark: var(--ac-mint); /* Semantic · Ink surface (marketing: hero, footer, emphasis cards) */ --ink-surface: var(--ac-ink); --ink-text: var(--ac-canvas); --ink-text-secondary: rgba(243, 245, 243, 0.62); --ink-border: rgba(243, 245, 243, 0.12); /* Semantic · Deep surface (issued documents: covers, report bands) */ --deep-surface: var(--ac-deep); --deep-text: var(--ac-canvas); --deep-text-secondary: var(--ac-mint-tint); --deep-border: rgba(214, 238, 226, 0.22); /* Chip tones (light surface) — met · review · open · neutral · deep */ --chip-met-bg: var(--ac-mint); --chip-met-fg: var(--ac-ink); --chip-review-bg: transparent; --chip-review-fg: var(--ac-ink); --chip-review-ring: rgba(27, 31, 28, 0.3); --chip-open-bg: var(--ac-ink); --chip-open-fg: var(--ac-canvas); --chip-neutral-bg: var(--ac-sage); --chip-neutral-fg: var(--ac-ink); --chip-deep-bg: var(--ac-deep); --chip-deep-fg: var(--ac-canvas); } /* ------------------------------------------------------------ 3 · Type — Newsreader 300 for display, tracked −0.02em and never bold. Lexend for the interface. Geist Mono for references, dates, counts and captions, always separated by " · "; never prose, never bold. ------------------------------------------------------------ */ :root { --font-display: "Newsreader", "Iowan Old Style", Georgia, serif; --font-interface: "Lexend", "Avenir Next", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Display · Newsreader 300 */ --type-display-xl: 300 64px/1.02 var(--font-display); --type-display-l: 300 44px/1.06 var(--font-display); --type-display-m: 300 32px/1.12 var(--font-display); --type-display-s: 300 24px/1.2 var(--font-display); --tracking-display: -0.02em; /* Interface · Lexend */ --type-title: 500 17px/1.3 var(--font-interface); --type-body: 400 14px/1.55 var(--font-interface); --type-body-s: 400 12.5px/1.5 var(--font-interface); --type-label: 500 13px/1 var(--font-interface); --type-eyebrow: 400 10px/1 var(--font-interface); --tracking-eyebrow: 0.18em; /* Reference · Geist Mono */ --type-mono: 400 11px/1.5 var(--font-mono); --type-mono-s: 400 9.5px/1.4 var(--font-mono); --tracking-mono: 0.06em; } /* ------------------------------------------------------------ 4 · Spacing, radii, sheets — scale 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64. Sheets are Canvas at 20px with a hairline and one soft shadow; plates inside at 12px, cards at 14px, no shadow. Tables are white, hairline rules, 44px rows. ------------------------------------------------------------ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --radius-chip: 5px; --radius-control: 8px; --radius-plate: 12px; --radius-card: 14px; --radius-sheet: 20px; --radius-pill: 999px; --card-pad: 20px 22px; --card-gap: 12px; --sheet-pad: 14px; --control-h: 38px; --control-h-s: 30px; --table-row-h: 44px; --content-max: 1180px; /* Dot system · the mark's lattice. Quantity and progress are always dots that grow along a lattice: floor 1.5px, maximum 80% of the pitch. */ --dot-floor: 1.5px; --dot-max-ratio: 0.8; --dot-pitch-fine: 10px; --dot-pitch: 17px; --dot-pitch-wide: 27px; } /* ------------------------------------------------------------ 4b · Measures — values the brand book fixes inside its component source rather than as custom properties (sections 06 The dot system, 07 Header assets, 08 Components). Added 2026-09-14 for kit sheet v3 so static ports carry the book's numbers, not re-typed ones. Every value here is read from the book; none is new. Unitless numbers are ratios or counts. ------------------------------------------------------------ */ :root { /* Dot system · HalftoneBar (06). Coverage as filled dots that grow left to right; empty dots are a 1px ring at 35%. */ --dot-bar-floor: 2.6px; /* first dot; the lattice floor (1.5px) is for fields */ --dot-bar-count: 22; /* default dot count; the register table uses 15 */ --dot-bar-pitch: var(--dot-pitch-fine); /* 10px */ --dot-bar-empty-opacity: 0.35; /* Dot system · RiskCluster (06). Three dots, level filled. */ --risk-dot: 7px; --risk-gap: 3px; --risk-ring-light: rgba(27, 31, 28, 0.35); --risk-ring-dark: rgba(169, 220, 196, 0.45); /* Dot system · DotField, the mark as an 11 × 11 field (06). Dot size = floor + (max − floor) · H, where H is a Minkowski distance from the centre with exponent p and reach a; the corner cells take the field values at the three named offsets. */ --dot-field-cells: 11; --dot-field-floor-ratio: 0.09; /* of the pitch */ --dot-field-max-ratio: 0.8; /* of the pitch */ --dot-field-p: 1.15; --dot-field-a: 5.2; --dot-field-size: 300px; /* section 06 demo */ --dot-field-size-hero: 320px; /* the book's own hero */ /* Dot system · Pitch scale demo (06): 15 dots at 10, 9 at 17, 6 at 27. */ --dot-scale-count-fine: 15; --dot-scale-count: 9; --dot-scale-count-wide: 6; /* Header assets · the lattice (07). Plates are 11 × 11; formations are 25 cells on a 7 × 7 lattice inside 130px. Dots reach 80% of the pitch, crescents and diamonds 85%. */ --lattice-pitch-plate: 12px; /* dots plate, diamonds plate */ --lattice-pitch-crescent-plate: 13px; --lattice-pitch-ring: 9px; --lattice-pitch-fade: 10px; --lattice-formation: 130px; /* 7 × 7 formation box */ --lattice-max-ratio-shape: 0.85; /* crescents, diamonds */ --crescent-thick-plate: 0.36; /* stroke as a share of the glyph */ --crescent-thick-formation: 0.34; --crescent-rotate-formation: -18deg; --asset-min: 120px; /* one formation per plate, centred, 120px and up */ --asset-plate-h: 196px; /* Formation's own textured ground */ /* Plate tag · the mono label pinned to a textured plate (05, 07). */ --plate-tag-bg: rgba(243, 245, 243, 0.94); --plate-tag-pad: 3px 7px; --plate-tag-radius: 5px; --plate-tag-inset: 10px; /* Components · Button (08). md is the default; sm and lg scale the type and padding, nothing else. Hover: primary 88% opacity, secondary ring to Ink (Canvas on dark), ghost underline. */ --btn-font: 13px; --btn-pad: 10px 18px; --btn-font-sm: 12px; --btn-pad-sm: 7px 13px; --btn-font-lg: 14px; --btn-pad-lg: 13px 24px; --btn-gap: 8px; --btn-hover-opacity: 0.88; --btn-disabled-opacity: 0.4; --btn-secondary-ring-light: rgba(27, 31, 28, 0.3); --btn-secondary-ring-dark: rgba(243, 245, 243, 0.4); /* Components · StatusChip (08), plus its dark-surface tones. */ --chip-font: 11px; --chip-pad: 5px 10px; --chip-review-ring-dark: rgba(243, 245, 243, 0.4); --chip-neutral-bg-dark: rgba(243, 245, 243, 0.12); /* Components · Eyebrow, RefTag (08) sit on the type scale (§3): eyebrow 10px / 0.18em uppercase; ref tag mono 11px / 0.06em. */ /* Components · TextInput, Select (08). Height is --control-h. */ --field-font: 13px; --field-pad-x: 12px; --field-gap: 6px; /* label → field → hint */ --field-bg-dark: rgba(243, 245, 243, 0.06); --textarea-min-h: 96px; --textarea-pad: 10px 12px; --select-pad-r: 34px; --select-chevron: 6px; --select-chevron-inset: 14px; /* Components · Checkbox, Radio (08). The tick is a rotated border. */ --check-size: 16px; --check-radius: 4px; --check-gap: 9px; --check-tick-w: 8px; --check-tick-h: 4px; --check-tick-stroke: 1.5px; --radio-dot: 8px; --check-ring-light: rgba(27, 31, 28, 0.35); --check-ring-dark: rgba(243, 245, 243, 0.4); /* Components · Switch (08). */ --switch-w: 34px; --switch-h: 20px; --switch-pad: 2px; --switch-knob: 14px; --switch-gap: 10px; /* Components · Seal (08, 11). Sizes the book draws; the ring set changes at 96px. Text on the path is Lexend 500. */ --seal-size-s: 48px; --seal-size-m: 96px; --seal-size: 112px; --seal-ring: rgba(27, 31, 28, 0.5); --seal-notch: rgba(27, 31, 28, 0.14); } /* ------------------------------------------------------------ 5 · Texture and shadow — every asset ground carries the same treatment: soft blurred washes over 30% noise on light, a quieter dark wash with inverted grain at 18% on Ink and Deep. No gradients inside shapes; no photography. The grain is the brand book's 240px fractal-noise tile, inlined. ------------------------------------------------------------ */ :root { --shadow-sheet: 0 20px 50px -30px rgba(27, 31, 28, 0.25); --shadow-none: none; --texture-wash-light: radial-gradient(45% 55% at 18% 28%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 70%), radial-gradient(50% 45% at 82% 72%, rgba(47,110,82,.16) 0%, rgba(47,110,82,0) 70%), radial-gradient(35% 35% at 62% 18%, rgba(169,220,196,.55) 0%, rgba(169,220,196,0) 70%), radial-gradient(40% 40% at 30% 85%, rgba(214,238,226,.7) 0%, rgba(214,238,226,0) 70%); --texture-wash-dark: radial-gradient(45% 55% at 18% 28%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 70%), radial-gradient(50% 45% at 82% 72%, rgba(169,220,196,.14) 0%, rgba(169,220,196,0) 70%), radial-gradient(35% 35% at 62% 18%, rgba(214,238,226,.10) 0%, rgba(214,238,226,0) 70%); --texture-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); --texture-grain-opacity-light: 0.3; --texture-grain-opacity-dark: 0.18; } /* ------------------------------------------------------------ 6 · Motion — one easing, two durations. Controls move up 1px on hover, nothing else; press scales to 0.985. ------------------------------------------------------------ */ :root { --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-base: 200ms; --hover-lift: 1px; --press-scale: 0.985; } /* ------------------------------------------------------------ 6b · Layout — plates on canvas (site rule 0, round 3). The canvas is fluid: the full viewport width minus the page padding, capped at --canvas-max. Plates fill each row edge to edge with --card-gap between them. The nav plate is --nav-h tall. Display size follows plate width: display-xl only in a full-row plate, display-l in a half plate, display-s below. (--content-max is the brand book's own page measure; the site canvas uses --canvas-max.) ------------------------------------------------------------ */ :root { --canvas-max: 1600px; --page-pad: 32px; --nav-h: 60px; /* 56–64px */ } .canvas { width: min(calc(100% - 2 * var(--page-pad)), var(--canvas-max)); margin-inline: auto; padding-block: var(--card-gap) var(--space-8); display: grid; gap: var(--card-gap); } .row { display: grid; gap: var(--card-gap); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: stretch; } .row-2 { --cols: 2; } .row-3 { --cols: 3; } .row-4 { --cols: 4; } .plate { position: relative; min-width: 0; border-radius: var(--radius-plate); } .plate-nav { height: var(--nav-h); } .plate-full .display, .display-xl { font: var(--type-display-xl); letter-spacing: var(--tracking-display); text-wrap: pretty; } .plate-half .display, .display-l { font: var(--type-display-l); letter-spacing: var(--tracking-display); text-wrap: pretty; } .plate-quarter .display, .display-s { font: var(--type-display-s); letter-spacing: -0.01em; text-wrap: pretty; } /* ------------------------------------------------------------ 6c · Page motion — the timing rule the hero wave sets (page v2, B4, 2026-09-14), read by every later moment on the page: the hero reveal, the sticky bars' release, the §3 step reveals, the two §2 loops. One easing (§6's --ease-standard), one forming duration, one stagger, one lift; a loop is a pass and a hold; the wave is one pass across the field. Reduced motion zeroes the durations below (with §6's) and the page's script leaves every moment at its resting state; so does any width under the stacking breakpoint (§6b's rows to one column). ------------------------------------------------------------ */ :root { --motion-form: 600ms; /* a thing forms or settles: the field centre-outward on first paint; a diagram layer's boxes; a step row; a card or box lighting */ --motion-stagger: 80ms; /* between siblings that form together: the field's rings, a layer's boxes, copy plate → picture; halved for dots in a bar */ --motion-lift: 24px; /* the settle: a plate enters this far below its resting place on --ease-standard (a diagram box, half) */ --motion-pass: 4000ms; /* the wave: one crest across the field; the field's sizes stay within --dot-field-floor-ratio and --dot-field-max-ratio */ --motion-loop-pass: 1600ms; /* a §2 loop's pass: the sequence runs through once */ --motion-hold: 2000ms; /* a §2 loop's hold on its resting frame between passes */ --reveal-step: 320px; /* the hero reveal: scroll per diagram layer; the row is pinned for five of these plus a hold on the last */ } /* ------------------------------------------------------------ 7 · Helpers — the texture layers and base styles the brand book applies on every page. Place .wash/.grain (light grounds) or .washd/.graind (Ink and Deep grounds) inside a position:relative, overflow:hidden plate. ------------------------------------------------------------ */ html { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* v2.7 (page draft, 09-15): no automatic text inflation on iOS Safari — it enlarges small text inside a block wider than the viewport (the page's status marquee); every page on the tokens keeps its set sizes */ body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-interface); font-size: 14px; } a { color: var(--text-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } .wash { position: absolute; inset: 0; background-image: var(--texture-wash-light); pointer-events: none; } .grain { position: absolute; inset: 0; background-image: var(--texture-grain); opacity: var(--texture-grain-opacity-light); mix-blend-mode: multiply; pointer-events: none; } .washd { position: absolute; inset: 0; background-image: var(--texture-wash-dark); pointer-events: none; } .graind{ position: absolute; inset: 0; background-image: var(--texture-grain); opacity: var(--texture-grain-opacity-dark); mix-blend-mode: screen; filter: invert(1); pointer-events: none; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --motion-form: 0ms; --motion-stagger: 0ms; --motion-lift: 0px; --motion-pass: 0ms; --motion-loop-pass: 0ms; --motion-hold: 0ms; } }