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

projectious · work

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.

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.