Patterns — InsideBoard Design System

Layer → Section

Stable

The fundamental document rhythm of the Brand OS. Every layer opens with a layer intro, followed immediately by its chapters. This structure is not optional — every layer in the document follows it without exception.

Composition

.layer-intro Required. One per layer. Always the first element — never after a chapter.

.chapter ×N Required. One or more chapters following the layer intro. All chapters between two layer intros belong to the layer of the first.

Live demo

Layer intro → Chapter

Layer 02

Layer name

One sentence describing what this layer covers.

2·1

Section title

Opening principle — the first statement of the section.

Body content. More chapters follow in the same ivory container, separated by the chapter's own internal spacing.

Usage

Do

The layer intro always comes first. Chapters follow it — they never precede it.
All chapters between two layer intros belong to the layer of the first. Layer membership is defined by position, not by any class or attribute.

Don't

Add a layer intro with no chapters after it. A layer with no content should not exist in the document.

Register contrast

Stable

A side-by-side layout that makes the two primary visual registers tangible — brand (dark, editorial, emotional weight) against product (light, functional, direct). Used in the Brand OS to demonstrate the difference, not to mix the two.

Composition

Brand register Ink background. Light text. Light weight (300). Used for marketing, editorial, and high-stakes brand moments.

Product register White background. Ink text. Normal weight (400). Used for product UI, documentation, and operational contexts.

Live demo

Brand register vs product register

Brand register

Augmented
performance starts
with human judgment.

Product register

Set a goal.
The agent handles
the execution.

Usage

Do

Brand register on the left, product register on the right — the contrast reads left-to-right: emotional → functional.

Don't

Mix registers within a single surface. The contrast pattern exists to show the difference, not to combine them.

Note

This is a documentation pattern, not a UI component. It does not appear in the Brand OS sections — only here to demonstrate how the registers differ.

Section body pattern

.cb Stable

The standard content structure for a chapter body. A prose introduction, a rules list, and an optional callout — in that order. The most common composition in the Brand OS.

Composition

p (intro) Required. One or two sentences that frame the section before the rules. Context first, rules second.

ul.rules Required. The behavioral guidelines for this section.

.callout Optional. Placed last — it closes the section, never opens it.

Live demo

Intro → rules → callout

The voice system has three registers. Each is calibrated for a different context — never mix them within a single surface.

Do

Match the register to the surface: brand for marketing, product for UI, technical for docs.
Keep register consistent within a screen or document.

Don't

Use the brand register in product UI — it sounds theatrical in a dashboard.

Note

When uncertain, default to product register. It's the most neutral.

Register is not tone. Tone shifts within a register (warmer or cooler). Register is the channel — it doesn't flex.

Usage

Do

Open with a sentence that contextualizes the rules. A list without an intro lacks grounding.
Place the callout last. It closes and punctuates — it doesn't introduce.

Don't

Start the body directly with a rules list. Context always comes first.

Note

The callout is optional. Omit it when there's nothing genuinely worth highlighting — not every section needs one.