---
version: alpha
name: "cloaked.com"
description: "Design system extracted from https://www.cloaked.com/ on 2026-10-28"
colors:
  background: "#fbf8ef"
  surface: "#b0aea7"
  surface-2: "#e9e6da"
  foreground: "#ffe9e0"
  primary: "#130f02"
  on-primary: "#ffffff"
  secondary: "#ff550c"
  border: "#292519"
typography:
  headline-display:
    fontFamily: "Simula Book"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "61.6px"
    letterSpacing: "-1.12px"
  headline-lg:
    fontFamily: "Stkbureausans"
    fontSize: "32px"
    fontWeight: 300
    lineHeight: "1.4"
  headline-md:
    fontFamily: "Simula Book"
    fontSize: "32px"
    fontWeight: 300
    lineHeight: "35.2px"
  body-md:
    fontFamily: "Stkbureausans"
    fontSize: "14px"
    fontWeight: 300
    lineHeight: "19.6px"
  label-md:
    fontFamily: "Stkbureausans"
    fontSize: "13px"
    fontWeight: 300
    lineHeight: "1.4"
  button:
    fontFamily: "Stkbureausans"
    fontSize: "12px"
    fontWeight: 300
    lineHeight: "19.2px"
rounded:
  none: "0px"
  full: "9999px"
  2xl: "48px"
  md: "8px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "24px"
  6: "32px"
  7: "36px"
  8: "48px"
  9: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#fbf8ef"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "36px"
    padding: "0px 16px"
  input:
    backgroundColor: "#fbf8ef"
    rounded: "48px"
    height: "64px"
  card:
    backgroundColor: "#1c180b"
    rounded: "32px"
    padding: "24px"
---

# cloaked.com

## Overview

Cloaked | Safeguard your online privacy: We keep your data private, protecting what matters most. Take our free assessment to see if you’ve been compromised.

