brand guidelines
Everything here is the real thing — the same assets and tokens the product ships with, not an approximation drawn for a slide. If you are writing about PRYVC, integrating with us, or building on the Share Protocol, take what you need.
PRYVC is a wordmark, not a symbol plus a name. The lowercase letterforms carry the product's posture — ordinary, unintimidating, something you hand your data to — and the final c closes into a locked badge. That badge is the only part that stands alone.
The sky wordmark holds on both white and slate-950. On brand blue, on photography, or on anything busy, switch to the knockout.
Keep clear space on all sides equal to the height of the badge — the square around the final c. Nothing else enters that margin: no text, no rules, no other logos.
108px — minimum, screen
16px — icon floor
Do not render the wordmark below 108px wide on screen or 25mm in print — the badge's keyhole fills in. Below that, use the icon, which is drawn to hold at 16px.
Each of these has happened to somebody's logo. The wordmark is a traced outline, so it is less forgiving than a font-based mark.
Don't stretch or squash
Scale proportionally, always.
Don't recolor
Sky, or the white knockout. Nothing else.
Don't add effects
No shadows, bevels, glows, or outlines.
Don't place on busy fields
Use the knockout, or add a plain panel.
Don't rebuild it
Don't set the name in another typeface beside the icon.
Don't rotate or tilt
The wordmark sits level.
One brand hue, a sky blue, sampled from the logo itself: #37bdf8 is brand-400. Everything else on the ramp is derived from it. Neutrals are Tailwind's slate.
Measured, not guessed — these ratios are computed from the swatches above when this page is built. WCAG 2.1 AA needs 4.5:1 for body text and 3:1 for large text (18.66px bold or 24px regular).
| Token | Hex | On white | On slate-950 |
|---|---|---|---|
| brand-400 | #37bdf8 | 2.14:1 · Fails | 9.41:1 · AAA |
| brand-500 | #0ca5e9 | 2.77:1 · Fails | 7.28:1 · AAA |
| brand-600 | #0284c9 | 4.08:1 · AA large only | 4.94:1 · AA |
| brand-700 | #0369a3 | 5.91:1 · AA | 3.41:1 · AA large only |
| brand-800 | #075a86 | 7.46:1 · AAA | 2.70:1 · Fails |
| brand-900 | #0c4a6e | 9.46:1 · AAA | 2.13:1 · Fails |
| brand-950 | #082f49 | 13.88:1 · AAA | 1.45:1 · Fails |
The rule that follows from the table: on white, body text needs
brand-700 or darker. On slate-950, it needs
brand-600 or lighter. Bright
brand-400 is a fill and a dark-mode accent — it
is never legible as small text on white, and no amount of brand enthusiasm changes that.
These carry meaning in the product. Don't borrow them for decoration — a green badge should always mean something is genuinely fine.
success
#10b981
Consent granted, share active, verification passed.
warning
#f59e0b
Expiring soon, action needed, degraded status.
danger
#f43f5e
Revoked, failed verification, destructive action.
Inter Variable, self-hosted, with
cv11 and
ss01 enabled — the single-story
a and disambiguated 1/l/I, which matters when people are reading
certificate IDs and hashes.
Consent you can prove
Regular 400 for body copy, at comfortable measure.
cert_01JQ8W3M4K · 1lI0O — monospace for identifiers
No Inter? Fall back to system-ui, then Segoe UI, then Roboto. Never substitute a geometric or condensed face — it changes the voice.
pryvc-logo.svg
Vector master. Use this wherever SVG is possible.
pryvc-logo.png
194×54. Also @2x and @3x.
pryvc-logo-white.svg
Knockout, for brand-colored and photographic backgrounds.
pryvc-logo-white.png
194×54 knockout. Also @2x.
pryvc-icon.svg
App icon and favicon. Square, safe down to 16px.
pryvc-icon-512.png
Raster icon. Also 32 and 180.
You don't need to ask us for any of the following:
Please don't:
Anything else, or you're unsure — ask. We answer quickly and we are not precious about it.