Brand assets — canonical SVGs
Drop-in SVG files. Anyone shipping a SecurityV0 surface (product, marketing, partner deck) pulls from here. Do not re-author.
| File | Use |
|---|---|
mark-light.svg | The [S] mark on light surfaces (slate tile + white glyph). The default. |
mark-dark.svg | The [S] mark on dark surfaces (light tile #d9e4ea + dark glyph). Sidebar. |
mark-mono-on-dark.svg | The [S] mark on a saturated slate marketing slab (near-black tile + white glyph). |
favicon.svg | Same as mark-light.svg but without role/aria-label (browsers ignore those on favicons). |
lockup-light.svg | Horizontal lockup [mark] gap [Security][V0] for light backgrounds. |
lockup-dark.svg | Horizontal lockup for dark backgrounds (white Security, muted V0). |
Geometry
All mark SVGs use a 32-px viewBox. The geometry is locked at this size — see 01 · Logo system.
Need a larger or smaller render? Set width and height on the <svg> or <img> consumer. Do not resize by editing the viewBox.
The whole mark — brackets and the inner S — is outlined paths, no live text. This keeps it font-independent so favicons, app icons, and email renderers (which can't load web fonts) render the S correctly instead of falling back to system mono. Regenerate the S path with fontTools if the typeface ever changes; don't hand-edit it.
The two lockup assets still render the
Security/V0wordmark as Inter<text>— they depend on Inter being available in the consuming context. Outlining the wordmark too is a separate follow-up; until then, prefer the mark-only assets where font availability isn't guaranteed.
Colors
Hex values are hardcoded in the SVGs because favicons and email-client renderers can't read CSS variables. The hex values come from the design tokens:
| Hex | Token | Use |
|---|---|---|
#565e74 | --color-primary | Slate tile |
#f7f7ff | --color-on-primary | White-ish glyph on slate |
#d9e4ea | --color-inverse-on-surface | Light tile for dark surfaces |
#0b0f10 | --color-inverse-surface | Near-black glyph / saturated slab |
#717c82 | --color-outline | Muted V0 on light wordmark |
#9a9d9f | (informal "outline-on-dark") | Muted V0 on dark wordmark |
If a token changes value, update the SVGs and every consumer copy in lock-step. There's no automatic re-derivation.
When to add a new asset
Add an asset here when:
- A new surface (OS chrome, email signature, partner format) needs a variant we don't already have.
- The variant follows the rules in 01 · Logo system. If it doesn't, file a DDR first.
Don't add per-size variants of an existing mark. The 32-box scales.