WePeople · Brand identity · v1.1

A logo for teams, not for surveillance.

A stylized W made of five nodes connected by a light path. Each dot carries the color of one SPACE dimension — left to right, the mark spells S P A C E. It doubles as a small network of five teammates and a rhythm rising and falling, echoing WePeople's pitch of team insight, not surveillance.

Concept

Five dots because five is the product's atomic unit — SPACE's five dimensions, and the team sizes WePeople serves (5–50). Connected by a thin path so the mark stays legible at small sizes without feeling busy.

Readings	SPACE chart · Letter W · Network of 5 · Radar / pentagon · Rhythm line
Colors	Dots use `DIMENSION_COLORS` (`packages/shared/src/tokens.ts`) — the mark stays in lockstep with the scoring UI. The connecting path uses `currentColor` so it adapts to light and dark.
Geometry	5 nodes on 3 y-levels (16, 24, 48) — middle peak dips slightly for visual balance and distinctness from a plain W.
Density	Node radius 4.5 · Stroke 2.5 with round caps · Path at 35% opacity so the colored nodes lead, the connection whispers.
Privacy cue	Dots, not eyes — deliberately avoids cameras, magnifiers, or radar-sweep motifs that would contradict the "not surveillance" positioning.
Fallback	A `tone="mono"` variant ships alongside (`logo-mark-mono.svg`) for email headers, single-ink printing, and chrome where `currentColor` is the only right answer.

Mark sizes

The same geometry from 16px favicon to hero banner. Below ~20px, use public/brand/favicon.svg (thicker stroke, larger dots).

16 · favicon

24 · nav

40 · auth shell

72 · marketing

128 · hero

Wordmark

We carries extra weight; People stays lighter — the collective leads, the individual is still there. Typography matches --font-geist-sans / heading scale in the app shell.

WePeople

XL · hero / splash

WePeople

LG · marketing nav

WePeople

MD · product nav

WePeople

SM · footer / email

Surfaces

Works on light, dark, muted, and the atmosphere gradients the marketing shell already paints.

WePeople

Light · background

WePeople

Muted · muted

WePeople

Dark · #0a0a0a

WePeople

Accent wash · status-active

SPACE mapping

The five nodes use the same palette as the SPACE radar and score bars — left to right, in SPACE order.

Dot	Dimension	Token	Swatch
S	Satisfaction	`DIMENSION_COLORS.satisfaction`	oklch(0.70 0.15 310)
P	Performance	`DIMENSION_COLORS.performance`	oklch(0.68 0.16 155)
A	Activity	`DIMENSION_COLORS.activity`	oklch(0.72 0.16 220)
C	Communication	`DIMENSION_COLORS.communication`	oklch(0.75 0.15 60)
E	Efficiency	`DIMENSION_COLORS.efficiency`	oklch(0.68 0.18 15)

Source of truth: packages/shared/src/tokens.ts — if those tokens change, the logo changes with them.

Tokens

The mark consumes theme foreground for the path and SPACE palette for nodes. Dark mode and palette updates propagate automatically.

Node fills (default)	SPACE palette — same oklch values as the scoring radar.
Node fills (mono)	`currentColor` for `tone="mono"` (email, single-ink print).
Connecting path	`currentColor` at reduced opacity — theme-driven.
Favicon asset	Same shape and colors · stroke-width 4 · node radius 5.75 for legibility at ≤20px (`public/brand/favicon.svg`).
Type	We 700, People 500 · tight tracking.

Do / Don't

Keep the mark quiet. It's a signal — not the UI.

WePeople

Use currentColor for the path. Let theme drive it.

Don't

WePeople

Don't place on loud gradients. Use muted or brand surfaces.

Don't

WePeople

Don't skew, rotate, or restyle the wordmark weights.

Files shipped

Static SVGs live under apps/web/public/brand/. The typed React wrapper is apps/web/src/components/ui/logo.tsx.

Path	Use
public/brand/logo-mark.svg	Pure mark — monochrome, `currentColor`. General purpose.
public/brand/logo-mark-accent.svg	Two-tone variant — reserve for hero surfaces.
public/brand/logo-wordmark.svg	Horizontal mark + wordmark for static social images where CSS is not available.
public/brand/logo-stacked.svg	Stacked lockup for splash, about, email headers.
public/brand/favicon.svg	Optimized for ≤20px — wired in root `metadata.icons`.

Why it fits WePeople

Product claim	How the mark earns it
Team insight, not surveillance	Dots, not eyes. No lenses, radar sweeps, or magnifiers. Reads as a team, not a watcher.
SPACE framework · 5 dimensions	Five nodes — not four, not six. The count is the metric.
Metadata only	Discrete nodes connected by a low-opacity line — content stays implied, never depicted.
Symmetric dashboard for ICs and leads	Left–right symmetry around the middle node. No hierarchy of sizes or colors between the two sides.
Teams of 5–50 · dev audience	Geometric, no gradient clutter in the mark — feels native to the shell.

Dot

Dimension

Token

Swatch

Satisfaction

DIMENSION_COLORS.satisfaction

oklch(0.70 0.15 310)

Performance

DIMENSION_COLORS.performance

oklch(0.68 0.16 155)

Activity

DIMENSION_COLORS.activity

oklch(0.72 0.16 220)

Communication

DIMENSION_COLORS.communication

oklch(0.75 0.15 60)

Efficiency

DIMENSION_COLORS.efficiency

oklch(0.68 0.18 15)

Path

Use

public/brand/logo-mark.svg

Pure mark — monochrome, currentColor. General purpose.

public/brand/logo-mark-accent.svg

Two-tone variant — reserve for hero surfaces.

public/brand/logo-wordmark.svg

Horizontal mark + wordmark for static social images where CSS is not available.

public/brand/logo-stacked.svg

Stacked lockup for splash, about, email headers.

public/brand/favicon.svg

Optimized for ≤20px — wired in root metadata.icons.

Product claim

How the mark earns it

Team insight, not surveillance

Dots, not eyes. No lenses, radar sweeps, or magnifiers. Reads as a team, not a watcher.

SPACE framework · 5 dimensions

Five nodes — not four, not six. The count is the metric.

Metadata only

Discrete nodes connected by a low-opacity line — content stays implied, never depicted.

Symmetric dashboard for ICs and leads

Left–right symmetry around the middle node. No hierarchy of sizes or colors between the two sides.

Teams of 5–50 · dev audience

Geometric, no gradient clutter in the mark — feels native to the shell.