Engineering reference

Built for a
clearer flow.

The EVOMAID design system translates brand confidence into reusable components for every German D2C moment.

Pages Complete flows

Patterns Repeated journeys

Components Reusable UI

Atoms Smallest units

Tokens Source of truth

01 · Overview

One system, from token to checkout.

The system follows a deliberate layer model. Each layer protects consistency while letting product teams assemble practical commerce experiences quickly.

TOKENS

Decisions, named

Color, type, spacing and depth are stable variables rather than isolated style choices.

ATOMS

Small and exact

Buttons, fields, flags and icons carry shared behavior, focus and accessible states.

PATTERNS

Commerce-ready

Product discovery, advice and cart flows build trust in a clear, repeatable sequence.

Global tokens create rhythm.

Why this matters: fixed intervals and a small radius set keep a dense shop feeling calm and coherent.

Spacing

4px base scale

4, 8, 12, 16, 24, 32, 48, 64. Every gap speaks the same rhythm.

Radius

8 small, 16 cards, 24 panels, 999 pills. Shape signals hierarchy.

Borders

Hairlines separate without making the system feel boxed in.

Breakpoints

375 · 640 · 768 · 990 · 1200 · 1400

Mobile first layouts retain task clarity as space increases.

02 · Atoms

Small pieces, live behavior.

Every atom includes the tactile feedback needed to feel responsive, stable and recognizably EVOMAID.

Buttons

Blue initiates. Hover shifts to #333333. Pills keep action friendly and direct.

Inputs & flags

BESTSELLERNEU7000 PaApp-Steuerung

Controls have a soft, welcoming silhouette but explicit borders.

Core line icons

Components with real commerce content.

These reference implementations use the live product language and trust signals customers expect.

NEUGen 3

EVOMAID S3 Ultra

7.000 Pa · 4-Düsen-Sprühsystem · App · Spricht Deutsch

ab 374,90 €499,90 €

Trust bar

Kostenloser Versand

60 Tage testen

5 Jahre Garantie

Gen 2 vs Gen 3

	S2 Pro	S3 Ultra
Saugkraft	6.000 Pa	7.000 Pa
Steuerung	Fernbedienung	App
Spricht Deutsch	–	Ja

★★★★★

“Endlich saubere Fenster ohne Leiter. Die Bedienung ist wirklich unkompliziert.”

Martina B.Verifizierter Kauf

★★★★★

“Die Saugkraft überzeugt. Selbst große Fenster sind schnell streifenfrei.”

Thomas K.Verifizierter Kauf

★★★★★

“Der deutsche Support hat mir sofort geholfen. Genau so soll Service sein.”

Sandra L.Verifizierter Kauf

58.134+Haushalte

4,8/5Bewertungen

5Jahre Garantie

60Tage testen

03 · Store states

State is part of the component.

Prices, availability and loading behavior deserve the same precision as a ready-to-buy product.

SALE

374,90 €

~~499,90 €~~ · Sale price remains primary.

AUSVERKAUFT

Nicht verfügbar

Neutral grey reduces false urgency.

Skeleton preserves layout while content loads.

BESTSELLER

Visible signal

Flags are short, high-contrast and never compete with price.

Light default. Dark with a full swap.

The action blue remains #426BFF in both modes. Surfaces and readable text change together, not as isolated overrides.

Token

Light → Dark

--bg

#FFFFFF → #0A0B14

--surface

#FFFFFF → #0E1730

--ink

rgba(0,0,0,.81) → #FFFFFF

--tint

#DDE4FB → rgba(255,255,255,.14)

--blue

#426BFF → #426BFF

04 · Patterns

Flows lead with reassurance.

Pattern order matters: proof before commitment, clarity before extra choice.

PDP FLOW

Product detail

Hero product → benefit proof → specifications → reviews → warranty → related accessories.

KAUFBERATUNG

Find the right Gen

Need framing → Gen 2 / Gen 3 comparison → feature match → confident CTA.

CART FLOW

Keep confidence

Cart items → delivery promise → guarantee → concise checkout handoff.

Tokens travel cleanly to code.

CSS variables make component behavior portable and keep the brand system inspectable.

:root {
  --evo-canvas: #FFFFFF;
  --evo-navy: #16213E;
  --evo-blue: #426BFF;
  --evo-radius-pill: 999px;
}

.button--primary {
  background: var(--evo-blue);
  border-radius: var(--evo-radius-pill);
  color: white;
}

<img src="assets/evomaid-logo-navy.png"
     alt="EVOMAID" height="32">

05 · Motion

Motion confirms action, quietly.

Micro 150ms. Standard 250ms ease-out. Surfaces 300ms cubic-bezier(0.32,0.72,0,1). Respect reduced-motion preferences.

Micro · 150ms

Press, focus and small feedback should feel immediate.

Standard · 250ms

Hover lift is 4px and scale is 1.03.

Surface · 300ms

Panels and drawers settle with controlled weight.

Elevation is reserved for interaction.

Why this matters: one quiet base plane makes lifts and priority states genuinely useful.

Level 1 · hairline

Level 2 · raised card

Level 3 · hover

Level 4 · modal

06 · Accessibility

AA contrast is the floor.

Body ink on white is 12.6:1. White on navy is 13.9:1. Blue is reserved for actions, large text and focus.

Keyboard focus

2px blue ring with 3px offset appears on every interactive element.

Meaning beyond color

✓ Erfolg bestätigt
× Fehler erklärt next step

Status includes a word or icon, never color alone.

Comfortable reading

Inter 15–16px at 1.6 line height supports dense product information without fatigue.

