logo-wall
InventoryGridProse
A grid of customer, partner, or funder logos as social proof.
Variant
Use for the credibility slide — the 'trusted by' / 'our funders' / 'participating agencies' wall. Marks render as token-colored silhouettes (a CSS mask filled with var(--logo-ink)), so the wall is one cohesive texture that re-tones per theme and color-mode and stays AA on any ground; the color variant gives each mark its own categorical palette hue.
visualshowcasepitch
When to use
- The proof is the logos. Customers, partners, funders, accreditations, participating agencies — anywhere a set of recognizable 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 colors. 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 recognizable names or split across two slides.
- Marks of mixed shapes. Marks share one area, kept between the smallest and largest of their old areas, and no mark stands taller than the old row: beside a 1:2 crest, wordmarks come down to a square badge's area and the crest keeps its own, 2× apart (a 4:1 wordmark used to get 2.7× the crest's area, a 3:1 wordmark 3.6×). A wall that fit before still fits; rows are balanced and centered (ten marks break 4/3/3). A wall of one shape keeps its old size. The wall sizes from SVG marks (a local file,
sample:or adata:SVG); a raster or remote mark keeps the equal-cell grid. Demo deck:examples/logo-wall-equal-weight.md.
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 recognizes. 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; color is supplied by the palette token, not the file.
Common mistakes
- Writing a caption's pill as plain nested text instead of
{…}in backticks. Under a mark's nested caption list, plain text becomes the NAME line; only a{…}token in backticks (e.g. ` - Placing the eyebrow paragraph after the headline instead of before it. The eyebrow matches
p > code:only-childas the section's kicker, positioned before the## headline— placed after, the masthead lift re-seats it as the italic, secondary-color subtitle instead of the intended mono kicker. - An SVG mark whose viewBox carries empty margin around the logo. Equal weight is measured on the mark's box, not its ink, so the margin counts as mark and the logo draws smaller than its neighbors. Crop each SVG's
viewBoxto its ink. - Packing more marks than the slide can hold at a readable size. A wall that would fit only with marks too small to read keeps the equal-cell grid, and the export flags its overflow. Split the roster across two slides, or drop the captions.
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. To try the layout before you have the marks, use Lattice's sample logos:  (the full set is in lib/samples/README.md). |
caption | ul > li > ul > li | no | Optional name + pill stacked below a mark, centered. Nest a list under the image: plain text is the name, a {…} token in backticks ({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 │
└─────────────────────────────────────────┘Variant decision rule
- default (no modifier) — The default token-recolored silhouette treatment — one cohesive texture, theme-safe.
color— The individual brand colors are themselves part of the credibility signal — a recognizable, colorful set of household names worth preserving.dense— The roster is long (12-18+ marks) and captions aren't needed — packs more columns, captions off.
Variants
color — color
Marks keep their brand hues.
<!-- _class: logo-wall color -->
`logo-wall color`
## color lets the marks keep their brands.
- 
- 
- 
- 
- 
- 
- 
- dense — dense
Six columns for the long roster.
<!-- _class: logo-wall dense -->
`logo-wall dense`
## dense packs the long roster, captions off.
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 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