logo-wall
A grid of customer, partner, or funder logos as social proof.
Use for the credibility slide — the 'trusted by' / 'our funders' / 'participating agencies' wall. Marks render as token-coloured silhouettes (a CSS mask filled with var(--logo-ink)), so the wall is one cohesive texture that re-tones per theme and colour-mode and stays AA on any ground; the color variant gives each mark its own categorical palette hue.
When to use
- The proof is the logos. Customers, partners, funders, accreditations, participating agencies — anywhere a set of recognisable marks carries more weight than a sentence. The audience scans the wall and concludes 'serious company keeps this company.'
- Marks read as one texture. Every mark is filled with the same palette token, so a loud red logo can't outshout a quiet one — the wall reads as a single credential, not a ransom note of competing brand colours. Because the fill is a token, it re-tones for theme + dark mode and stays AA on any ground.
- Eight to eighteen marks. Enough to signal breadth, few enough that each is legible. Fewer than six looks thin; past eighteen the marks shrink below recognition — curate to the most recognisable names or split across two slides.
When not to use
- Names that need a sentence. If each entity needs a role, a quote, or a metric beside it, this is the wrong layout. Use
actors(who owns what),cards-grid(a short body per item), orquote(a single testimonial). - Logos nobody recognises. A wall of unknown marks proves nothing and asks the audience to squint. If the names don't carry on sight, state the count as a
big-number('400+ teams') instead. - Mismatched raster art. The mark is rendered as a silhouette (a CSS mask / inline SVG), so it must be clean vector with real transparency — a raster PNG or a logo whose negative space is a white fill won't read. Source SVG marks drawn as filled shapes; colour is supplied by the palette token, not the file.
Authoring
<!-- _class: logo-wall -->
`Trusted by`
## The headline claim the logos back up.
- 
- First brand
- `Series B`
- 
- Second brand
- 
- 
- 
- Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
eyebrow | p > code:only-child | no | Optional kicker above the headline — wrap a short label in backticks, e.g. Trusted by. |
title | h2 | no | Optional headline above the wall. A claim earns its place (‘400+ teams run board prep on Lattice’); a bare label (‘Customers’) does not. |
logos | ul > li | yes | One list item per mark, authored as - . The alt text is the accessible label, not a rendered caption. SVG is preferred so marks stay crisp at projector scale. |
caption | ul > li > ul > li | no | Optional name + pill stacked below a mark, centred. Nest a list under the image: plain text is the name, a backticked token (Series B) is the pill. Either or both, per mark. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ TRUSTED BY │
│ The teams that run on us. │
│ │
│ [Acme] [Globex] [Initech] │
│ Acme Globex Initech │
│ (SeriesB) (Public) (Seed) │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘Variants
color — Color — per-mark palette hues
Gives each mark its own categorical palette hue (--cat-*-mark, cycling 1..12) instead of the single muted token — useful when telling the marks apart matters more than restraint, e.g. a partner directory. The hues are ours, so they stay cohesive with the deck's charts and AA on both grounds; the single-token default is the boardroom-restrained pick.
<!-- _class: logo-wall color -->
`Our partners`
## The brands behind the programme.
- 
- 
- 
- 
- 
- 
- 
- dense — Dense — more marks, smaller cells
Tightens to six columns with shorter cells for a longer roster — a member directory, a full funder list, every participating agency. Past about eighteen marks the recognition threshold gives out; split across two slides instead.
<!-- _class: logo-wall dense -->
`Our funders`
## Eighteen organisations backed this year's work.
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- Related
- actorseach named entity owns a responsibility, not just lends its logo
- cards-grideach item needs a line of body text, not just a mark
- big-numberthe proof is a count ('400+ teams'), not the individual marks
- quoteone customer's testimonial carries the slide
- imagea single visual, not a grid of marks, is the evidence