Dotomi / Epsilon Brand Design System Deep Dive

1. Brand Overview

Dotomi now lives under Epsilon’s umbrella, and its visual language has been absorbed into Epsilon’s corporate brand system. The vibe? Corporate confidence with a tech-forward edge. This is built for marketing technology, data-driven personalization, and enterprise-level relationships — audiences that expect precision, not playfulness.

The design system feels serious. Lots of deep neutrals (#191919, #000000), crisp whites (#ffffff), and a strong, unapologetic blue (#1861f5) for action states. There’s no pastel softness here. This is a world of bold calls to action, clean typography, and very deliberate spacing.

The philosophy leans toward clarity over decoration. Buttons are pill-shaped with 9999px border-radius, making them stand out against otherwise angular layouts. Typography stays within one family — Avenir Next — with a tightly controlled type scale. No whimsy fonts, no mixed-style headings. It’s all business.

This is for teams that need to ship marketing pages, product dashboards, and B2B content without reinventing the wheel every time. The system is built to be predictable. You can tell they care about consistency: every breakpoint is documented, spacing is meticulously based on an 8px grid, and the palette is small but functional.

One thing I noticed: their hover states aren’t subtle. Primary buttons jump from #1861f5 to a brighter #1eaedb. Links shift to #3860be on hover. This is deliberate — high visibility cues for interactive elements. Accessibility is clearly part of the thinking, even if not perfect.

If you’ve worked in enterprise design systems (think Salesforce, Oracle), this will feel familiar. It’s built for scalability, not personality. But they have just enough branding in the blue and typography to make it recognizably Epsilon/Dotomi.

2. Color System

2.1 Primary Colors

Primary is Bright Blue (#1861f5) — used for CTAs, buttons, focus indicators. This color sits firmly in the “trustworthy tech” zone. Blue is the safe corporate bet, but they’ve chosen a saturated, intense tone. It doesn’t fade into the background.

Psychologically, it says reliable, professional, but with a hint of boldness. Compared to competitors (Adobe’s red, Salesforce’s softer blue), Epsilon’s is punchier. It’s not “calm ocean” — it’s “high-speed data stream.”

2.2 Complete Palette

2.3 Color Relationships

The palette is heavy on dark/light extremes. Black and white dominate, with blue as the only real accent. This creates strong contrast for CTAs — blue against white or black pops immediately.

Accessibility-wise:

• White text on #1861f5 has a contrast ratio > 4.5:1 — passes WCAG AA for normal text.
• Black text on white is perfect contrast.
• Blue hover (#1eaedb) on white — still acceptable contrast.

No dedicated “error” or “success” colors in extracted data. Those would need to be added if building a full product UI.

Dark mode? Not explicitly defined, but #191919 + white could invert easily.

2.4 Usage Guide

Works well:

• #1861f5 buttons on white background — clear CTA.
• White text on #1145ad for emphasis sections.
• Black text on white for content-heavy pages.

Avoid:

• Blue text on black — contrast drops significantly.
• Using #007aff outside carousel contexts — that’s a functional token.
• Mixing #555555 and #656463 without clear hierarchy — too close in value.

3. Typography

3.1 Font Families

Single family: __avenirNext_a94f83 — Avenir Next.
Fallbacks: Avenir Next, Avenir, Helvetica Neue, Helvetica, Arial.
No Google Fonts. Not Adobe-hosted. Likely self-hosted/custom.

This choice keeps the system consistent. Avenir Next is geometric but humanist — readable at small sizes, strong at large headings.

3.2 Type Scale

3.3 Hierarchy

They use large jumps for headings — 80px down to 48px, then 40px. This creates a strong visual hierarchy for hero sections. Body sizes (20px, 18px, 16px) keep reading comfortable.

Buttons and links reuse body sizes but adjust weight for emphasis. Captions drop to 14px and below, always with tight line-height — keeps them compact.

No italics in the extracted data. Everything is weight-driven.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. All spacing values are multiples of 4px or 8px.

Common values:

• 1px, 2px, 3px — for borders and micro-gaps.
• 4px, 5px, 6px — tight UI elements.
• 8px, 10px, 12px — small component padding.
• 16px, 24px — standard padding for buttons, cards.
• 32px, 48px, 64px — section spacing.
• 290.812px — oddly specific, likely a fixed image/container.

4.2 Layout

Breakpoints are extremely granular — dozens between 330px and 1920px. This suggests highly tuned responsive layouts, maybe per module.

No single “max width” extracted, but given breakpoints, they likely use 1440px+ for desktop.

5. Visual Elements

Border Radius

They mix subtle rounding with extremes (9999px for pills, 50% for circles). Odd choice: 2.5px — not common.

Shadows

Mostly soft, multi-layer shadows:

• rgba(0,0,0,0.1) 0px 15px 40px, rgba(0,0,0,0.2) 0px 5px 20px
• Inset shadows for focus states.
• Some flat elements — shadows are not everywhere.

Borders

Lots of 1px and 2px solid borders in brand blue, white, or black. Buttons get blue borders; inputs get gray.

6. Components

6.1 Buttons

Primary Button (eps-button):

• Default: bg #1861f5, text white, padding 8px 24px 11px, radius 9999px, border 2px solid #1861f5, font-weight 600, font-size 16px.
• Hover: bg #1eaedb, text white, border stays blue, opacity 0.9.
• Active: bg #1861f5, text white.
• Focus: bg #1eaedb, text white, outline black solid 2px, border black 1px.

Secondary/Button-like (LogoCarousel_sronly__UrguJ):

• Default: bg #efefef, text black, border 2px outset black, font-weight 400, font-size 13.33px.
• Hover/Focus match primary’s hover/focus — odd, but consistent.

Pagination Bullets:

• Circular (50%), bg white, border white.
• Hover: bg blue, text white.

6.2 Links

Seven link styles, all no underline default, hover shifts color to #3860be. Some bold (700), some medium (500/600), some white text for dark backgrounds.

6.3 Forms

Text input:

• Default: transparent bg, no border, color #333333.
• Focus: bg #1eaedb, text white, border black 1px, outline black solid.

Select:

• Default: white bg, gray border, padding 4px 56px 4px 16px.
• Focus: inset white and blue box-shadows, border color #e0203e.

6.4 Cards

No explicit "card" component in data, but shadows suggest some modules use: rgba(0,0,0,0.1) 0px 15px 40px, rgba(0,0,0,0.2) 0px 5px 20px for depth.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black-near: #191919;
  --color-black-true: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #323231;
  --color-gray-mid: #656463;
  --color-gray: #555555;
  --color-blue-primary: #1861f5;
  --color-blue-deep: #1145ad;
  --color-blue-swiper: #007aff;

  /* Typography */
  --font-family-primary: "__avenirNext_a94f83", "__avenirNext_Fallback_a94f83", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial;
  --font-size-h1: 80px;
  --font-size-h1-alt1: 48px;
  --font-size-h1-alt2: 40px;
  --font-size-h1-alt3: 32px;
  --font-size-h1-alt4: 24px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-button-lg: 18px;
  --font-size-button-md: 16px;
  --font-size-link-lg: 18px;
  --font-size-link-md: 16px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 13.3333px;
  --font-size-link-sm: 12px;
  --font-size-link-xs: 11.382px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-sm-alt: 2.5px;
  --radius-md: 3px;
  --radius-md-alt: 4px;
  --radius-lg: 8px;
  --radius-xl: 15px;
  --radius-xxl: 16px;
  --radius-round: 50%;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 15px 40px 0px, rgba(0,0,0,0.2) 0px 5px 20px 0px;
}

8. AI Coding Assistant Prompt

# Dotomi/Epsilon Design System Specification

System Prompt:
You are a Dotomi/Epsilon design expert. Build UIs matching their visual language exactly.

Brand Context:
Epsilon’s design system is corporate, data-driven, and precision-focused. It uses a restrained palette, a single geometric-humanist font, and an 8px spacing grid. Components are predictable, with bold blue accents for actions and clear hover/focus states.

## Colors
- Near Black: #191919 — headers, modules, high-contrast text
- True Black: #000000 — body text, borders, captchas
- White: #ffffff — backgrounds, text on dark
- Dark Gray: #323231 — secondary text
- Mid Gray: #656463 — UI control icons
- Gray: #555555 — close buttons, link buttons
- Primary Blue: #1861f5 — primary buttons, CTAs
- Deep Blue: #1145ad — alternate button state
- Swiper Blue: #007aff — carousel theme
- Hover Blue: #1eaedb — button hovers

## Typography
Font Family: "__avenirNext_a94f83", "__avenirNext_Fallback_a94f83", "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial

| Level         | Size    | Weight | Line Height | Use For          |
|---------------|---------|--------|-------------|------------------|
| H1 Hero       | 80px    | 700    | 1.16        | Page titles      |
| H1 Alt        | 48px    | 700    | 1.20        | Section titles   |
| H2            | 40px    | 700    | 1.20        | Subsections      |
| H3            | 32px    | 700    | 1.20        | Content headers  |
| H4 Bold       | 24px    | 700    | 1.17        | Emphasis headings|
| Body Large    | 20px    | 400    | 1.44        | Main content     |
| Body Medium   | 18px    | 400    | 1.44        | Secondary text   |
| Button Large  | 18px    | 600    | 1.39        | CTAs             |
| Button Medium | 16px    | 700    | 1.22        | Smaller CTAs     |
| Link Large    | 18px    | 600    | 1.39        | Primary links    |
| Link Medium   | 16px    | 700    | 1.56        | Secondary links  |
| Caption       | 14px    | 400    | 1.44        | Notes            |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 24px, 32px, 48px, 64px.
Use multiples for padding/margins.

## Border Radius
- none: 0px — tables
- xs: 1px — subtle rounding
- sm: 2px — inputs
- md: 8px — cards
- xl: 16px — modals
- full: 9999px — pill buttons
- round: 50% — avatars

## Shadows & Depth
Primary shadow: rgba(0,0,0,0.1) 0px 15px 40px, rgba(0,0,0,0.2) 0px 5px 20px — use for elevated cards.

## Component Specifications

### Primary Button
Default: bg #1861f5, text #ffffff, padding 8px 24px 11px, radius 9999px, border 2px solid #1861f5, font-weight 600, font-size 16px.
Hover: bg #1eaedb, text #ffffff, border 2px solid #1861f5, opacity 0.9.
Active: bg #1861f5, text #ffffff.
Focus: bg #1eaedb, text #ffffff, outline 2px solid #000000, border 1px solid #000000.

### Link
Default: color #191919, no underline.
Hover: color #3860be, no underline.

### Input Field
Default: bg transparent, color #333333, no border.
Focus: bg #1eaedb, color #ffffff, border 1px solid #000000.

## Layout & Responsive Rules
Breakpoints: multiple from 330px to 1920px.
Use fluid scaling between breakpoints.

## Interaction Rules
- Use 150ms ease for color transitions.
- Maintain strong hover contrast.
- Use visible focus outlines.

## DO List
- Use only palette colors.
- Maintain 8px spacing multiples.
- Keep buttons pill-shaped.
- Use Avenir Next for all text.
- Ensure hover/focus states are obvious.

## DON'T List
- Don't invent new colors.
- Don't mix sharp and rounded corners arbitrarily.
- Don't remove focus styles.
- Don't use shadows outside defined ones.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #1861f5;
  color: #ffffff;
  padding: 8px 24px 11px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #1861f5;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
}
.btn-primary:focus {
  outline: 2px solid #000000;
}
```

Input:
```css
.input {
  background: transparent;
  color: #333333;
  border: none;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — Epsilon/Dotomi’s system is tight, corporate, and predictable. Blue drives attention, Avenir Next keeps text clean, and the 8px grid makes layout consistent. Buttons are bold and pill-shaped, hover states are high contrast.

Brand Keywords:

• data-driven-corporate
• blue-action-forward
• strict-8px-grid
• avenir-next-consistency
• bold-focus-states