Geometric design: grids, shapes and pattern ideas

Geometric design builds visuals from regular shapes (circles, squares, triangles and straight lines) placed on a grid. It is the language of the Bauhaus, Swiss posters, Art Deco and most modern logos. It feels ordered, confident and timeless because the rules are visible: things line up, repeat and relate. Below is how to set up the grid, choose shapes on purpose, and make geometric patterns, including several you can draw in pure CSS.

Start with a grid layout

Shapes alone don't make a design geometric; alignment does. A grid gives every element a place: margins around the edge, columns across the frame, and gutters between them. Once it exists, every circle, block and line of text snaps to it, and the whole design starts to feel built.

The masters of this approach were the Swiss designers of the 1950s and 1960s, whose posters still look current. Swiss design covers their methods, and Bauhaus design shows where the love of circle, square and triangle began.

Choosing shapes on purpose

Each basic shape carries associations that are widely used in design teaching, though none are absolute. Use them as tendencies, and let the colour and context do the rest.

• Circle: complete, friendly, focused. Good for highlighting one thing, such as a date or a face.
• Square and rectangle: stable, honest, structural. The natural container for text and images.
• Triangle: directional and energetic. Points the eye, implies movement or tension.
• Line and stripe: rhythm and speed. Horizontal feels calm, diagonal feels dynamic.
• Semicircle and quarter circle: soften a strict layout while staying geometric, a favourite of modern posters.

Geometric pattern ideas

Patterns are geometric design at its most visible. The classics are stripes, checks, dots, rays, rings, chevrons and grids of lines. Keep to two or three colours, choose one scale, and decide whether the pattern is the hero (a poster, a wrapping paper) or a quiet background, in which case lower its contrast a lot.

Art Deco took rays, fans and stepped forms in gold and black; Memphis broke the grid with squiggles and confetti. Art deco design and Memphis design are both rich sources if you want a pattern with a period flavour.

Checks, dots and grids in CSS

Some patterns need the tile size set separately with background-size, so they repeat across a whole element. These three are the most requested. The css patterns article has many more, and repeating linear gradient explains hard stops in detail.

/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

Geometric design ideas to try this week

• One big circle: a single circle filling half a poster, with the event date set inside it.
• Stripe border: a band of awning stripes along the top of a menu or price list, nothing else patterned.
• Quarter circle corners: a quarter circle in each corner of a square post, in two alternating colours.
• Number on the grid: a huge figure (a year, a price, a count of days) aligned to the left column, small text beside it.
• Sunburst behind a product: low contrast rays radiating from behind a bottle or box on a shop banner.
• Graph paper notes: a tip carousel on a faint grid background, each slide with one rule written on it.

Each idea uses one geometric device and leaves the rest plain. That is usually enough to give a post a clear point of view, and it is easy to repeat across a whole series.

Keeping geometric designs readable

Fine, high contrast stripes can flicker on screens and turn to moiré when an app resizes your image, so test at the size people will actually see. Geometric order also pairs well with one soft element: a single organic shape on a strict grid adds warmth without breaking the system. In Gradiently, the Designer can lay out a post on a clean grid in your brand's Mark and make every other size from it, so the alignment survives each format.