Skip to content
datingonlinenl.com logo

Gratis online daten wereldwijd

datingonlinenl.com

“A functional, no-nonsense utility brand focused on accessibility and simplicity. The aesthetic is clean and flat, relying on a single strong blue accent to guide user action without visual clutter or emotional manipulation.”

utilitarian
flat
accessible
direct
minimalist
functional
trustworthy

Color Palette

Colors

#088ce1

primary

#ffffff

background

#525252

text

#088be1

secondaryText

#525252

link

#088be1

muted

Typography

Fonts

Arial

body
400
700
system

Helvetica, sans-serif

Arial

heading
700
system

Helvetica, sans-serif

body

The quick brown fox

h1

The quick brown fox

Components

Design System

Start registratie
primary
5px
#088ce1#ffffff

Voice & Tone

Personality

Visual Energy

3/10

Design Era

flat-2.0

Emotional Tone

neutral-practical

Target Audience

General population seeking straightforward, low-friction connections; users who prioritize function over form and prefer clear, simple instructions.

Comparable Brands

Government portals
Basic utility apps
Early 2010s SaaS
Public service announcements

Brand Rules

Dos & Don'ts

Do

  • Use #088ce1 (Primary Blue) for all primary interactive elements, including links and primary CTA buttons.
  • Set primary button backgrounds to #088ce1 with #ffffff text, applying 5px border-radius and 12px vertical / 24px horizontal padding.
  • Render primary buttons with a 1px solid border in #088ce1 to create a subtle outlined effect against the white background.
  • Use Arial (system font) for all typography; apply 700 weight for headings and 400 weight for body text.
  • Format all headings in sentence-case (e.g., 'Gratis datingsite in jouw stad') rather than title case.
  • Maintain body text line-height at exactly 20px for readability.
  • Use #525252 for body text color and #ffffff for page backgrounds to ensure high contrast.
  • Keep CTA copy short, action-oriented, and imperative (e.g., 'Start registratie', 'Vind vrienden').
  • Apply a base spacing unit of 2px for consistent margin and padding calculations across components.

Don't

  • Do not use box-shadows on any element; the design must remain strictly flat.
  • Do not use gradients; backgrounds and buttons must be solid colors.
  • Do not use emoji or exclamation marks in any copy or headlines.
  • Do not use serif fonts; stick exclusively to the Arial system font family.
  • Do not use title case for headings; always use sentence-case.
  • Do not use complex border radii (e.g., pill shapes); stick to the 5px medium radius.
  • Do not use decorative images or illustrations; rely on clean layout and text hierarchy.
  • Do not use jargon or complex vocabulary; keep language simple and direct.

Design Assets

Visual Elements

Gratis online daten met mensen van over de hele wereld
png350×45

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/datingonlinenl.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free