# Eurostepdigital Design System

> High-contrast financial interface pairing deep violet accents with structured grayscale surfaces and heavy-weight Lato display type.

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

## TL;DR
Eurostepdigital utilizes a "monochrome-plus" system where a neutral grayscale foundation (#ffffff, #f7f7f7, #333333) is punctuated by high-saturation violet (#a608d0) and electric blue (#179ed9) accents. The typography is dominated by **Lato**, specifically leveraging an ultra-bold 800 weight for pricing and display elements to create a sense of financial stability and impact. Layouts are strictly modular, using 0px radius "sharp" containers for primary sections and 10px-50px rounded corners for interactive cards and buttons. The system relies on generous vertical spacing (up to 150px) to separate complex data-heavy sections.

## Signature DNA
1. **The Violet-to-Indigo Gradient** (Used in the "Trusted By" band and pricing headers, shifting from #a608d0 to #6a11cb to signify premium financial services.)
2. **Ultra-Bold Pricing Display** (Lato weight 800 at 65px for currency and integer parts, creating a clear visual hierarchy in the pricing tables.)
3. **Hybrid Geometry** (Strict 0px sharp edges for page sections and footers contrasted with 50px pill-style buttons and 10px soft-shadow cards.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.text.primary}` | `#333333` | Primary body text and borders | 295 | 0.8 | computed_style |
| `{color.bg.canvas}` | `#ffffff` | Primary page background | 50 | 0.8 | computed_style |
| `{color.text.muted}` | `#d2d2d2` | De-emphasized text | 93 | 0.8 | computed_style |
| `{color.bg.alt}` | `#f7f7f7` | Subtle section backgrounds | 8 | 0.6 | computed_style |
| `{color.bg.dark}` | `#292e31` | Footer and dark-mode surfaces | 9 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.violet}` | `#a608d0` | Primary brand accent, text links | 59 | 0.8 | computed_style |
| `{color.accent.indigo}` | `#6a11cb` | Button backgrounds, pricing headers | 17 | 0.8 | computed_style |
| `{color.accent.blue}` | `#179ed9` | Primary CTA background (Pricing) | 9 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Lato | 400, 600, 700, 800, 900 | Display, Headings, Body | Lato (Google Fonts) | OFL |
| Roboto | 400, 600 | Secondary headings | Roboto (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 65px | 52px | normal | 800 | Pricing integers | `span.elementor-price-table__integer-part` |
| `{type.heading.lg}` | 36px | 59.4px | normal | 400 | Editorial text | `div.elementor-text-editor` |
| `{type.heading.md}` | 35px | 35px | normal | 700 | Hero slides | `div.elementor-slide-heading` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 600 | Card titles | `h3.elementor-price-table__heading` |
| `{type.label.lg}` | 20px | 19.5px | normal | 800 | Currency symbols | `span.elementor-price-table__currency` |
| `{type.subheading}` | 18px | 19.8px | normal | 400 | Section labels | `h3.elementor-heading-title` |
| `{type.body.md}` | 16px | 26.4px | normal | 400 | Default body | `header#gm-6a23aacca188a` |
| `{type.body.sm}` | 14px | 14px | normal | 400 | List items | `li.elementor-repeater-item` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for numerical data and weight 400 for descriptive prose.
2. **Tight Display Leading:** Large display sizes (65px) use a line-height (52px) smaller than the font size for compact impact.
3. **Letter Spacing for Subheadings:** Small subheadings (18px) occasionally use 2px tracking for a "label" feel.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 30 |
| `{space.sm}` | 15px | 18 |
| `{space.md}` | 30px | 21 |
| `{space.lg}` | 50px | 9 |
| `{space.xl}` | 100px | 5 |
| `{space.section}` | 150px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Global sections, footer | 577 occurrences |
| `{radius.input}` | 4px | Form fields, small buttons | Pricing page CTAs |
| `{radius.card}` | 10px | Feature cards | Homepage cards |
| `{radius.pill}` | 50px | Hero buttons | Hero "Try free" button |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px` | Navigation, standard cards | Homepage |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.05) 0px 0px 40px 10px` | Feature highlights | About page |
| `{shadow.brand}` | `rgba(1, 110, 204, 0.05) 0px 0px 40px 10px` | Blue-tinted card depth | Homepage |

## Components

### Tier 1: Foundational

#### Primary CTA (Hero)
**Role:** Main conversion point
**Pages observed:** Homepage, About
**Spec:** Background `#6a11cb` | Text `#ffffff` | Radius `50px` | Padding `15px 30px` | Typography `Lato 16px`
**States observed:** Default | Hover: captured

#### Pricing Button
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `#179ed9` | Text `#ffffff` | Radius `4px` | Padding `15px 30px` | Typography `Lato 13px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Value proposition display
**Pages observed:** Homepage
**Spec:** Background `#ffffff` | Radius `10px` | Shadow `rgba(1, 110, 204, 0.05) 0px 0px 40px 10px`
**States observed:** Default: captured

#### Pricing Tier Header
**Role:** Plan differentiation
**Pages observed:** Pricing
**Spec:** Background `#6a11cb` | Text `#ffffff` | Radius `0px` | Padding `20px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Footer
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background `#292e31` | Text `#d2d2d2` | Radius `0px` | Padding `40px 0px`
**States observed:** Default: captured

#### Pricing Toggle
**Role:** Monthly/Annual switch
**Pages observed:** Pricing
**Spec:** Background `#6a11cb` | Radius `4px` | Text `#ffffff`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Section Padding (Vertical) | 100px - 150px |
| Content Max-Width | ~1200px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Hamburger menu replaces horizontal nav; Pricing cards stack vertically. |

## Imagery & decoration
- **Logos:** Grayscale "Trusted By" logo wall.
- **Gradients:** Linear gradients from violet (#a608d0) to indigo (#6a11cb) used as section backgrounds.
- **Avoids:** Hand-drawn illustrations, rounded section dividers.

## Do's
- Use Lato 800 for all currency and large numerical values.
- Maintain 150px vertical spacing between major homepage sections.
- Apply `#6a11cb` for primary action buttons in the hero section.
- Use `#333333` for all standard body text to ensure readability on white.
- Keep section containers at `{radius.sharp}` (0px).

## Don'ts
- Do not use `#a608d0` (Violet) on `#d2d2d2` (Light Gray) for small text; contrast ratio (3.9:1) is insufficient.
- Do not apply border-radius to the global footer.
- Do not use Roboto for display pricing; Lato is the designated display face.
- Avoid using pure black (#000000) for body text; use `#333333`.

## Similar brands
- Carta (Financial UI, structured grids)
- Pitch (Bold typography, high-contrast accents)
- Stripe (Clean grayscale with vibrant accent colors)

## Quick start

```css
/* CSS Variables */
:root {
  --color-violet: #a608d0;
  --color-indigo: #6a11cb;
  --color-blue: #179ed9;
  --color-charcoal: #333333;
  --color-canvas: #ffffff;
  --radius-card: 10px;
  --radius-pill: 50px;
  --shadow-soft: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a pricing card using Lato 800 for the price, a #179ed9 button with 4px radius, and a 10px border radius on the card container."
- "Create a hero section with a #6a11cb pill button and Lato 700 headings on a white background."
- "Design a footer using #292e31 background and #d2d2d2 text with 0px border radius."

## Known gaps
- Hover and Active states for secondary navigation items were not explicitly captured in the computed styles.
- Success and Error semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://eurostepdigital.com | 1440px | 2026-06-06 |
| Pricing | https://eurostepdigital.com/pricing | 1440px | 2026-06-06 |
| About | https://eurostepdigital.com/about | 1440px | 2026-06-06 |