Patterns, used well.

A short method. Every chapter points at live patterns in the library, so the argument is always something you can look at and copy.

Fifth draft, 20 October 2026. Chapters are added with each batch.

1. 1. Three kinds of pattern
2. 2. Density and contrast
3. 3. Text on a pattern
4. 4. Scale
5. 5. Colour comes from the palette
6. 6. Geometry
7. 7. Living surfaces
8. 8. Textile
9. 9. Fine paper
10. 10. Soft futures

1. Three kinds of pattern

Nothing in this library is an image. Each pattern is one of three things, and the detail page shows which.

CSS gradients. Stripes, grids, dots and checks need nothing but background-image. A repeating linear gradient makes a stripe; two of them crossed make a grid or a gingham; a radial gradient tiled makes dots. These are the lightest patterns there are, they scale to any size without a seam, and they recolour by changing one value.

SVG tiles. Anything with a corner the gradient cannot draw, hexagons, herringbone, scallops, bricks, is a small SVG tile written into a data URI. The tile is drawn once with its colours filled in, then repeated. The code box on each page gives both the CSS and the bare SVG.

Generated tiles. Grain, halftone, jittered dots and hand-drawn hatching are made by a few lines of JavaScript on a canvas, seeded so the same pattern comes out every time, and wrapped so the tile has no seam. The page gives you the result as a PNG data URI; the generator itself is in the site's gen.js.

2. Density and contrast

Every pattern carries two tags that matter more than its shape. Density is how much of the surface the figure covers: light, medium or dense. Contrast is how far the figure is from the ground: low, medium or high. Together they decide what the pattern can sit behind.

Light and low is a surface: ruled lines, the plus grid, a hairline graph paper. The eye accepts it as the colour of the page. Dense and high is a figure: Breton stripes, the meander, a halftone ramp. The eye reads it as the design, and anything placed on it has to be placed as a label on a poster, not as a paragraph on a page.

The useful middle, medium and low, is where most backgrounds live: herringbone, honeycomb, scallop, brick. They give a surface a material without becoming a subject. When in doubt, lower the alpha before changing the pattern.

3. Text on a pattern

Each card shows text on its pattern in one of three ways, and the tag says which.

Over. The text sits straight on the pattern. Only low-contrast patterns allow this, and even then the body copy wants to be a size larger than it would be on a plain ground. Headings cope better than paragraphs because the strokes are heavier than the lines behind them.

Plate. The text sits on a solid panel in the ground colour, with the pattern around it. This is how posters, labels and packaging have always handled a loud pattern. The plate's margin is the design decision: tight is a label, generous is a poster.

None. The pattern is a border or a band, not a ground, and the text lives elsewhere.

4. Scale

The same pattern at three scales is three different patterns. Herringbone at 24px is tweed; at 60px it is a floor. The polka dot at 22px is a dress; at 80px it is a Yayoi Kusama room. Every detail page has a scale slider, and the code box follows it, so you copy the size you were looking at.

Two rules. Match tile size to something in the layout, usually the spacing unit or the body line height, so the pattern and the type agree. And scale the gap, not the line: a 1px pinstripe stays 1px whether it repeats every 6px or every 16px, because the line is what the eye measures.

5. Colour comes from the palette

No pattern here owns a colour. Each one draws with the roles of a palette: ground, text, muted, accent and line, the same five roles the Typefaces specimens use, and the pattern says which role it draws with and at what alpha. That is why the recolour strip on every page works: the pattern is the same code on a different palette.

The choice of role is the main design decision. A pattern drawn in the line role is always a surface. One drawn in the text role at low alpha is a tone of the ground. One drawn in the accent is a figure, and it is also the cheapest way to get a second colour onto a page at a low dose: the dot in the octagon tile, the cross in the plus grid, the overcheck in the argyle.

Dark palettes invert the logic without any change to the code, because the text role is light. Blueprint is graph paper on navy; it looks like a different pattern, and it is the same four gradients.

6. Geometry

The first batch is pure shape: twenty-four patterns that are nothing but lines, dots and polygons, built in all three kinds so the engine was proven on the hardest cases first. They divide by what the eye does with them.

Grids are neutral. Graph paper, blueprint, ruled lines and the plus grid are the backgrounds that disappear. They suit product pages, documentation and notebooks, and they are the only patterns in the library that can be matched exactly to a layout grid. The plus grid is the most product-flavoured of them because it is what a design tool draws.

Stripes have a direction and a mood. Vertical and fine is tailoring, pinstripe. Diagonal is drawing, the hatch. Horizontal and wide is nautical, the Breton stripe. Crossed at a small scale they become a tone, crosshatch; crossed wide and translucent they become cloth, gingham.

