Skip to main content

Patterns

The reusable visual patterns that recur across the site. Each section shows what a pattern looks like and when it appears. For props and import details, see Code / Astro components.

Buttons

A single button style, used for primary calls to action. The arrow animates rightward on hover.

Links

Inline links use fire-dark. A sunshine underline animates in on hover – no colour change, just the line.

This is a paragraph with an inline link that demonstrates the hover behaviour. Hover over it to see the underline.

Cards

Cards are used for our content collections: ThoughtCard for articles, PortfolioCard for case studies and ResourceCard for resources. All share the same base pattern: limestone-dark background, rounded corners, a subtle lift on hover. When a hero image is present it scales gently on hover. Cards are shown here without images for clarity.

Callouts

An aside box for drawing attention to a key point within article content. Text colours adapt automatically for dark backgrounds.

Quotes

A quote block with speech marks backed by ink texture. On content pages it runs full-width; composes cleanly with paint and torn border decorations.

“A wesite isn't a filing cabinet; it's more like a garden.”

Someone at Contentious

Borders

Decorative horizontal borders in two styles. Paint has a hand-painted edge; torn simulates a torn-paper edge with a two-tone treatment. Both sit naturally at the top or bottom of a section, framing the content between them.

Paint
Torn