02 · Applications
How the brand applies to specific surfaces. Geometry rules and proportions live in 01 · Logo system; this doc says what to ship for each surface.
In-product surfaces
Sidebar (dark, expanded)
Lockup, mark left, wordmark right. Tile is --color-mark-tile-inverted (#d9e4ea); glyph is --color-inverse-surface (#0b0f10). Wordmark Security is white; V0 is #9a9d9f.
The tile uses a dedicated
--color-mark-tile-inverted(#d9e4ea) token, not--color-inverse-on-surface— in the platform the latter is#9a9d9f(muted text), which would render a near-invisible tile on the dark sidebar.
| Token | Value |
|---|---|
| M | 32 px |
| Gap | 12 px |
| Wordmark | 16 px |
| Padding around lockup | 16 px |
The mark gets aria-hidden; the adjacent wordmark provides naming. Avoid double-announcement.
Sidebar (dark, collapsed)
Mark only, centered. Same tile/glyph contract.
| Token | Value |
|---|---|
| M | 32 px |
The mark takes role="img" and aria-label="SecurityV0" since the wordmark isn't visible.
Topbar (light, in-app)
Compact lockup. Used inside breadcrumb-style navigation; sits to the left of the breadcrumb run.
| Token | Value |
|---|---|
| M | 28 px |
| Gap | 11 px |
| Wordmark | 14 px |
Status — not shipped (decided 2026-05-20, sv0-platform#1250). The in-app topbar deliberately renders no brand mark. On desktop the sidebar already carries the lockup persistently, so a topbar mark is redundant; and 01 · Logo system §07 flags "mark-only in dense surfaces" as an unmeasured open question. The geometry above is kept on record so the surface is ready if we revisit. Revisit trigger: the one real gap is mobile — the sidebar is a hidden drawer there, so no brand mark is persistently visible. Fold a topbar mark into a future mobile-brand pass rather than shipping it speculatively while §07 stands.
Page hero (rare)
Some pages may render the mark above an empty-state hero. Use the light-surface ground (slate tile + white glyph), M = 48 px, with the wordmark below if naming is needed. Never use the lockup as decoration.
Auth and identity surfaces
Login (in-app, fully customizable)
The first screen the user sees. Centered card on a calm page background.
| Token | Value |
|---|---|
| M | 48 px |
| Gap | 18 px |
| Wordmark | 24 px |
| Lockup position | Top of the sign-in card, centered |
Mark uses the light-surface ground (slate tile + white glyph) so it reads against the light page.
No-tenant / no-access pages
Same lockup as the login card. M = 48 px. The lockup is decorative here — aria-hidden is correct since the page heading already names the product.
WorkOS AuthKit (hosted login)
WorkOS only exposes a fixed set of branding controls in Settings → Authentication → Branding. The values below are the canonical SecurityV0 panel values; paste them in, then upload assets/favicon.svg as the logo.
| Field | Value |
|---|---|
| Appearance | Light |
| Font | Inter |
| Radius | medium |
| Page background | #F7F9FB |
| Button background | #373F54 (slate-blue dim — --color-primary-dim) |
| Button text | #FFFFFF |
| Links | #5753C6 |
| Logo | assets/favicon.svg (the [S] mark) |
Why the dim variant for the button. The platform's primary is
#565E74. AuthKit renders the button as a flat panel against a near-white page; using the primary directly makes the button read as decoration.#373F54(--color-primary-dim) gives the button enough contrast to read as a button.
WorkOS does not expose this panel via API on the free tier, so it's a manual one-time configuration step. Update it whenever the in-product brand changes so the hosted page stays consistent.
Operator runbook: the step-by-step procedure (dashboard path, per-environment order, logo upload, verification) is in WorkOS AuthKit hosted-login branding.
Other AuthKit directions (preserved, not used)
The full set of explored variants — slate-dark, inverse (black on warm), sharp (radius 0, mono links) — lived in the original prototype canvas. They're not currently shipped. If a future surface needs a darker AuthKit, propose a DDR before changing the panel.
Marketing and external surfaces
Slate marketing slab
Full-bleed --color-primary (#565e74) background with the inverse-surface ground (#0b0f10 tile, white glyph). M = 96 px. Used for hero blocks on the marketing site.
Partner deck logos
Use assets/lockup-light.svg (the horizontal lockup) at the size called for by the partner template. Never re-derive geometry — pull the SVG.
Favicon
assets/favicon.svg — the slate-light variant. Same SVG at every size; browsers and OS rasterizers handle 16/32/64/128 from the single source.
OS / device chrome
iOS app icon (future)
Mask-safe variant: same mark, same colors, no rounded corners on the SVG (iOS applies the system corner). Pending a real iOS app.
Android adaptive icon (future)
Foreground layer = mark glyph only (transparent background); background layer = --color-primary solid. Pending a real Android app.
When in doubt
Pick the surface contract that matches the page background:
- Light page → slate tile + white glyph
- Dark page → light tile + dark glyph
- Saturated slate page → near-black tile + white glyph
If none of those fits, you've found a surface this spec doesn't cover. File a DDR before inventing a fourth.