Skip to content
DesignMunkDesignMunk Submit a site

Privado

privado.ai
Modernize privacy with complete data visibility and AI agent automation
AI Security Webflow Homepage aeonik TT Interphases Pro V
Share Visit site
privado.ai DESKTOP · 1440
Privado

AI Breakdown

Design export

# Design brief: the Privado design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/04180915/privado-ai-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04180915/privado-ai-featured.webp
- On DesignMunk: https://designmunk.com/privado/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Privado AI: Big Grotesk Headlines and Repeated Product Tabs

## Overview

Privado's UI is enterprise-serious, text-led, and spacious. White surfaces, deep navy text, and restrained accents support clarity for compliance content. Density is controlled by a 16/32/64 rhythm, with large headlines establishing hierarchy. Use this tone whenever tokens don't dictate specifics: neutral, confident, and evidence-driven rather than playful.

## Colors

- primary (#0c1425): Core text and headline color; use for h1–h3 and high-contrast body copy.
- secondary (#040404): Near-black for rare emphasis or dark modes in imagery; avoid for long paragraphs.
- tertiary (#754cff): Accent for links, highlights, and small UI markers; do not use for body text or large blocks.
- neutral (#ffffff): Page background and card base.
- border (#e5e7eb): Subtle dividers, card outlines, inputs, and table rules.
- surface (#ffffff): Container and card surfaces matching the page.
- on-surface (#0c1425): Text and icons that sit on white surfaces.

## Typography

- Aeonik (headlines lg/md/sm): Custom/self-hosted geometric grotesk used at 68px, 44px, and 24px, weight 400 with tight line heights (1.0–1.25). Not Google-hosted; substitutes: Inter, Manrope.
- TT Interphases Pro V (headline-xs and body-md): Custom/self-hosted technical grotesk used for small headings (18px/1.22) and body (16px/1.62). Substitutes: IBM Plex Sans, Inter.
- Pairing guidance: Keep headlines in Aeonik (or Inter as fallback) and body in TT Interphases Pro V (or IBM Plex Sans). Maintain the recorded line heights to preserve the crisp, compact look.

## Layout

Spacing scale is modular: xs 6 for chips and fine gaps; sm 16 for inner padding and small gutters; md 32 for block spacing; lg 64 for section rhythm; xl 96 for major band breaks. Use a 12-column fluid grid with generous outer whitespace; cards and feature panels pad at 16px. Headline bands typically stack as 64–96px top, headline, 16–32px subcopy, 32px CTA, then 64px to content.

## Elevation & Depth

Hierarchy is mostly tonal and via borders (#e5e7eb). Use measured_shadows.md for hover states or floating elements and measured_shadows.lg for overlays if needed. Avoid heavy drop shadows; the UI should read flat and clean. Reserve any stronger glow effects for marketing art, not core controls.

## Shapes

Two radii define shape language: sm 8px for cards, inputs, and secondary buttons; full 9999px for pills such as compact CTAs and announcement chips. Use square corners only for inline links and non-button text actions.

## Components

Buttons and card primitives:
- Button Primary: #f3f4f5 background, #8f95a3 text, full radius, 36px height, 6px/16px padding. Use for low-contrast utility actions (e.g., nav 'Request demo').
- Button Secondary: White background, #363a45 text, 8px radius, 36px height, 6px/16px padding. Use for secondary or inline CTAs.
- Button Link: Text action in #040810 with no radius; use for lightweight navigation within sections.
- Card: White background, #0c1425 text, 8px radius, 16px padding; add a #e5e7eb border for separation.

### Webinar Banner
Sticky top bar for promotions. Background stays white on page load; rely on body text #0c1425 and a link accent in #754cff. Height ~36–44px, content aligned center with 16px horizontal padding and a close icon at the right.

### Announcement Pill
Small full-radius chip above the hero introducing Wren. Set in body-md (16px) or headline-xs (18px) with tight 6px vertical padding, 16px horizontal padding, neutral background, and #0c1425 text; optional #e5e7eb hairline border.

### Hero Section
Headline uses headline-lg (68px/1.0, letter-spacing -0.01em), subcopy in body-md (16px/1.62). Primary CTA aligns below with 32px gap; secondary link may sit beside with 16px gap. Maintain 96px band padding.

### Product Tabs
Three-item tab group ("Agentic Assessments / Dynamic Data Maps / Auto-Risk Discovery"). Tab labels in headline-xs (18px) with 16px x-padding and 8px y-padding, 8px radius. Active tab may use a subtle #e5e7eb underline or a filled neutral chip.

### Capability Diagram
"How We Solve it" band with three columns labeling visibility, agents, governance. Use cards with 8px radius, 16px padding, and border #e5e7eb; headlines in headline-sm (24px) and supporting text in body-md.

### Product Feature Cards
For each product (Web/App/Code Auditors, Data Maps, Assessments): white card, 8px radius, 16px padding, headline-sm (24px), body-md, and a Button Link for "Learn more". Maintain 32px vertical rhythm between cards.

### Testimonial Carousel
Quote blocks on white with #e5e7eb borders. Use headline-sm (24px) or body-md for the quote, attribution in headline-xs (18px). 32px interior spacing, 64px outer spacing.

### FAQ Accordion
Question rows in headline-sm (24px) with chevron; answers in body-md. Use #e5e7eb top/bottom borders per item and 16px inner padding, 8px corner radius if surfaced as cards.

## Do's and Don'ts

- Do keep primary text in #0c1425 on white #ffffff; rely on size, not color, for hierarchy.
- Do reserve #754cff for links and small accents; avoid using it for long headings or backgrounds.
- Do use 8px radius for structural components and 9999px only for pills and compact CTAs.
- Don't apply heavy shadows; prefer #e5e7eb borders to separate content.
- Don't squeeze vertical rhythm—use 32px between blocks and 64–96px between sections.
- Don't mix button styles within a single CTA group; pair one filled style with one text link only.

## Agent Prompt Guide

Quick color reference:
- Text: #0c1425
- Background: #ffffff
- Border: #e5e7eb
- Accent: #754cff

1) Build the hero band
- Container: background #ffffff; padding-top 96px; padding-bottom 96px.
- H1: font-family "Aeonik", Inter, system-ui; size 68px; weight 400; line-height 1.0; letter-spacing -0.01em; color #0c1425.
- Subcopy: font-family "TT Interphases Pro V", "IBM Plex Sans", Inter, system-ui; size 16px; line-height 1.62; color #0c1425; max-width 720px.
- CTA: button 36px tall; padding 6px 16px; radius 9999px; background #f3f4f5; text #8f95a3.

2) Product tabs module
- Wrap in white #ffffff with 64px vertical spacing.
- Each tab: label font 18px/1.22 (TT Interphases Pro V → fallback IBM Plex Sans); padding 8px 16px; radius 8px; inactive text #0c1425; active indicator: bottom border 2px #754cff.

3) Feature card grid (3-up)
- Grid: 12 columns, gap 32px; card min 320px.
- Card: background #ffffff; border 1px solid #e5e7eb; radius 8px; padding 16px; shadow none.
- Title: 24px/1.25 Aeonik; body: 16px/1.62 TT Interphases Pro V; link color #754cff.

4) FAQ accordion
- Item container: border-top 1px #e5e7eb; padding 16px 0.
- Question: 24px Aeonik, color #0c1425.
- Answer: 16px TT Interphases Pro V, color #0c1425; spacing-top 16px; nested links in #754cff.

## Similar Brands

- OneTrust: similarly minimal and enterprise-oriented; OneTrust leans heavier on green accent where Privado keeps a restrained violet.
- Transcend: crisp white surfaces and strong type; Transcend uses more dark-mode imagery than Privado's mostly light UI.
- Ketch: privacy & consent tooling with white cards and light borders; Ketch employs bolder color blocks.
- Osano: compliance product with sober typography; Osano's cards use stronger shadows, while Privado prefers flat with borders.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0c1425;
  --color-secondary: #040404;
  --color-tertiary: #754cff;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 68px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.01em;
  --text-headline-md-size: 44px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.25;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.62;
  --font-aeonik: "Aeonik";
  --font-tt-interphases-pro-v: "TT Interphases Pro V";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #f3f4f5;
  --button-primary-text-color: #8f95a3;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 6px 16px;
  --button-primary-height: 36px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: #363a45;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 6px 16px;
  --button-secondary-height: 36px;
  --button-link-text-color: #040810;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #0c1425;
  --color-secondary: #040404;
  --color-tertiary: #754cff;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #0c1425;
  --font-headline-lg: "Aeonik";
  --font-headline-md: "Aeonik";
  --font-headline-sm: "Aeonik";
  --font-headline-xs: "TT Interphases Pro V";
  --font-body-md: "TT Interphases Pro V";
  --text-headline-lg: 68px;
  --text-headline-md: 44px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.01em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.078,
                    0.145
                ],
                "hex": "#0c1425"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.459,
                    0.298,
                    1
                ],
                "hex": "#754cff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.078,
                    0.145
                ],
                "hex": "#0c1425"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik",
                "fontSize": {
                    "value": 68,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.01,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik",
                "fontSize": {
                    "value": 44,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Aeonik",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TT Interphases Pro V",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TT Interphases Pro V",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Privado**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork