# Seeds of Renaissance Design System

> The brand and design system for Seeds of Renaissance: feel, voice, colour, type, layout, woodcut graphics, photography, logo, components and whole-page examples, with the CSS to build from. Version 0.1. Every .md link below is raw markdown.

To make something: read AGENTS.md first. It is the roadmap: find your job, read only what its route names, copy its example, check its list. Its paths are relative to this site (and to projects/sor-design-system/ in the life-itself/design repo, which agents with a checkout should read instead). Topic pages hold the detail; you rarely need them for a first draft.

## Start

- [AGENTS.md](https://design.seedsofrenaissance.org/AGENTS.md): start here. The roadmap for agents: rules that apply everywhere, then one route per job (social post, website page, episode cover, slides, diagram, paper, email, assets, check, maintain)
- [BUILD.md](https://design.seedsofrenaissance.org/BUILD.md): the brief in one paragraph, the rules and the checklist, for people
- [examples.md](https://design.seedsofrenaissance.org/examples.md): every kind of thing we make, with its guide and examples to copy

## Topics

- [brand.md](https://design.seedsofrenaissance.org/brand.md): why Seeds of Renaissance exists, offers, who we speak to, names
- [feel.md](https://design.seedsofrenaissance.org/feel.md): grounded hope, what we are not, registers, principles
- [voice.md](https://design.seedsofrenaissance.org/voice.md): how we sound, key lines, rewrites, calls to action
- [colour.md](https://design.seedsofrenaissance.org/colour.md): grounds, inks, the one accent and the illustration inks for graphics, with roles and rules
- [type.md](https://design.seedsofrenaissance.org/type.md): the four faces, the scale, and why
- [layout.md](https://design.seedsofrenaissance.org/layout.md): grounds and rhythm, torn edges, grid and spacing
- [graphics.md](https://design.seedsofrenaissance.org/graphics.md): the graphics library: the sprite (swallow, seal, seeds), woodcuts, animals, prints, botanicals, washes, line figures and marks, mountains; what each is for, its colours, grounds and rights, and a gallery per set (graphics/<set>). Machine-readable: system/graphics/<set>/elements.json
- [photography.md](https://design.seedsofrenaissance.org/photography.md): what to choose and avoid (all current photos are placeholders)
- [logo.md](https://design.seedsofrenaissance.org/logo.md): the chosen logo, colourways, lockups, files and placement; every file shown on the logo files page (logos.md)
- [components.md](https://design.seedsofrenaissance.org/components.md): every component, when to use it, HTML to copy

## Guides by kind

- [website.md](https://design.seedsofrenaissance.org/website.md): web pages: page shell, section menu, checklist
- [social.md](https://design.seedsofrenaissance.org/social.md): social media in every shape; Instagram posts done as a Canva kit (examples/social/instagram/)
- [youtube.md](https://design.seedsofrenaissance.org/youtube.md): YouTube thumbnails and channel art
- [podcast.md](https://design.seedsofrenaissance.org/podcast.md): every podcast image: the episode cover (Canva kit in examples/youtube/canva-kit/), Instagram episode posts, show art and episode art (examples/podcast/); the swallows-and-fingerprints ground
- [slides.md](https://design.seedsofrenaissance.org/slides.md): slide decks: the slide types; decks to copy in examples/slides/
- [print.md](https://design.seedsofrenaissance.org/print.md): papers as PDF and posters: covers, anatomy of a paper, and the process (design, editorial craft, Typst pipeline)
- [diagrams.md](https://design.seedsofrenaissance.org/diagrams.md): diagrams, figures and charts: type, drawing style, charts, the signature, how to build one as SVG; examples at https://design.seedsofrenaissance.org/examples/diagrams/index.html
- [email.md](https://design.seedsofrenaissance.org/email.md): the newsletter: constraints to design within

## Code

- [reference.md](https://design.seedsofrenaissance.org/reference.md): everything in one place, one row each with its path: graphic sets, logo files, fonts, every token with its value, components, kits, examples
- [system/tokens.css](https://design.seedsofrenaissance.org/system/tokens.css): every colour, face, size and space
- [system/components.src.css](https://design.seedsofrenaissance.org/system/components.src.css): components, readable source
- [system/components.css](https://design.seedsofrenaissance.org/system/components.css): components, built (link this one)
- [system/graphics/README.md](https://design.seedsofrenaissance.org/system/graphics/README.md): the graphics library files and the elements.json schema; each set at system/graphics/<set>/elements.json

## Optional

- [prompts.md](https://design.seedsofrenaissance.org/prompts.md): prompts people paste into agents, and the block to add to another repo's AGENTS.md
- [guide.html](https://design.seedsofrenaissance.org/guide.html): the whole system rendered on one page (visual; HTML)
- [about.md](https://design.seedsofrenaissance.org/about.md): where the source lives, how to contribute, where older material is kept
- [MAINTAINING.md](https://design.seedsofrenaissance.org/MAINTAINING.md): how this site is built and published