Cookiedatabase Design System Deep Dive

1. Brand Overview

Cookiedatabase.org is, at its core, a compliance and transparency tool for web cookies. The design language reflects that purpose: no fluff, no whimsical gradients, no distracting illustration styles. It’s functional, restrained, and clearly engineered to support a compliance-heavy user journey. You can tell this is aimed at site owners, developers, and privacy officers — people who need clarity, not visual indulgence.

The vibe leans toward “trustworthy utility.” The palette is dominated by deep grays (#333333, #222222, #000000) and a single strong blue (#1e73be) as the main action color. This isn’t a lifestyle brand trying to sell you a feeling; it’s a data-driven service that wants to feel credible. The blue reads as a conventional “safe click” color — the same family you see in SaaS dashboards and government portals — with no risk of misinterpretation. It’s paired with high-contrast white for legibility.

Typography reinforces this utilitarian approach. The most common family is Roboto, clean and neutral, with occasional system fonts (-apple-system, system-ui) to keep UI elements snappy and platform-native. Montserrat sneaks in on link contexts, hinting at a slightly more modern accent, but it’s minimal. There’s even Roboto Slab in some headings, which adds a subtle serif-based authority to certain text — an odd but interesting choice in an otherwise sans-serif ecosystem.

Layout and spacing follow an 8px base scale, which is standard for modern web UI systems. The spacing tokens are pragmatic: lots of 10px and 20px usage, some 25px, and larger 70–100px values for major sections. No fluid, organic spacing — it’s all grid.

Components are straightforward. Buttons have three main variants: primary blue with white text, secondary light gray, and a pill-shaped search/CTA style with heavy border and fun hover rotation. Links are mostly underlined or plain, with hover color shifts. Inputs are stripped down — no borders until focus, minimal radius (3px), and light focus outlines.

Overall, Cookiedatabase’s design philosophy reads as: functional clarity first, minimal distraction, traditional web patterns, with a sprinkle of personality in hover states. If you’re building something under this brand, you’d better respect the grid, keep colors tight, and avoid anything that looks “marketing-y.”

2. Color System

2.1 Primary Colors

The standout primary is blue — specifically #1e73be (rgb(30,115,190)) — used for primary buttons, links, and CTAs. Blue is the safest pick for trust and professionalism. Here, it’s medium saturation, so it doesn’t scream for attention but is still easily identifiable as an interactive element. Compared to competitors in the compliance space (often teal or dark navy), this sits in a sweet spot of friendly but serious.

There’s also a brighter accent blue #009fff (rgb(0,159,255)), occasionally used in link contexts, and a softer sky blue #29b6f6 that shows up less often. These are secondary action colors or highlight states.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high almost everywhere — black or dark gray text on white, white on blue, white on black. WCAG compliance is likely met for core UI. The only potential concern is light gray #f2f2f2 borders against white backgrounds — low contrast but acceptable for non-critical decorative borders.

Dark mode isn’t implemented here; the palette is fixed. The dark grays and blacks give the site a semi-dark feel in places, but it’s still a light-mode site.

2.4 Usage Guide

Works well:

• #1e73be background with white text — perfect for CTAs.
• White background with #333333 text — safe, readable.
• Black hover over blue — strong change in state.

Avoid:

• Using #009fff for large blocks of text — too bright, can fatigue the eye.
• Pairing #f2f2f2 border on #efefef background — almost invisible.
• Mixing #29b6f6 and #1e73be in the same component — they’re too close in hue but different in saturation.

3. Typography

3.1 Font Families

Primary:

• Roboto — A workhorse sans-serif, clean, readable at small sizes, consistent across devices.

Secondary:

• -apple-system stack — Native system fonts for buttons, captions, links in some contexts.
• Montserrat — Used for links, adds a more modern geometric feel.
• Roboto Slab — Rare, in headings with capitalize transform, adds authority.

No Google Fonts are loaded; likely relying on local/system availability.

3.2 Type Scale

3.3 Hierarchy

They rely heavily on size jumps rather than drastic weight changes. H1 can be 35px (300 weight) or 35px (600 weight) — giving flexibility to emphasize without changing size. Body text sits at 16px, with captions at 12–14px. Line heights vary; headings are tight (1.0–1.2), body is comfortable (1.5–2.0). This yields clear visual separation without unnecessary decoration.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints are abundant — likely due to mixed responsive frameworks:

350px, 425px, 479px, 575px, 576px, 640px, 767px, 768px, 991px, 992px, 1024px, 1025px, 1200px, 99999px.

This suggests the system is tuned for very specific component adjustments at multiple widths, not just “mobile/tablet/desktop.”

5. Visual Elements

Border Radius

Radius usage is inconsistent — small radii for form elements, large pill shapes for special CTAs/search.

Shadows

Two main shadows:

• rgba(0,0,0,0.08) 0px 10px 30px 0px — subtle depth.
• rgba(0,0,0,0.19) 0px 10px 20px 0px, rgba(0,0,0,0.23) 0px 6px 6px 0px — heavier, layered shadow for hover states.

Borders

• 1px solid #f2f2f2 — light, subtle.
• 2px solid #333333 — strong, high-contrast.
• 1px solid #1e73be — brand-color border.

6. Components

6.1 Buttons

Primary (cmplz-accept):

• Default: bg #1e73be, text #ffffff, padding 10px, radius 6px, border 1px solid #1e73be.
• Hover: bg #000000, text #ffffff.
• Focus: bg #000000, text inherit, outline 0.

Secondary (cmplz-deny):

• Default: bg #f9f9f9, text #222222, padding 10px, radius 6px, border 1px solid #f2f2f2.
• Hover: bg #000000, text #ffffff.
• Focus: same as hover.

Pill (elementor-button):

• Default: bg #ffffff, text #333333, padding 10px 20px, radius 50px, border 2px solid #333333.
• Hover: bg #3f444b, text #fff, rotate(6deg), box-shadow heavy, border removed.
• Active: text #333366, no border.
• Focus: border 1px solid #5897fb, bg #3f444b, box-shadow rgb(36,95,204) 0 0 0 2px, rotate(6deg).

6.2 Links

Multiple styles:

• Blue #1e73be underlined, hover #333366.
• Pink #cc3366 no underline, hover #333366.
• Bright blue #009fff no underline, hover #333366.
• Black #000000 no underline, hover white.
• Gray #333333 no underline, hover white.

6.3 Forms

Search input:

• Default: transparent bg, no border, radius 3px, padding 0 25px.
• Focus: border-color #333333, box-shadow rgb(36,95,204) 0 0 0 2px.

6.4 Cards

No explicit card styles extracted, but shadows suggest:

• Light shadow for default depth.
• Heavy shadow for hover.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #333333;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-very-dark-gray: #222222;
  --color-bright-blue: #009fff;
  --color-primary-blue: #1e73be;
  --color-sky-blue: #29b6f6;
  --color-green: #008000;
  --color-light-gray-overlay: #efefef;
  --color-medium-blue: #6ca3e2;
  --color-deep-blue: #0e4685;
  --color-navy-blue: #164c8b;
  --color-orange: #F56E28;
  --color-light-gray-border: #f2f2f2;

  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-system: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-montserrat: "Montserrat", sans-serif;
  --font-roboto-slab: "Roboto Slab", serif;

  /* Spacing */
  --space-2_5: 2.5px;
  --space-5: 5px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-13: 13px;
  --space-14_4: 14.4px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-50: 50px;
  --space-70: 70px;
  --space-75: 75px;
  --space-100: 100px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-top-lg: 12px 12px 0 0;
  --radius-round-49: 49px;
  --radius-full: 50px;

  /* Shadows */
  --shadow-light: rgba(0, 0, 0, 0.08) 0px 10px 30px 0px;
  --shadow-heavy: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
}

