Seeds of Renaissance Design System

Seeds of Renaissance Design System

How Seeds of Renaissance looks and sounds, with the rules, the files and the examples to build from. Version 0.1. The photographs shown are mood board placeholders, not cleared for public use.

Make
I'm making something

A social post, a web page, a podcast cover, slides, a paper, a diagram. Pick what you're making: its guide, with the rules and an example to copy.
Assets
I need a file

Everything on one page: every logo file, graphic, font, colour and size, with where to find it.
Brand
I want to understand it

A five-minute tour: who we are and who we speak to, the feel, the voice, then colour, type, graphics and layout.

Working with an AI agent? Copy a prompt from Use with an agent. Agents start at the roadmap, which tells them what to read for each job.

Make something

What are you making? Each guide has the rules for it and an example to copy.

All of them on one page: Examples.

Get an asset

  • Reference: everything on one page, one row each, with where its files are.
  • Logo: the rules and where it goes. Every logo file: five colourways, five lockups, SVG and PNG.
  • Graphics: the library. Woodcut swallows, seeds and seals, animals, mountains, botanicals, washes, line geometry, marks and prints, each with its gallery and rules.
  • Photography: what to choose and avoid.
  • Fonts: the four faces and where they come from, in Type.
  • Code: tokens.css (every colour, face, size and space) and components.css, with the HTML to copy in Components.

Understand the brand

Start with the five-minute tour: the whole system in one read, with a picture of each part. The pages below are the in-depth version.

  • Brand: why Seeds of Renaissance exists, what we offer, who we speak to, our names.
  • Feel: grounded hope; the three registers; what we are not.
  • Voice: how we sound, the key lines, calls to action, rewrites.

Foundations

  • Colour: four grounds, three inks and one accent. Colour comes from photographs; buttons are black; the logo red is only for an occasional link.
  • Type: four faces. Length decides: Polyamine while it's short, Restora when it runs long. Bricolage Grotesque for reading, Apfel Grotezk for labels.
  • Layout: a page is a stack of full-width grounds, often joined by torn edges. One night section per page, plus the footer.
  • Components: headers, heroes, statements, pathways, calendars, bands, footers, each with the HTML to copy.
  • The whole system on one page: every chapter rendered with the real CSS.

How to contribute, and where older material is kept: About this site.

Edit this page