Quiet patterns

Dot and line grids in the current text color at 5%: texture that never competes with the content.

Open your store today

Twelve products and a domain, ready in an afternoon.

Installation

$ pnpm dlx shadcn@latest add @ssntl/pattern

Usage

css

/* app/globals.css */
@import "../styles/ssntl/pattern.css";

<section class="bg-dots">…</section>
<section class="bg-grid">…</section>

Rules

What this component expects from you, as it ships in styles/ssntl/pattern.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.

styles/ssntl/pattern.md

## Rules for Quiet patterns

- **Quiet backgrounds.** Patterns draw in the current text color at 5%, so they adapt to light and dark.
- Keep any texture under 6%; if it can be noticed while reading, it is too strong.
- Use a pattern behind a headline or an empty state, never behind body text or data.

Open the full rules file

Code

styles/ssntl/pattern.css

/* Quiet backgrounds: a texture you feel more than see. Both patterns draw
   in the current text color at 5%, so they adapt to light and dark and
   never compete with the content on top. Keep them under 6%.

     bg-dots     a 16px dot grid
     bg-grid     a 32px line grid */

@utility bg-dots {
  background-image: radial-gradient(
    color-mix(in oklab, currentColor 5%, transparent) 1px,
    transparent 1px
  );
  background-size: calc(var(--spacing) * 4) calc(var(--spacing) * 4);
}

@utility bg-grid {
  --_line: color-mix(in oklab, currentColor 5%, transparent);
  background-image:
    linear-gradient(var(--_line) 1px, transparent 1px),
    linear-gradient(90deg, var(--_line) 1px, transparent 1px);
  background-size: calc(var(--spacing) * 8) calc(var(--spacing) * 8);
}