RulesLink to the section Rules
Patterns are decoration: they carry no meaning, are hidden from assistive technology and never move. The tint stays at 7 percent of the product colour in the light theme and 14 percent in the dark and high contrast themes, so body text keeps 4.5:1 (7:1 in high contrast) over a pattern on every page surface and a background never weighs more than 3 percent; test/patterns.test.ts measures both. Windows high contrast and print leave them out.
Brand patternsLink to the section Brand patterns
Page grid .sk-pattern--grid
A quiet grid of 1.5 rem squares, with a small block at each crossing. For long pages and tool screens.
Body text over the pattern
Secondary text, in the muted colour
<section class="sk-pattern sk-pattern--grid sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Dotted margin .sk-pattern--dots
A column of dots along the start edge, 3 rem wide unless --sk-pattern-margin says otherwise. For articles and side panels.
Body text over the pattern
Secondary text, in the muted colour
<section class="sk-pattern sk-pattern--dots sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Block mosaic .sk-pattern--mosaic
The blocks of the mark, repeated. For section breaks and the backs of cards that hold little text.
Body text over the pattern
Secondary text, in the muted colour
<section class="sk-pattern sk-pattern--mosaic sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Ruled notebook .sk-pattern--ruled
Lines 2 rem apart, like a notebook page. For notes, quotes and forms.
Body text over the pattern
Secondary text, in the muted colour
<section class="sk-pattern sk-pattern--ruled sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Hero texture .sk-pattern--hero
Scattered blocks and dots that fade towards the bottom. For the top of a page.
Body text over the pattern
Secondary text, in the muted colour
<section class="sk-pattern sk-pattern--hero sk-product--skribly">
<h2>…</h2>
<p>…</p>
</section>Empty state .sk-pattern--empty
A small picture of an open notebook, 10 rem wide, for an empty list or a page with no data yet. It is a picture of its own size, never a background, and it is shown above the words that say what is missing.
Secondary text, in the muted colour
<div class="sk-pattern sk-pattern--empty sk-product--skribly" aria-hidden="true"></div>In codeLink to the section In code
import { Pattern } from '@skribly/ui/brand'
<Pattern pattern="ruled" product="skribly" as="section" className="p-6">
<h2>…</h2>
</Pattern>
<Pattern pattern="empty" product="skribly" />---
import Pattern from '@skribly/ui/astro/Pattern.astro'
---
<Pattern pattern="hero" product="skribly" as="header">
<h1>…</h1>
</Pattern>@import '@skribly/ui/patterns.css';
.notes {
--sk-pattern-margin: 4rem;
}