Theme documentation

Patterns

Use paper patterns on individual elements, or add a site-wide overlay across the viewport.

Set the interval

For element-level patterns, numeric suffixes set CSS pixels, not Tailwind spacing steps. For example, ninaero-paper-grid-8 draws an 8px grid without a separate base class. Decimals such as 12.5 work, with a 1px minimum. Omit the suffix for the defaults below. Dot sizes and stroke widths stay fixed.

Notebook: 20 fine-line intervals per square cell. The 6px default gives 120px cells.
Checker: the suffix sets the square size.
Wide checker: the suffix sets height. Width is twice the height.

Patterns

Ruled

Journal entries, notes, and line-aligned prose.

Default: 1.5rem, 24px at the default font size.

1remninaero-paper-ruled [--ninaero-paper-step:1rem]

1.5remninaero-paper-ruled

2remninaero-paper-ruled [--ninaero-paper-step:2rem]

Match line height, padding, and paragraph gaps to the rule interval.

Ruled usage recipe

<p className="ninaero-paper-ruled ninaero-pattern-ink-foreground/10 bg-background px-[24px] py-(--ninaero-paper-step) text-base leading-(--ninaero-paper-step)">	A journal entry with rules and line height that scale with your font settings.</p>

Dotted

Whiteboards, sketchpads, and spatial canvases.

Default: 16px.

8pxninaero-paper-dotted-8

16pxninaero-paper-dotted-16

24pxninaero-paper-dotted-24

Dots do not provide snapping. Keep them aligned with your canvas coordinates.

Dotted usage recipe

<div className="h-64 ninaero-paper-dotted-16 bg-background">	{/* Your drawing layer goes here. */}</div>

Grid

Diagram editors, drawing canvases, and layout previews.

Default: 24px.

12pxninaero-paper-grid-12

24pxninaero-paper-grid-24

40pxninaero-paper-grid-40

Keep the grid aligned with pan, zoom, and snapping.

Grid usage recipe

<div className="h-64 ninaero-paper-grid-24 bg-background">	{/* Your diagram goes here. */}</div>

Notebook

Notebook-themed covers, empty states, and educational illustrations.

Default: 6px.

4pxninaero-paper-notebook-4

6pxninaero-paper-notebook-6

8pxninaero-paper-notebook-8

Decorative only. Keep text and controls on opaque backgrounds.

Notebook usage recipe

<header className="relative overflow-hidden rounded-lg bg-muted p-6">  <div    aria-hidden="true"    className="pointer-events-none absolute inset-0 ninaero-paper-notebook-6 ninaero-pattern-ink-foreground/10 bg-transparent"  />  <h2 className="relative inline-block rounded-md bg-background px-3 py-2 font-medium">    Learning journal  </h2></header>

Checker

Transparency previews for images, icons, and other assets.

Default: 12px squares.

8px squaresninaero-checker-8

12px squaresninaero-checker-12

24px squaresninaero-checker-24

Place checks behind media. Opaque pixels hide the checks.

Checker usage recipe

function AssetPreview({ src, alt }: { src: string; alt: string }) {  return (    <div className="h-64 rounded-lg ninaero-checker-8 ninaero-pattern-ink-foreground/15 bg-muted p-6">      <img src={src} alt={alt} className="h-full w-full object-contain" />    </div>  );}

Wide checker

Decorative banners, horizontal bands, and media frames.

Default: 24 × 12px checks.

16 × 8px checksninaero-checker-wide-8

24 × 12px checksninaero-checker-wide-12

48 × 24px checksninaero-checker-wide-24

Use as decoration, not a layout grid or state indicator.

Wide checker usage recipe

<div aria-hidden="true" className="h-20 rounded-lg ninaero-checker-wide-12 ninaero-pattern-ink-foreground/12 bg-muted" />

Change sizes at breakpoints

Tailwind variants work on sizing and ink classes. Keep class names complete so Tailwind can detect them.

Responsive grid interval

<div aria-hidden="true" className="ninaero-paper-grid-12 h-40 md:ninaero-paper-grid-32" />

Set the ink color

