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
Two-line (default) and one-line
projectious
· work
Two-line · headers, slides, cards · min 120px
projectious · work
One-line · navbars, footers, signatures · min 140px Dot-replace and stacked
projectious
work
Dot-replace · compact horizontal · min 160px
projectious · work
Stacked · app icons, avatars, slide corners · min 60px | 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 same lockup on both surfaces
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.
Standalone mark — 96 · 64 · 48 · 32 · 24 · 16px
Minimum for the standalone mark is 24px. The 16px rendering exists for
favicons only, where the browser supplies the name.
Product line
Product names extend the wordmark with the same dot construction and flow.
Product-line extensions
projectious · guard
projectious · forge
projectious · 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.
The wordmark keeps the accent
“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.
Do
Use the two-line lockup unless the space is explicitly horizontal. Let the flex
layout handle spacing.
Don't
Rebuild a lockup by hand, change the order of mark and wordmark, or set the
wordmark in a different typeface.