@ponchia/ui · Bronto

Interfaces that
explain themselves

Bronto is a CSS-first identity and UI layer for services, tools, sites, and reports. The standard app center is load-bearing: it gives every service the same navigation, forms, tables, workflow chrome, state language, and token rhythm. The opt-in layers then make complex work legible: explanation, provenance, relationships, generated reports, and durable state. This page is the showcase and the documentation: every block is a live specimen with its class grammar, recipe, and the one rule that keeps the system honest.

Bronto owns
Visual grammar, the .ui-* class vocabulary, token use, accessibility guidance, pure geometry helpers, and small idempotent behavior kernels.
The host owns
Domain state, data mapping, chart scales, tour order, command execution, persistence, and any announcement that needs product-specific wording.
Dismissible — wired via behaviors

01 — Foundations

Tokens, theme, motion

Monochrome surfaces, a single rationed accent, dot-matrix display type. One --accent knob re-brands; data-theme, colorways and surface are root-level switches.

Palette

--bg
--panel
--panel-soft
--accent
--success
--danger

Theming contract — one knob re-brands

Display colorways

Colorways re-point the one accent (not a second colour) for the whole page, like a theme. Switch it — the accent, focus ring, dot-matrix and accent text all follow. Authored in OKLCH and contrast-gated; phosphor skins add a dot-matrix --dotmatrix-glow in dark.

Accent as text — a themed link and an accent badge.

Data-viz palette

A colourblind-safe categorical palette (series 1 = the accent), each series colour paired with a dot-matrix pattern so it never relies on colour alone. Read hex from @ponchia/ui/charts.json for canvas/charting libs.

Pair each series with @ponchia/ui/css/legend.css below for a reading key.

Motion

Rise 1
Rise 2
Rise 3
Rise 4

Display glyphs

@ponchia/ui/glyphs, a dot-matrix icon set (a sample, default dot look, for display sizes).

Same glyphs in solid mode — crisp inline icons (~18px) inside buttons.

render: 'mask' — a one-node .ui-icon for icon-at-scale: scales with the text, inherits currentColor.

Animation (opt-in, reduced-motion-aware): reveal powers the cells on; pulse breathes for a live state.

02 — Shared service center

The app surface every service shares

Buttons, forms, tables, overlays, navigation, shell chrome and workflow states. This is the cross-service identity layer; the analytical/report surfaces build on it instead of replacing it.

Buttons

Badges · Chips · Dots

Default Accent Success Warning Danger Info Chip Active Live Idle
Online Degraded Down Info typing

Loaders · Progress

Card

Interactive surface

Flat, hairline border, lifts on hover. Colour stays rationed.

Open

Card · accent

Dot-grid backdrop

The signature texture as a background utility.

Key / value

Runtime
k3s · cluster
Status
Reconciled

Forms

  • Apple
  • Banana
  • Cherry
Input group / file / range https://
Collision-aware, dependency-free.

Data table — dense, sortable, selectable

Time Pair Size P/L State
09:42:01 BTC/EUR 0.014 +€38.20 Filled
09:38:55 ETH/EUR 0.62 −€11.04 Stopped
Bob 30
Ann 9
Cy 100

Metrics & stats

Equity €12,408 +2.4% / 24h
Open3 positions
Win rate61% −4pt / wk
Revenue €48.2k ▲ 12%
Churn 1.8% ▼ 0.3%
Open 17 — flat
Coverage · disk · errors (meters)

Alerts

Heads up

A rationed accent border carries the tone — no fill.

Dismissible alert — wired via the shipped behavior.

Info tone — the neutral status colour, AA-safe on surface.

Tabs · Accordion · Segmented · Disclosure

First panel — CSS-only look, ARIA contract.
What is this
Native <details>, styled — zero JS.
Second item
The dot marker rotates into an arrow on open.

Navigation · Page header · Steps · Timeline

Settings

Billing

  1. Account
  2. Profile
  3. Confirm
  1. 09:42 Deploy started
  2. 09:31 Build passed
  3. 09:20 Commit pushed
ZT AB CD SM LG Open ⌘+K then GthenI

Overlay · Tooltip · Toast · Menu

