Canonical reference for colours, typography, components, and brand voice across all Peerlabs properties. This document renders using the design system it describes -- toggle between dark and light modes to see both themes live.
| Company | Peerlabs |
| Brand domain | peerlabs.ai (Cloudflare Pages) |
| Product domain | peerlabs.app (DigitalOcean K8s) |
| Product | Actionable Intelligence Platform (AIP) |
| Positioning | Practitioner-led market intelligence for enterprise technical leadership |
| Funding model | Subscriber-funded. No vendor sponsorship. No pay-to-play. |
| Audience | CTOs, CIOs, VPs of Innovation at $1B+ enterprises |
| Sectors | Banking/Finance, Aerospace/Defence, Healthcare, Technology |
The primary mark is a split-colour wordmark in DM Serif Display with three designed elements: "Peer" carries a trailing purple tint and subtle drop-shadow (H5 treatment), "Labs" uses a lavender-to-deep-purple gradient (G3), and the separator is a vertical gradient pipe rather than a slash character.
Product lines and contexts use the wordmark followed by a gradient pipe separator and the sub-brand name in text colour. The pipe gradient flows from text colour to accent (top to bottom), echoing the wordmark's own colour transition.
Brand contexts (GitHub org page, corporate site, docs, presentations): use the sub-brand lockup with monospace for the tool name.
Developer contexts (CLI output, --help,
README, terminal, man pages):
standalone plsec
in monospace. Always lowercase.
The wordmark at key sizes. Serifs remain legible down to approximately 18px; below that, use the shortmark.
For favicons, app icons, Slack avatars, and other constrained contexts. P carries the tinted trailing edge, L uses the gradient.
In the navigation bar, the wordmark uses DM Sans (600 weight) with the same gradient treatments and a smaller pipe.
All colours are defined as CSS custom properties and shift between dark and light
themes via the [data-theme]
attribute on the root element.
The Four Axes methodology (Functional, Application, Systems, People/Processes) uses the status colours as semantic identifiers across all platform views.
A deliberately constrained type system. Each face has a single role. Self-host all fonts in production (no CDN dependencies).
| Element | Font | Size | Weight | Tracking |
|---|---|---|---|---|
| Hero heading | DM Serif Display | clamp(2.2rem, 4.5vw, 3.5rem) | 400 | Normal |
| Section heading | DM Serif Display | clamp(1.4rem, 3vw, 2.2rem) | 400 | Normal |
| Card heading | DM Sans | 0.92rem | 600 | Normal |
| Body | DM Sans | 0.92 - 1.05rem | 400 | Normal |
| Section label | JetBrains Mono | 0.6rem | 500 | 0.12em |
| Metadata / tags | JetBrains Mono | 0.6 - 0.7rem | 400-500 | 0.04 - 0.08em |
| Top bar nav | DM Sans | 0.72rem | 500 | 0.04em |
Reusable patterns across corporate site and AIP product. All components use CSS custom properties for theming.
Card content with secondary text colour.
Background uses --bg-elevated.
Primary container for content sections. 12px border-radius, 1px border,
--bg-card
background. This section is itself a section card.
| Property | Value |
|---|---|
| Height | 48px |
| Position | Fixed, top |
| Background | --bg-card (solid; avoids backdrop-filter containing block issues with nested fixed-position menus) |
| Border | 1px solid --border (bottom only) |
| Brand format | [Accent]Name / [Muted]Slash / [Text]Context |
| Context | Radius |
|---|---|
| Section cards | 12px |
| Inner cards, inputs | 8px |
| Buttons, nav items, tags | 6px |
| Tags (small) | 4px |
| Spacing bars, thin elements | 2px |
| Avatars, team photos | 50% |
Peerlabs addresses enterprise technical leadership. The voice is authoritative, precise, and understated. Never promotional, never breathless.
| Rule | Detail |
|---|---|
| Emoticons / emoji | Never. Not in documents, presentations, deliverables, or UI. |
| Exclamation marks | Avoid. Reserve for genuine urgency, not enthusiasm. |
| Capitalisation | Sentence case for headings. UPPERCASE only for section labels (JetBrains Mono). |
| Numbers | Use numerals for precision: "47 practitioners", not "many practitioners". |
| Document format | Markdown (.md) preferred over Word (.docx) for design and technical documents. |
Dark mode is the default. Light mode is an explicit opt-in via toggle.
All tokens shift simultaneously through the
[data-theme]
attribute on the root element.
| Mechanism | Detail |
|---|---|
| Attribute | data-theme="dark" (default) or data-theme="light" |
| Persistence | localStorage key: pl-theme |
| Flash prevention | Inline script before paint reads localStorage and sets attribute |
| Transition | 0.3s on background and color properties |
| Toggle | Alpine.js managed state, updates attribute + localStorage |