# Portima Design System

> A professional insurance-tech canvas defined by deep teal foundations, high-contrast black typography, and soft amber interactive highlights.

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

## TL;DR
Portima utilizes a structured, high-trust visual language anchored by a dominant "Deep Teal" (#007b6d) and "Black" (#000000) palette. The system relies on a clean white canvas (#ffffff) to maintain legibility for complex insurance-tech information, while using a warm "Amber" (#ffce7b) for primary calls to action. Typography is strictly sans-serif, prioritizing clarity and hierarchy through significant weight shifts. Geometry is consistently rounded, with buttons and cards utilizing soft radii to balance the professional, data-driven nature of the product with an accessible, modern interface.

## Signature DNA
1. **Teal-to-Black Anchoring:** The brand uses a deep teal (#007b6d) for structural footers and icons, paired with absolute black (#000000) for all primary headings, creating a serious, institutional feel.
2. **Amber Interaction:** Primary CTAs are consistently rendered in a soft amber (#ffce7b), providing a warm, high-contrast focal point against the teal and white backgrounds.
3. **Rounded Utility:** Every interactive element, from the "MyPortima" login to secondary buttons, uses a consistent large border-radius (pill or 20px+), softening the technical "Insurtech" identity.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | High | 100% | Rendered |
| `{color.ink.primary}` | `#000000` | Headings and primary body text | High | 100% | Rendered |
| `{color.brand.teal}` | `#007b6d` | Structural backgrounds, footer, and primary icons | High | 100% | Rendered |
| `{color.ink.muted}` | `#4a4a4a` | Secondary descriptive text and labels | Medium | 90% | Rendered |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.amber}` | `#ffce7b` | Primary CTA background, "MyPortima" button | High | 100% | Rendered |
| `{color.accent.yellow}` | `#ffd600` | "AI Summer Boost" highlight and specific tags | Low | 80% | decorative_only |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.success}` | `#007b6d` | Success states (reused brand teal) | Medium | 90% | Rendered |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|---------|
| Sans-Serif (System) | 400, 600, 700 | All UI, Headings, and Body | Inter | Proprietary/System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 42px | 1.2 | -0.02em | 700 | Hero headlines | `h1` |
| `{type.h2}` | 32px | 1.25 | -0.01em | 700 | Section titles | `h2` |
| `{type.h3}` | 24px | 1.3 | 0 | 600 | Sub-section headers | `h3` |
| `{type.body.lg}` | 18px | 1.6 | 0 | 400 | Intro paragraphs | `p.lead` |
| `{type.body.md}` | 16px | 1.5 | 0 | 400 | Default body text | `p` |
| `{type.label}` | 14px | 1.4 | 0.02em | 600 | Button labels, nav | `button`, `nav a` |
| `{type.caption}` | 12px | 1.4 | 0 | 400 | Footer links, small notes | `footer a` |
| `{type.button.sm}` | 13px | 1.0 | 0 | 700 | "MyPortima" text | `.btn-login` |

### Principles
1. **Achromatic Hierarchy:** Headings are always #000000 to ensure maximum authority and contrast.
2. **Generous Leading:** Body text uses a 1.5x to 1.6x line-height to maintain readability in technical descriptions.
3. **Weight as Distinction:** Navigation and labels use semi-bold (600) or bold (700) to separate interactive elements from static prose.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | Button internal padding (vertical) |
| `{space.sm}` | 16px | Element spacing in lists |
| `{space.md}` | 24px | Card internal padding |
| `{space.lg}` | 48px | Section vertical rhythm |
| `{space.xl}` | 80px | Major section breaks |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sm}` | 4px | Checkbox icons | AI Summer Boost section |
| `{radius.md}` | 20px | Standard buttons, secondary CTAs | "Ik download de checklist" |
| `{radius.pill}` | 9999px | Primary CTAs, Login button | "Ontdek onze producten" |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Standard sections and cards | Main layout |
| `{shadow.overlay}` | 0 10px 30px rgba(0,0,0,0.1) | Language selection modal | Language popup |

## Components

### Tier 1: Foundational
#### Primary Button (Amber)
**Role:** Main call to action
**Pages observed:** Home
**Spec:** Background: `#ffce7b` / Text: `#000000` / Radius: `9999px` / Padding: `12px 32px` / Typography: `{type.label}`
**States observed:** Default | Hover: Not captured

#### Secondary Button (Outline)
**Role:** Alternative actions
**Pages observed:** Home
**Spec:** Background: `transparent` / Text: `#000000` / Border: `1px solid #007b6d` / Radius: `20px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Feature Card (Teal)
**Role:** Highlighting core value propositions
**Pages observed:** Home (Bottom section)
**Spec:** Background: `#007b6d` / Text: `#ffffff` / Icon: White line-art / Padding: `40px`
**States observed:** Default

#### Language Selector Modal
**Role:** Initial user entry point
**Pages observed:** Home (Entry)
**Spec:** Background: `#ffffff` / Shadow: `{shadow.overlay}` / Radius: `8px` / Layout: Centered overlay
**States observed:** Default

### Tier 3: Surface-specific
#### Global Footer
**Role:** Corporate information and links
**Pages observed:** Home
**Spec:** Background: `#007b6d` / Text: `#ffffff` / Border-top: `Graphic wave pattern`
**States observed:** Default

#### Navigation Bar
**Role:** Primary site navigation
**Pages observed:** Home
**Spec:** Background: `transparent` (over hero) / Logo: Portima Teal/Black / Login: Amber Pill
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px |
| Section Gap | 80px |
| Grid | 3-column (Features), 2-column (Content/Image splits) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | < 768px | Navigation collapses to "MENU" hamburger; Hero text centers; Feature cards stack vertically. |

## Imagery & decoration
- **Graphic Wave:** A subtle, large-scale circular/wave motif in teal shades used in the footer and hero backgrounds.
- **Photography:** High-quality, candid office and team photography showing diverse groups in professional settings.
- **Line Icons:** Minimalist white line icons used within teal feature blocks to represent "Time," "Communication," and "Support."

## Do's
- Use `#ffce7b` (Amber) for the most important action on any given screen.
- Ensure all headings are absolute black `#000000` for readability.
- Apply a minimum of `20px` border-radius to all interactive containers.
- Use the Teal `#007b6d` background for high-impact summary sections.
- Maintain generous whitespace (80px+) between major content blocks.

## Don'ts
- **Wrong:** Using a bright blue or red for primary buttons. **Right:** Use Amber `#ffce7b`. **Reason:** Amber is the designated interaction color for the Portima parent brand.
- **Wrong:** Setting long-form body text in bold. **Right:** Use weight 400. **Reason:** Legibility is compromised in technical Insurtech copy.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use `{radius.pill}` or `{radius.md}`. **Reason:** The brand identity requires a softened, accessible geometric language.

## Quick start

```css
/* CSS Variables */
:root {
  --portima-teal: #007b6d;
  --portima-amber: #ffce7b;
  --portima-black: #000000;
  --portima-white: #ffffff;
  --radius-pill: 9999px;
  --radius-card: 20px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Portima Amber #ffce7b with black text and a pill-shaped radius."
- "Create a feature section with a Portima Teal #007b6d background, white line icons, and bold white headings."
- "Design a content card with a 20px border radius and absolute black #000000 headings for a professional Insurtech look."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://portima.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://portima.com | 390x844 | 2026-06-06 |