Skip to content
Neobrui

Patterns

Patterns are recipes assembled from public classes and native semantics. They are not versioned component APIs; copy the anatomy, then let product CSS own identity and application state.

Need Recipe Primary owner
One important story Card/editorial lead content + grid
Explanation or warning Callout product semantics
Compact state Badge/status application text/state
Actions Nav vs toolbar native links/buttons
Opening statement Hero product typography
Unequal related content Mixed-span grid layout primitive

Recipe playground

Section titled “Recipe playground”

Recipe anatomy

Section titled “Recipe anatomy”

Card / editorial lead

Section titled “Card / editorial lead”

Purpose: give one article a meaningful lead. Use <article> with a heading and link; .nbr-grid gives the first child 7 columns and a supporting <aside> 5. Product hook: .editorial-lead. At 40rem all children stack. Avoid making every card raised. Remove classes and the article remains readable.

Callout

Section titled “Callout”
<aside class="nbr-surface callout" data-nbr-level="outlined" aria-labelledby="tip-title">
  <h2 id="tip-title">Before you publish</h2><p>Review keyboard focus and contrast.</p>
</aside>

The aside and heading provide semantics; the product owns tone and urgency. Use text, not color alone. outlined preserves a boundary without elevation.

Badge/status

Section titled “Badge/status”
<span class="status" data-state="in-progress">In progress</span>

A badge is not inherently a button. Product CSS can map data-state, but visible text and accessible naming remain required. Do not use .nbr-pressable merely to make a span look tactile.

Section titled “Navigation vs toolbar”
<nav aria-label="Primary"><div class="nbr-cluster"><a class="nbr-pressable" href="/">Home</a></div></nav>
<div class="nbr-cluster" role="toolbar" aria-label="Editor actions"><button class="nbr-pressable" type="button">Save</button></div>

Navigation owns links and destinations; toolbar owns grouped actions. The cluster only wraps/alines. Use native disabled buttons; aria-disabled still needs application prevention.

Hero and mixed-span grid

Section titled “Hero and mixed-span grid”
<header class="hero nbr-stack"><p>Issue 04</p><h1>Coral Ledger</h1><p>Evidence before decoration.</p></header>
<section class="nbr-grid"><article class="nbr-surface" data-nbr-level="raised">Lead</article><aside class="nbr-surface" data-nbr-level="quiet">Evidence</aside></section>

The product owns hero type and identity; layout owns relationships. The grid is explicit 12-column, not intrinsic.

Neutral and Coral Ledger mapping

Section titled “Neutral and Coral Ledger mapping”

The same anatomy can be neutral (system color fallbacks) or product-scoped:

[data-product="coral-ledger"] { --nbr-color-action:#e85d3f; --nbr-color-on-action:#201814; --nbr-color-border:#201814; --nbr-color-shadow:#201814; }

Verify both light and dark mappings for contrast. Recipes do not alter semantics, responsive source order, or state behavior.

Integrated example

Section titled “Integrated example”

The two rendered specimens below deliberately share the same semantic anatomy and content. The neutral example is the default; the Coral Ledger example adds only a scoped role mapping, so identity can be removed without changing source order or interaction behavior.

Issue 04

Release desk

Neutral identity: default

Issue 04

Release desk

Product identity: Coral Ledger

Test semantics, keyboard, responsive collapse, RTL, forced colors, and reduced motion. To remove a recipe, delete classes/imports and restore any product declarations; content and native controls remain.