8. AI Coding Assistant Prompt

# Cookiedatabase Design System Specification

You are a Cookiedatabase design expert. Build UIs matching their visual language exactly.

## Brand Context
Cookiedatabase values functional clarity, high trust, and minimal distraction. The brand uses a restrained palette with one strong blue for actions, tight grid-based spacing, and clean typography. Hover states add subtle personality without breaking the professional feel.

## Color Palette
- Dark Gray: #333333 — Body text, headers, dividers
- Black: #000000 — Hover backgrounds, text
- White: #ffffff — Page background, text on dark
- Very Dark Gray: #222222 — Secondary text, button text
- Bright Blue: #009fff — Editor links
- Primary Blue: #1e73be — CTAs, primary buttons, key actions
- Sky Blue: #29b6f6 — Accent highlights
- Green: #008000 — Category headers always active
- Light Gray Overlay: #efefef — Background overlays
- Medium Blue: #6ca3e2 — Hover/focus states
- Deep Blue: #0e4685 — Hover/focus states
- Navy Blue: #164c8b — Hover/focus states
- Orange: #F56E28 — Slider inactive state
- Light Gray Border: #f2f2f2 — Button borders

## Typography
Font Families:
- Headings: "Roboto"
- Body/System UI: -apple-system stack
- Links: "Montserrat"
- Special Headings: "Roboto Slab"

