● Patterns / AccentBlock
AccentBlock.
AccentBlock is the system’s main emphasis container. It adds a vertical rule and inset so a heading and its supporting content enter as a single, deliberate unit.
How the pattern behaves
AccentBlock does one thing: it gives a block of important content a clear left-hand edge. The component itself stays minimal so hierarchy, typography, and body rhythm are still controlled by the content inside it.
In the codebase it appears in the hero and inside SectionHeader, which means its real role is structural emphasis rather than decoration. It signals that the content inside is an entry point worth pausing on.
Source of truth
The component is intentionally tiny: left padding plus a vertical primary rule. Everything else comes from composition and the children it wraps.
Pattern roles
The value of AccentBlock is not complexity. It is a small compositional primitive with a very specific job in the system.
Visual anchor
Introduces a left-side accent rule that gives important content a clear entry edge.
Content container
Wraps headings and supporting body content without dictating the internal typography or spacing.
Compositional primitive
Works beneath MetadataLabel or inside SectionHeader to form the system’s main page-introduction pattern.
Anatomy
The pattern is visually simple, but its parts matter. The rule, inset, and flexible children work together to create emphasis without heavy styling.
Hero intro
A large heading, supporting paragraph, and primary action all sit inside the same accented entry block.
Section header composition
MetadataLabel sits above, then AccentBlock holds the main heading and the body copy below it.
Long-form content
The rule extends with the content, so longer editorial or documentation blocks still feel intentional.
Inset content area
Applies left padding so the content and accent rule never collide.
Vertical accent rule
A thin primary-colored line that runs alongside the block and scales with content height.
Flexible children
Allows headings, paragraphs, buttons, and longer prose stacks without changing the component API.
Guidelines
- Use AccentBlock for important introductory content, not as a generic wrapper around every section.
- Let the children control their own typography and spacing instead of pushing layout decisions into the component.
- Keep the accent rule meaningful by using it for hero moments, page intros, or composed section headers.
- Prefer composing it with MetadataLabel above rather than stuffing orientation content inside the block itself.
- If the content is purely utilitarian or densely repetitive, use a simpler container without the accent treatment.
In practice
Is this content a major introduction or focal block?
Use AccentBlock.
Does the content need a label above it first?
Pair it with MetadataLabel.
Do the children need their own layout rhythm?
Handle that inside the content, not in AccentBlock.
Is this a repeated utilitarian section?
Skip the accent block and use a quieter container.
Should the rule stop short or grow with the content?
It should grow with the content height.