Social Visual System
Category: identity Sources: visual-identity.md, brand-assets.md, banned-words.md, content-pillars.md, core-messages.md Confidence: high Last Updated: 2026-08-11
The system for image-free social posts: static, typographic slides built from the brand's own tokens. No photography and no clutter. In a busy feed a set of slides that plainly belong together reads as authority, so every post is built from the same short rulebook and the feed is recognisable at a glance. Photographic or AI imagery on social is a separate, unsettled question and is not part of this system.
The rendered guidelines page is brand-wiki/output/social-visual-system.html.
The three laws
- One idea per slide. If it needs two, it is two slides.
- One signal per slide. Trace Yellow appears once, on the single most important element. It is a scalpel, not a coat of paint.
- One system. Same anchors, same type, same grounds, every time.
The four grounds
The ground sets the volume. Text colour is fixed per ground and is never a free choice.
| Ground | Hex | Text | Role |
|---|---|---|---|
| Paper white | #FFFFFF |
Trace Ink | The default. Teaching slides and body copy. |
| Quiet surface | #F4F4F5 |
Trace Ink | A softer ground. Gives a run of slides a mid-tone breath. |
| Hero black | #0D1117 |
Paper white | Weight and drama. Hooks and punchlines. |
| Trace yellow | #F1F252 |
Trace Ink only | The loudest slide. One per carousel, for the single most important line. |
Type and contrast
Inter carries everything; hierarchy comes from weight and scale, not a second typeface. Inter Tight is permitted as the display cut for hooks (same family, tighter set, more impact at large sizes). Body and metadata always stay in Inter.
- Hook: 800, 44–64px, tracking -.02em (Inter Tight allowed)
- Headline: 600, 26–34px
- Body: 400, 15–18px, measure no more than 28 characters on a slide
- Meta / index / wordmark: 500, 11–13px, tracking .08em
Sanctioned text-on-ground pairings only:
- Ink on white or quiet surface, and paper on hero black — always.
- Ink on yellow — passes.
- White text on yellow — never.
- Yellow as body text — never. Yellow is a fill and accent, not a text colour on light grounds.
The devices
Reach for one device per slide. Mixing three in one frame is the clutter this system exists to avoid.
- The highlighter — a yellow block behind one operative word. The workhorse move.
- The keyline — a 3px yellow rule under a phrase. The quieter cousin of the highlighter.
- The correction — strike the wrong claim, set the right one beside it. Built for myth-busting and red-flag posts (for example "CE rated armour" struck, "certified to EN 1621" beside it).
- The label — one word filling the frame, from the Exposed / Covered lens. The only sanctioned all-caps use. Exposed on the dark ground carries the problem; Covered on the yellow or light ground carries the promise.
- The number — one figure at display scale, grounding an abstract point in a real quantity.
- The watermark — the Guiding Progress mark at roughly 5% ink on light (or 5% paper on dark), bled off a corner. Texture behind the words, never in front of them.
- The pointer — the mark is directional by design; at small scale it works as a swipe or CTA cue.
- The 45° cut — echo the mark's diagonal as the divide between two grounds. Once per set, never more.
- Ground-flip rhythm — never run the same ground three slides in a row; alternate light and dark so the swipe has cadence.
Field Note posts
A Field Note shared to social is a single standout post, not a carousel. It carries one added constant so the series is recognisable at a glance: a yellow Field Note № tag in the top-left, and a bolder default ground so it reads louder than a standard teaching slide. The tag is the signal, so the body stays disciplined.
- Hero black (default) — dark ground, paper text, yellow Field Note tag. The standard treatment.
- Trace yellow — yellow ground, ink Field Note tag (ink pill so the yellow ground stays the single signal). The occasional loudest note.
- Paper white — white ground, yellow tag. Reserved for the correction device (myth-busting notes).
The tag numbers the note (Field Note №14) to build the series. Everything else follows the grounds, type, devices and contrast rules above.
Carousel architecture
Open dark or yellow to stop the scroll, teach one idea per slide on the light grounds, and close on the yellow ground or a yellow CTA bar. A typical set is six to eight slides: Hook, Teach, Teach, Teach, Turn, Resolve.
The grid
- Canvas: 4:5 feed at 1080 × 1350 (primary), 1:1 at 1080 × 1080, 9:16 story at 1080 × 1920.
- Margin: 80px safe padding on all sides. No text in the outer margin.
- Anchors: slide index top-left, Trace Technical wordmark bottom-left, the single idea between them.
Guardrails
- No em dashes. Use a full stop, comma or colon.
- Say "apparel" not "gear", "test house" not "lab", "documentation" not "paperwork".
- No more than one yellow ground in a single carousel, and never three slides on the same ground in a row.
- Keep the wordmark and index in the same corners on every slide.