.webp)
Privacyboard
Visual identity
Source: https://privacyboard.io/. Extracted 2026-11-03. Public marketing website stylesheet declarations; observed values, not an official internal design system.
Privacyboard — design reference
Typography
Inter Variable is the body and interface family; Sora Variable is the display family. Body declares 14px / 1.5 globally, while the marketing wrapper uses 16px / 1.55. The hero heading declares clamp(36px, 5.6vw, 62px), weight 500, line height 1.02 and letter spacing -0.04em.
Color and hierarchy
The shared palette pairs pale gray backgrounds with white surfaces and a violet accent (#6241d3). Shared text is #262b3f; the marketing wrapper overrides it to #171717 and uses #f7f7f8 for the background. Green, amber and red semantic families support status messages. Keep shared :root tokens distinct from the .lp overrides.
Layout and components
The public site uses a centered 1190px maximum width container with 24px horizontal padding, thin section dividers and vertical rails. Buttons declare 44px height, 10px radius and 15px type. Shared radius tokens are 6, 10, 14 and 20px; the hero preview card uses a 22px radius and a larger shadow.
Product screenshots
The supplied product captures show a persistent left sidebar, pale gray canvas, white rounded cards, purple primary actions and green status badges. Tables organize vendors, activities and privacy requests. Centered modals focus editing tasks, and tabs separate settings and cookie tools. These are visual observations from the captures; product computed styles were not inspected.
Motion and responsiveness
Public stylesheets contain responsive rules at 960px and 720px and reduced motion handling. The hero preview uses an entrance animation; button transitions use 0.15s. No dark theme was verified.
Source: https://privacyboard.io/. Extracted 2026-11-03. Public marketing website stylesheet declarations; observed values, not an official internal design system.
:root
--bg: #f6f6f9;
--surface: #fff;
--sidebar: #fbfbfd;
--ink: #262b3f;
--ink-2: #444a60;
--muted: #6b7185;
--subtle: #9aa0b4;
--line: #e6e7ee;
--line-strong: #d6d8e3;
--hover: #f1f1f7;
--active: #ececf3;
--navy: #101727;
--accent: #6241d3;
--accent-hover: #5236bd;
--accent-ink: #4c32b8;
--accent-tint: #efecfb;
--accent-line: #d9d2f5;
--ok: #12805c;
--ok-tint: #e8faee;
--ok-line: #bdeccf;
--amber: #a15c07;
--amber-tint: #fdf4e3;
--amber-line: #f0dcb4;
--red: #b42318;
--red-tint: #fdeeed;
--red-line: #f3c9c5;
--blue: #3947c8;
--blue-tint: #eef0fd;
--font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Sora Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--shadow-xs: 0 1px 2px #262b3f0f;
--shadow-md: 0 6px 20px #262b3f14, 0 1px 3px #262b3f0f;
--shadow-lg: 0 24px 64px #10172738, 0 2px 8px #10172714;
--dots: linear-gradient(160deg, #f8f8fb 0%, #fff 65%);.lp
--bg: #f7f7f8;
--ink: #171717;
--mute: #8b8b92;
--line: #e8e8ec;
--card: #fff;
--ok: #1a7f4b;
--ok-bg: #e7f6ee;
--amber: #9a5b00;
--amber-bg: #fdf1dc;
--violet: #6241d3;
--shadow: 0 1px 2px #14141e0a, 0 8px 24px -8px #14141e1a;
--shadow-lg: 0 2px 4px #14141e0a, 0 24px 56px -16px #14141e2e;Source: https://privacyboard.io/. Extracted 2026-11-03. Public marketing website stylesheet declarations; observed values, not an official internal design system.
| Scope | Token | Value |
|---|---|---|
| :root | --bg | #f6f6f9 |
| :root | --surface | #fff |
| :root | --sidebar | #fbfbfd |
| :root | --ink | #262b3f |
| :root | --ink-2 | #444a60 |
| :root | --muted | #6b7185 |
| :root | --subtle | #9aa0b4 |
| :root | --line | #e6e7ee |
| :root | --line-strong | #d6d8e3 |
| :root | --hover | #f1f1f7 |
| :root | --active | #ececf3 |
| :root | --navy | #101727 |
| :root | --accent | #6241d3 |
| :root | --accent-hover | #5236bd |
| :root | --accent-ink | #4c32b8 |
| :root | --accent-tint | #efecfb |
| :root | --accent-line | #d9d2f5 |
| :root | --ok | #12805c |
| :root | --ok-tint | #e8faee |
| :root | --ok-line | #bdeccf |
| :root | --amber | #a15c07 |
| :root | --amber-tint | #fdf4e3 |
| :root | --amber-line | #f0dcb4 |
| :root | --red | #b42318 |
| :root | --red-tint | #fdeeed |
| :root | --red-line | #f3c9c5 |
| :root | --blue | #3947c8 |
| :root | --blue-tint | #eef0fd |
| :root | --font-sans | "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| :root | --font-display | "Sora Variable", "Inter Variable", ui-sans-serif, system-ui, sans-serif |
| :root | --font-mono | ui-monospace, "SF Mono", Menlo, monospace |
| :root | --r-sm | 6px |
| :root | --r-md | 10px |
| :root | --r-lg | 14px |
| :root | --r-xl | 20px |
| :root | --shadow-xs | 0 1px 2px #262b3f0f |
| :root | --shadow-md | 0 6px 20px #262b3f14, 0 1px 3px #262b3f0f |
| :root | --shadow-lg | 0 24px 64px #10172738, 0 2px 8px #10172714 |
| :root | --dots | linear-gradient(160deg, #f8f8fb 0%, #fff 65%) |
| .lp | --bg | #f7f7f8 |
| .lp | --ink | #171717 |
| .lp | --mute | #8b8b92 |
| .lp | --line | #e8e8ec |
| .lp | --card | #fff |
| .lp | --ok | #1a7f4b |
| .lp | --ok-bg | #e7f6ee |
| .lp | --amber | #9a5b00 |
| .lp | --amber-bg | #fdf1dc |
| .lp | --violet | #6241d3 |
| .lp | --shadow | 0 1px 2px #14141e0a, 0 8px 24px -8px #14141e1a |
| .lp | --shadow-lg | 0 2px 4px #14141e0a, 0 24px 56px -16px #14141e2e |
Source: https://privacyboard.io/. Extracted 2026-11-03. Public marketing website stylesheet declarations; observed values, not an official internal design system.
Verification
- Inter Variable and Sora Variable are declared through @font-face in the public font stylesheet.
- Next.js is identified by /\_next assets, React server component output and X-Nextjs-Prerender response headers. Hosting is verified by Server: Vercel and X-Vercel response headers.
- Stack entries describe the observed public website. Backend and private product infrastructure were not inferred.
- The Privacy & GDPR Tools category is supported by the official product and documentation.
- The official changelog is linked from the documentation and returns HTTP 200.
- Shared tokens and marketing overrides were recorded separately; the inventory does not resolve the browser cascade or all interaction states.