Reference
Everything in the Seeds of Renaissance design system, one row each: graphics, logo files, fonts, colours, sizes, components, kits and examples, with where the files are.
For when and how to use a thing, follow its link to the rules.
Paths are in the life-itself/design repo, inside projects/sor-design-system/. The same paths work on this site, after design.seedsofrenaissance.org/, except the font files, which are in the repo only.
Graphics · Logo · Fonts · Colours · Type sizes · Spacing · Fixed sizes · Components · Kits · Examples · Code
Graphics
Each set has a gallery of every file, on each ground it may use, with its path to copy. Rules for using them: Graphics.
| Set | Elements | Formats | Rights | Files |
|---|---|---|---|---|
| Sprite | 13 | Inline SVG symbols | Free to use | system/graphics.svg, listed in elements.json |
| Woodcuts | 24 | SVG | Free to use | system/graphics/woodcuts/elements/, listed in elements.json |
| Animals | 21 (91 versions) | SVG and PNG | Not cleared: drafts only | system/graphics/animals/elements/, listed in elements.json |
| Prints | 17 (30 versions) | SVG and PNG | Not cleared: drafts only | system/graphics/prints/elements/, listed in elements.json |
| Botanicals | 7 | PNG | Not cleared: drafts only | system/graphics/botanicals/elements/, listed in elements.json |
| Watercolour washes | 10 | PNG | Not cleared: drafts only | system/graphics/washes/elements/, listed in elements.json |
| Line figures and marks | 17 | PNG; SVG where small | Not cleared: drafts only | system/graphics/lines/elements/, listed in elements.json |
| Mountains | 8 (26 versions) | PNG; the linocut also SVG | Not cleared: drafts only | system/graphics/mountains/elements/, listed in elements.json |
117 elements in 8 sets.
Logo
Every file shown on its ground: Logo files. Which version goes where: Logo. Each version comes in five colourways: colour, colour-dark (for dark grounds), black, white and red.
| Version | Colourways (SVG) | Formats | Path |
|---|---|---|---|
| Horizontal, the main logo | colour · colour-dark · black · white · red | SVG; PNG 1200 and 2400px | system/logo/lockups/seeds-logo-horizontal-<colourway>.svg |
| Two lines, left | colour · colour-dark · black · white · red | SVG; PNG 1200 and 2400px | system/logo/lockups/seeds-logo-two-lines-left-<colourway>.svg |
| Two lines, right | colour · colour-dark · black · white · red | SVG; PNG 1200 and 2400px | system/logo/lockups/seeds-logo-two-lines-right-<colourway>.svg |
| Stacked | colour · colour-dark · black · white · red | SVG; PNG 1200 and 2400px | system/logo/lockups/seeds-logo-stacked-<colourway>.svg |
| Wordmark, the name alone | colour · colour-dark · black · white · red | SVG; PNG 1200 and 2400px | system/logo/lockups/seeds-logo-wordmark-<colourway>.svg |
| The mark alone | colour · colour-dark · black · white · red | SVG; PNG 1130px | system/logo/mark/seeds-mark-<colourway>.svg |
| The mark drawn for each size | 16, 24, 32, 48, 64, 96, 128, 180, 256, 512, 1024px | PNG; @2x up to 128 | system/logo/mark/sizes/seeds-mark-<colourway>-<px>.png |
| Favicon | favicon.ico | ICO: 16, 32, 48px | system/logo/favicon.ico |
Fonts
Four faces. Which one to use: Type. Fallbacks: Fraunces for Polyamine and Restora, Hanken Grotesk for Apfel Grotezk, both from Google Fonts.
| Face | Token and role | Weights | Files | Licence |
|---|---|---|---|---|
| Polyamine | --font-display: headlines, titles, wordmark: anything up to ~10 words | One weight (Regular) | Polyamine-Regular.woff2 in system/fonts/ (repo only) | Commercial, not yet licensed: drafts only. Shows only where installed; elsewhere Fraunces. |
| Restora | --font-quote: display text that runs longer than ~10 words: pull quotes, standout passages; --font-poem: the poetic voice: Restora italic | Eight weights, thin to black, with italics | Restora-ExtraLight.woff2, Restora-ThinItalic.woff2 in system/fonts/ (repo only) | Commercial, not yet licensed: drafts only. Shows only where installed; elsewhere Fraunces. |
| Bricolage Grotesque | --font-body: everything you read | 300 to 700 (variable); light 300 for statements | None in the repo: Google Fonts | Free (SIL OFL). Loaded from Google Fonts. |
| Apfel Grotezk | --font-label: eyebrows, buttons, dates, captions numbers | Regular 400, Mittel 500, Fett 700 | ApfelGrotezk-Regular.otf, ApfelGrotezk-Mittel.otf, ApfelGrotezk-Fett.otf in system/fonts/ (repo only) | Free (SIL OFL). Embedded in system/fonts.css, so it loads anywhere. |
Colours
From system/tokens.css. Use the token, not the hex, wherever CSS is available. Rules: Colour.
| Token | Hex | Group | Use | |
|---|---|---|---|---|
--white | #ffffff | Grounds | Pure white sections: openness, the page at its most awake | |
--paper | #fbfaf6 | Grounds | The default page: warm near-white | |
--sunlight | #fbefc4 | Grounds | Pale yellow: background only, never text, never highlight | |
--night | #171613 | Grounds | At most one night section per page, plus the footer | |
--ink | #1b1916 | Ink | All text on light grounds, and every button | |
--muted | #5d584f | Ink | Secondary text, captions, labels | |
--rule | #e0dacf | Ink | Hairlines on light grounds | |
--chalk | #ece7dc | On night | Text on night | |
--night-muted | #a49e93 | On night | Secondary text on night | |
--night-rule | #38342e | On night | Hairlines on night | |
--red | #e5201c | Accent | The logo red: only an occasional link in running text, and footnote marks | |
--print-blue | #03296f | Illustration inks | Cobalt | |
--print-green | #1f3d2b | Illustration inks | Deep green | |
--print-mustard | #c9a227 | Illustration inks | Mustard yellow | |
--print-page | #ffffff | Pages are white, unfilled: the PDF is read on screen, and if printed the stock gives any warmth |
Type sizes
Fluid sizes scale with the width of their container (cqi) between the smallest and largest values. Print sizes are under Fixed sizes.
| Token | Value | Use |
|---|---|---|
--t-hero | clamp(40px, 7cqi, 96px) | One statement per page, 5–10 words |
--t-title | clamp(40px, 6cqi, 84px) | Page title on inner pages |
--t-section | clamp(36px, 5cqi, 64px) | A section headline |
--t-band | clamp(30px, 4.4cqi, 56px) | |
--t-card | clamp(24px, 2.5cqi, 32px) | Card and pathway titles |
--t-item | 26px | List item titles (calendar, contents) |
--t-interlude | clamp(26px, 3.4cqi, 42px) | A poetic line set alone |
--t-quote | clamp(26px, 3.4cqi, 38px) | Pull quote |
--t-lead | clamp(20px, 2.4cqi, 28px) | Statement paragraphs, light weight |
--t-intro | clamp(17px, 1.9cqi, 21px) | Hero standfirst |
--t-reading | 19px | Long-form article text |
--t-body | 17px | |
--t-small | 15px | |
--t-caption | 14px | |
--t-button | 13px | |
--t-label | 12px | |
--t-meta | 11px | |
--lh-display | .95 | |
--lh-heading | 1.1 | |
--lh-body | 1.55 | |
--lh-reading | 1.65 | |
--track-label | .16em | Uppercase labels |
--track-button | .12em | |
--track-meta | .14em |
Spacing
| Token | Value | Use |
|---|---|---|
--gutter | clamp(16px, 4cqi, 56px) | Page side padding |
--section | clamp(44px, 7cqi, 96px) | Vertical padding of a section |
--gap-s | 12px | |
--gap-m | clamp(16px, 2.6cqi, 32px) | Between cards |
--gap-l | clamp(24px, 5cqi, 72px) | Between columns |
--measure | 680px | Long-form reading width |
--tear-height | 22px | |
--shadow-print | 0 18px 40px -22px rgb(27 25 22 / .55) | A photograph laid on the page |
--shadow-object | 0 30px 50px -30px rgb(27 25 22 / .7) | A printed object: magazine, book |
--tilt | 1.6deg | Prints sit slightly off-square |
--grain-opacity | .14 |
Fixed sizes
Thumbnails, channel art and papers are fixed artboards, so their sizes are fixed too: px at the artboard's full size, and pt and mm on paper.
Thumbnails
| Token | Value | Use |
|---|---|---|
--thumb-w | 1280px | |
--thumb-h | 720px | |
--thumb-title-xl | 110px | Podcast: short title in the paper column (three lines at most) |
--thumb-title-l | 122px | Talk: title over a photo |
--thumb-title | 104px | Gathering: title on the torn white strip |
--thumb-title-m | 96px | Manifesto: a sentence-length quote |
--thumb-byline | 52px | "with Guest Name", Polyamine |
--thumb-label | 28px | Apfel labels: series, date |
--thumb-label-s | 24px | Footer labels beside the logo |
--thumb-meta | 20px | Figure number on a photo |
--thumb-pad | 64px | Outer margin for text |
--thumb-inset | 46px | Corner inset for logo and marks |
--thumb-logo | 116px | Logo on white or paper |
--thumb-tear | 34px | Torn edge depth at artboard scale |
Podcast guest thumbnail
| Token | Value | Use |
|---|---|---|
--thumb-label-l | 40px | A label that must read at feed size: the podcast name |
--thumb-name | 64px | Guest name, Bricolage semibold |
--thumb-guest-w | 680px | Width of the greyscale portrait on the right |
--thumb-disc | 92px | Logo on its white disc, bottom left |
YouTube channel art
| Token | Value | Use |
|---|---|---|
--yt-banner-w | 2560px | |
--yt-banner-h | 1440px | |
--yt-strip-h | 423px | The desktop strip, full width |
--yt-safe-w | 1546px | The safe area: what phones show |
--yt-avatar | 800px | |
--yt-watermark | 150px | |
--yt-video-w | 1920px | |
--yt-video-h | 1080px | |
--yt-wordmark | 112px | "Seeds of / Renaissance" on the banner, Polyamine, two lines |
--yt-tagline | 50px | Banner tagline, the poem voice |
--yt-banner-logo | 236px | Logo on the banner |
--yt-l3-label | 30px | Lower third: series label |
--yt-l3-name | 76px | Lower third: guest name, Polyamine |
--yt-l3-role | 36px | Lower third: role or one line about the guest |
| Token | Value | Use |
|---|---|---|
--print-w | 210mm | A4. US Letter is 215.9 × 279.4mm with the same margins |
--print-h | 297mm | |
--print-m-top | 22mm | To the top of the text block; running head sits in it |
--print-m-bottom | 26mm | Folio sits in it |
--print-m-inner | 24mm | |
--print-m-outer | 20mm | Text block 166mm wide at A4: two-thirds of it is the measure |
--print-measure | 118mm | About 70 characters at body size |
--print-margin-col | 38mm | Side column beside the measure: notes on figures, pull quotes hang into it |
--print-cover-title | 46pt | Polyamine, the cover only |
--print-title | 30pt | Polyamine: cover, title page, contents and chapter titles. Nowhere else inside |
--print-h2 | 19pt | Restora, sentence case: section heads in the run of text (all-caps Polyamine tires at length) |
--print-h3 | 14pt | Restora medium: sub-sections in the run of text |
--print-standfirst | 13pt | Restora: subtitle, chapter summary |
--print-quote | 15pt | Restora italic: pull quotes |
--print-epigraph | 11.5pt | Restora italic |
--print-body | 10.5pt | Bricolage, light-regular |
--print-lh | 14.5pt | The baseline: everything sits on multiples of it |
--print-summary | 9.5pt | Section summary box |
--print-caption | 8.5pt | |
--print-note | 8pt | Footnotes, line height 11pt |
--print-label | 7pt | Apfel uppercase: running heads, folios, figure numbers, series line |
--print-track | .16em |
Components
The HTML to copy for each one is in Components; all of them rendered in the whole system on one page.
| Component | Class | When |
|---|---|---|
| Base and type roles | .sor, .gutter, .section, .ground-white, .display, .label and 2 more | Listed in a table on the page |
| Buttons, links, fields | .btn | One solid button per section for the main action; outline for secondary actions; .text-link inside lists |
| Site header | .site-header | Every page |
| Photo hero | .hero-photo | The one statement of a landing page, over a strong landscape photograph |
| Split hero | .hero-split | A landing page without a strong landscape photo |
| Page title | .page-hero | Inner pages |
| Statement | .statement | What we believe |
| Pathways | .pathways | The four ways to take part |
| Selected work (night) | .selected | The page's one deep section: podcast, essays, art |
| Printed object | .object-feature | The magazine or a book |
| Calendar | .calendar | Upcoming dates, text only |
| Events | .events | Gatherings with photographs |
| Band | .band | One call to action across the page, on sunlight |
| Interlude | .interlude | A single poetic line between sections |
| Engage | .engage | Newsletter, join, support, near the end of a page |
| Long reading | .reading | Articles, the manifesto |
| Contents | .contents | A magazine's table of contents, or any numbered list of works |
| Footer | .site-footer | Every page |
| More components | .actions, .swallows, .table-wrap, .hero-banner, .steps, .voices and 6 more | Copy the markup from the example pages named |
Kits
Files ready to drop into Canva or a build, with the steps.
| Kit | What's in it | Path |
|---|---|---|
| Instagram kit | Five post templates, 4:5 and 1:1: backgrounds, the logo lockup, layers, guides and finished examples. Download all (zip) | examples/social/instagram/png/ |
| Podcast thumbnail kit | The episode cover for YouTube in Canva: background, layers, guides and positions, 2560 × 1440 | examples/youtube/canva-kit/png/ |
| Podcast show art | Show art, episode art ground and guides, 3000 × 3000 | examples/podcast/png/ |
| Diagram helpers | Python functions for type, panels, arrows and the signature; build a figure as SVG | examples/diagrams/build.py |
| Slide decks | The deck CSS and script, and two decks to copy | examples/slides/ |
| Signature | The mark and URL that sign a figure, light and dark, SVG and PNG | system/img/signature*.svg |
Examples
Whole pages built only from the system, to copy. Grouped with their guides in Examples.
| Kind | Page | Path |
|---|---|---|
| Website | Gatherings template | examples/web/gatherings.html |
| Website | Home template | examples/web/home.html |
| Website | Join template | examples/web/join.html |
| Website | Magazine template | examples/web/magazine.html |
| Website | Manifesto template | examples/web/manifesto.html |
| Website | White paper template | examples/web/white-paper.html |
| YouTube | YouTube thumbnails | examples/youtube/index.html |
| YouTube | YouTube channel art | examples/youtube/channel.html |
| Social | Instagram Post Templates | examples/social/instagram/index.html |
| Slides | Slides | examples/slides/index.html |
| Slides | Slides: Gathering | examples/slides/gathering.html |
| Slides | Slides: Study | examples/slides/study.html |
| Diagrams | Diagram examples | examples/diagrams/index.html |
| Print examples | examples/print/index.html |
Code
| File | What | Path |
|---|---|---|
| tokens.css | Every colour, face, size and space, with its role | system/tokens.css |
| components.css | Every component (link this one). Readable source: components.src.css | system/components.css |
| fonts.css | Apfel Grotezk embedded; Polyamine and Restora by name only. Link it, don't read it: it is long | system/fonts.css |
| graphics.svg | The sprite symbols, for <use href="#id">; graphics.js puts them in a page | system/graphics.svg |
| sor.js | Small behaviours: the selected-work picker | system/sor.js |
| The whole system on one page | Every chapter rendered with the real CSS | guide.html |
| Photographs | Mood board placeholders, not cleared for public use | system/img/*.jpg |
