Pattern
The six brand patterns, drawn from the blocks and dots of the mark: grid, dots (a dotted margin), mosaic, ruled, hero and empty. The first five sit behind content in the product colour; empty is a small picture for an empty state. Load patterns.css, which plain.css and styles.css bring.
- Pattern
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
Dark theme, Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
High contrast theme, Pattern
grid
Body text stays readable over it.
dots
Body text stays readable over it.
mosaic
Body text stays readable over it.
ruled
Body text stays readable over it.
hero
Body text stays readable over it.
No sessions yet
UsageLink to the section Usage
import { Pattern } from '@skribly/ui/brand'<Pattern pattern="grid" product="tracker" as="section" className="p-6">
<h2>Board</h2>
</Pattern>
<Pattern pattern="empty" product="agent" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Decoration only: the pattern is a pseudo-element, so it is never read and never takes a click, and without children the element is hidden from assistive technology.
- The tint keeps body text at 4.5:1 (7:1 in high contrast) on every page surface and the weight under 3 percent.
- Nothing moves, and Windows high contrast and print leave the pattern out.
This demo runs through axe in all three themes on every test run. See what the tests check.