Style guide / Design /

Shapes

Organic, hand-drawn SVG shapes give our design system its handmade character. They're used across the site in hero sections, diagrams, and decorative elements – always rendered as filled forms that can carry textures or blend with one another.

Circles

The core building blocks of our shape system. Circle variants appear in Venn diagrams and hero sections – each has a subtly different organic contour, so using different variants together avoids visual repetition.

circle

Primary circle. Default shape in OverlappingCircles.

circle2

Second variant. Typically the right circle in Venn diagrams.

circle3

Third variant. Used as the centre circle in three-circle layouts.

Rectangles

Blocky organic forms with varying proportions. Used in hero sections and layout compositions to provide geometric contrast alongside circles.

rectangle

Primary rectangle.

rectangle2

Wider variant.

rectangle3

Square-proportioned variant.

rectangle4

Taller, portrait-oriented variant.

Polygons

Angular organic forms that add directional energy and visual variety to compositions.

triangle

Hand-drawn triangle with organic edges.

pentagon

Five-sided organic shape.

Symbols

Expressive marks with strong visual weight. Each retains the hand-drawn quality of the broader shape library.

cross

Organic X mark.

tick

Organic checkmark.

Compound shapes

Multi-element compositions rendered as a single SVG path. Useful for richer visual arrangements in hero sections and decorative contexts.

threecircles

Three circles in a horizontal row.

sixcircles

Six circles in a cluster arrangement.

threerectangles

Three rectangles side by side.

Where shapes are used

  • PageHero – The animated shape in landing page heroes. Accepts any ShapeType via the shape prop.
  • OverlappingCircles – Venn diagram component. Each circle can use a different shape variant (typically circle, circle2, circle3) via the per-circle shape prop.
  • CircleCluster – Connected nodes diagram. All nodes share a single shape (default: circle2), set via the shape prop.
  • QuoteBlock – A pair of speech marks, filled with texture. The path is defined inline in the component rather than in the library, as it's specific to that context.
  • Section borders – Organic top and bottom edges on sections, rendered by the Border component. Border shapes (paint and torn edges) live in src/assets/borders/ as their own SVGs rather than in the main shape library, but follow the same hand-drawn aesthetic. Used via the borderTop and borderBottom props on Section and QuoteBlock.

See also

  • Diagrams – How shapes are composed into interactive Venn and cluster diagrams.
  • Textures – Overlay textures that can be clipped to shapes.
  • Device screenshots – A separate visual system for device frames and composite layouts.

Adding a new shape

  1. Create the shape in Illustrator with an organic, hand-drawn aesthetic.
  2. Export as SVG with these settings: Presentation Attributes styling, Layer Names for IDs, 2 decimal places, minified, responsive (uses viewBox).
  3. Clean up the exported SVG – remove <title>, <desc>, <metadata>, any fill or style attributes. The result should be a single <path> inside an <svg> with a viewBox.
  4. Save to src/assets/shapes/[name].svg.
  5. Add the new name to the ShapeType union in src/data/shapes.ts.

Target SVG structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 725">
  <path d="M254.77,362.43c0,10.66..."/>
</svg>

Technical details

Shapes are imported at build time using Vite's ?raw loader and parsed by parseSvg() in src/data/shapes.ts. This extracts the viewBox and path data, which components render as inline SVG. Colours are applied at render time via the fill attribute – never baked into the SVG file.