<!-- Generated by ExtractVibe — https://extractvibe.com/brand/datingonlinesv.com -->
<!-- Extracted: 2026-08-14T11:02:30.822Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Gratis nätdejting världen över"
description: "A functional, no-nonsense dating platform that prioritizes utility and global connectivity over aesthetic flair. The brand feels like a reliable utility tool, using a straightforward, technical approach to matchmaking with a clean, flat interface that emphasizes clarity and accessibility."
colors:
  primary: "#088ce1"
  neutral: "#088be1"
  surface: "#ffffff"
  on-surface: "#525252"
  on-surface-secondary: "#088be1"
  link: "#525252"
typography:
  display-lg:
    fontFamily: "Arial"
    fontSize: "24px"
    fontWeight: "700"
    lineHeight: "24px"
  body-md:
    fontFamily: "Arial"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
rounded:
  md: "5px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#088ce1"
    textColor: "#ffffff"
    rounded: "5px"
    padding: "12px 24px"
    fontSize: "18px"
    fontWeight: "400"
    borderColor: "#088ce1"
    borderWidth: "1px"
---

# Gratis nätdejting världen över — Design System

## Overview

A functional, no-nonsense dating platform that prioritizes utility and global connectivity over aesthetic flair. The brand feels like a reliable utility tool, using a straightforward, technical approach to matchmaking with a clean, flat interface that emphasizes clarity and accessibility.

Key characteristics: utilitarian, flat, global, accessible, direct.

**Key characteristics:**

- Vibe — utilitarian, flat, global, accessible, direct, functional
- Archetypes — The Sage, The Caregiver
- Comparable to — Craigslist, EarlyDays, Meetup, Trello
- Design era — flat-2.0
- Emotional tone — reliable-direct
- Target audience — Pragmatic singles seeking serious relationships or marriage who value algorithmic efficiency and global reach over gamified or highly visual dating experiences.
- Visual energy — 4/10 (moderate)

## Colors

The palette draws on 3 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#088ce1` | Dodger Blue |
| background | `#ffffff` | White |
| text | `#525252` | Dark Gray |
| secondary text | `#088be1` | Dodger Blue |
| link | `#525252` | Dark Gray |
| muted | `#088be1` | Dodger Blue |

## Typography

Type is set in Arial, Arial, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Arial | body | system | 400, 700 |
| Arial | heading | system | 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Arial | 24px | 700 | 24px | — |
| Body | Arial | 14px | 400 | 20px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 20px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 5px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#088ce1`
- Text — `#ffffff`
- Radius — `5px`
- Padding — `12px 24px`
- Font size — `18px`
- Font weight — `400`
- Border — `1px solid #088ce1`
- Sample copy — "Starta registreringen"

## Do's and Don'ts

### Do

- Use Arial as the sole typeface family; apply weight 700 for all headings and weight 400 for body text.
- Format all headings in sentence-case (e.g., 'Gratis dejtingsajt i din stad') and ensure body line-height is exactly 20px.
- Style primary CTA buttons with background #088ce1, white text (#ffffff), 5px border-radius, and padding of 12px vertical by 24px horizontal.
- Maintain a flat design aesthetic: do not use box-shadows or gradients on any UI elements, including cards or buttons.
- Use #525252 for primary body text and #ffffff for the background to ensure high contrast and readability.
- Keep copy simple and imperative, using short action verbs for CTAs (e.g., 'Starta registreringen') without exclamations or emojis.
- Apply a 2px base unit for spacing and border radii to maintain a consistent, rigid grid system.
- Use #088ce1 as the primary accent color for interactive elements and links, avoiding additional vibrant colors.

### Don't

- Do not use title case or all-caps for headings; strictly adhere to sentence-case.
- Do not use any serif fonts, script fonts, or custom web fonts; stick exclusively to system Arial.
- Do not apply any box-shadows (flat design only) to buttons, cards, or modals.
- Do not use gradients, textures, or background images to create depth; rely on color contrast and spacing.
- Do not use emojis, decorative icons, or playful punctuation (exclamation marks) in marketing copy.
- Do not use rounded corners larger than 5px; avoid pill-shaped buttons or fully circular elements.
- Do not use complex vocabulary or dating jargon; keep language simple, technical, and matter-of-fact.
- Do not use #088ce1 for text on white backgrounds without sufficient contrast; ensure text remains #525252 or black.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — simple
- Jargon — some
- CTA style — short, imperative action verbs
- Rhetorical devices — repetition, parallelism

### Sample copy

> Gratis dejtingsajt i din stad

> Hitta kommunikation, seriösa förhållanden, nya vänner över hela världen

> Communityn använder effektivt en unik algoritm för att bygga starka äktenskap

> Starta din sökning Gratis registrering Starta nu

> Jag vill ha värme i varje beröring

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/datingonlinesv.com/logo-0.ico) | 95% |
| favicon | — | ico | [link](brands/datingonlinesv.com/logo-1.ico) | 95% |
| primary | — | png | [link](brands/datingonlinesv.com/logo-2.png) | 85% |

## Sources

- Official brand guidelines — https://www.digitalsilk.com/branding-agency/branding-trends/business-brand-kit-examples/
- Live brand page — https://extractvibe.com/brand/datingonlinesv.com
- Raw JSON — https://extractvibe.com/api/brand/datingonlinesv.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/datingonlinesv.com/design.md
- Extracted — 2026-08-14T11:02:30.822Z
- Generator — ExtractVibe vv1
- Quality score — 100/100