Lockups
Four approved lockups, rendered live, and where each one belongs.
Four lockups are approved. Each has a defined context; using one outside its context is what makes a layout feel off-brand even when the colours are right.
All four are built with HTML and CSS rather than flattened artwork, so spacing comes from natural text flow and never needs re-kerning.
The four lockups#
| Lockup | Composition | Use for | Minimum width |
|---|---|---|---|
| Two-line | Mark + “projectious” over “· work” | Headers, slides, cards — the default | 120px |
| One-line | Mark + “projectious · work” inline | Navbars, footers, signatures | 140px |
| Dot-replace | Mark substitutes the dot in “projectious.work” | Compact horizontal contexts | 160px |
| Stacked | Mark above the wordmark, centred | App icons, avatars, slide corners | 60px |
On light and dark#
Every lockup has a light-surface and a dark-surface rendering. The mark’s inner cuts pick up the surface colour, so it never needs a plate or a knockout box.
The mark alone#
The mark may stand alone only where the wordmark is already established nearby — an app icon on a page that names the product, an avatar in a signed-in context, a favicon.
Minimum for the standalone mark is 16px. Below that the inner rings collapse; use a wordmark or a purpose-built favicon instead. Any lockup with a wordmark must be at least 24px high.
Product line#
Product names extend the wordmark with the same dot construction and flow.
Wordmark construction#
The separator between “projectious” and “work” is a dot in the mark’s own
geometry, not a typed period. It takes slate on light surfaces and midnight-11
on dark. Spacing is handled by flex layout so the wordmark reflows naturally —
do not hand-kern it or convert it to a static image.
“work” is set in orange-9 (#E05232). As body text that value would be too
low-contrast, but WCAG 2.1 SC 1.4.3 exempts logotypes — “text that is part of a
logo or brand name has no minimum contrast requirement”. The wordmark is the one
place the identity accent is used as letterforms.
Use the two-line lockup unless the space is explicitly horizontal. Let the flex layout handle spacing.
Rebuild a lockup by hand, change the order of mark and wordmark, or set the wordmark in a different typeface.