Layer intro

.layer-intro Stable

The large animated header that marks the beginning of a new layer in the Brand OS. Appears once per layer, directly above the layer's first chapter.

Anatomy

.li-label Layer number tag — e.g. "Layer 01". Steel small caps. Comes from the ## Layer XX number in brandOS-content.md.
.li-name Layer name — large display type, can break across two lines. Comes from the name after · in the ## Layer XX · Name heading.
.li-desc Layer description — one sentence. The italic line directly below the ## Layer heading in brandOS-content.md.
.li-ghost Decorative echo of .li-name — large faint text behind the content. Purely visual. Always aria-hidden="true".

Live demo

Default

Layer 01

Layer name

One sentence describing what this layer covers.

In the Brand OS, the layer intro animates in on scroll. In this playground the animation is bypassed with inline styles (position:relative;opacity:1;transform:none). Never add these overrides to index.html.

Usage

Do
  • One layer intro per layer. It always sits immediately before the layer's first chapter — never mid-layer.
  • Derive all content from brandOS-content.md: layer number from the heading, name from after the ·, description from the italic line below it.
Don't
  • Place a chapter before the layer intro of its own layer.
  • Add a layer intro without any chapters following it.
Note
  • The .li-ghost must always carry aria-hidden="true" — it is decorative only and must not be read by screen readers.

Related

Pattern: Layer → section structure Component: Chapter

Chapter

.chapter Stable

The building block of the Brand OS document. Every section you see in the Brand OS — Positioning, Colour, Typography — is a chapter. It groups a number, a title, an opening statement, and all the content that belongs to that section.

Anatomy

A chapter is made of five named parts. The header (.ch) sits at the top and holds the number and title. Everything else — paragraphs, tables, rules — goes in the body (.cb).

.ch The header row. It spans the full width and displays the section number on the left with the title and principle on the right.
.cn The section number, e.g. "1·1". Always in monospace. Comes from brandOS-content.md — never typed by hand in the HTML.
h2 The section title. Short, direct, no punctuation. Also comes from content.md.
.pr The opening principle — one or two sentences that set the intent of the section. Taken verbatim from the first paragraph of the section in content.md.
.cb The body. Everything that explains and develops the section: paragraphs, rule lists, callouts, tables. Sits below the header.

Live demo

Default — what a chapter looks like

1·1

Section title

Opening principle — the first statement of the section, taken verbatim from brandOS-content.md. One or two sentences maximum.

Body content — paragraphs, rule lists, callouts, and tables live here. Everything that develops and explains the section belongs in .cb.

Scroll reveal — .ch-reveal

In the Brand OS, every chapter starts invisible and fades in when the reader scrolls to it. The two states below show what the reader sees before and after that transition.

Before scroll — hidden

opacity: 0
translateY(−12px)
not yet visible

After scroll — revealed

1·2

Section title

Opening principle — visible once .revealed is added by the IntersectionObserver.

Body content — same structure as the default, now fully visible to the reader.

The transition is handled by a JavaScript IntersectionObserver in the Brand OS. It watches each .ch-reveal section and adds the class .revealed the moment it enters the viewport. In this playground, use .ch-reveal.revealed directly to see the final state.

Usage

Chapters are the only way to add a new section to the Brand OS. Every section in the document — without exception — is a chapter. Here is what to remember when working with them.

Do
  • A chapter always needs both a header and a body. The header holds the number, title, and opening principle. The body holds everything else.
  • The number and title are always copied from brandOS-content.md. They are never written directly into the HTML — the content file is the single source of truth.
Don't
  • Put a chapter inside another chapter. Each chapter is one standalone section. They sit next to each other, never nested.
  • Skip the opening principle. It is the first thing a reader sees and it defines what the section is about. If it is missing, the section has no anchor.
Note
  • When adding a new section to the Brand OS, write the content in brandOS-content.md first — number, title, principle, body. Then build the chapter in HTML from that source.

Related

Pattern: Layer → section structure Component: Callout Component: Rules list

Callout

.callout Stable

A boxed aside for information that matters but doesn't fit naturally in the prose flow. One or two sentences — never a substitute for a paragraph.

Live demo

Default

Important context that belongs near this section but would interrupt the reading flow if placed inline. Keep it to one sentence where possible.

Warning · .callout.warn

A common mistake readers are likely to make here. Use .warn only when the risk is real and specific — not as general emphasis.