Pure-CSS tooltip
Menu ▾
Actions

Confirm

Native <dialog> styled Nothing-flat. Backdrop click closes it.

Filters

Slide-in drawer; bottom sheet on mobile.

Carousel · Lightbox

Content — Markdown output, zero classes

Designing with restraint

This whole article is plain semantic HTML — the kind a Markdown renderer produces — with no class attributes on any element. One ui-prose wrapper styles it.

Why it matters

Keeping the markup clean means it stays portable and machine-readable: scrapers, RSS, reader mode, and LLMs all parse it without fighting a class-soup div tree.

Color is rationed. Structure carries the meaning.

  • Square markers in the accent colour
  • Nested items work too
    • Second level
import ui from '@ponchia/ui/classes';
ui.button({ variant: 'ghost' });

Site shell — content-site layer

Bronto
Menu ▾
  1. 2026-05-15
  2. A. Author
  3. 6 min read

On restraint

A short content page using the narrow container + meta row + tags.

Color is rationed. Structure carries the meaning.
— the Nothing brief
  • design
  • systems
  • css
© 2026 Bronto — built with @ponchia/ui GitHub npm RSS

03 — The differentiator ★

Interfaces that explain themselves

The 0.5.0 analytical suite: communication primitives for charts, reports and analytical UI. Each owns its visual grammar and pure geometry and refuses to own scales, state or hit-testing — that is the line that keeps Bronto from becoming a chart engine. All opt-in via @ponchia/ui/css/analytical.css.

Annotations

A subject / connector / note grammar for SVG figures, plus geometry helpers that return SVG strings — including directLabels, which declutters labels along an axis and draws the leader from each anchor to its placed label.

Capacity chart with selected annotations A muted baseline label, a danger threshold line, an accent peak callout, and a warning risk band annotate weekly capacity. Baseline 10 h floor Threshold Capacity cap Peak Week 3 Risk Late work
The grammar on a real figure: a subject marks the thing, a connector points away, a note carries the text — here a muted baseline label, a danger threshold, an accent peak (with --draw motion), and a warning band.
And the directLabels geometry helper: the four labels would collide at their data y, so they declutter into a leadered column.
Markup & recipe 
import { directLabels } from '@ponchia/ui/annotations';

const labels = directLabels(
  points.map((p) => ({ anchor: p, size: 22, key: p.id })),
  { axis: 'y', cross: 296, gap: 6, min: 14, max: 156 },
);
// each → { x, y, anchor, key, d }
//   <path class="ui-annotation__connector" d={d}/> + a label at { x, y }

opt-in Owns grammar + SVG-string geometry. No scales, no DOM, no edit mode. Full specimen Docs

Legends & data keys

Standalone reading keys that read the --chart-* palette tokens, so chart meaning never drifts from the colours. Interactive variant toggles a series.

Categorical (colour + redundant pattern)

  • Research
  • Delivery
  • Maintenance

Interactive — toggle a series

Research Delivery 82% 54%

Markup & recipe 
<ul class="ui-legend ui-legend--interactive" data-bronto-legend>
  <li><button class="ui-legend__item" aria-pressed="true" data-series="research">
    <span class="ui-legend__swatch ui-legend__swatch--1"></span>
    <span class="ui-legend__label">Research</span>
  </button></li>
</ul>

import { initLegend } from '@ponchia/ui/behaviors';
initLegend(); // emits bronto:legend:toggle { series, active }

opt-in Flips the control + announces; the host hides the series. Full specimen Docs

Text marks & evidence

The prose counterpart to annotations: sober, report-grade highlights, underlines, boxes and passage brackets for running text. Monochrome by default; the accent is the opt-in --accent tone.

The migration cut p95 latency by 38%, but error rate doubled in the first hour, and the old retry path was removed. A plain neutral highlight stays monochrome, while a boxed note reads as an aside.

Source Q3 incident review, §4 — sustained for 47 minutes before rollback.
Markup & recipe 
<mark class="ui-mark ui-mark--accent">cut p95 latency by 38%</mark>
<blockquote class="ui-bracket-note ui-bracket-note--accent">…</blockquote>

