# Dopay Design System

> High-contrast monochrome foundation punctuated by a single electric violet voltage, utilizing generous whitespace and geometric Euclid Circular A typography.

**Source:** https://dopay.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Dopay utilizes a "Vivid Monochrome" system where a stark white canvas (#ffffff) and deep charcoal text (#212529) provide the structural baseline. The brand's primary energy is concentrated in a single functional color: Electric Violet (#6e37cc), used exclusively for primary actions and key brand highlights. Layouts are defined by a strict 4px grid, 16px-20px card radii, and the geometric clarity of Euclid Circular A. Elevation is achieved through a single "Subtle Lift" shadow (8px blur) rather than complex layering.

## Signature DNA
1. **The Violet Voltage** (The use of #6e37cc as the sole high-saturation primary color for buttons and brand-critical text, creating an immediate focal point against the achromatic base.)
2. **Geometric Softness** (A consistent application of 12px to 20px border radii on cards and surfaces, softening the high-contrast typography.)
3. **Euclid Display Rhythm** (Large-scale 60px/48px headlines in Euclid Circular A with weight 600, establishing a modern, fintech-forward authority.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.body}` | `#212529` | Primary text, secondary buttons | 80 | 1.0 | `--bs-body-color` |
| `{color.canvas}` | `#ffffff` | Page background, button text | 29 | 1.0 | `--bs-body-bg` |
| `{color.emphasis}` | `#000000` | Headings, deep shadows | 5 | 1.0 | `--bs-emphasis-color` |
| `{color.surface-soft}` | `#f6f1ff` | Subtle section backgrounds | 6 | 0.6 | `computed_style` |
| `{color.surface-muted}` | `#f5f4f5` | Tertiary backgrounds | 1 | 1.0 | `--bs-tertiary-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#6e37cc` | Primary CTAs, active states | 32 | 1.0 | `--Primary-primary` |
| `{color.success}` | `#3b9d29` | Category badges, positive stats | 10 | 0.6 | `computed_style` |
| `{color.muted}` | `#4b5563` | Secondary descriptive text | 5 | 0.6 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Euclid Circular A | 300, 400, 500, 600 | All headlines and body | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 72px | normal | 600 | Hero H1 | `h1` |
| `{type.display-md}` | 48px | 57.6px | normal | 600 | Section Headers | `h2.text-center` |
| `{type.heading-md}` | 28px | 36px | normal | 500 | Card Titles | `h3.card-title` |
| `{type.heading-sm}` | 24px | 32px | normal | 400 | Promo text | `p.promo-description` |
| `{type.subheading}` | 18px | 32px | normal | 600 | Descriptions | `h3.description` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `section.hero-banner` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Tab labels | `button#احترافي-tab` |
| `{type.badge}` | 13px | 15px | normal | 600 | Category tags | `a.category-badge` |

### Principles
- **Achromatic Hierarchy:** Use `#000000` for display, `#212529` for body, and `#4b5563` for secondary metadata.
- **Violet for Action:** Only use `#6e37cc` for interactive elements or brand-specific keywords within a sentence.
- **Geometric Display:** Headlines above 24px must use weight 600 to maintain brand authority.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 24 |
| `{space.sm}` | 12px | 30 |
| `{space.md}` | 16px | 14 |
| `{space.lg}` | 24px | 21 |
| `{space.section}` | 90px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sm}` | 8px | Buttons, small cards | `a.main-btn` |
| `{radius.md}` | 12px | Interactive surfaces | `Surface (radius: 12px)` |
| `{radius.lg}` | 16px | Feature cards | `Surface (radius: 16px)` |
| `{radius.xl}` | 20px | Large content blocks | `Card (radius: 20px)` |
| `{radius.pill}` | 9999px | Icon containers | `Pill Button` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.15) 0px 2px 8px 0px` | Floating cards, success badges | `Card (shadow: 0px 2px 8px)` |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main site CTAs
**Pages observed:** https://dopay.com
**Spec:** Background `{color.primary}` (#6e37cc) / Text `{color.canvas}` (#ffffff) / Radius 8px / Padding 12px / Typography `{type.body-md}` (500)
**States observed:** Default: captured | Hover: not captured

#### Rounded Button (Secondary/Ghost)
**Role:** Navigation and secondary actions
**Pages observed:** https://dopay.com
**Spec:** Background transparent / Text `#262626` / Radius 12px / Padding 12px 5px / Typography `{type.body-sm}` (400)
**States observed:** Default: captured

### Tier 2: Patterns

#### Category Badge
**Role:** Metadata labeling
**Pages observed:** https://dopay.com
**Spec:** Background `{color.success}` (#3b9d29) / Text `{color.canvas}` (#ffffff) / Radius 8px / Padding 8px 16px / Typography `{type.badge}` (600) / Shadow `{shadow.subtle}`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card (Violet Soft)
**Role:** Highlighting key platform benefits
**Pages observed:** https://dopay.com
**Spec:** Background `{color.surface-soft}` (#f6f1ff) / Text `{color.body}` (#333741) / Radius 20px / Padding 20px / Typography `{type.body-md}`
**States observed:** Default: captured

#### Interactive Surface (Outline)
**Role:** Form-like interactive containers
**Pages observed:** https://dopay.com
**Spec:** Background transparent / Border 1px `{color.primary}` (#6e37cc) / Text `{color.primary}` / Radius 12px / Padding 16px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1320px |
| Section Padding | 90px (vertical) |
| Card Gap | 24px |

## Imagery & decoration
- **Product UI Mockups:** Uses high-fidelity mobile app screenshots with violet accents to demonstrate the product.
- **Iconography:** Linear icons with 2px stroke weights, often contained in `#f6f1ff` rounded squares.
- **Avoidance:** No heavy gradients, no photographic backgrounds, no drop shadows on text.

## Do's
- Use `#6e37cc` for the primary "Start Now" CTA.
- Apply `{radius.lg}` (16px) to all main content cards.
- Set headlines in Euclid Circular A at weight 600.
- Maintain a minimum 90px vertical gap between major page sections.
- Use `#3b9d29` exclusively for success states or "New" badges.

## Don'ts
- **Wrong:** Using `#0d6efd` (standard Bootstrap blue) for links. **Right:** Use `#6e37cc`. **Reason:** Blue is a default token in the CSS but is not part of the Dopay brand palette.
- Do not use sharp corners (0px radius) for interactive components.
- Do not use weight 400 for display headlines above 32px.
- Do not apply `{shadow.subtle}` to every card; use it only for "floating" or "active" elements.

## Similar brands
- Revolut (Achromatic foundation + vibrant accent)
- Monzo (Geometric typography + soft card radii)
- Stripe (Fintech-grade clarity and spacing)

## Quick start

### CSS Custom Properties
```css
:root {
  --dopay-primary: #6e37cc;
  --dopay-body: #212529;
  --dopay-canvas: #ffffff;
  --dopay-success: #3b9d29;
  --dopay-surface-soft: #f6f1ff;
  --dopay-radius-card: 16px;
  --dopay-shadow-subtle: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  --dopay-font-main: 'Euclid Circular A', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Dopay violet #6e37cc, white text, and 8px border radius."
- "Design a feature card with a #f6f1ff background, 20px border radius, and a Euclid Circular A heading at 28px weight 500."
- "Generate a success badge with a #3b9d29 background and the Dopay subtle shadow (0 2px 8px rgba(0,0,0,0.15))."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scaling (fluid type) was not fully mapped.
- Error semantic colors were not observed on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://dopay.com | 1440px | 2026-06-06 |