Good practice · .callout.ok

Good practiceA recommended approach or validated pattern. Use .ok to affirm a correct behaviour, not just to balance a warning.

Info · .callout.info

NoteContextual information that helps the reader understand without implying a risk or a recommendation. Use .info for clarifications and reminders.

Usage

Do
  • Keep callouts to one or two sentences. If it needs more, it belongs in the body as a paragraph.
  • Place callouts inside .cb. They are always part of a chapter's body, never in the header.
Don't
  • Use more than one callout per section. If everything is highlighted, nothing is.
  • Use .warn as a style preference — reserve it for genuine mistakes readers are likely to make.
Note
  • Convention places the callout at the end of the section body, after the rules list. It closes the section, it doesn't open it.

Related

Component: Rules list Pattern: Section body pattern

Rules list

ul.rules Stable

A structured list of behavioral guidelines split into three types: Do (what to follow), Don't (what to avoid), and Note (context worth remembering). Used inside .cb to enumerate rules clearly.

Anatomy

Each li is a two-column grid: an 80px label column on the left, the text on the right. Both columns are required — the layout breaks if either is missing.

li.do A rule to follow. Green label. Affirms correct behavior.
li.dont Something to avoid. Ember label. States what is wrong or harmful.
li.note Contextual information — neither imperative nor forbidden. Gray label.
b The label — goes in the 80px column. One or two words: "Do", "Don't", "Use", "Never", "Note".
span The text — goes in the remaining column. Required whenever the text contains any inline element (code, strong, em).

Live demo

All three types

Do
  • Write from the manager's perspective, not the platform's.
  • Use specific, observable language — avoid vague claims.
Don't
  • Use jargon that non-technical managers won't recognize.
  • Treat AI as the subject — managers are the subject.
Note
  • When in doubt, cut. The brand speaks with compression, not volume.

Usage

Do
  • Always structure each item as <b>Label</b><span>text</span> — the two-column grid requires both elements.
  • Wrap the text in <span> whenever it contains any inline element. Without it, code or strong become extra grid items and break the layout.
Don't
  • Put inline elements directly inside li without a wrapping span.
Note
  • No required order, but convention is Do → Don't → Note. Keeps the positive framing first.

Related

Component: Callout Pattern: Section body pattern

Cap tag

.cap-tag Stable

A small uppercase pill label for categorization. Used to tag content by layer, topic, or type — purely informational, never interactive.

Anatomy

span.cap-tag The label text — one to three words, uppercase rendered by CSS. No child elements.

Live demo

Light context

Layer 01

Dark context

Layer 02

Usage

Do
  • Keep labels to one to three words. Cap tags are labels, not sentences.
Don't
  • Use cap tags as buttons or navigation — they are purely decorative and informational.
Note
  • No variants. All cap tags carry the same visual weight regardless of content.

Formula dark

.fd Stable

Displays a conceptual equation on an Ink background. Used once in the document for one high-impact strategic formulation. Not a pattern — a punctuation device.

Anatomy

Five span elements in sequence: term, operator, term, operator, term. Operators (+, =) use the same element as terms — only position and spacing distinguish them visually.

span (term)A concept — two to four words maximum.
span (op)An operator — always + or =.

Live demo

Default — term + operator + term + operator + term

Human judgment + AI velocity = Augmented performance

Usage

Do
  • Use exactly five spans: term → + → term → = → term. The structure is fixed.
Don't
  • Use more than once in the document. The formula works because it is isolated — repetition kills it.
  • Use for a literal mathematical equation. The formula expresses a strategic idea, not a calculation.

Related

Component: Posture card

Posture card

.pc Stable

A large dark block for a flagship positioning statement shown in two densities — a short headline form and a longer explanatory form. Used once in the document.

Anatomy

.pct Short form — the compressed headline statement. Six to ten words. What a poster would say.
.pcb Long form — two to three sentences that expand the short form. What you'd say if asked "what does that mean?"

Live demo

Default

Short form — the headline.
Long form — the expansion. Two or three sentences that give the short form its meaning. Written for the reader who wants to understand, not just read.

Usage

Do
  • Write .pct first — it is the anchor. .pcb must follow from it, not the other way around.
Don't
  • Use more than once in the document. One posture card, one moment of compression.
  • Skip .pct. Without the short form, the long form has no tension and no point.

Related

Component: Formula dark