Pill-shaped controls, layered shadows for depth, large display type at 56px / 400, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1082 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--hover.png`: Icon button 1, hover
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-icon-button-1--selected.png`: Icon button 1, clicked
- `screenshots/c-toggle-button-1--rest.png`: Toggle / segmented control 1, rest
- `screenshots/c-toggle-button-1--hover.png`: Toggle / segmented control 1, hover
- `screenshots/c-toggle-button-1--focus.png`: Toggle / segmented control 1, focus
- `screenshots/c-toggle-button-1--selected.png`: Toggle / segmented control 1, clicked
- `screenshots/c-link-1--rest.png`: Text link 1 ("Pricing"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Pricing"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Pricing"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("Pricing"), active
- `screenshots/c-fab-1--rest.png`: Floating action button 1, rest
- `screenshots/c-fab-1--hover.png`: Floating action button 1, hover
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--focus.png`: Text input 1, focus
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("See Cloaked Terms & Cond"), rest
- `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("See Cloaked Terms & Cond"), clicked
- `screenshots/c-card-1--rest.png`: Card 1 ("Scammers & Fraudsters"), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("Email & Phone AliasesMas"), rest
- `screenshots/c-avatar-1--rest.png`: Avatar 1, rest
- `screenshots/c-image-1--rest.png`: Image / figure 1, rest
- `screenshots/c-video-1--rest.png`: Video / media embed 1, rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Get Started"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Get Started"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Get Started"), focus
- `screenshots/c-toggle-button-2--rest.png`: Toggle / segmented control 2, rest
- `screenshots/c-toggle-button-2--focus.png`: Toggle / segmented control 2, focus
- `screenshots/c-toggle-button-2--selected.png`: Toggle / segmented control 2, clicked
- `screenshots/c-text-input-2--rest.png`: Text input 2, rest
- `screenshots/c-text-input-2--focus.png`: Text input 2, focus
- `screenshots/c-text-input-2--disabled.png`: Text input 2, disabled
- `screenshots/c-text-input-2--filled.png`: Text input 2, filled
- `screenshots/c-card-2--rest.png`: Card 2 ("Identity ThievesThey ste"), rest
- `screenshots/c-image-2--rest.png`: Image / figure 2, rest
- `screenshots/c-button-3--rest.png`: Button 3, rest
- `screenshots/c-button-3--focus.png`: Button 3, focus
- `screenshots/c-button-3--disabled.png`: Button 3, disabled
- `screenshots/c-card-3--rest.png`: Card 3 ("170+millioncalls screene"), rest
- `screenshots/c-image-3--rest.png`: Image / figure 3, rest
- `screenshots/c-card-4--rest.png`: Card 4 (".tp-widget-businessinfo "), rest
- `screenshots/c-card-5--rest.png`: Card 5 ("Cloaked...Is SOC 2 compl"), rest
- `screenshots/c-card-6--rest.png`: Card 6, rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#fbf8ef` | Page background |
| surface | `#b0aea7` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#e9e6da` | Secondary surface |
| foreground | `#ffe9e0` | Primary text |
| primary | `#130f02` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#ff550c` | Secondary accent (orange) |
| border | `#292519` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#fbf8ef`, `#130f02`, `#1c180b`, `#ff550c`, `#b0aea7`, `#e9e6da`, `#454030`, `#292519`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9))`.

The accent `#130f02` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Simula Book** for h1, h3: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Stkbureausans** for body, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

Font link found on the page: `https://fonts.googleapis.com`

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Simula Book | 56px | 400 | 61.6px | -1.12px |
| headline-lg | Stkbureausans | 32px | 300 | 1.4 | normal |
| headline-md | Simula Book | 32px | 300 | 35.2px | normal |
| body-md | Stkbureausans | 14px | 300 | 19.6px | normal |
| label-md | Stkbureausans | 13px | 300 | 1.4 | normal |
| button | Stkbureausans | 12px | 300 | 19.2px | normal |
- headline-lg: fallback (source h2); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.
- label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.

Type scale in use: 12px, 14px, 16px, 18px, 32px, 56px. Base body size 14px.

The hero heading (h1) renders at 56px / 400, left aligned, up to 543px wide, tracking -1.12px. Sample: "Fight against surveillance, spam, & identity theft.".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 32, 36, 48, 80 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 24, 32, 48 px.
- Content max width: 1278px, centred.
- Breakpoints: 479px, 767px, 768px, 991px, 1440px.
- Header: 0px tall, static, background `rgba(24, 25, 25, 0)`; 0 nav links at nullpx / null.

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(95, 17, 0, 0.3) 0px 20px 68px 0px`
- shadow-2: `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`

## Shapes

- Buttons: 9999px
- Inputs: 48px
- Cards and panels: 32px
- Images and media: 0px
- Radius scale: none 0px, full 9999px, 2xl 48px, md 8px

## Components

### Button, primary

Background `#130f02`, text `#fbf8ef`, border none, radius 9999px, height 36px, padding 0px 16px, 16px / 300. Sample label: "Get Started".

### Input

Height 64px, background `#fbf8ef`, border 1px solid #ffffff, radius 48px, 16px text, padding 8px 8px, shadow `rgba(95, 17, 0, 0.3) 0px 20px 68px 0px`.

### Card

Background `#1c180b`, border 1px solid #292519, radius 32px, padding 24px, no shadow. Typical size about 405×444px.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (19 of 87 in the checklist, 32 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 26 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost, ink sm, destructive | hover, focus, disabled |  |
| Icon button | ghost | hover, focus, active, disabled, open |  |
| Toggle / segmented control | secondary, destructive | hover, focus, selected |  |
| Text link | plain | hover, focus, active | "Pricing" |
| Floating action button | destructive | hover |  |
| Text input | outlined, outlined | focus, disabled, filled, placeholder |  |
| Menu / dropdown trigger | ghost | open | "See Cloaked Terms & Conditions" |
| Card | flat, outlined, outlined, filled-with-media, flat-media-top, filled-with-media | rest only | "Scammers & Fraudsters" |
| Testimonial / quote card | filled-with-media | rest only | "“Finally, my phone goes quiet." |
| Styled list | default | rest only | "Email & Phone AliasesMasked em" |
| Avatar | 67px-rounded | rest only |  |
| Image / figure | aspect-0.75-rounded, aspect-1, aspect-1 | rest only |  |
| Video / media embed | default | rest only |  |
| Carousel / slider | default | rest only |  |
| Icon | outline-17px, outline-24px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Button group, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Navigation link, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Footer link, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1278px | 129px | 14px | 56px, 3 lines, left | 0px, 0 links | media below text | 3→3 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | 926px | 97px | 14px | 56px, 4 lines, left | 0px, 0 links | media below text | 3→3 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 686px | 73px | 14px | 48px, 2 lines, left | 0px, 0 links | media below text | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 356px | 25px | 14px | 40px, 3 lines, left | 0px, 0 links | media below text | 2→1 col; 2→1 col; 3→3 col | 4 full-width |

- H1 goes 56px → 40px (71%), 3 → 3 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Body text is 14px at the sampled desktop and phone widths.
- Phone side gutter 25px.
- 4 buttons stretch full-width on phones.
- Section top padding 106px → 96px.

## Interaction & Motion

134 elements carry transitions; typical 0.3s with ease, mostly on transform, all, background-color. 1 running keyframe animations (bounce 3s infinite).

- Hover on button-primary: moves up 2.4px; cursor pointer; transition transform | 0.167s | cubic-bezier(0.33, 0, 0, 1).
- Hover on input: no visible change; cursor text.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on input: border → #a09c8f.
- Tooltip triggers exist (7 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 9 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- No scroll-reveal: content is visible without scrolling into view.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#130f02` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 14px in Stkbureausans and headings in Simula Book.
- Do match corner radii per element class (buttons 9999px, cards 32px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.
- Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).