[Library] Logos

Catalogue accessSignature variationStandard

Logo bar

A social-proof band of five partner names set as wordmarks rather than image files, each letter-spaced to carry the same visual mass, held on one line between two hairlines. Nothing to upload and no logo to go missing. States no colour and no font of its own.

Variation View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A single horizontal social-proof band: a small label pair, a hairline, five partner names distributed evenly across the measure, and a second hairline closing it. Core blocks only, so there is nothing to install and nothing to keep updated.

The signature moment

Wordmarks, not images

The partner names are set as type, not as logo files, and each one carries its own letter-spacing so that a four-letter name and an eleven-letter name occupy roughly the same visual mass in the row. Alda runs at 0.44em, Holm & Parr at 0.1em, and the ones in between are tuned by character count, so the five marks read as a set rather than as five names of unequal weight. That tuning is the whole design: a row of names at one uniform tracking looks like a list, and the same row with tracking traded against length looks like a logo bar.

What it buys is not only the look. A logo bar built from images is the section most likely to break in a year's time: files at different intrinsic sizes, each needing an alpha channel, a light-mode and a dark-mode version, and a replacement when a partner rebrands. Here there is nothing to upload, no asset to go missing, no image sitting at the wrong optical size beside its neighbours, and the whole row inverts with the theme because it is text.

What it inherits from your theme

Effectively all of the look:

  • Typeface. The pattern states no font family anywhere. The wordmarks take whatever your theme sets, so they look like your site's marks and not ours. This is the one thing worth checking after you paste it: a display serif tracks differently from a grotesque, and the tracking numbers below are where to adjust it.
  • Palette. The ground is your base and every piece of text is your contrast. Each is a fallback chain ending on a colour WordPress itself guarantees, so the band paints in a theme with a full palette and still paints in a theme with none. No accent is used anywhere: an accent's brightness varies by theme, and this section is nothing but text.
  • Spacing scale. The band's padding, the gutter between marks and the space around the hairlines all use the core spacing presets, so they move with your theme's rhythm.
  • The hairlines. Two core/separator blocks in your theme's own separator styling, so they follow your text colour rather than stating one.

What it decides for itself

  • The tracking ramp. Per-name letter-spacing tuned to character count. This is the pattern, and it is the thing to re-tune when you change the names.
  • The distribution. Five equal columns, each mark centred in its own share of the measure. Equal columns plus equal optical mass is what makes the row read as evenly spaced; centring is also what keeps the stacked phone layout tidy, where marks aligned left and right would zigzag.
  • The frame. Two hairlines enclosing the row, which is what makes it read as a strip rather than as a paragraph of names floating in a section.
  • Scale. Wordmarks at clamp(0.9375rem, 1.25vw, 1.125rem), labels a step below at clamp(0.875rem, 1vw, 0.9375rem). The marks are deliberately close in size to the labels: a logo bar that shouts competes with the section above it, which it should not do, and the modest size is also what leaves each mark room for its tracking.

What you change first

  1. The names. Replace all five, then re-tune the tracking, because that is what keeps the row even. The rule of thumb used here: about 1.8em of total tracking spread over the name, so roughly 0.44em at four characters, 0.28em at six, 0.22em at seven, 0.14em at nine and 0.1em at eleven. Set one, look at the row, and adjust the outliers by eye. Optical mass is not arithmetic, and a name with several round letters looks wider than its count.
  2. The count. Five is what the 1240px measure holds comfortably at this tracking. Four is airier and also correct. Six fits only if you drop the size a step or tighten the ramp, and a sixth name at these values is what makes a mark wrap inside its column at tablet width. Add or delete a whole core/column; nothing else needs changing.
  3. The label pair. "Trusted by" and "Since 2014" sit at either end of the row above. Delete the right-hand one for a quieter band, or both if the section above already says what this is.
  4. The frame. Delete the lower separator if this band sits directly above a section that already opens with a rule.
The row cannot wrap, and that is structural169 words

A logo bar that breaks onto a second line has stopped being a logo bar, so the row is a core/columns block rather than a wrapping flex row. Above 782px core gives each column flex-basis: 0 and min-width: 0, so five columns always share one line and share it evenly, whatever face your theme sets and however wide it draws these particular names. Below 782px core stacks the columns to one per line, which is a deliberate, even column of centred marks rather than a ragged last line. There is no width at which two marks end up pinned to opposite edges with a hole between them.

The cost of that guarantee is worth stating plainly: if a name is too long for its share of the row, it wraps inside its own column onto two lines instead of pushing the row apart. That is the failure mode to look for after you change the names, and the fix is one step down in size or one fewer mark.

Contrast60 words

Every piece of text in the band is your contrast on your base, which is the one pair every stock block theme guarantees and the highest-contrast pair it has. The wordmarks are small text and are held to the 4.5:1 body threshold, not to the 3:1 large-text one, because at 15px to 18px they are body-sized however graphic they look.

Back to the library