# Portera.nl Design System

> High-contrast monochrome foundation punctuated by light-weight geometric sans-serifs and vibrant, technical accent bands.

**Source:** https://portera.nl | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Portera.nl utilizes a sophisticated "Dark Mode" hero aesthetic that transitions into a clean, white-canvas professional services layout. The system is anchored by **Poppins** and **Gill Sans Light**, both primarily deployed at a signature weight of 300 to maintain an airy, technical feel even at large display sizes (up to 80px). While the core palette is strictly achromatic (#000000, #ffffff, #666666), the brand uses a "Spectrum Accent" strategy where specific content cards are underlined with thin 6px color bands (Blue #359eff, Green #41824f, Orange #ffaa0f) to categorize insights. UI components favor sharp or slightly softened (5px-6px) corners and subtle depth via large-spread, low-opacity shadows.

## Signature DNA
1. **Lightweight Display** (Poppins at weight 300 is used for everything from 80px heroes to 22px subheads, creating a consistent "thin-line" brand voice across all scales.)
2. **Spectrum Categorization** (The use of 6px bottom borders in varying hues—#359eff, #41824f, #ffaa0f—to differentiate content types without overwhelming the monochrome base.)
3. **Achromatic Depth** (Layering #eeeeee surfaces and #f6f9fb backgrounds against pure #ffffff to create hierarchy without introducing hue.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, deep shadows, branding | 72 | 1 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page canvas, button text, banner backgrounds | 167 | 1 | `--wp--preset--color--white` |
| `{color.surface.muted}` | `#eeeeee` | Card backgrounds, banner borders | 12 | 1 | Computed Style |
| `{color.surface.alt}` | `#f6f9fb` | Subtle section backgrounds, secondary buttons | 2 | 1 | Computed Style |
| `{color.text.secondary}` | `#666666` | Body text, footer text, card descriptions | 13 | 0.8 | Computed Style |
| `{color.text.charcoal}` | `#221e1e` | Alternative heading/text color | 25 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.blue}` | `#359eff` | Primary action background, hyperlinks, category borders | 5 | 1 | `--cmplz_hyperlink_color` |
| `{color.accent.green}` | `#41824f` | Category/Insight border (decorative_only) | 4 | 0.6 | Computed Style |
| `{color.accent.orange}` | `#ffaa0f` | Category/Insight border (decorative_only) | 3 | 0.6 | Computed Style |
| `{color.accent.slate}` | `#64747a` | Secondary UI text | 25 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 300 | Display, Headings, CTAs | Poppins (Google Fonts) | OFL |
| Gill Sans Light | 300, 600 | Body, Navigation, Footer | Jost (Light) | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 80px | 80px | -4px | 300 | Hero H1 | `h1.my-parollerx` |
| `{type.heading.lg}` | 32px | 48px | -1.6px | 300 | Section Headers | `h3.my-parollerx` |
| `{type.heading.md}` | 22px | 26.4px | normal | 300 | Sub-headers | `p.my-parollerx.typeme` |
| `{type.nav}` | 22px | 30px | normal | 300 | Navigation Menu | `div#menu-responsive` |
| `{type.body.lg}` | 18px | 25.2px | normal | 300 | Portfolio/Card Text | `div.portfolio-text` |
| `{type.cta}` | 18px | 18px | normal | 300 | Primary Buttons | `a.cta` |
| `{type.body.md}` | 16px | 30px | normal | 300 | Footer/General Body | `footer` |
| `{type.caption}` | 12px | 30px | 1px | 600 | Active Links/Labels | `a.activex` |

### Principles
1. **Weight Uniformity:** Headlines and body copy both default to weight 300. Boldness is avoided to maintain a "light" aesthetic.
2. **Tight Display Tracking:** Large display type (80px) uses aggressive negative letter-spacing (-4px) to create a compact, architectural look.
3. **Vertical Rhythm:** Line heights are generally generous (1.5x - 1.8x) except for display heroes which use 1:1 ratios.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 18 |
| `{space.sm}` | 10px | 53 |
| `{space.md}` | 20px | 27 |
| `{space.lg}` | 40px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers, section blocks | 276 occurrences |
| `{radius.sm}` | 3px | Small surface elements | Component: Surface |
| `{radius.md}` | 5px | Content cards | Component: Card |
| `{radius.lg}` | 6px | Primary buttons | Component: Rounded Button |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.2) 0px 0px 3px 0px` | Small UI elements | Evidence Shadow 1 |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 0px 50px 0px` | Primary CTA buttons | Evidence Shadow 2 |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site actions (e.g., "Discover More", "View All")
**Pages observed:** https://portera.nl
**Spec:** Background: `#404041` / Text: `#ffffff` / Radius: `6px` / Padding: `15px 40px` / Typography: `Poppins 300 (18px)` / Shadow: `{shadow.deep}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Content Card
**Role:** Insight and Case Study previews
**Pages observed:** https://portera.nl
**Spec:** Background: `#eeeeee` / Text: `#666666` / Radius: `5px` / Padding: `0px 10px` / Typography: `Gill Sans Light 300 (12px)`
**States observed:** Default | Hover: Not captured

