# Magnet.me Design System

> High-contrast professional networking on a clean white canvas, punctuated by a high-voltage coral primary action.

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

## TL;DR
Magnet.me utilizes a structured, high-contrast layout built on a foundation of pure white (#ffffff) and deep slate (#283740). The system's energy is concentrated in a single primary action color, a vibrant coral (#ff5c51), used for critical CTAs and brand emphasis. Typography is strictly Source Sans Pro, ranging from heavy 700-weight headlines to highly legible 400-weight body text. The interface relies on subtle elevation using light blue-gray shadows and soft 6px to 9px corner radii to differentiate interactive surfaces from the flat canvas.

## Signature DNA
1. **The Coral Punch** (#ff5c51 is the exclusive high-contrast accent for primary buttons and semantic emphasis, creating a clear visual hierarchy against the slate text).
2. **Slate Typography** (#283740 serves as the primary ink, providing a softer but authoritative alternative to pure black for all major headings and interface labels).
3. **Soft-Shell Containers** (The use of 6px radii on buttons and 9px on controls, paired with very light #e6ecf0 shadows, creates a "friendly professional" depth).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, button text, surface base | 14 | 1.0 | Computed Style |
| `{color.slate.primary}` | `#283740` | Primary text, headings, branding | 83 | 0.8 | Computed Style |
| `{color.slate.muted}` | `#657786` | Secondary text, button labels, icons | 91 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#eef2f5` | Alternate section backgrounds | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.coral}` | `#ff5c51` | Primary CTA background, active text, borders | 19 | 0.8 | Computed Style |
| `{color.sky.link}` | `#398cbf` | Inline links, text accents | 24 | 0.8 | Computed Style |
| `{color.border.light}` | `#c5d2db` | Input borders, dividers | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Source Sans Pro | 400, 600, 700 | All UI, Headings, Body | N/A (Google Font) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h1}` | 36px | 45px | normal | 700 | Section headers | `h2.jobStepsSectionHeader` |
| `{type.h2}` | 28px | 37.8px | normal | 700 | Feature headers | `p.ai-chat-feature-header` |
| `{type.h3}` | 24px | 32.4px | normal | 700 | Page titles | `h1` |
| `{type.h3.light}` | 24px | 30px | normal | 400 | Subheaders | `h2#subheader` |
| `{type.ui.lg}` | 21px | 26.25px | normal | 600 | Inverted primary buttons | `a.btn.btn-primary-inverted` |
| `{type.body.lg}` | 20px | 27px | normal | 400 | Feature descriptions | `p.ai-chat-feature-text` |
| `{type.body.md}` | 18px | 27px | normal | 400 | Standard paragraphs | `p.paragraph` |
| `{type.body.sm}` | 16px | 20px | normal | 400 | Default small text | `section.jobseekerIntroduction` |

### Principles
1. **Heading Weight Hierarchy:** Major section breaks use 700 weight, while sub-features often drop to 600 or 400 to maintain a clean, airy feel.
2. **Slate as Ink:** Never use pure black for text; #283740 provides better readability on white backgrounds.
3. **Generous Line Height:** Body text maintains a 1.5x ratio (18px/27px) to ensure legibility in dense job descriptions.

## Spacing
**Base unit:** 9px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 9px | 31 |
| `{space.sm}` | 18px | 36 |
| `{space.md}` | 27px | 5 |
| `{space.lg}` | 54px | 4 |
| `{space.xl}` | 72px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 192 occurrences |
| `{radius.button}` | 6px | Primary and secondary buttons | `Rounded Button` component |
| `{radius.control}` | 9px | Interactive UI controls | 12 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(230, 236, 240, 0.25) 0px 6px 9px 0px` | Card surfaces, floating UI | 12 occurrences |
| `{shadow.modal}` | `rgba(0, 0, 0, 0.05) 0px 3px 9px 3px` | Hover states, dropdowns | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Profiel aanmaken")
**Pages observed:** pricing, about
**Spec:** Background: `#ff5c51` / Text: `#ffffff` / Border: `#ff5c51` / Radius: `6px` / Padding: `9px 18px` / Typography: `18px 700`
**States observed:** Default: captured | Hover: not captured

#### Secondary Button (Outline)
**Role:** De-emphasized actions
**Pages observed:** homepage
**Spec:** Background: `transparent` / Text: `#657786` / Border: `2px #c5d2db` / Radius: `6px` / Padding: `13.86px 21px` / Typography: `21px 600`
**States observed:** Default: captured

### Tier 2: Patterns

#### Content Surface
**Role:** Standard layout section
**Pages observed:** homepage
**Spec:** Background: `#ffffff` / Text: `#283740` / Border: `0px` / Radius: `0px` / Padding: `54px 0px`
**States observed:** Default: captured

#### Feature Card
**Role:** AI Coach or Job Step cards
**Pages observed:** homepage
**Spec:** Background: `#ffffff` / Shadow: `{shadow.subtle}` / Radius: `9px` / Padding: `27px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan selection
**Pages observed:** pricing
**Spec:** Background: `#ffffff` / Border: `1px #c5d2db` / Radius: `6px` / Padding: `36px`
**States observed:** Default: captured

#### Testimonial Block
**Role:** User social proof
**Pages observed:** homepage
**Spec:** Background: `transparent` / Text: `#283740` / Typography: `18px 400` (Source Sans Pro)
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Vertical Padding | 54px |
| Column Gap | 27px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Stacked columns, 100% width buttons |
| Desktop | 1440px | Multi-column grids, fixed max-width containers |

## Imagery & decoration
Magnet.me uses clean, vector-style illustrations with coral accents and rounded UI "stickers" to represent matches and connections. It avoids heavy photography in favor of high-contrast UI mockups.

## Do's
- Use `#ff5c51` for the primary "Profiel aanmaken" action.
- Set all body text to Source Sans Pro at 18px for readability.
- Apply `{shadow.subtle}` to cards to lift them from the white canvas.
- Use `#283740` for all primary headings.
- Maintain a 6px border radius on all interactive button elements.

## Don'ts
- **Wrong:** Using `#000000` for body text. **Right:** Use `#283740`. **Reason:** Pure black creates excessive contrast fatigue on white backgrounds.
- **Wrong:** Using a sub-brand blue as a primary button color. **Right:** Use Coral `#ff5c51`. **Reason:** Coral is the parent brand's primary action signal.
- **Wrong:** Sharp 0px corners on buttons. **Right:** Use 6px radius. **Reason:** The brand identity relies on "soft-professional" geometry.

## Quick start

### CSS Variables
```css
:root {
  --magnet-coral: #ff5c51;
  --magnet-slate: #283740;
  --magnet-slate-muted: #657786;
  --magnet-sky: #398cbf;
  --magnet-canvas: #ffffff;
  --magnet-surface-soft: #eef2f5;
  --magnet-radius-btn: 6px;
  --magnet-shadow-subtle: 0px 6px 9px 0px rgba(230, 236, 240, 0.25);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Magnet.me coral #ff5c51 with 6px border radius and 18px Source Sans Pro bold text."
- "Create a feature card with a white background, 9px border radius, and the subtle #e6ecf0 shadow used on the Magnet.me homepage."
- "Design a pricing section using #283740 for the plan titles and #657786 for the feature descriptions."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://magnet.me | 1440px | 2026-06-06 |
| Pricing | https://magnet.me/pricing | 1440px | 2026-06-06 |
| About | https://magnet.me/about | 1440px | 2026-06-06 |