Codebook Framework Section Headers

The current .framework-separator is a custom one-off that doesn't match anything else in the design system. Below are six alternatives built from existing system styles. Each shows how it would look above a framework's group cards (e.g. "Jesse James Garrett — The Elements of User Experience") with the "Remove from Codebook" action button.

A. Report <h2> — underline heading Used in: report sections ("Positive Findings", "Friction Points", etc.)

The primary section divider in the HTML report. <h2> with a 2 px solid bottom border. The button sits right-aligned on the same baseline row. Strong, clear hierarchy — the most "native" option since it's how every other major section is introduced.

Jesse James Garrett — The Elements of User Experience
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: h2 { font-size: 1.35rem; font-weight: 600; border-bottom: 2px solid var(--bn-colour-border); padding-bottom: 0.4rem; }
Where it's used: report.css h2 — every major report section (Positive Findings, Friction Points, Themes, etc.)
Pros: Instantly recognised as a top-level section. Strong visual weight matches how frameworks are a "big structural thing."
Cons: Might feel too heavy for content that lives inside the codebook grid — the codebook is already a section, these are sub-sections within it.
B. Uppercase label + <hr> — overline pattern Used in: picker-section-title, group-total-label, signal-card-source, preview-section-label

The small-caps "overline" label used in picker headers ("CODEBOOK FRAMEWORKS"), codebook group totals ("TOTAL"), analysis signal cards ("SECTION · THEME"), and template preview ("TAG GROUPS"). Paired with a standard <hr> above it for visual separation. This is the most-reused label style in the system — using it for framework section heads would be consistent.

Jesse James Garrett — The Elements of User Experience
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: .picker-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bn-colour-muted); font-weight: 600; } + hr { border-top: 1px solid var(--bn-colour-border); }
Where it's used: .picker-section-title (codebook picker modal: "Codebook frameworks", "Your codebooks"), .group-total-label (codebook panel: "TOTAL"), .signal-card-source (analysis page: "SECTION · THEME"), .preview-section-label (template preview: "TAG GROUPS")
Pros: Most system-consistent option — reuses the exact token recipe that appears in 4+ places. Clearly subordinate to the main "Codebook" h1. The hr gives clear separation.
Cons: Uppercase at small size might feel too subtle for author names, especially long ones like "Jesse James Garrett." Framework names lose their prestige.
C. Muted <h3> — subsection heading Used in: report sub-sections (theme names, individual section titles)

<h3> from the report (1.1rem, 600 weight, no border) but in muted colour. Sits at the right hierarchy level: frameworks are subsections of the codebook page, not top-level report sections. The <hr> above gives the structural break, the heading below names the content. Button on the same line.

Jesse James Garrett — The Elements of User Experience
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: h3 { font-size: 1.1rem; font-weight: 600; } + muted colour + hr above
Where it's used: report.css h3 — individual theme names, section sub-headings within the report
Pros: Correct hierarchy (h3 under h1). Readable at normal size — respects the author name. Muted colour keeps it subordinate to group titles. hr provides clean separation.
Cons: h3 has no border of its own, so relies on the hr above for visual weight.
D. Modal header bar — border-bottom with subtitle Used in: codebook-modal-header, preview-header

Borrows the modal/preview header pattern: title + subtitle stacked, with a 1px bottom border. Button sits right-aligned. This is already used in the codebook modal itself, so it creates a visual echo. Two-line format lets us split author from title.

The Elements of User Experience
Jesse James Garrett
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: .codebook-modal-header { border-bottom: 1px solid var(--bn-colour-border); } with .codebook-modal-title { font-size: 1.1rem; font-weight: 600; } + .codebook-modal-subtitle { font-size: 0.82rem; color: var(--bn-colour-muted); }
Where it's used: .codebook-modal-header (Browse Codebooks modal title bar), .preview-header (template preview: title + author + import button + 1px bottom border)
Pros: Already used in the codebook flow — the import preview has exactly this layout. Splitting title/author into two lines is natural. The 1px border is lighter than h2's 2px.
Cons: Could feel overly "modal-like" when it's inline content, not a contained dialog. More vertical space than Options B/C.
E. Uppercase label only — no rule Used in: picker-section-title, preview-section-label

Same uppercase label as Option B, but without the <hr>. Relies on the grid gap alone for visual separation. This is how picker section titles ("CODEBOOK FRAMEWORKS") and preview section labels ("TAG GROUPS") work — they're labels within a flow, not hard dividers.

Jesse James Garrett — The Elements of User Experience
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: .picker-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bn-colour-muted); font-weight: 600; }
Where it's used: .picker-section-title (codebook picker modal), .preview-section-label (template preview)
Pros: Lightest touch — minimal visual noise. Works if frameworks are frequent and you don't want heavy dividers. Smallest vertical footprint.
Cons: May not provide enough separation between researcher groups and framework groups. Long author names in all-caps can be hard to scan.
F. Current custom — centred label with flanking lines Used in: codebook panel only (custom, not reused)

The current .framework-separator: a centred label flanked by two flex-grown 1px lines. This is the one-off that prompted this audit — it exists nowhere else in the system. Shown here for comparison.

Jesse James Garrett — The Elements of User Experience
Strategy
Goals and objectives
user need business objective
Scope
Features and content
feature request
Structure
Interaction design
navigation
CSS: .framework-separator { display: flex; align-items: center; gap: var(--bn-space-md); } + .framework-separator-line { flex: 1; height: 1px; background: var(--bn-colour-border); } + .framework-separator-label { font-size: 0.88rem; font-weight: 600; }
Where it's used: codebook-panel.css only — not reused anywhere else in the system
Pros: Visually centred, decorative. Clear "here's a new section" signal.
Cons: One-off pattern. Centred text + flanking lines is not used in any other Bristlenose surface. The button sits on a separate line, adding vertical space. The centred label doesn't accommodate a right-aligned action cleanly.