Besplatno online upoznavanje diljem svijeta

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/datingonlinehr.com -->
<!-- Extracted: 2026-08-14T13:42:27.119Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Besplatno online upoznavanje diljem svijeta"
description: "A functional, no-nonsense utility brand focused on practical connectivity rather than romantic fantasy. The aesthetic is strictly utilitarian and flat, prioritizing clarity and accessibility over emotional flair or visual excitement."
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"
---

# Besplatno online upoznavanje diljem svijeta — Design System

## Overview

The design atmosphere is strictly utilitarian, prioritizing function over form to facilitate practical connectivity without romantic embellishment. Rooted in the archetypes of The Sage and The Everyman, the interface mirrors the reliability of government portals and early Basecamp, offering a direct, no-nonsense user experience. The aesthetic is flat and accessible, rejecting decorative elements, gradients, or emotional flair in favor of clarity and speed. This is a utility-first environment where information hierarchy drives navigation, ensuring that users can locate features and connect with others through intuitive, predictable interactions. The visual language is restrained, avoiding visual noise to maintain focus on core tasks.

The design IS NOT a social media platform seeking engagement through dopamine-driven visuals, nor is it a luxury dating service relying on aspirational imagery. It does not employ skeuomorphism, soft shadows, or playful animations. Instead, it adheres to a rigid, grid-based structure that emphasizes readability and accessibility. The user interface acts as a transparent medium, receding to allow content and functionality to take precedence. This approach ensures that the platform remains lightweight, fast, and universally understandable, catering to a global audience that values efficiency and straightforward communication over aesthetic novelty. The overall impression is one of serious, reliable infrastructure designed for genuine, practical interaction.

**Key characteristics:**

- Vibe — utilitarian, flat, functional, direct, accessible, noir-light
- Archetypes — The Sage, The Everyman
- Comparable to — Craigslist, EarlyBird, Basecamp (early), Government portals
- Design era — flat-2.0
- Emotional tone — neutral-practical
- Target audience — Users seeking straightforward, low-friction connections who value functionality and safety over gamification or luxury aesthetics.
- Visual energy — 3/10 (calm/understated)

## Colors

The palette is minimal, using #088ce1 for primary actions to signal clarity and trust without aggression. White surfaces ensure maximum contrast and readability, reinforcing the utilitarian ethos. This limited selection eliminates decision fatigue, directing attention solely to functional elements and content. The absence of secondary colors underscores the brand's focus on directness and efficiency, avoiding visual distraction.

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

Typography relies exclusively on Arial, leveraging its ubiquity and neutrality to ensure universal legibility across devices. The hierarchy is established through weight and size rather than stylistic variation, maintaining a consistent, no-nonsense voice. This choice communicates reliability and accessibility, aligning with the brand's commitment to practical connectivity. The type system is straightforward, prioritizing clear information architecture over aesthetic 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 — "Započnite registraciju"

## Do's and Don'ts

### Do

- Use Arial for all typography; apply weight 700 for headings and 400 for body text.
- Format all headings in sentence-case (e.g., 'Find serious relationships') and never use title case.
- Set body text line-height to exactly 20px for optimal readability.
- Style primary CTA buttons with background #088ce1, white text, 5px border-radius, and padding 12px 24px.
- Maintain a flat design aesthetic: do not use box-shadows or gradients on any element.
- Use #525252 for all body text and #ffffff for backgrounds to ensure high contrast.
- Keep copy simple and direct, using imperative mood for calls to action (e.g., 'Započnite registraciju').
- Apply a 2px base unit for spacing consistency across layout components.

### Don't

- Do not use emojis, exclamations, or decorative icons in marketing copy.
- Do not use serif fonts or custom web fonts; stick strictly to system Arial.
- Do not apply box-shadows, drop-shadows, or multi-layer depth effects.
- Do not use gradients, glassmorphism, or textured backgrounds.
- Do not use bright or neon accent colors; restrict palette to #088ce1, #ffffff, and #525252.
- Do not use playful, overly romantic, or slang-heavy language in headlines.
- Do not use pill-shaped buttons (100% border-radius); stick to the 5px radius.
- Do not use title case for headings; this violates the brand's sentence-case convention.

*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 | 2/10 | respectful |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

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

### Sample copy

> Pronađite komunikaciju, ozbiljne veze, nove prijatelje diljem svijeta

> Servis aktivno privlači korisnike, upoznaje ih, pomaže u pronalaženju prave ljubavi

> Žena sanja o istinskoj sreći

> Započnite registraciju

> Pridružite se besplatnoj stranici za upoznavanje gdje možete pronaći ljude iz cijelog svijeta

## Logos

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

## Sources

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

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md