DESIGN.md (5848B)
1 # Redesign contract — DÆMON//SEC cheatsheet, cyberdeck edition 2 3 This repo is a copy of `daemon-sec-cheatsheet` being restyled to match the 4 **daemon-sec** design language (as implemented by DAEMON-STARTPAGE): a "TUI 5 cyberdeck" — Rosé Pine, terminal chrome, zero radius, hairline rules. 6 7 Read this file fully before editing. Obey the file-ownership boundaries given 8 in your task; other agents are editing other files in parallel against this 9 same contract. 10 11 ## Non-negotiables 12 13 - **Rosé Pine Dawn (light, cream) is the DEFAULT theme.** Rosé Pine (dark) is 14 the alternate. Theme attribute is `[data-theme]` on `<html>`. 15 - **Cross-theme, both directions.** Each theme keeps visible elements of the 16 other: 17 - Light mode: code panes, callouts, the marquee, section banners, the 18 search modal, and the footer stay DARK via the existing `.plate` class 19 (pins the night palette in a subtree). 20 - Dark mode: callouts/blockquotes, the "On this page" TOC rail, and the 21 hero stat/terminal card use the NEW `.plate-dawn` class (pins the Dawn 22 palette in a subtree) — cream panels floating on the night page. 23 - Zero border-radius, no blur, no drop shadows. Structure = 1px hairlines 24 (`--rule`, `--rule-hi`, `--rule-faint`) + flat panels + corner brackets. 25 - All motion gated on `prefers-reduced-motion`. 26 - Self-hosted fonts only (files already in `src/fonts/`). No external requests. 27 28 ## New fonts (already copied into `src/fonts/`) 29 30 - `noto-sans-display-var-latin.woff2` — **Noto Sans Display**, variable 31 (weight 100–900, width 62.5–100). The wordmark/display face: heavy (800–900), 32 compressed (`font-stretch: 70%`), uppercase, tracked tight. This is the 33 daemon-sec signature. 34 - `jetbrains-mono-400-latin.woff2`, `jetbrains-mono-400-italic-latin.woff2`, 35 `jetbrains-mono-700-latin.woff2` — **JetBrains Mono**, terminal accents: 36 code captions, status-bar segments, prompt lines (`whoami`, `$ …`). 37 - `old-standard-tt-700-wordmark.woff2` — Old Standard TT wordmark cut, for 38 stylised glyph lockups (e.g. `DΛΣMӨП`). Optional garnish, use sparingly. 39 - Keep existing: Archivo (body/headings), IBM Plex Mono (micro labels), 40 EB Garamond (drop cap). 41 42 New font tokens (tokens agent adds them; everyone may use them): 43 44 ```css 45 --font-wordmark: 'Noto Sans Display', 'Archivo', 'Helvetica Neue', sans-serif; 46 --font-term: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; 47 ``` 48 49 ## New / signature CSS objects (defined once, used everywhere) 50 51 - `.corners` — cyberpunk corner brackets: four ~10px L-shaped ticks at the 52 element's corners (pseudo-elements or layered gradients), color 53 `var(--bracket, var(--love))`, offset just outside the element's hairline. 54 Apply to: domain plates, record rows on hover, code panes, callouts, the 55 search modal, hero terminal card, CTA bands' inner frames. 56 - `.segbar` / `.seg` / `.seg--accent` — tmux-style segmented status bar. 57 The site header becomes a segbar: left segment = wordmark block (accent 58 fill, `--font-wordmark`), middle segments = numbered nav items 59 (`01 VAULT` etc.), right segments = search trigger + theme toggle. 1px 60 hairline dividers between segments, square, JetBrains Mono 10–11px 61 uppercase. 62 - `.glitch` — RGB-split glitch for the wordmark. Element carries 63 `data-text` mirroring its text; `::before`/`::after` are offset copies in 64 `var(--love)` and `var(--foam)`, clipped and jittered by a `glitch-shift` 65 keyframe animation that fires in short bursts (mostly idle). Respect 66 reduced motion (static). 67 - `.scanlines` — subtle CRT scanline overlay for dark plates (code panes, 68 footer, banners): `repeating-linear-gradient` at ~3px period, very low 69 alpha, `pointer-events: none`. Optional faint rolling band on the footer. 70 - `.plate-dawn` — mirror of `.plate`: pins the full Dawn palette 71 (`--base: #faf4ed` etc.) for its subtree. Used in DARK mode for callouts, 72 the TOC rail, and the hero card. In light mode it's a no-op look (page is 73 already cream) but must still be harmless. 74 75 ## Callouts (prose) 76 77 Upgrade blockquotes into typed callouts. Keep plain `<blockquote>` working, 78 and support `> [!note]`, `> [!warning]`, `> [!tip]`, `> [!danger]` GitHub-style 79 markers if trivially achievable in CSS/JS (otherwise style plain blockquotes 80 well — do NOT add a rehype plugin). Look: square terminal plate with corner 81 brackets, left accent bar, mono micro label. **Light mode: dark plate 82 (callout reads as a terminal). Dark mode: `.plate-dawn` cream plate.** 83 84 ## Behavior that must keep working (do not regress) 85 86 - Theme toggle with View-Transitions circular reveal + FOUC-safe inline head 87 script + `astro:after-swap` re-apply + `daemonmodechange` event. 88 - Pagefind search modal (`/`, `⌘K`, listbox ARIA, debounce, excerpt repair). 89 - Copy buttons + caption bars on code blocks, table wrapping, TOC scroll-spy 90 (all in `src/scripts/app.ts`). 91 - `SectionBanner` canvas animation reading `--fuzz-*` tokens, `Marquee` rAF 92 scroll, `Hero` entrance/count-up, `ClientRouter` view transitions with 93 `astro:page-load` re-init and cleanup on `before-swap`. 94 - All routes: `/`, `/[category]/`, `/sheets/*`, `/payloads/*`, `/internal/*`, 95 `/tags/*`, `/credits/`, `/404`. All content, manifests, sync scripts, 96 rehype plugins: untouched. 97 98 ## Hard boundaries 99 100 - **Do not rename or remove existing tokens/classes** — additive changes 101 only, unless your task explicitly says you own that file/section. 102 - **Do not edit `src/content/`, `scripts/`, the manifests, or 103 `astro.config.mjs`.** 104 - **Do not run `npm run build` / `astro build` / `npm install`** — parallel 105 agents share this repo; builds collide in `dist/`. An integration pass runs 106 afterward. You may run read-only checks (`npx tsc --noEmit` is fine). 107 - Match the existing code style: hand-written CSS with header comments, 108 no Tailwind, no new dependencies.