ui.mark({ tone: 'accent', motion: 'draw' });
ui.bracketNote({ tone: 'accent' });

opt-in · CSS only Visual emphasis only; state meaning lives in the words (WCAG 1.4.1). Full specimen Docs

Connectors

Leader lines between DOM regions, drawn from measured DOMRects — straight, elbow or curve, with an arrow or dot end. Pure geometry; the behavior only tracks layout.

Source

Target

Aside

Markup & recipe 
<svg class="ui-connector ui-connector--accent" data-bronto-connector
     data-from="node-a" data-to="node-b" data-shape="curve" data-end="arrow"></svg>

import { initConnectors } from '@ponchia/ui/behaviors';
import { connectRects } from '@ponchia/ui/connectors'; // pure geometry

opt-in Owns geometry + layout tracking; the relationship's meaning is in DOM order. Full specimen Docs

Spotlight

The visual language of guided focus: a dimmed backdrop with a cut-out ring and a tour note. Bronto owns the look and the cutout position, not the tour state machine. (It is a full-viewport overlay — the live version opens in its own demo.)

Markup & recipe 
<div class="ui-spotlight ui-spotlight--ring" data-bronto-spotlight data-target="save-button">
  <div class="ui-spotlight__hole"></div>
  <div class="ui-tour-note">…</div>
</div>

import { initSpotlight } from '@ponchia/ui/behaviors';

opt-in Owns the cutout look + position; the host owns step order and persistence. Live overlay demo Docs

Crosshair & readout

A pointer-tracking ruler with a pinned readout. Move the pointer over the plot — Bronto reports the position as pixels and 0–1 fractions; it never maps pixels to data values.

Pointer: —

Markup & recipe 
<figure data-bronto-crosshair>
  <div class="ui-crosshair"><div class="ui-crosshair__line ui-crosshair__line--x"></div>…</div>
</figure>

initCrosshair(); // emits bronto:crosshair:move { x, y, fx, fy }

opt-in Reports position only; the host maps the fraction to a data value. Full specimen Docs

Selection states

A cross-cutting vocabulary for selected / candidate / excluded — the same classes on bars, table rows, list items or map regions. The host decides what's selected; these render the result.

Markup & recipe 
<div class="ui-sel ui-sel--on">…</div>     <!-- selected -->
<div class="ui-sel ui-sel--maybe">…</div>  <!-- live-brush candidate -->
<div class="ui-sel ui-sel--off">…</div>    <!-- excluded -->

ui.sel({ state: 'on' });

opt-in · CSS only Renders selection emphasis; the host owns brush + hit-testing. Full specimen Docs

Sources, citations & provenance

The trust layer for generated reports and AI output — "where did this come from?". A cross-cutting ui-src--* state sets a rationed tone, always paired with a label (never colour alone). The first frontier primitive beyond the analytical suite.

Generated 3 sources Human-reviewed

Latency fell 38%[1], but error rate doubled[2].

Q3 incident review, §4

ops.internal · postmortem

Sustained for 47 minutes before rollback; root cause was the deprecated retry path.

Markup & recipe 
<a class="ui-citation" href="#s1" aria-label="Source 1">[1]</a>
<article class="ui-source-card ui-src--verified">
  <h4 class="ui-source-card__title">…</h4> <p class="ui-source-card__origin">…</p>
</article>

ui.citation({ chip: true, state: 'verified' });
ui.source({ state: 'generated' });  ui.provenance({ state: 'reviewed' });

opt-in · CSS only Owns grammar + trust states; the host owns fetching, numbering, and trust. Full specimen Docs

Report semantic contract

A compact report slice for LLM-authored documents: reader outcome, claim, evidence ledger, action and source card stay visually distinct while the host owns the facts.

Decision readiness

The guarded option reduces operational risk for the next release.

Scope: release-readiness review, current evidence window.

Evidence state: partial.

Basis: reviewed rollout note and verified metric sample.

Limit: final load-test result is still pending.

Source: S1

Claim, source and caveat matrix
Claim Source Caveat
C1 S1 Pending load-test sample.

Recheck the pending load-test result.

Owner: release lead

Due: before rollout