For element-level patterns, ninaero-pattern-ink-* accepts semantic, palette, and arbitrary colors. Add /25 for 25% opacity. Ink affects only pattern marks. Set the fill with bg-*.

Semantic accentninaero-paper-notebook-6 ninaero-pattern-ink-primary/25

Palette colorninaero-paper-grid-16 ninaero-pattern-ink-slate-500/30

Arbitrary colorninaero-dither-8 ninaero-pattern-ink-[#5c7185]/35

Notebook with translucent accent ink

<div aria-hidden="true" className="ninaero-paper-notebook-6 ninaero-pattern-ink-primary/25 h-48 bg-muted" />

Without an ink class, defaults stay neutral in both modes. Notebook and dither reserve ::before for the texture.

Diamond dither overlay

Illustration shading and retro or game artwork.

The transparent texture defaults to an 8px tile.

4px tileninaero-dither-4

8px tileninaero-dither-8

12px tileninaero-dither-12

Dither shading

<div aria-hidden="true" className="relative h-48 overflow-hidden rounded-lg bg-muted">  <div className="absolute inset-x-0 bottom-0 h-1/2 ninaero-dither-8 ninaero-pattern-ink-foreground/20" /></div>

A static texture, not an image filter.

Add a site-wide overlay

A site-wide overlay adds a static texture behind page content and controls, including menus and dialogs. Overlays are off by default.

Keep body::after free for the overlay. Do not apply transforms to body.

To enable Checker, add ninaero-overlay-dither to body in your root layout.

Wrap the page content in a positioned layer above the texture. Keep the wrapper transparent; opaque controls and menus then cover the texture.

Enable Checker

<body className="ninaero-overlay-dither">	<div className="relative z-[1]">{children}</div></body>

Choose a texture

Keep ninaero-overlay-dither when you change textures. Add one modifier class:

For Ordered dots, add ninaero-overlay-dots.
For Diagonal lines, add ninaero-overlay-lines.
For Flipnote dither, add ninaero-overlay-flipnote.

Choose Flipnote dither

<body className="ninaero-overlay-dither ninaero-overlay-flipnote">	<div className="relative z-[1]">{children}</div></body>

Adjust the overlay

Keep the overlay classes on body when you use these CSS rules. Each example changes one setting.

To make the texture fainter, set --ninaero-overlay-opacity to 0.02.

Set opacity to 2%

body {	--ninaero-overlay-opacity: 0.02;}

For a 4px tile, set --ninaero-overlay-size to 4px.

Set a 4px tile

body {	--ninaero-overlay-size: 4px;}

To compare the texture without color blending, set --ninaero-overlay-blend-mode to normal.

Disable color blending

body {	--ninaero-overlay-blend-mode: normal;}

After any change, check text, focus rings, disabled controls, and error states in light and dark modes.

Disable the overlay

Remove ninaero-overlay-dither from body.

Site-wide overlay reference

Texture modifiers require ninaero-overlay-dither. The utilities and CSS custom properties have these defaults.

ninaero-overlay-dither enables Checker with a 2px tile.
ninaero-overlay-dots selects Ordered dots with a 4px tile.
ninaero-overlay-lines selects Diagonal lines with a 4px tile.
ninaero-overlay-flipnote selects Flipnote dither with an 8px sparse pixel-stipple tile.
--ninaero-overlay-opacity accepts values from 0 to 1. The default is 0.06.
--ninaero-overlay-size sets the tile width and height with a CSS length. Without an override, each texture uses its default tile size.
--ninaero-overlay-blend-mode defaults to multiply in light mode and screen in dark mode. Dialog and AlertDialog backdrops switch it to normal so their blur includes the texture.

Overlay ink uses the neutral foreground. The layer ignores pointer input and adds no keyboard stops. Print and forced-colors mode hide the overlay. The texture is static, not an image filter.

On this site, the Overlay menu in the header previews each texture. The demo retains your choice across navigation and resets to Checker on reload.

Readability and accessibility

For element-level patterns, use one pattern per region. Keep dense content and controls on opaque backgrounds.
Apply aria-hidden only to decorative layers, not containers with meaningful content.
Forced-colors mode removes textures. Content must remain clear without them.