<!-- Generated by ExtractVibe — https://extractvibe.com/brand/datingonlinevi.com -->
<!-- Extracted: 2026-08-14T12:01:26.716Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Hẹn hò trực tuyến miễn phí trên toàn thế giới"
description: "A utilitarian and trustworthy platform focused on serious relationship building, characterized by a clean, flat, and accessible interface. The brand prioritizes clarity and function over flair, using a straightforward, no-nonsense aesthetic to foster confidence in its matchmaking process."
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"
---

# Hẹn hò trực tuyến miễn phí trên toàn thế giới — Design System

## Overview

The interface embodies a utilitarian and trustworthy aesthetic, prioritizing clarity and function over decorative flair. Rooted in the archetypes of The Sage and The Caregiver, the design fosters confidence through a straightforward, no-nonsense approach to matchmaking. Visually, it mirrors the structured reliability of LinkedIn and the community-driven utility of Meetup, while maintaining the directness of classic Craigslist. The layout is clean, flat, and highly accessible, ensuring that users focus on content and connection rather than visual noise. This design IS NOT playful, whimsical, or overly stylized. It rejects gradients, shadows, and ornamental elements in favor of a stark, honest presentation that communicates seriousness and intent. The emotional register is calm and assured, creating a safe space for users to engage in serious relationship building without distraction. Every component serves a clear purpose, reinforcing the brand’s commitment to transparency and ease of use across global markets.

**Key characteristics:**

- Vibe — utilitarian, trustworthy, clean, accessible, serious, flat
- Archetypes — The Sage, The Caregiver
- Comparable to — Meetup, LinkedIn, Reddit, Classic Craigslist
- Design era — flat-2.0
- Emotional tone — reliable-direct
- Target audience — Adults seeking serious, long-term relationships who value functionality and community vetting over gamified dating experiences.
- Visual energy — 4/10 (moderate)

## Colors

The palette relies on a single primary blue (#088ce1) to signal trust, stability, and professional reliability, aligning with the Caregiver archetype. White surfaces ensure maximum readability and a clean, uncluttered experience. This restrained color strategy eliminates ambiguity, directing user attention to actionable elements and content. The lack of secondary colors reinforces the utilitarian nature of the platform, preventing visual competition and maintaining a serious, focused tone throughout the user journey.

### 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

The type system utilizes Arial, a ubiquitous sans-serif font, to ensure universal legibility and a neutral, professional tone. Hierarchy is established through weight and size rather than stylistic variation, reinforcing the utilitarian design philosophy. This choice communicates clarity and accessibility, removing barriers for users of all technical proficiencies. The straightforward typography supports the Sage archetype by presenting information in a direct, unembellished manner, ensuring that the focus remains on the content and the matchmaking process rather than on typographic expression.

### 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 — "Bắt đầu đăng ký"

## Do's and Don'ts

### Do

- Use Arial as the sole typeface family; apply weight 700 for headings and 400 for body text.
- Format all headings in sentence-case (e.g., 'Find serious relationships') rather than title case.
- Set body text line-height to exactly 20px for optimal readability on white backgrounds.
- Style primary CTA buttons with background #088ce1, white text, 5px border-radius, and padding of 12px 24px.
- Maintain a flat design aesthetic by avoiding all box-shadows and gradients across the interface.
- Use #525252 for primary body text to ensure sufficient contrast against the #ffffff background.
- Adopt a simple vocabulary in copy, avoiding industry jargon or overly emotional language.
- Use action-oriented imperative verbs in CTAs (e.g., 'Register', 'Start') without exclamation marks.

### Don't

- Do not use serif fonts; the brand relies exclusively on the system sans-serif Arial.
- Do not apply box-shadows or drop-shadows to any UI elements, including cards or buttons.
- Do not use gradients; all backgrounds and buttons must be solid flat colors.
- Do not use emoji in marketing copy or interface labels.
- Do not use title case for headings; strictly adhere to sentence-case conventions.
- Do not use exclamations in copy; maintain a matter-of-fact, professional tone.
- Do not use border-radius values other than 5px for standard UI components.
- Do not use vibrant or multi-color palettes; stick to the primary blue (#088ce1) and neutral grays.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 4/10 | enthusiastic |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — simple
- Jargon — none
- CTA style — action-oriented imperative verbs
- Rhetorical devices — repetition, parallelism

### Sample copy

> Trang web hẹn hò miễn phí tại thành phố của bạn

> Tìm kiếm sự giao tiếp, mối quan hệ nghiêm túc, bạn bè mới trên toàn thế giới

> Cộng đồng phân tích cẩn thận hồ sơ của người tham gia, lựa chọn cẩn thận đối tác phù hợp

> Hãy để nụ cười trở thành ngôn ngữ của chúng ta

> Bắt đầu tìm kiếm Đăng ký miễn phí Bắt đầu ngay

## Logos

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

## Sources

- Live brand page — https://extractvibe.com/brand/datingonlinevi.com
- Raw JSON — https://extractvibe.com/api/brand/datingonlinevi.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/datingonlinevi.com/design.md
- Extracted — 2026-08-14T12:01:26.716Z
- Generator — ExtractVibe vv1
- Quality score — 90/100