Media guidance covers everything with a time dimension or a photographic surface — the places where the system meets material it does not fully control.
This is the multi-page printable view of this section. Click here to print.
Media
Motion, audio, video, photography, and presentation guidance.
1 - Audio and video
Sonic identity and video production rules.
Audio identity
Four defined cues. All are short, tonal, and mid-register — the audio equivalent of “slides into place, doesn’t bounce”.
| Cue | Sound | Length |
|---|---|---|
| Notification | Short tonal chime, mid-register | 200ms |
| Success | Ascending C→E, warm sine wave | — |
| Error | Single low A2 | 300ms |
| Podcast intro | Ambient pad, tension→warmth resolve | 3s |
Error is a single low note, not a buzz or a descending pair — it marks the event without scolding.
Video rules
- Demos run at real time. No fast-forward, no speed ramps. If a step is slow, that is information the viewer needs.
- Transitions are a cut or a 200ms fade. No swoops, wipes, or 3D moves.
- All video uses midnight surfaces.
- Subtitles are always available.
- Export at 1080p minimum, 4K when possible.
Do
Show the real thing at real speed. Caption everything.
Don't
Speed up a demo to hide latency, or use a transition that draws attention to itself.
2 - Photography and illustration
Sourcing rules, treatment, and the abstract illustration style.
Sources
Preferred: Unsplash and Pexels — royalty-free, no attribution required for commercial use. Commission custom photography where possible, from local European photographers.
Never use: watermarked Shutterstock or Getty imagery, or AI-generated imagery.
Every photograph must pass the test: “would a developer trust this?” Stock imagery of handshakes in glass lobbies fails it. A real desk, real hardware, or real people working passes it.
Treatment
- Photographs in dark mode receive a subtle black overlay so they do not punch a hole in the page.
- The logo never sits directly on an unmodified photograph — see Logo usage.
- Never place text over a busy region. Add a scrim or crop to a quiet area.
Illustration
The illustration style is abstract system diagrams — nodes, flows, and pipelines drawn in the brand palette.
- Midnight for structure, slate for supporting lines, accent for the single element that matters.
- Dashed strokes indicate inferred or optional relationships.
- Labels use Source Sans 3; never letter-space diagram labels.
- Diagrams are line-based, not filled — the system reads as engineering drawing, not infographic.
Do
Draw the actual architecture. Use accent once per diagram, on the element the reader should look at first.
Don't
Use isometric 3D illustration, gradient-filled shapes, or generic “tech” clip art.
3 - Presentations
Slide templates, animation, and the core deck structure.
Core slides
Six slide types cover most decks:
| Slide | Purpose |
|---|---|
| Title | Deck opening — display type on midnight |
| Section statement | A single sentence marking a new section |
| Three-up | Three parallel points |
| Quote | A single quotation, attributed |
| Code showcase | Code on the always-dark surface |
| CTA closer | The one thing you want the audience to do |
Core slide types — 16:10
The full deck
Twelve slide types cover a complete talk. Each is 16:10 and uses the same tokens as the product surfaces — no separate “presentation theme”.
Opening — title, agenda, section statement
Content — three-up, split, comparison
Evidence — metric, quote, code, diagram
Closing — CTA and contact
| Slide | Purpose |
|---|---|
| Title | Deck opening — display type on midnight |
| Agenda | Numbered outline; current item in midnight-11 |
| Section statement | A single sentence marking a new section |
| Three-up | Three parallel points |
| Split | Before/after or contrast, one half on midnight |
| Comparison | A small table where numbers are the point |
| Metric | One number, large; the label in overline style |
| Quote | A single quotation with the accent rule, attributed |
| Code showcase | Code on the always-dark surface |
| Diagram | Line-based system diagram, accent on the focal node |
| CTA closer | The one thing you want the audience to do |
| Contact | Thank-you and a single contact route |
Rules
- 16:10 aspect ratio.
- Title slides and section statements use midnight surfaces; content slides use
white or
midnight-1. projectious.workis visible on the title and closing slides.- One idea per slide. If a slide needs a paragraph, it needs to be two slides.
Animation
- Slide transitions: cut or 200ms fade.
- Build animations use
--ease-outat--duration-standard. - Never animate text character-by-character.
- Motion is for revealing structure, not for holding attention.
Templates
Document templates for LaTeX and Typst are in
brand/templates/.
Both embed brand identity and fall under the brand-asset licence terms — see
Licensing.