Atomic CSS architecture for Bristlenose HTML reports. All components are built from design tokens and composed through atoms, molecules, organisms, templates, and pages. No build step — CSS custom properties + vanilla JS.
The single source of truth for all visual decisions. Override these CSS custom
properties to create a custom theme. Dark mode uses light-dark()
with the color-scheme property — no JS required.
File: tokens.css — 329 lines, all CSS custom properties.
The smallest, indivisible building blocks. Each atom is a single CSS file in
bristlenose/theme/atoms/. Atoms never compose other atoms —
they only reference design tokens.
Remove “usability” from all quotes?
Also: atoms/logo.css (logo image + logotype),
atoms/footer.css (footer layout),
atoms/interactive.css (generic interactive states).
Groups of atoms that act as a single functional unit. Each molecule combines
two or more atoms into a reusable component. Files live in
bristlenose/theme/molecules/.
Also: molecules/bar-group.css (histogram bar group),
molecules/tag-input.css (tag autocomplete),
molecules/hidden-quotes.css (hidden quote badge + dropdown),
molecules/help-overlay.css (keyboard help),
molecules/feedback.css (feedback form).
Complex components composed of molecules and atoms, forming distinct sections
of the interface. Files live in bristlenose/theme/organisms/.
Also: organisms/coverage.css (transcript coverage details),
organisms/toc.css (table of contents navigation).
Page-level layout that places organisms, molecules, and atoms into a structure.
Templates define the skeleton — where things go, not what they contain.
Files live in bristlenose/theme/templates/.
| File | Page | Key layout decisions |
|---|---|---|
templates/report.css |
Main report | Max-width constraint (52rem), article centering, header with logo + metadata, section spacing, blockquote grid |
templates/transcript.css |
Per-session transcript | Segment layout with speaker codes, right-margin annotation column (absolute on wide ≥ 1100px, inline on narrow), anchor-highlight animation, moderator de-emphasis |
templates/print.css |
Print / PDF export | Forces light colour-scheme, hides toolbar/footer/navigation, adjusts page margins |
Specific instances of templates filled with real content. These are the three HTML pages Bristlenose generates, each with its own JS module set.
| Page | File | JS modules | Description |
|---|---|---|---|
| Report | bristlenose-{slug}-report.html |
18 modules (storage → main) | Main research report with extracted quotes, themes, sentiment histograms, search, tag filter, view switcher, inline editing, keyboard navigation |
| Transcript | sessions/transcript_s{n}.html |
5 modules (storage → transcript-annotations) | Per-session transcript with timecoded segments, speaker codes, right-margin annotations with span bars, deep-linking |
| Codebook | codebook.html |
4 modules (storage → codebook) | Standalone tag taxonomy page with drag-drop organisation, colour-coded groups, inline editing, cross-window sync |
| Layer | File | Primary components |
|---|---|---|
| Tokens | tokens.css | All CSS custom properties (colours, spacing, radii, transitions, dark mode) |
| Atoms | atoms/badge.css | Badge base, sentiment variants, user tags, AI tags, add-tag, animations |
atoms/button.css | Toolbar buttons, star, pencil, restore, toggle variant | |
atoms/input.css | Tag input box, ghost completion layer, sizer | |
atoms/bar.css | Histogram bars, counts, labels, delete button | |
atoms/timecode.css | Timecode links, brackets | |
atoms/span-bar.css | Vertical extent indicator bars | |
atoms/modal.css | Overlay, modal card, action buttons | |
atoms/toast.css | Clipboard feedback toast | |
atoms/logo.css | Logo image, logotype text | |
atoms/footer.css | Footer layout, links | |
atoms/interactive.css | Generic interactive element states | |
| Molecules | molecules/badge-row.css | Flex row of badges |
molecules/bar-group.css | Histogram bar group (display: contents) | |
molecules/quote-actions.css | Quote text, speaker, edited states | |
molecules/tag-input.css | Tag input with autocomplete dropdown | |
molecules/name-edit.css | Participant name cells with pencil-on-hover | |
molecules/search.css | Expanding search field with clear button | |
molecules/tag-filter.css | Tag filter dropdown with checkboxes | |
molecules/hidden-quotes.css | Hidden quote badge, dropdown preview | |
molecules/help-overlay.css | Keyboard shortcut help modal | |
molecules/feedback.css | Feedback form (sentiment + textarea) | |
molecules/transcript-annotations.css | Right-margin annotations, span bars | |
| Organisms | organisms/blockquote.css | Full quote card with all actions |
organisms/toolbar.css | Report toolbar layout, view switcher | |
organisms/sentiment-chart.css | Side-by-side histogram layout | |
organisms/coverage.css | Transcript coverage details | |
organisms/toc.css | Table of contents navigation | |
organisms/codebook-panel.css | Codebook group grid, drag-drop, inline edit | |
| Templates | templates/report.css | Report page layout |
templates/transcript.css | Transcript page layout | |
templates/print.css | Print overrides |