Works — Brand Guide v2.0 (internal)

Internal reference · Brand Guide v2.0
Works Probiotics — Brand System

Editorial, Swiss-modernist, scientific. Restraint as expression. This page mirrors the canonical brand repo (MetaBiotics-LLC/works-brand-v2) and the live storefront styling. Source of truth is the repo; this is the on-site quick reference.

01 · Logo

Logo

The WORKS wordmark is the primary mark. Black on light surfaces; white on Slate. The Slate-tint wordmark is for slate-led editorial contexts only — never the default.

WORKS wordmark black
Primary — black on light
WORKS wordmark white
Reverse — white on Slate
split-capsule icon
Utility icon — favicon / avatar

Rules

Do — keep clear space, use approved files, prefer the wordmark. Don't — add shadows to the mark, recolor it, stretch it, or set “Works” as live text (the wordmark is a custom one-off in Archivo Expanded, rendered from vector only).

02 · Color

Color

Primary palette

#2F4A63
Slate Blue
Primary. Wordmark, headings, accents, primary buttons.
#1A2A3A
Slate Dark
Hierarchy. Deep headings, footer, dark panels.
#8297AB
Slate Light
Tertiary. Dividers, captions, rules.
#000000
Black
Body text where max contrast is needed.

Surfaces

#FBFBFB
Paper
Default body background. Off-white, not pure.
#F7F9FA
Cool Light
Cool off-white alt surface.
#F4F5F6
Soft Grey
Quiet alternating section panels.
#FFFFFF
White
Cards, inputs.

Utility — chart only

#B23A48
Iron Rust
Alarm / null / control / red-line use ONLY. Never a brand surface, button, or accent.

Never introduce mauve, blush, pink, lavender, or any cosmetic-adjacent accent. The palette is the palette — no new colors without CPO sign-off.

03 · Typography

Typography

IBM Plex Sans sets everything in running text — display, headings, body, UI. IBM Plex Mono is for eyebrows, labels, and metadata only — never body. No third typeface in running text.

Precision probiotics.
Heading — IBM Plex Sans Bold
Subheading — Semibold
Body copy is IBM Plex Sans Regular at 16px, 1.55 line-height. Calm, evidence-led, plain-spoken — honest about what we can claim today.
Eyebrow / label — IBM Plex Mono
04 · Voice

Voice & tone

Evidence-led

Claims are cited and supported. Never unsupported.

Honest about limits

Say only what we can claim today. No hype, no overpromise.

Plain-spoken & precise

Clear language over jargon. Restraint as commitment.

Warm

Human and calm — never cold, never warm/golden in color.

05 · UI form

Interface rules

Square-by-default editorial system: small radii (2–8px). No shadows on cards, buttons, headers, or inputs — shadows are reserved for floating UI (tooltips, dropdowns, modals) only. Calm motion, no bounce or overshoot.

Buttons
Input
06 · For developers

CSS tokens

Copy these into any Works surface. Full system: link design_system/styles.css from the brand repo.

:root{
  --slate-blue:#2F4A63;  --slate-dark:#1A2A3A;  --slate-light:#8297AB;
  --black:#000;  --paper:#FBFBFB;  --soft-grey:#F4F5F6;  --cool-light:#F7F9FA;
  --iron-rust:#B23A48; /* chart/alarm only */
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --r-md:4px; /* square-by-default */
}

Canonical source: github.com/MetaBiotics-LLC/works-brand-v2 (Brand Guide v2.0 + Design System v2). Owner: Chief Product Officer. This on-site page is an internal quick reference and mirrors the live storefront theme — if the repo changes, re-sync here.