# Lockups > Four approved lockups, rendered live, and where each one belongs. --- LLMS index: [llms.txt](/brand/llms.txt) --- 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.