Build Standards
Naming, structure, and HTML semantics rules that keep every Brik page and component consistent.
Rules for building pages and components that stay coherent as the system grows. Every standard here is load-bearing — it resolves a word, a slot, an element, or a layout decision before you write code.
Naming Principles
Intent over shape. The structural pattern that governs every slot name.
Slot Vocabulary
Full reference for title, subtitle, description, label family, actions, value, Tag, and Badge.
Composition Layers
Six layers — Section, Layout, Container, Block, Control, Component — and the decision rules.
HTML Semantics
Which HTML element each role renders as, heading hierarchy, stable IDs, and no-unclassed-wrappers.
Prop Axes
Shared prop names — size, status, variant, appearance — and the component coverage matrix.
Page Structure
The HTML skeleton and BEM section pattern for Astro and Next.js sites.
Page Archetypes
The four product page shapes — record read, record edit, collection, profile — and which one a surface gets.
Display Choice
Which display a shape of data gets — table, field grid, card grid, list, accordion, or banner — and what rules each one out.
Indicators
Which small pill a label gets — Tag, Badge, Dot, Counter, ServiceTag — and the one discriminator that separates all five from Chip.
Headings
Pick a heading token by composition layer and the HTML element by outline intent.
Paragraphs
Body-text roles, line-height pairings, and ContentBlock vs Prose vs raw slot.
Content Rhythm
The role→step spacing scale, and when to reach for gap, padding, or margin.
Banner Groups
Order, placement, and spacing for a surface with more than one banner — and when the second one is wrong.
Page Grid
The width-container recipe, the page gutter, and which content width each band role gets.
Image Sourcing
The photography-first sourcing ladder, AI-imagery policy, and how images wire into Image and Frame.
Related
- Token Anatomy — How token names are structured (primitive, intent, scoped intent).
- Theming — Blueprints — Blueprint families and how they implement the Blueprint layer.
- Components — Every component implements the prop axes and slot vocabulary defined here.