This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

Logo

The mark, the four lockups, and the rules that keep them legible.

The mark is a stencil peony bud — concentric petal cuts resolving to an accent centre. It reads as a single form at 16px and holds its internal structure at poster scale.

1 - 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
LockupCompositionUse forMinimum width
Two-lineMark + “projectious” over “· work”Headers, slides, cards — the default120px
One-lineMark + “projectious · work” inlineNavbars, footers, signatures140px
Dot-replaceMark substitutes the dot in “projectious.work”Compact horizontal contexts160px
StackedMark above the wordmark, centredApp icons, avatars, slide corners60px

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
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.

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.

2 - Usage

Clear space, minimum sizes, monochrome variants, and placing the mark on colour and photography.

Clear space

Exclusion zone — 1x the icon height on every side
Nothing enters the dashed zone

Minimum clear space is 1× the icon height on all sides. Nothing — text, rules, image edges, other logos — enters that exclusion zone.

At a 40px mark, that is 40px of clear space in every direction. The zone scales with the mark, so it never needs recalculating per context.

Minimum sizes

Minimum sizes — 48 / 32 / 24 / 16px
48px
32px
24px — minimum
16px — favicon only
VariantMinimum
Icon (standalone)24px — 16px for favicons only
Stacked lockup60px
Two-line lockup120px
One-line lockup140px
Dot-replace lockup160px

Below these sizes the petal cuts collapse into a smudge. If the space is smaller than the minimum, use a smaller variant rather than scaling one down.

Monochrome

Four monochrome treatments are approved, for print, fax, embossing, and any single-colour reproduction:

Monochrome variants
Midnight
Black
White reversed
Grey
VariantMarkInner linesSurface
Midnight#1d3352WhiteLight
Black#000000WhiteLight
White reversed#ffffffSlateMidnight
Grey#9299a4WhiteLight

The white-reversed variant uses slate for its inner lines rather than the background colour, so the petal structure stays visible. All petal structure must remain legible in every monochrome variant — a solid silhouette is not an approved treatment.

On colour

Placing the mark on colour
Lighter than slate-5 -> light mark
Darker -> dark mark
On accent → white ring
On photography -> midnight backing
BackgroundTreatment
Lighter than slate-5Light-surface mark
Darker than slate-5Dark-surface mark
Accent (#E05232)Mark with a white ring border
PhotographySemi-transparent midnight backing behind the mark

The slate-5 threshold is the decision rule: measure the background, pick the side it falls on. On the accent, neither variant has enough separation on its own, which is why the ring exists.

On photography

Never place the mark directly on an unmodified photograph. Apply a semi-transparent midnight backing — a shape, a scrim, or a gradient — so the mark sits on a controlled surface. The backing is part of the logo treatment, not an optional enhancement.

Watermark

Watermark — uniform wash, no accent

For background use, the mark may run as a watermark at 8–15% opacity. It renders as a uniform wash: no accent colour in watermark mode, since a single coloured element at low opacity reads as a printing error.

Favicons

Icon-only, on a midnight tile, with 12% padding. Corner radius scales with size:

Favicon tiles — 12% padding, radius scales with size
48px / r8
32px / r4
16px / r2
SizeRadius
16px2px
32px4px
48px8px
180px36px
Do

Measure the background against slate-5 before choosing a variant. Keep the full clear-space zone even when layout is tight.

Don't

Recolour the mark outside the approved variants, add effects (shadow, glow, outline, gradient), rotate or skew it, or place it on a busy photograph without a backing.

3 - Files

Delivered formats, when to use each, and where to download them.

Formats

FormatContentsUse for
SVGVector sourcePrimary for web and print
PNG @1x16 / 32 / 48 / 64 / 128 / 256 / 512pxNative-resolution raster
PNG @2x2× pixel dimensionsRetina — required for web
PNG @3x3× pixel dimensionsSuper-retina — mobile
ICOMulti-resolution (16 + 32 + 48)Favicon
apple-touch180×180 PNGiOS home screen

SVG is the source. Raster exports exist for contexts that cannot take vector — prefer SVG wherever the medium allows it.

Variants

Each raster size ships in five variants:

  • icon-light — for light surfaces
  • icon-dark — for dark surfaces
  • icon-mono-black — single-colour black
  • icon-mono-white — single-colour white, reversed
  • icon-mono-gray — single-colour grey

Downloads

The logo files are served from this site and are also in the repository under brand/logo/.

AssetLink
SVG — lighticon-light.svg
SVG — darkicon-dark.svg
SVG — mono blackicon-mono-black.svg
SVG — mono whiteicon-mono-white.svg
SVG — mono greyicon-mono-gray.svg