Tiles say where you are. Running bond is a street, octagon-and-dot is a hotel floor, basketweave is a market, herringbone is a parquet or a jacket depending on scale. These carry place better than any colour does, which is why hospitality brands reach for them.

Lattices are modern. Honeycomb, triangles, overlapping circles. They read as systems rather than materials and sit easily under geometric sans headings. Tumbling blocks is the exception: three tones make it an illusion, and an illusion is a figure.

Classical ornament is loud. The meander and the argyle are patterns with a pedigree, and they bring it with them. Use them as borders and bands rather than grounds, and let the type match their weight.

Texture is not a shape. Fine grain and the halftone ramp close the batch because they are what the generated kind is for: tone without geometry. Grain under everything is the cheapest way to make a flat page feel printed.

7. Living surfaces

The second batch adds motion, and it adds it in three modes that cost very different amounts and say different things.

Drift slides the tile. One CSS keyframe on background-position, no script, runs on the compositor. Rain is a hatch drifting down; a conveyor is a brick wall drifting sideways; a starfield is dots drifting at three pixels a second. The one rule that makes it work: move by exactly one tile per cycle, so the loop has no jump. Drift is the mode that says a process is running.

Breathe changes a value instead of a position. A registered custom property, @property, lets the browser interpolate a length, an angle or a percentage inside a gradient, so dots can swell, grid lines can fade, a gold sheen can rotate once a minute, and rings can expand forever. Nothing moves across the page, so the eye has nothing to track. Breathe is the mode that says the surface is alive but idle, and it is the only one safe behind a paragraph at any density.

Flow redraws a canvas tile every frame: caustics, aurora, fog, waves, particles, fireflies and film grain. These are the animations people mean when they say animated texture, and they are the only ones that need a running script. The site draws them at the frame rate each pattern names, usually 20 to 24, only while the card is on screen, and tiles the result with createPattern so a 128 pixel tile fills a hero for the cost of a thumbnail.

Subtle, in numbers. Every drift in the batch moves under ten pixels a second, most under five; every breathe has a period of five seconds or more; every flow loops on a period between six and thirty seconds. Alpha stays under 35 percent for anything text sits on. The checker warns at twelve pixels a second. Faster than that is a loading indicator, not a background.

What stops it. All three modes stop under prefers-reduced-motion: the CSS animations are cancelled by a media query, and the flow canvases draw one frame and hold it. Every detail page has a Pause button, and the copied CSS includes the reduced-motion rule. Motion that cannot be refused is not subtle, whatever its speed.

Which mode when. Drift for logistics, progress and weather. Breathe for calm states, wellness and anything that must sit behind reading. Flow for the hero only: water, sky, night, computation. If in doubt, breathe.

8. Textile

The third batch is cloth: weaves, checks, plaids, knits and resist dyes. Where it could, each pattern is drawn as the cloth is made rather than as it looks, because the construction is what the eye recognises.

Weave is arithmetic. Houndstooth is not a drawn shape; it is a 2/2 twill with four dark and four light threads, and the tooth falls out of the over-and-under. Twill, denim, Oxford cloth and tweed are the same idea at a smaller scale: a diagonal rib or a tiny basket that reads as a tone. These are the textile grounds that can carry body text.

Checks are overlap. Tartan, madras, buffalo check and gingham are translucent bands crossed with themselves, so the overlaps compound into extra tones from one or two colours. The sett, the sequence of widths, is the identity: wide and dark is Highland, uneven and bright is a beach club, two-inch red and black is a lumber camp. Thin crossings, windowpane and tattersall, are light enough to read across.

Knits are stitches. Stockinette is columns of Vs, rib is ridges with a shadow, cable is two ropes where one visibly passes over the other, and Fair Isle is a knitting chart in square stitches. Drawing the stitch rather than the outline is what makes them read as wool. They say warmth and handwork, and they suit handwritten and soft display faces.

Resist dyes are imperfect on purpose. Ikat feathers sideways, shibori rings wobble, batik cracks and block prints land off register. Every one of these is seeded or jittered so the imperfection is fixed and repeatable, and every one is a craft from a particular place. Use them with the respect a borrowed tradition deserves: name it, and do not reduce it to a mood.

Bold cloth needs a plate. Houndstooth, kente, mudcloth, Fair Isle, patchwork and the big plaids are figures, not grounds. Set the text on a plate, give the heading real weight, and let the cloth be the ornament.

9. Fine paper

The fourth batch is paper: the stocks a printer would show you in a swatch book, and the finishes and edges that go on them. Every one is meant to carry text at full density, so every one is quieter than anything earlier in the library. Most sit under 8 percent; nothing goes over 12.