#### Accent Surface
**Role:** Categorized content containers
**Pages observed:** https://portera.nl
**Spec:** Background: `transparent` / Border-bottom: `6px solid #41824f` (variable) / Radius: `0px` / Typography: `Poppins 300 (22px)`
**States observed:** Default

### Tier 3: Surface-specific
#### Cookie Banner
**Role:** Consent management
**Pages observed:** https://portera.nl
**Spec:** Background: `#ffffff` / Border: `1px solid #eeeeee` / Typography: `Gill Sans Light 300`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Grid Columns | 3-up (Desktop) / 1-up (Mobile) |
| Section Gap | 40px - 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-up grids stack to 1-up. |
| Desktop | 1440px | Full horizontal navigation; multi-column card layouts. |

## Imagery & decoration
Portera uses high-contrast, technical imagery. The hero features a dark background with a vibrant, flowing wave pattern (cyan/green/yellow) that provides the only significant organic shape in the system. All other decoration is strictly geometric (6px accent lines).

## Do's
- Use **Poppins 300** for all primary headings.
- Apply **-4px letter-spacing** to display text above 60px.
- Use **#359eff** for interactive elements like text links.
- Categorize content using **6px solid bottom borders** in accent colors.
- Maintain a **#ffffff** canvas for all body content sections.

## Don'ts
- **Don't** use bold weights (700+) for headings; stick to weight 300.
- **Don't** use the accent blue (#359eff) for large background surfaces.
- **Don't** mix the accent colors (Blue/Green/Orange) within a single component; they are for categorization.
- **Don't** use rounded corners exceeding **6px**; the brand is primarily sharp-edged.
- **Don't** use pure black (#000000) for long-form body text; use **#666666**.

## Similar brands
- IBM (Type-first, monochrome foundation)
- Accenture (Professional services, sharp geometry)
- Stripe (Technical gradients on dark backgrounds)

## Quick start
```css
/* CSS Variables */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent-blue: #359eff;
  --color-surface-muted: #eeeeee;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Gill Sans Light', sans-serif;
  --weight-signature: 300;
  --radius-card: 5px;
  --shadow-deep: 0px 0px 50px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a hero section with a #000000 background, using Poppins 300 for the H1 at 80px with -4px letter-spacing."
- "Create a content card with a #eeeeee background, 5px border radius, and a 6px solid bottom border in #359eff."
- "Design a primary CTA button using #404041 background, white Poppins 300 text, and a 6px border radius with a deep 50px spread shadow."

## Known gaps
- Hover and Active states for buttons were not captured in the static trace.
- Specific transition timings for the hero slider were not documented.
- Exact mobile breakpoint values (beyond the 390px sample) were not explicitly declared in tokens.