Graphics
Graphics
Printmade marks, slightly rough at the edge: woodcuts and prints, painted botanicals and washes, line figures and marks, and drawn mountains. Every set is below, with a gallery of every file on any ground it may use. Part of the SoR design system; see them in a page in guide.html.
Woodcut and print
Carved and printed marks: black shapes, white cuts, a rough printed edge.
Sprite
Site furniture: the hero flock, the closing seal, pathway seeds, dividers.
Woodcuts
Punctuation anywhere: one per section, beside a heading, a quote or a list.
Animals
A creature to carry a story: social posts, podcast and magazine pages, section openers.
Prints
Printed texture at size: covers, grounds under a transparency, the podcast flock.
Painted
Watercolour, ink and colour plates, kept in the colours they were painted in.
Line
Geometry and interlaced marks in plain black line.
Landscape
Pen, brush and linocut mountains in their drawn blues.
Brand marks
The logo and the marks built from it. Rules in their own guides.
Rules
- One graphic moment per section at most. They are punctuation, not wallpaper.
- Keep each set to the colours in the table: woodcuts take the ink of the ground or one of the three illustration inks; painted and printed sets keep the colours they were made in. Never use a set's own colours on other graphics. Don't outline graphics or add drop shadows.
- One ink per graphic. Two or more on a page is fine if each graphic keeps to one.
- Keep each set to its grounds. Only the woodcuts and the sprite turn chalk on night.
- Don't mix in drawn suns or icon-set icons.
- Elements are cropped close to their edges, so add space in the layout instead of expecting it in the file.
- Registers (feel.md) say where a set fits: Study (papers, essays), Conversation (manifesto, podcast, magazine, landing pages), Gathering (community, events).
| Set | Colour | Grounds | Registers | Formats | Rights |
|---|---|---|---|---|---|
| Sprite | Ink of the ground (currentColor): ink on light grounds, chalk on night. | White, Paper, Sunlight, Night | Study, Conversation, Gathering | Inline SVG symbols | Ours |
| Woodcuts | Ink of the ground: ink on light grounds, chalk on night, or one of the three illustration inks. The red seeds are the one red graphic; keep them occasional. | White, Paper, Sunlight, Night | Study, Conversation, Gathering | SVG | Ours |
| Animals | Black or one of the three illustration inks; a few also in their original colours. Never retint them in other colours. | White, Paper, Sunlight | Conversation, Gathering | SVG and PNG | Not cleared |
| Prints | As printed: never retint them to the illustration inks. Often used under a transparency; keep it subtle. The gold sun and the pale-yellow branch are kept by choice. | White, Paper, Sunlight | Conversation, Gathering | SVG and PNG | Not cleared |
| Botanicals | As painted. Never retint them, and never use their colours on other graphics. | White, Paper, Sunlight | Conversation, Gathering | PNG | Not cleared |
| Watercolour washes | As painted, translucent: each wash takes the colour of its ground. Never retint them. | White, Paper, Sunlight | Conversation, Gathering | PNG | Not cleared |
| Line figures and marks | Black only (–ink), fixed in the file: they don't follow the page colour or turn chalk on night. Don't tint them. | White, Paper, Sunlight | Study, Conversation | PNG; SVG where small | Not cleared |
| Mountains | The blue each was drawn in, cobalt or black. The drawn blues are for the mountains only: don't retint the mountains, and don't print other graphics in those blues. | White, Paper, Sunlight | Conversation, Gathering | PNG; the linocut also SVG | Not cleared |
Not cleared means traced or cut from mood board images whose rights are not cleared: fine for mockups and drafts; redraw, re-source or clear them before anything goes public. Draft marks single elements to redraw or re-source first; each gallery tags them.
The sprite
Include system/graphics.js at the top of the body; it inlines the symbols. Then:
<svg class="seed-icon" viewBox="0 0 100 100" aria-hidden="true"><use href="#s-wheat"/></svg>
Colour follows currentColor: the .woodcut class sets ink, and inside .night it turns chalk. Every symbol, with its viewBox and code: the sprite gallery.
| Symbol | viewBox | Use |
|---|---|---|
#wsw | 0 0 248 150 | The swallow. Single, or three in flight as a flock over a hero (.flock, see home.html). |
#seal | 0 0 120 120 | Swallow seal. Closes a long text (.seal), or sits in the corner of the night section (.seal-corner). |
#s-sunflower | 0 0 100 100 | Seed: Gather |
#s-wheat | 0 0 100 100 | Seed: Practise |
#s-bean | 0 0 100 100 | Seed: Belong |
#s-samara | 0 0 100 100 | Seed (maple key): Seed / Gardens of Change |
#s-acorn, #s-pumpkin, #s-stone, #s-dandelion | 0 0 100 100 | Other seeds, free to use |
#c-spiral | 0 0 200 200 | Sunflower spiral, behind a page title (.page-hero .spiral) |
#c-scatter | 0 0 280 170 | A handful scattered, above an interlude |
#c-row | 0 0 290 120 | A sown row, as a divider (.seed-row) |
The four pathway seeds stay attached to their pathways everywhere: site, thumbnails, slides. Only these symbols are in the sprite; to add a woodcut, put it in system/graphics.svg and run python3 system/build/build-graphics.py.
Black and red
The seeds come in black (ink) and in red (system/graphics/woodcuts/elements/seeds-red.svg, the logo red). Spread them across a page to make it more dynamic and personal: to make a quote stand out, as a background, or to punctuate a section. Red woodcuts are the one place red is used as a graphic rather than a link; keep them occasional.
Files
Every set lives in system/graphics/<set>/: the files in elements/, the set and its elements described in elements.json, and a README on sources and how they were made. The galleries, the cards and the rules table above are built from the elements.json files by python3 system/build/build-galleries.py; how to add an element: system/graphics/README.md.
Decisions: planning 2608 · decision log