How to read a paper swatch. At card size most of these look like a flat colour, and that is correct. Open the detail page, where the hero is magnified 1.6 times, and look at the edge of the text rather than the middle of the field: the stock shows where the eye rests between letters. Then switch it off in your head. If the page goes flat and a little digital, the texture was doing its job. If you noticed the texture before the heading, it is too strong.

How little a page needs. Eggshell is four levels of grain and nothing else, about 1.5 percent, and it is enough to stop a screen looking like a screen. Wove adds a two-sine mottle at 2 percent so the sheet is not perfectly flat. Past about 10 levels of grain the surface starts to read as noise, and past 12 percent alpha any line becomes a rule. Paper is the one family where the safe setting and the right setting are the same.

Grain, mottle and finish. The stocks fall into three families. Grain stocks (wove, eggshell, rag, newsprint, kraft, carbon) are random pixels and fibres: they say what the paper is made of. Mottle stocks (vellum, parchment, blotting paper, marbled endpaper) are low-frequency clouds of sine noise with integer wavenumbers, so they tile without a seam: they say how old the sheet is, or what has soaked into it. Finish stocks (laid, linen, felt, cold press, hammered, canvas) are the marks of a mould, a felt or an embossing roller, drawn as relief lit from the top left: they say how the paper was made, and they are the ones people mean when they say textured.

The luxury signals. A small set of stocks says expensive without saying anything else: laid with its chain lines, cotton rag with an occasional thread, a blind emboss that uses no ink at all, a letterpress rule pressed into the sheet, a gilt edge, a deckle. They work because they are almost invisible; the reader feels care before they see it. Two of them, gold foil and pearlescent, move: a sheen that turns over 20 or 90 seconds, slow enough to read as light rather than motion. Use one signal per page. Laid paper with a gilt edge and a foil sheen is a wedding invitation trying too hard.

Edges are frames. Deckle and gilt edge are not grounds. They are tall tiles anchored to the top of the element, so the band appears once; in your own CSS add background-repeat: repeat-x. Put them on the card, not the page.

Faces. Paper rewards the faces that were cut for it: old-style serifs on wove and laid, engraved and Didone faces on rag and foil, Caslon on letterpress, typewriter faces on carbon copy, slabs on kraft, Mincho on washi. A geometric sans on parchment is a costume; on eggshell it is an annual report.

10. Soft futures

The fifth batch is the future, and almost none of it is a motif. There are no rockets, rings or starbursts here. The believable future, the one in product photography and new buildings, is a quality of light: a sheen that moves when the card tilts, a film that shifts colour, a screen you can see only when you lean in, glass that changes tint as you walk past. That is what these 24 surfaces draw.

Film and sheen. Hologram, soap film, dichroic glass, lenticular, satin and dawn horizon are light on a surface rather than marks on it. Most use literal spectral colours, because no palette role is a rainbow, and every one of those colours sits at 5 or 6 percent. The hologram is the only exception, with a single white catch-light; on a white page even that disappears and only the slow spectral turn is left.

Screens and glass. The screen door, OLED black and e-ink are displays at rest: a 3 or 4 pixel grid at 1 to 3 percent, or a capsule grain with the cell grid under it. Frosted glass, solar glass, glass caustics and light through blinds are what glass does to light. Brushed aluminium and woven carbon are the hardware around the glass. These are the grounds for spec sheets, device pages and developer tools, and they want tight grotesks and monos.

Grown and recycled. The hopeful part of 2036 is its materials. Mycelium foam is packaging that was grown, recycled terrazzo is a floor made from the building that stood there before, bio-resin is a cast panel with its fibres and bubbles left in, sensor knit is a fabric that measures. They are drawn as materials, lit from above or from the left, so they read as something you could touch. Moon dust belongs with them: the space age as a grey grain with a few craters, not a starfield.

Why slow, and why under six percent. Light changes slowly. A sheen that turns once a minute reads as the room; one that turns every five seconds reads as an animation, and an animation behind text is a distraction. So every period here is 12 seconds or more and every drift is under 4 pixels a second. The alpha ceiling is the same argument in space: above about 6 percent a sheen becomes a stripe and a film becomes a rainbow. At card size most of this batch looks like a flat colour, and that is correct. If a tile reads as a pattern rather than a surface, it is too strong.

The loud future is a quotation. Googie boomerangs, space-age starbursts, chrome and neon grids are wonderful, and they belong on the page as a figure: a badge, a poster, one panel that says 1962 on purpose. As a ground they turn every page into a costume. Lenticular is the one playful surface here for that reason, and even it is a ridge at 4 percent. Put the retro-future on top of a soft one, not under the text.