Useful content stays useful at 200% zoom.

Layouts respond to task, not device labels.

Content stacks before it becomes cramped. Fixed sidebar becomes a 52px mobile top bar and slide-in drawer.

375–639

One column

Thumb-first actions, top navigation, full-width content.

640–989

Two columns

Comparison and cards gain breadth without losing scanability.

990+

Fixed sidebar

216px documentation rail with wide editorial workspace.

07 · Installation

Start with the files already here.

Use supplied local logo and Satoshi font files. Keep the full lockup untouched and preserve relative asset paths.

@font-face {
 font-family: Satoshi;
 src: url('assets/fonts/Satoshi-Regular.otf');
 font-weight: 400;
}
body { font-family: Inter, sans-serif; }

:root {
 --evo-blue: #426BFF;
 --evo-navy: #16213E;
 --evo-space-4: 16px;
 --evo-radius-card: 16px;
}

Changelog

Document decisions so designers and engineers can trust what changed and why.

OCT 2026

v1.0.0 · Initial EVOMAID system

Light-first token architecture, brand guidelines, commerce components and dark theme mapping established.

OCT 2026

Voice register normalized

Formal SIE is now the default across product, support and marketing samples.

08 · Resources

Local assets, ready to use.

Use these supplied files to preserve the recognizable EVOMAID identity in every implementation.

Logo assets

evomaid-logo-navy.png
evomaid-logo-white.png
evomaid-symbol.png

Official logo variants only. Never redraw.

Product imagery

hero-s3-ultra.webp
product-s2-pro.png
product-s3-ultra.png
lifestyle-power.png

Real rendered assets establish immediate product credibility.

Fonts

Satoshi Light, Regular, Medium, Bold, Black
Inter 400, 500, 700

The paired families clearly separate brand expression and reading.

Complete component states and implementation reference.

Live states, documented flows and local assets remove ambiguity for product teams.

All button states

Text link →

Blue initiates one clear action; disabled controls remain visible but cannot mislead.

Inputs, badges and tags

BESTSELLERNEUBELIEBTSALE −20%AUSVERKAUFT7.000 PaApp-Steuerung

The label says what color alone must never imply.

PDP flow

GalerieVariantenWarenkorbCheckout

Kaufberatung

BedarfGenerationModell

Service

SupportRetoureGutschrift

Token

Light → Dark

--bg

#FFFFFF → #0A0B14

--surface

#FFFFFF → #0E1730

--alt

#F6F8FF → #16213E

--ink

rgba(0,0,0,.81) → #FFFFFF

--navy

#16213E → #FFFFFF

--tint

#DDE4FB → rgba(255,255,255,.14)

--line

rgba(0,0,0,.06) → rgba(255,255,255,.08)

--muted

#666666 → #C7CCDC

--blue / --sky / --deep

Identical in both themes

Code, accessibility and resources.

Use local font files and preserve focus behavior, reduced motion and the 44px minimum target.

:root { --evo-blue:#426BFF; --evo-navy:#16213E; --evo-radius-pill:999px; }

.button--primary { background:var(--evo-blue); border-radius:var(--evo-radius-pill); color:white; }

<article class="product"><img src="assets/product-s3-ultra.png" alt="S3 Ultra"><b>ab 374,90 €</b></article>

@font-face { font-family:Satoshi; src:url('assets/fonts/Satoshi-Regular.otf'); font-weight:400; }

Pair	Ratio	Status
Ink / white	12.6:1	AA pass
White / navy	13.9:1	AA pass
Blue / white	4.6:1	Large only
Tint-blue / white	1.3:1	Decorative only

Local asset	Usage
evomaid-logo-navy.png, evomaid-logo-white.png, evomaid-logo-black.png	Approved logo variants
evomaid-symbol.png, evomaid-logo-sm.png	Compact identity
hero-s3-ultra.webp, lifestyle-power.png	Editorial and lifestyle imagery
product-s2-pro.png, product-s3-ultra.png, product-mopset.png, product-cleantabs.png	Commerce catalog
assets/fonts/Satoshi-*.otf	200, 400, 600, 700, 900 weights

V1.0 · October 2026

Initial system release, including tokens, commerce patterns and implementation reference.

Built for aclearer flow.

One system, from token to checkout.

Decisions, named

Small and exact

Commerce-ready

Global tokens create rhythm.

Spacing

Radius

Borders

Breakpoints

Small pieces, live behavior.

Buttons

Inputs & flags

Core line icons

Components with real commerce content.

EVOMAID S3 Ultra

Trust bar

Gen 2 vs Gen 3

10 € für Ihre klare Aussicht.

Allgemein

Bestellung

Hilfe & Kontakt

State is part of the component.

374,90 €

Nicht verfügbar

Visible signal

Light default. Dark with a full swap.

Flows lead with reassurance.

Product detail

Find the right Gen

Keep confidence

Tokens travel cleanly to code.

Motion confirms action, quietly.

Micro · 150ms

Standard · 250ms

Surface · 300ms

Elevation is reserved for interaction.

AA contrast is the floor.

Keyboard focus

Meaning beyond color

Comfortable reading

Layouts respond to task, not device labels.

One column

Two columns

Fixed sidebar

Start with the files already here.

Changelog

v1.0.0 · Initial EVOMAID system

Voice register normalized

Local assets, ready to use.

Logo assets

Product imagery

Fonts

Complete component states and implementation reference.

All button states

Inputs, badges and tags

PDP flow

Kaufberatung

Service

Code, accessibility and resources.

Built for a
clearer flow.