Type Scale:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Roboto | 35px | 300/600 | 1.0 | Page titles |
| H1 | Roboto | 30px | 400 | 1.0 | Section headings |
| H1 | Roboto | 24px | 500 | 1.2 | Subsection headings |
| Body | System | 16px | 400 | 1.5 | Paragraph text |
| Body | Roboto | 16px | 400/300 | 2.0 | Paragraph text |
| Button | Roboto/System | 15px | 500 | 1.33 | Button labels |
| Link | Montserrat | 20px | 400 | 1.0 | Navigation links |
| Caption | Roboto/System | 14px | 400/500 | 1.5 | UI labels |
| Caption Small | System | 12px | 400/500 | 1.5 | Microcopy |

## Spacing & Grid
Base: 8px grid
Scale: 2.5px, 5px, 7.5px, 8px, 10px, 13px, 14.4px, 15px, 16px, 20px, 25px, 50px, 70px, 75px, 100px
Map:
- Button padding: 10px vertical, 20px horizontal (pill)
- Section gaps: 20px, 25px
- Hero spacing: 70px+
- Micro-adjustments: 2.5px, 5px

## Border Radius
- sm: 3px — inputs
- md: 6px — standard buttons
- lg: 12px — dialogs
- top-lg: 12px 12px 0 0 — button tops
- round-49: 49px — decorative divs
- full: 50px — pill buttons

## Shadows & Depth
- Light shadow: rgba(0,0,0,0.08) 0px 10px 30px
- Heavy shadow: rgba(0,0,0,0.19) 0px 10px 20px, rgba(0,0,0,0.23) 0px 6px 6px

## Component Specifications

### Primary Button (.cmplz-accept)
Default:
- bg: #1e73be
- text: #ffffff
- padding: 10px
- radius: 6px
- border: 1px solid #1e73be
Hover:
- bg: #000000
- text: #ffffff
Focus:
- bg: #000000
- text: inherit
- outline: none

### Secondary Button (.cmplz-deny)
Default:
- bg: #f9f9f9
- text: #222222
- padding: 10px
- radius: 6px
- border: 1px solid #f2f2f2
Hover/Focus:
- bg: #000000
- text: #ffffff

### Pill Button (.elementor-button)
Default:
- bg: #ffffff
- text: #333333
- padding: 10px 20px
- radius: 50px
- border: 2px solid #333333
Hover:
- bg: #3f444b
- text: #fff
- rotate: 6deg
- shadow: heavy
Focus:
- border: 1px solid #5897fb
- bg: #3f444b
- shadow: rgb(36,95,204) 0 0 0 2px
- rotate: 6deg

### Links
- Blue underlined: default #1e73be, hover #333366
- Pink no underline: default #cc3366, hover #333366
- Bright blue no underline: default #009fff, hover #333366
- Black no underline: hover white
- Dark gray no underline: hover white

### Input Field (search)
Default:
- bg: transparent
- border: none
- radius: 3px
- padding: 0 25px
Focus:
- border-color: #333333
- shadow: rgb(36,95,204) 0 0 0 2px

## Layout & Responsive Rules
Breakpoints: 350px, 425px, 479px, 575px, 576px, 640px, 767px, 768px, 991px, 992px, 1024px, 1025px, 1200px, 99999px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Hover states must change bg and text color
- Focus states must add visible outline or shadow

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use Roboto for headings, system UI for native controls
- Keep buttons consistent in padding and radius
- Use hover color shifts to indicate interactivity
- Apply heavy shadow only on hover for pill buttons
- Ensure text contrast meets WCAG AA

## DON'T List
- Don't invent new colors
- Don't mix border radius styles in same component
- Don't use heavy shadow on default state
- Don't remove hover indication
- Don't apply underline to non-link elements

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #1e73be;
  color: #ffffff;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #1e73be;
  font-weight: 500;
  font-size: 15px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #000000; }
.btn-primary:focus { background: #000000; outline: none; }
```

Secondary Button:
```css
.btn-secondary {
  background: #f9f9f9;
  color: #222222;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #f2f2f2;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: #000000;
  color: #ffffff;
}
```

Search Input:
```css
.input-search {
  background: transparent;
  border: none;
  border-radius: 3px;
  padding: 0 25px;
}
.input-search:focus {
  border-color: #333333;
  box-shadow: rgb(36,95,204) 0px 0px 0px 2px;
  outline: none;
}
```

9. Summary

TL;DR — Cookiedatabase’s design is a disciplined, utility-first system with a single confident blue for actions, strict 8px spacing, and clean typography. Minimal decoration, maximum clarity.

Brand Keywords:

• compliance-focused
• grid-disciplined
• utility-first
• trust-blue
• hover-playful