Swallow as a bold linocut, few strong cuts

# 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](README.md); see them in a page in [guide.html](guide.html#graphics).

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.

13 elementsInline SVG symbolsOurs

Woodcuts

Punctuation anywhere: one per section, beside a heading, a quote or a list.

24 elementsSVGOurs

Fox sitting

Swan, wings open

Barn owl

Hedgehog asleep

Swallow in flight

Wild boar

Animals

A creature to carry a story: social posts, podcast and magazine pages, section openers.

21 elements · 91 filesSVG and PNGNot cleared

Flock of swallows

Pinecone, bold

Round flowers on a branching stem

Lily stem

Mountain range with a gold sun

Prints

Printed texture at size: covers, grounds under a transparency, the podcast flock.

17 elements · 30 filesSVG and PNGNot cleared

Painted

Watercolour, ink and colour plates, kept in the colours they were painted in.

Red alstroemeria

Crimson flax

Broken tulips

Open tulip

Spotted orchids

Pale star orchid

Botanicals

Colour and life on gathering and magazine pages; one plant per section.

7 elementsPNGNot cleared

Red watercolour flower

Green ink wash

Blue watercolour flowers

Blue ink wash

Blue watercolour ring

Watercolour figure, red

Watercolour washes

A soft patch of colour behind a title, a quote or a portrait.

10 elementsPNGNot cleared

Line

Geometry and interlaced marks in plain black line.

Metatron’s cube

Mark 5312

Egg of life

Kolam knot

Mark 3956

Checkerboard

Line figures and marks

Structure and quiet order: essays, papers, diagrams, section breaks.

17 elementsPNG; SVG where smallNot cleared

Landscape

Pen, brush and linocut mountains in their drawn blues.

High peak

Small peak

Grid peak

Contour range

1934 ridge

Brush ridge

Mountains

Landscape and distance: a sub-brand look, covers, and grounds for titles.

8 elements · 26 filesPNG; the linocut also SVGNot cleared

Brand marks

The logo and the marks built from it. Rules in their own guides.

Logo files

Five colourways, five lockups, the mark at every size.

SVG and PNGOurs

Signature

The mark and URL that sign a figure or diagram.

SVG and PNGOurs

Podcast ground

Sunlight, the swallow flock and the fingerprints from the bottom left.

PNG, built in codeOurs

## 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](colour.md#illustration-inks-graphics-only); 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](feel.md#rigour-and-warmth)) say where a set fits: **Study** (papers, essays), **Conversation** (manifesto, podcast, magazine, landing pages), **Gathering** (community, events). | Set | Colour | Grounds | Registers | Formats | Rights | |---|---|---|---|---|---| | [Sprite](graphics/sprite.md) | Ink of the ground (currentColor): ink on light grounds, chalk on night. | White, Paper, Sunlight, Night | Study, Conversation, Gathering | Inline SVG symbols | Ours | | [Woodcuts](graphics/woodcuts.md) | 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](graphics/animals.md) | 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](graphics/prints.md) | 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](graphics/botanicals.md) | As painted. Never retint them, and never use their colours on other graphics. | White, Paper, Sunlight | Conversation, Gathering | PNG | Not cleared | | [Watercolour washes](graphics/washes.md) | 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](graphics/lines.md) | 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](graphics/mountains.md) | 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: ```html ``` Colour follows `currentColor`: the `.woodcut` class sets ink, and inside `.night` it turns chalk. Every symbol, with its viewBox and code: [the sprite gallery](graphics/sprite.md). | 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//`: 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](system/graphics/README.md). Decisions: [planning 2608](https://github.com/life-itself/planning/blob/main/projects/2608-seeds-of-renaissance-rebrand.md) · [decision log](decisions.md)