Status: open

Success criteria: result supports or revises C1.

S1 reviewed S2 verified

Release readiness note

Reviewed: release checklist

Markup & recipe 
<aside class="ui-report__decision">…</aside>
<article class="ui-claim ui-claim--partial" data-source-ids="source-1">…</article>
<div class="ui-evidence-ledger"><table class="ui-table">…</table></div>
<article class="ui-source-card ui-src--reviewed" id="source-1">…</article>

opt-in · static Styles report semantics; the host owns claims, evidence and checks. Full specimen Docs

Lifecycle & system state

The states apps actually live in — saving, saved, stale, conflict, … — with canonical wording and a rationed tone. The label is the state; persistent state gets persistent UI, not a toast.

Saving…
All changes savedjust now Out of date Conflictlocal vs remote Needs review
Markup & recipe 
<span class="ui-state ui-state--saving ui-state--busy">
  <span class="ui-state__label">Saving…</span>
</span>

ui.state({ state: 'saving', busy: true });
ui.state({ state: 'conflict' });

opt-in · CSS only Ships the visual states + wording; the host owns the state machine + persistence. Full specimen Docs

Generated content & AI trust

The trust surfaces around AI / system-generated content — a marked region, an origin label, and quiet reasoning + tool-call logs. Not a chat kit; pairs with the source layer.

AI generated

The migration cut p95 latency by 38% in the first hour.

search_docs(query) ok 
{ "query": "p95 latency", "hits": 3 }
Markup & recipe 
<section class="ui-generated">
  <p class="ui-generated__label"><span class="ui-origin-label ui-origin-label--ai">AI generated</span></p>
  …
</section>
<details class="ui-tool-call"><summary><span class="ui-tool-call__name">…</span></summary>…</details>

ui.originLabel({ ai: true });

opt-in · CSS only Styles disclosure/origin/trace; the host owns model metadata, redaction, safety. Full specimen Docs

Workbench — panes, inspector, properties, selection

The low-risk core for real tools: resizable panes, a selected-object inspector, denser property rows, and a raised selection action bar.

Files

jobs.yaml

sync-run.json

Preview

Current selection preview and editor surface.

3 selected
Markup & recipe 
<aside class="ui-inspector">
  <div class="ui-inspector__head">…</div>
  <div class="ui-inspector__body">
    <div class="ui-property"><span class="ui-property__label">Width</span><span class="ui-property__value">…</span></div>
  </div>
</aside>
<div class="ui-splitter" data-bronto-splitter style="--splitter-pos: 42%">
  <section id="files" class="ui-splitter__pane">…</section>
  <div class="ui-splitter__handle" role="separator" tabindex="0" aria-controls="files" aria-label="Resize files pane" aria-valuenow="42"></div>
  <section class="ui-splitter__pane">…</section>
</div>
<div class="ui-selectionbar"><span class="ui-selectionbar__count">3 selected</span>…</div>

opt-in · CSS + behavior Layout + resize affordance; the host owns panes, persistence, selection and hit-testing. Full specimen Docs

Command palette

Filter + keyboard-navigate a command list (live below — try typing or the arrow keys). Bronto navigates; the host owns the action registry. No global Cmd/Ctrl+K — open it yourself in a dialog.

  • Navigation
  • Go to dashboard G D
  • Open settings G S
  • Actions
  • New invoiceCreate

Selected: —

Markup & recipe 
<div class="ui-command" data-bronto-command>
  <input class="ui-command__input" />
  <ul class="ui-command__list"><li class="ui-command__item" data-value="…">…</li></ul>
</div>

initCommand(); // emits bronto:command:select { value, label } — host runs it
useCommand();  // react/solid/qwik

opt-in Filters + navigates; the host owns the action registry, routing, execution. Full specimen Docs

04 — On the frontier

What the system owns next

The same boundary, applied to more of the "interfaces that explain themselves" surface. Planned, not yet built — the full rationale is in the frontier-primitives thesis.

Conflict resolution

Side-by-side choice, merge and accept/reject states for generated or concurrent edits.

Relationships

Target rings, hotspots and linkage labels beyond connectors — lightweight "this controls that".