# Trustedshops Design System

> A high-contrast safety yellow and deep nautical blue interface anchored by bold typography and generous white space.

**Source:** https://trustedshops.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Trustedshops utilizes a high-visibility palette dominated by a primary deep blue (#005aa0) and a signature brand yellow (#ffdc00, observed in screenshots) that signals trust and caution. The system relies on **Roboto** for its typographic foundation, using bold weights for headings to establish a clear hierarchy against a clean white (#ffffff) or light gray (#f6f6f6) canvas. UI elements are characterized by significant rounding, with primary actions utilizing a 32px or 100px "pill" radius. The layout is structured with a 1200px container and ample vertical spacing (up to 50px) to maintain a professional, accessible, and authoritative presence.

## Signature DNA
1. **The Trust Pill** (Deep blue #005aa0 buttons with extreme corner rounding of 32px or 100px, creating a friendly yet secure interaction point across all pages).
2. **High-Contrast Utility** (The pairing of deep blue text on a bright yellow footer or hero background, ensuring maximum legibility and brand recognition).
3. **Roboto Bold Headers** (Heavyweight 40px headings that anchor content sections, providing a sense of stability and institutional scale).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas and button text | 20 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Primary body text and headings | 84 | 0.8 | Computed Style |
| `{color.gray.light}` | `#f6f6f6` | Section backgrounds and card surfaces | 8 | 0.6 | Computed Style |
| `{color.gray.dim}` | `#545651` | Secondary/Muted body text | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#005aa0` | Primary CTAs, active links, theme color | 21 | 1.0 | `--swiper-theme-color` |
| `{color.accent.blue}` | `#3d87ff` | Decorative text and light links | 6 | 0.6 | Computed Style |
| `{color.brand.yellow}` | `#ffdc00` | Hero highlights, footer background | 15+ | 0.9 | Screenshot (Visual) |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Roboto-Bold | 400 (Bold weight) | Display and Section Headings | Roboto Bold | Apache 2.0 |
| Roboto-Regular | 400 | Body copy and subheadings | Roboto | Apache 2.0 |
| Arial | 400, 700 | Fallback headings and navigation | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | normal | normal | 400 | Hero H2 | `h2` |
| `{type.h1}` | 30px | normal | normal | 400 | Page Title | `h1` |
| `{type.h2}` | 26px | normal | normal | 400 | Section Head | `h3` |
| `{type.subheading}` | 22px | 32px | normal | 400 | Intro text | `div.subheading` |
| `{type.body.lg}` | 18px | 24px | normal | 400 | Standard body | `div.row.middle-xs` |
| `{type.button}` | 18px | 18px | normal | 400 | Button labels | `div.button` |
| `{type.body.md}` | 16px | 20.8px | normal | 400 | Paragraphs | `p.bodytext` |
| `{type.link}` | 16px | normal | normal | 700 | Inline links | `a.glink` |

### Principles
1. **Boldness as Authority:** All major section headers use `Roboto-Bold` to project confidence.
2. **Generous Leading:** Body text at 18px uses a 24px line height (1.33x) to ensure readability in dense information blocks.
3. **Blue for Action:** Interactive text elements almost exclusively use the primary blue (#005aa0).

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 6 |
| `{space.sm}` | 8px | 18 |
| `{space.md}` | 16px | 9 |
| `{space.lg}` | 32px | 15 |
| `{space.xl}` | 50px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 93 occurrences |
| `{radius.sm}` | 4px | Form inputs | `radius: 4px` |
| `{radius.md}` | 16px | Content cards | `radius: 16px` |
| `{radius.lg}` | 32px | Primary buttons | `radius: 32px` |
| `{radius.pill}` | 100px | Navigation/Special CTAs | `radius: 100%` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.14) 0px 2px 6px 0px...` | Feature cards and hover states | 9 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action for conversions.
**Pages observed:** Home, Pricing.
**Spec:** Background: `#005aa0` | Text: `#ffffff` | Radius: `32px` | Padding: `13px 18px` | Type: `18px Roboto-Bold`
**States observed:** Default: Captured | Hover: Not captured | Active: Captured

#### Ghost Button
**Role:** Secondary actions or navigation links.
**Pages observed:** Home.
**Spec:** Background: `transparent` | Text: `#005aa0` | Border: `2px #005aa0` | Radius: `32px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or trust markers.
**Pages observed:** Home.
**Spec:** Background: `#ffffff` | Radius: `16px` | Padding: `32px` | Shadow: `{shadow.card}`
**States observed:** Default: Captured

#### Gray Surface Section
**Role:** Visual break between white content sections.
**Pages observed:** Home.
**Spec:** Background: `#f6f6f6` | Radius: `0px` | Padding: `50px vertical`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Trustmark Badge
**Role:** Floating or anchored brand verification.
**Pages observed:** Home (Mobile/Desktop).
**Spec:** Background: `#ffffff` | Radius: `50%` | Shadow: `{shadow.card}`
**States observed:** Default: Captured

#### Footer Navigation
**Role:** Site-wide directory.
**Pages observed:** Home, About.
**Spec:** Background: `#ffdc00` | Text: `#000000` | Type: `16px Roboto-Regular`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Gap | 50px |
| Column Gutter | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Cards stack 1-up. |
| Desktop | 1440px | Horizontal nav visible; 3-up card grids; 1200px container centering. |

## Imagery & decoration
Trustedshops uses clean, flat line-art icons for business categories (Personal, Business, Enterprise) and high-quality photography of people to humanize the "trust" aspect. Decorative "blob" shapes in brand yellow (#ffdc00) are used behind text or as footer transitions.

## Do's
- Use `#005aa0` for all primary interactive elements.
- Apply `32px` border radius to all primary buttons to maintain the "Trust Pill" aesthetic.
- Ensure headings use `Roboto-Bold` at `40px` for top-level hierarchy.
- Use `#f6f6f6` for alternating background sections to reduce eye strain.
- Maintain a minimum of `32px` padding inside content cards.

## Don'ts
- **Wrong:** Using `#3d87ff` for primary buttons. **Right:** Use `#005aa0`. **Reason:** #3d87ff is an accent color for text, not a high-contrast action color.
- **Wrong:** Using sharp corners (0px) on buttons. **Right:** Use `32px` or `100px`. **Reason:** Rounded geometry is a core brand identifier.
- **Wrong:** Placing black text on blue backgrounds. **Right:** Use white text on blue. **Reason:** Contrast requirements for accessibility.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --ts-blue-primary: #005aa0;
  --ts-blue-accent: #3d87ff;
  --ts-yellow-brand: #ffdc00;
  --ts-white: #ffffff;
  --ts-gray-light: #f6f6f6;
  --ts-text-main: #000000;
  --ts-radius-pill: 32px;
  --ts-shadow-card: rgba(0, 0, 0, 0.14) 0px 2px 6px 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Trustedshops blue #005aa0, white text, and a 32px border radius."
- "Design a content card with a white background, 16px corner radius, and the standard Trustedshops soft shadow."
- "Generate a hero section with a 40px Roboto-Bold heading and a background blob in brand yellow #ffdc00."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the CSS evidence.
- Mobile-specific spacing tokens (e.g., smaller gutters) were not fully quantified.
- Success and Error semantic colors were missing from the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://trustedshops.com | 1440px | 2026-06-06 |
| Pricing | https://trustedshops.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://trustedshops.com | 390px | 2026-06-06 |