Pattern Background

Indian patterns — points and lines from India, Nepal and Thailand — tone on tone, behind anything.

Preview

On Steel Grey, drifting

LIVE IT. NOW

Kolam, one tile a minute — still for reduced motion.

Every pattern, on its own region's colour

KhovarHazaribagh, Jharkhand

Gond scalesMadhya Pradesh

Gond linesMadhya Pradesh

KolamTamil Nadu and the south

JaaliIndia · ours

LeheriyaRajasthan

BandhaniGujarat and Rajasthan

KanthaBengal

DhakaNepal

Pha khao maThailand

Kullu shawlHimachal Pradesh

PaithaniMaharashtra

KasutiKarnataka

Alleppey coirKerala

KhatambandKashmir

Banaras brocadeUttar Pradesh

RingalUttarakhand

Lepcha weaveSikkim, Kalimpong and Darjeeling

NambuLadakh

PhulkariPunjab, Haryana and Delhi

Hexagonal weaveAssam and Meghalaya

Ikat chowkaTelangana and Andhra Pradesh

MaheshwariMadhya Pradesh

Usage

tsx

import { PatternBackground } from "zostel-ui";

{/* the pattern takes the text colour; opacity keeps it a whisper */}
<PatternBackground pattern="kolam" drift className="bg-zostel-grey text-white p-8" opacity={0.063}>
  <h2>LIVE IT. NOW</h2>
</PatternBackground>

<PatternBackground pattern="leheriya" className="bg-zostel-beige text-zostel-grey p-8" />

Props

Prop	Type	Default	Description
`pattern`	`PatternKey \| string`	`"khovar"`	Any key from /brand/patterns/index.json: khovar, gond-scales, gond-lines, kolam, jaali, leheriya, bandhani, kantha, dhaka, pha-khao-ma. ("gond" and "geometric" still work.)
`tint`	`string`	`"currentColor"`	The pattern’s colour; currentColor takes this element’s text colour.
`opacity`	`number`	`0.08`	How strongly it shows. Tone on tone: ≈0.06 on Steel Grey, ≈0.09 on Beige, ≈0.15 on Warm Orange.
`scale`	`number`	`1`	Tile scale; 1 = as drawn (1 px lines, 2 px points). Keep whole or half steps.
`drift`	`boolean`	`false`	Drifts one tile a minute; stops for prefers-reduced-motion.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

pattern

Type: PatternKey | string

Default: "khovar"

Any key from /brand/patterns/index.json: khovar, gond-scales, gond-lines, kolam, jaali, leheriya, bandhani, kantha, dhaka, pha-khao-ma. ("gond" and "geometric" still work.)

tint

Type: string

Default: "currentColor"

The pattern’s colour; currentColor takes this element’s text colour.

opacity

Type: number

Default: 0.08

How strongly it shows. Tone on tone: ≈0.06 on Steel Grey, ≈0.09 on Beige, ≈0.15 on Warm Orange.

scale

Type: number

Default: 1

Tile scale; 1 = as drawn (1 px lines, 2 px points). Keep whole or half steps.

drift

Type: boolean

Default: false

Drifts one tile a minute; stops for prefers-reduced-motion.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

How it works

The pattern is an empty layer behind the children, painted with the .zo-pattern-<key> mask from /brand/patterns/patterns.css (generated by brand/tools/build_patterns.py; the component loads the stylesheet once). Give the element its ground colour and text colour — the pattern follows the text. Every pattern, its source and its places are on /illustrations.