--- name: edge-33 description: Use this skill to generate well-branded interfaces for Bono The Edge. Contains tokens (version stamped in `bono-ds.css` — versioning rules live in the edge-33 repo), component catalog with status, reference templates for each surface (Landing, Dublin, Blog — internally Reading, which also covers every PDF: reports, contracts, any document meant to be read or printed), a slide library for presented decks (39 layouts, 1920×1080, incl. Read & Learn and room-interaction slides), and hard rules. Always use this skill when generating any Bono UI, page, component, screen, PDF or printable document, or presentation / slide deck (including a request for a PowerPoint: build it from the slide library, then export .pptx) — even if the user doesn't explicitly mention the design system. This skill must be consulted before writing any HTML or CSS for Bono interfaces. --- ## File map ``` bono-ds.css ← tokens + utilities. One stamped copy per project (see "Canonical CSS source"). ── components/ (markup is copied from here — one page per component) ── components/welcome.html ← Welcome (doc site entry point) components/foundation-colors.html ← Color tokens (brand, surfaces, text, status) components/foundation-typography.html ← Typographic scale, Fraunces, T-em, T-actor, numerics components/foundation-spacing.html ← Spacing, border-radius, shadows components/foundation-layout.html ← Shell & layout: single breakpoint 1024px, .app-shell, .layout-12 components/foundation-grid.html ← Grid pattern (.has-grid), canonical z-index components/foundation-sections.html ← .sec-page / .sec-tonal components/foundation-naming.html ← Dicționarul de nume: ce clasă poartă fiecare rol, și numele respinse components/foundation-icons.html ← Icons: Lucide only, via .ic (24 grid, optical stroke 1.25→2px, sizes 12/14/16/18/20/24; in .btn the step sets size + stroke) components/button.html ← Button (.btn, variants and sizes) components/input.html ← Input (.input) — controlul gol + OTP components/input-group.html ← Input group — tot ce stă ÎN bordură: addon-uri, scurtătura (badge alb, .badge.sm.outline), eticheta din bordură components/field.html ← Field: câmpul (.field) și grupul lui (.fieldset), orientare, separator components/select.html ← Select components/typeahead.html ← Typeahead (.typeahead) — input cu sugestii, aria-activedescendant components/switch.html ← Switch toggle components/toggle.html ← Toggle (.toggle / .toggle-group / .toggle-group.text) — buton-icon care ȚINE o stare (aria-pressed solo, role=radio în grup); .text = grup cu coduri scurte (D300, TVA), max 12, pe un rând; .form = printre câmpuri, cu mărimea (40 / .lg 44) și conturul lui .input. NU e .switch: ăla e binar pe o opțiune, ăsta e un buton components/checkbox.html ← Checkbox (.check-item, .check-item.card) components/radio.html ← Radio (.radio-item, .radio-item.card) components/money-input.html ← Money input + currency selector — hero (48px) and regular size (in .input-group); the list is the select's components/calendar.html ← Calendar (.calendar / .calendar.lg) — o zi sau un interval components/uploader.html ← Uploader (.uploader / .is-compact) — drop zone + file rows components/badge.html ← Badge components/alert.html ← Alert components/toast.html ← Toast (.toast) — mesaj tranzitoriu, colț de ecran components/banner.html ← Banner + page banner — DEPRECATED v8, use .alert components/spinner.html ← Spinner (.spinner) — încărcare în curs components/skeleton.html ← Skeleton (.skeleton) — locul unui conținut care vine; .kpi[aria-busy] îl folosește components/stepper.html ← Stepper (.stepper, .stepper.mobile) components/pulse-dot.html ← Pulse dot components/modal.html ← Modal components/popover.html ← Popover (.popover / .popover.compact) — suprafața oricărui meniu: dropdown, select list, meniu contextual components/context-menu.html ← Context menu — .popover.compact deschis cu click-dreapta components/command.html ← Command (.command) — câmp care filtrează o listă de comenzi, inline sau în dialog (.modal.command-dialog, ⌘K); câmpul e .input, rândurile .popover-item; cmdk în react/command.tsx components/tooltip.html ← Tooltip (.tooltip) — eticheta unui control fără text components/tabs.html ← Tabs (ARIA tablist) components/topnav.html ← Topnav v3 — DEPRECATED, do not use components/vox-fab.html ← Vox FAB (.vox-fab) components/flow-chrome.html ← Flow chrome (mobile .flow-chrome + desktop .app-shell = .app-top + .app-footer) components/proto-menu.html ← Opțiuni prototip (.proto) — PROTOTYPES ONLY: the one purple menu, bottom-left and draggable, for every control that is not the product (Design · Ecran · Stare · Variantă · bife · Simulează · Reset); built by proto/proto-menu.js. Also the index of every prototype control found across the repos components/app-nav.html ← App navigation (desktop .sidebar rail, labels become hover/focus tooltips in .icon-only · mobile .tabbar + .mobile-menu) components/header.html ← Header (desktop .topbar · mobile .app-mobile-top: root / section / detail) components/sheet.html ← Sheet — the one bottom sheet on mobile (.sheet.attached / .floating / .form) components/list-row.html ← List row (.list-row in .list-group — the phone's settings / menu / value row) components/quantum-stack.html ← Quantum stack (.quantum-stack > .quantum-group > .quantum-pair) — one record read as label–value facts, on .list-group / .list-row.value; an action value is .btn.link.quantum-action; a full-width fact (a timeline, a sentence) is a .quantum-block, its own card with the label on top components/timeline.html ← Timeline (ol.timeline > li.timeline-step[data-state]) — a record's steps in the order they happened, read-only: done / current / upcoming / failed in the stepper's colours; in a record, the body of a .quantum-block. A flow you move through is .stepper components/record-view.html ← Record view — PATTERN: one record, read-only, in a .modal.record-view (440px) with a .quantum-stack body; the record's number after the kind (.record-view-ref); .record-view-state while it loads components/file-viewer.html ← File viewer (.card.tonal.file-viewer beside a form · .modal.file-viewer over a list, 85dvh — both bej-1, the frame white) — a file a PERSON brought (PDF, photo) in the browser's own viewer; the header is the name, or a .select-trigger.sm.bare chooser with several files, + new tab + download; loading / failed / unsupported / empty in the frame, never the previous file; not drawn below 1024px (the row is a link) components/solo-screen.html ← Solo screen — PATTERN: screens OUTSIDE the app shell (login, 404, no access, route error, waiting): .solo-screen = full-height bej-0 frame + a centred .card.lg (max 440px), h1.t-h1, at most one primary; every state in templates/solo.html components/data-list.html ← Data list (WIP) — the mobile form of .tbl components/kpi.html ← KPI card components/chart.html ← Chart (.chart) — grafic în pagină components/card.html ← Card (.card / .tonal / .dark / .feat) components/action-card.html ← Action card (.card.cta + .card-title / .card-body / .btn.full) — ends in ONE large action, buttons level across a row; optional icon action in .card-ft components/insight.html ← Insight card components/separator.html ← Separator (.separator) — linia care desparte, orizontală sau verticală components/accordion.html ← Accordion / disclosure (.accordion / .contained / .sm) components/avatar.html ← Avatar components/table.html ← Table (.tbl) · filtered table: the filter bar INSIDE .tbl-wrap (.tbl-filters), over a .tbl.compact, one 14px edge for title, filters and columns; the filtered frame is bej-1 so the white filters read as fields, the body stays white components/filter-bar.html ← Filter bar (.filter-bar) — the one filter model for every list: 8 filter kinds from existing controls, ✕ per filter, a general ✕ at the end, count, zero results components/doc-list.html ← Doc list (WIP) — 4 states components/doc-bar.html ← Doc bar + PDF switch (WIP) components/pdf-viewer.html ← PDF viewer (WIP) components/html-doc-view.html ← HTML doc view mobile (WIP) components/doc-sheet.html ← Doc sheet bottom modal (WIP) components/signer-layout.html ← Signer layout desktop (WIP) components/_nav.js ← Source of the shared sidebar (JS injection) components/_select.js ← Doc-site ONLY: makes the .select-anchor demos actually open. NOT part of the DS — in production the behaviour is react/select.tsx (Radix). Underscore = page chrome, like _nav.js and _chrome.css components/_search.js ← Doc-site ONLY: the catalog's ⌘K search — the .command dialog over components/_search-index.json. NOT part of the DS — in production the behaviour is react/command.tsx (cmdk) components/_search-index.json ← GENERATED by scripts/build-catalog.py from components/*.html — what _search.js ranks (page name first, content second). Do not edit components/_chrome.css ← Doc-page styling (ds-block, demo, stub, WIP badge) ── react/ (React source is copied from here — the DEFAULT form where React exists) ── react/select.tsx ← Select (Radix) — trigger .select-trigger, list .popover.popper, row .popover-item, chosen row gets the brand .popover-check. shadcn API, so it replaces components/ui/select.tsx without touching call sites react/input.tsx ← Input + Input group — size and tone are PROPS (size="lg", tone="tonal"), not call-site classes react/action-card.tsx ← Action card — Dublin's API (tone, title, titleVariant, contentAlign, action) + secondaryAction / ActionCardIconButton; replaces shared/dublin-ui/action-card.tsx without touching call sites react/quantum-stack.tsx ← Quantum stack — QuantumStack / QuantumGroup / QuantumPair / QuantumBlock / QuantumAction, Dublin's API on the .quantum-* classes react/timeline.tsx ← Timeline — Timeline / TimelineStep (state, title, detail), Dublin's API on the .timeline* classes react/command.tsx ← Command (cmdk + Radix Dialog) — Command / CommandDialog / CommandInput / CommandList / CommandEmpty / CommandGroup / CommandItem / CommandShortcut / CommandSeparator on .command + .popover-item; shadcn API, replaces components/ui/command.tsx without touching call sites react/file-viewer.tsx ← File viewer — FileViewer (inline) + FileViewerDialog (Radix Dialog) — files, value / onValueChange, error, onRetry — on the .file-viewer* classes; owns the loading state per url so a new file never shows the old one; the chooser is react/select.tsx; fileViewerKind(type) is the PDF + raster-image allowlist react/README.md ← the contract: react/ wears bono-ds.css classes, never utility classes, so HTML and React stay ONE definition ── proto/ (prototype tools — copied into PROTOTYPES only, never into a production app) ── proto/proto-menu.css ← „Opțiuni prototip” styling. Holds the ONLY purple in the system (#4C1D95 / #EDE9FE), as locals on .proto — not a token, hidden in print proto/proto-menu.js ← builds the menu: Proto.states / Proto.check / Proto.simulate / Proto.action / Proto.open; no dependencies; inside a simulator iframe it forwards to the host page's menu ── templates/ (complete organisms, copied and adapted) ──────────────── templates/card.html ← Card: white / tonal / dark + border rules templates/header.html ← moved 2026-09-16 → components/header.html (the file only redirects) templates/sidebar.html ← moved 2026-09-16 → components/app-nav.html (the file only redirects) templates/form.html ← Record page, a neutral specimen of how the controls relate: .layout-12 (.col-8 form · .col-4 record file), one group = .card.tonal + .fieldset, rows only for one value (.field-row), option groups under .field-title (radio cards · radio list · yes/no row · check group), a lone .check-item (never a .switch in a saved form), inline .uploader.is-compact, repeated cards, errors on each control or in one .alert.error templates/table-view.html ← List screen: the filtered table (.tbl-wrap > .tbl-filters + .tbl-scroll > .tbl.compact) + the three empty states templates/kpi-grid.html ← KPI grid, 3 columns (in progress) templates/empty-state.html ← Empty state pattern (in progress) templates/solo.html ← Solo screens: login (+ refused account), 404, no access, route error, waiting — one full-viewport .solo-screen per state, switched from „Opțiuni prototip” → Ecran or ?ecran= ── references/ (the style of each surface) ───────────────────────────── references/referinta-landing-aligned.html ← REFERENCE: marketing / landing page (desktop-first) references/referinta-dublin-aligned.html ← REFERENCE: SaaS dashboard (Dublin, desktop-first) references/referinta-blog-aligned.html ← REFERENCE: editorial article (Guides / Blog) — the Reading surface on screen references/referinta-reading-print-aligned.html ← REFERENCE: the Reading surface on paper — any PDF, in both densities (normal 13pt · compact 11pt for contracts) references/referinta-mobile-aligned.html ← REFERENCE: the two mobile shells — .app-mobile (product screens: veiled header + .tabbar) and .flow-chrome (flows) — on real Dublin screens ── slides/ (presented decks — one
per file, copied and re-worded) ── slides/.html ← the 39 layouts. Base (L01–L19): cover, agenda, section, key-points, bullets, statement, quote, steps, timeline, comparison, big-number, kpi-row, chart, table, image-text, screenshot, photo, decision, closing. From the team's Read & Learn decks (L20–L39): card-grid, pair, mapping, reveal (click build), text-panel, spectrum, status, book, series, passage, dialogue, video, frame, room-question, room-results, join (QR), discussion, do-now, resources, talk-closing. + anatomy.html (guide slide). Slides-artifact format: inline styles only, no classes. Rules: docs/slides.md slides/deck.json ← index of the reference deck "Bono · Slide Library" (order, sections, faces, DS record) slides/player.html ← the HTML deck player for decks built in Claude Code / deployed on Vercel: paste the same
s; 1920×1080 scaling, keys, click builds, video, presenter window (P), deck:change event ── doc-originale/ frozen (original documentation — do NOT use as reference) ─ doc-originale/bono-ds-landing.html ← ❄️ FROZEN · historical drift, visual only doc-originale/bono-ds-dublin.html ← ❄️ FROZEN · historical drift, visual only doc-originale/bono-ds-blog.html ← ❄️ FROZEN · historical drift, visual only doc-originale/bono-ds-system.html ← ❄️ FROZEN · the set's entry point (its internal nav links the other 3) doc-originale/bono-ds-original.css ← ❄️ FROZEN · the CSS the 4 pages render against (the handoff, 4f70c68, 2026-05-15) ── docs/components/ (usage rules — one doc per component) ── docs/components/.md ← the id = the name of the components/.json contract. The full mapping is GENERATED in the "Docs per component" table below — it is not maintained by hand. ── docs/ (cross-cutting GUIDES — not per-component documentation) ────── docs/foundation.md ← GUIDE · tokens, typography, spacing (scale values & rules) docs/forms.md ← GUIDE · form rules: validation, neutral default, required/optional docs/feedback.md ← GUIDE · the five-tier notification hierarchy (Silence · Receipt · Evidence · Obligation · Decision) served by .alert and .toast. THE authority on which one to use docs/navigation.md ← GUIDE · navigation hierarchy (topnav vs tabs vs sidebar vs breadcrumbs) + back docs/signer.md ← GUIDE · composition of the signing flow + shared tokens and rules docs/layout.md ← GUIDE · layout & responsiveness: app-shell, widths, hug, CTA, template screens docs/templates.md ← GUIDE · when and how to use templates/ docs/slides.md ← GUIDE · presented decks: room-sized type scale (36px floor, key message ≥ 60px), grid, colours by role, the Fraunces accent in the Slides format, click builds, the 39 layouts and when to use each, the shape of a Read & Learn session (room + Meet), evidence behind L20–L39 docs/accessibility.md ← GUIDE · focus states, ARIA, WCAG contrast docs/reading.md ← GUIDE · Reading: blog + every PDF — print scale in two densities, page, clauses, signatures, tables, how to generate the PDF ── assets/ (logos — relative path from HTML: ../assets/...) ───────── assets/icons/.svg ← Lucide glyphs, copied verbatim — the ONLY source for inline icons assets/logo-full.svg ← full logo, pink — PRIMARY assets/logo-full-black.svg ← on light non-bej backgrounds assets/logo-full-white.svg ← on dark backgrounds / dark mode assets/logo-mark.svg ← mark alone, pink — favicon, avatar, app icon assets/logo-mark-black.svg assets/logo-mark-white.svg assets/wordmark.svg ← text only, pink — discreet footer, co-branding assets/wordmark-black.svg assets/wordmark-white.svg ``` > **Outside the DS — ignore when generating:** `ds-slack-bot/` (internal bot for Slack notifications), `.github/workflows/` (CI), `vercel.json`. They are not part of the design system; do not reference them when building pages. > **Where these commands run.** `scripts/`, `tests/`, `doc-originale/`, `ds-slack-bot/` > and `.github/` live in the `bono-ro/edge-33` repo, **not** in this skill package — the > sync vendors `skills/*` only. Every `python3 scripts/…` and `node scripts/…` line below > is run from a clone of that repo, by whoever maintains the DS; none of them is needed to > generate a page. What ships with this skill is what the file map above lists — the > versioning rules and the release procedure stay in the repo, in `VERSIONING.md`. > **Combination rule (in order):** > 1. **`templates/`** — if a template exists for what you are building (card, header, sidebar, form, table-view, kpi-grid, empty-state) — **start there**. Copy the template and adapt. > 2. **`references/`** — for the rhythm, spacing and feel of the surface (Landing / Dublin / Blog). > 3. **`components/`** — for the markup of individual pieces that have no template. --- ## Canonical CSS source — frozen copy, stamped at copy time `bono-ds.css` has **A SINGLE source of truth**: the `bono-ro/edge-33` repo (root, branch `main`). The copy of `bono-ds.css` inside this skill is a **synchronized mirror** of the repo. The file is edited ONLY at the source — never in the copies living next to artifacts. **Which copy you take depends on what you are building** (the rules live in the repo's `VERSIONING.md`): | Building | Copy from | Stamp reads | |---|---|---| | a prototype, demo or artifact | this skill's `bono-ds.css` — it mirrors `main` | `v8.1-dev · …` — unreleased work, and it says so | | anything that ships to users | the **assets of the latest GitHub Release** | `v8.0 · …` — reviewed, numbered, immutable | A `-dev` suffix in the stamp means exactly one thing: this came from `main` between releases, so it was never walked through a release review. Fine for a prototype, not for production. **In any HTML artifact (prototype, page, demo) do NOT hotlink the live deployment.** `main` changes constantly, and a `` to `https://edge-33.vercel.app/bono-ds.css` changes consumers' UI without them asking for it. Instead: **a single copy per project, stamped at the moment of copying, that all artifacts link to relatively.** Copy procedure (at the first artifact of a project): 1. Copy `bono-ds.css` from the skill into the **project root** (or the artifacts' shared folder), keeping the same name (`bono-ds.css`). A project has **a single copy** — do not put one in every folder. 2. **Stamp the copy** — prepend a provenance header as the FIRST line of the copied file (comments before `@import` are valid CSS). The stamp keywords stay in Romanian — they match the canonical banner convention in `bono-ds.css`: ```css /*! COPIE ÎNGHEȚATĂ bono-ds — nu edita aici; modificările DS se fac în bono-ro/edge-33 copiat: 2026-07-29T14:05Z sursă: bono-ro/edge-33 @ a1b2c3d canonic: https://edge-33.vercel.app/bono-ds.css */ ``` - `copiat:` = date/time of copying (UTC, `date -u +%Y-%m-%dT%H:%MZ`). - `sursă:` = the skill's short SHA: `git -C rev-parse --short HEAD`. If the skill is not inside a git repo (e.g. installed as a plugin), use the `--ds-version` value from the file instead (e.g. `sursă: bono-ro/edge-33 · v8.1 · 2026-09-10`). Keep the `-dev` suffix if the file carries one — dropping it turns unreleased work into a copy that claims to be a release. 3. Link relatively in HTML, from each artifact to the project's single copy: ```html ``` ### Re-stamping is a migration, not a file copy A stamped copy freezes **values** under **names that stay valid**. So a token whose hex changes at the source does not touch a single line of consumer code — it lands silently at the next re-stamp. This has happened twice, and once it broke error contrast in two consumer apps at the same time. The reference case: `5288edd`, 2026-07-16 opened up `--c-error` `#B91C1C → #DC2626` and `--c-error-bg` `#FCEAEA → #FDF1F1`, and introduced `--c-error-text`. Until that commit `--c-error` **was** the family's text token — there was no other — and it read 5.58:1 on the tint. `color: var(--c-error)` was the correct code. The commit migrated the DS's own call sites in the same step (`.field-help.error`, `.badge.error`, `.alert.error` → `--c-error-text`) but stamped copies got the new hex without the migration: the same seven surfaces that all passed now all fail (5.29–5.90 → 3.95–4.40). `--ds-version` did not exist yet, so nobody could even tell which stamp they held. **Therefore, before replacing a stamped copy, diff it:** ```bash python3 scripts/check-stamp-drift.py path/to/your/bono-ds.css ``` It reports tokens that kept their name and changed value, which contrast pairs cross the AA line because of it, tokens missing from your copy entirely (a `var()` that will not resolve), and the declared migration note for each. Exits non-zero when a drift pushes a pair below AA. To see it on your own screens rather than in the abstract: `node scripts/check-contrast.mjs --stamp=path/to/your/bono-ds.css ` overlays your copy's `:root` and measures what renders. At the source, `scripts/check-token-values.py` (in CI) makes the silent version impossible: a token whose value changes without a new `value_history` entry fails the build, and `breaking: true` requires a `migration` note. `tokens.json` carries that history — value, date, commit, previous value, what to do — so this diff is always answerable. See `tests/error-tokens/README.md`. **How to identify the version of an existing copy** — three mechanisms, in order of specificity: - the stamp header on the first line (copy date + source SHA); - the canonical banner `/*! bono-ds v8.1 · sursă: bono-ro/edge-33 · modificat: YYYY-MM-DD */` — travels with any copy. A trailing `-dev` (`v8.2-dev`) means the copy was taken from `main`, not from a release; - at runtime, in any page that loads the file: `getComputedStyle(document.documentElement).getPropertyValue('--ds-version')`. **Whether a refresh needs a migration is answerable from the number alone.** The version is `major.minor`, and the major moves only when a release breaks something: - **same major** (v8.0 → v8.4) → a plain re-copy, verified with `check-stamp-drift.py`; - **higher major** (v8.4 → v9.0) → **migration**: read the release notes and move the call sites in the same step as the file. `--ds-breaking-since` in the canonical file names the most recent breaking release (always an `x.0`) and is there for copies that predate the scheme — every stamp from v1 to v7 needs the v8.0 migration. Rules: - **One copy per project — a project is always on ONE single DS version.** If the project already has `bono-ds.css`, reuse it for any new artifact — do not create a second copy in another folder. A refresh is a deliberate decision: re-copy + re-stamp the single copy and note explicitly (in the commit / in the reply) that **all** of the project's artifacts moved to the new version — verify them visually after the refresh. - Do **NOT** paste the CSS content inline into HTML (`