The AI-stack for e‑commerce

Modular AI tools that work right away, together one learning system.

V1.35 Amsterdam, Herengracht 407
01 · Color

Color hierarchy

A small, high-energy core palette. The signature gradient is the hero device; Yellowgrape is reserved for accents.

Sero Blue
#0433FF
Primary brand color · gradient start · links, focus
Sero Magenta
#FF40FF
Primary accent · gradient end · highlights
Accent Purple
#8771FF
Secondary accent · CTA gradient end
Yellowgrape
#FAE232
Accent / emphasis (badges, highlights)
Black
#000000
Text · high-contrast surfaces
White
#FFFFFF
Primary background · text on dark/gradient
Signature gradient
Sero Blue → Sero Magenta, diagonal: blue bottom-left → magenta top-right. Two stops only, never reorder. Default 45°.
linear-gradient(45deg, #0433FF 0%, #FF40FF 100%)
Horizontal variant · pills & buttons
Same two stops, left to right (90°). Use on wide pills, bars and dividers where a horizontal sweep reads better.
linear-gradient(90deg, #0433FF 0%, #FF40FF 100%)
CTA button gradient (Primary)
Sero Blue → Accent Purple, vertical, with a purple glow shadow.
background: linear-gradient(180deg, #0433FF 0%, #8771FF 100%);
box-shadow: 0 6px 20px rgba(82, 53, 239, .6);
Dark button gradient
Near-black, vertical, the neutral CTA (e.g. on the logo-animation hero).
background: linear-gradient(180deg, #101011 0%, #2B2B2C 100%);
box-shadow: 0 6px 20px rgba(16, 16, 17, .6);
Spectrum surface · hero atmosphere
The warm multi-stop field from the official header background: amber → pink → Sero Magenta → violet → Sero Blue. A large-surface atmosphere only (hero covers, full-bleed backgrounds); never on the mark, buttons or text. This is the one sanctioned exception to the two-stop rule.
linear-gradient(45deg, #FFB61A 0%, #FF66A0 22%, #FF00FF 42%, #AA1FFF 58%, #5B2BFF 78%, #0433FF 100%)
02 · Extended palette

Neutrals & surfaces

A derived grey and surface ramp that supports real UI. The core palette and gradient above stay canonical.

Surface Dark
#0A0A12
Dark mode base
Ink 700
#2A2A30
Secondary text
Ink 500
#6B6B73
Tertiary text / captions
Border
#E2E2E6
Hairline borders
Surface Muted
#EDEDF0
Dividers, wells
Surface Alt
#F5F5F7
Panels, cards
03 · Typography

One typeface, Google Sans

Headlines and body share one typeface. Hierarchy comes from weight and size: headlines Semi-bold 600, body Medium 500, XL/lead body Regular 400.

display-xl
Semi-bold 600
The AI-stack
display-l
Semi-bold 600
Zero waste.
h1
Semi-bold 600
The AI-stack for e‑commerce
h2
Semi-bold 600
One foundation, many tools
h3
Semi-bold 600
Start small. Scale up.
h4
Semi-bold 600
Built on your real data
lead / XL body
Regular 400
Modular AI tools that work right away, together one learning system.
body
Medium 500
Built on your real data, no hallucinations.
strikethrough
Medium 500
No more manual feed work.
overline
Medium 500
Sero Core
caption
Medium 500
+20% conversion · 500+ brands
Body paragraph · Google Sans Medium 500

Sero is the AI-stack for e‑commerce. It unifies insights, personalization, automation and predictive models into one foundation, built so e‑commerce brands can use AI concretely to accelerate growth. Every product works on its own; with the CDP they become one learning system. Demo-first, hype-last.

Aa
Semi-bold 600 · Headlines
Aa
Medium 500 · Body
Aa
Regular 400 · XL / lead body

This page loads Google Sans from the Google Fonts API (weights 400/500/600), with Inter as the CSS fallback. Larger body is lighter (Regular 400); smaller body is heavier (Medium 500), intentional.

04 · Tone of voice

Sharp. Concrete. AI-first.

Sero sounds like a sharp operator who ships: confident, precise, evidence-led, anti-hype, and free of corporate AI-blabla.

Demo-first, hype-last.
01

Concrete over conceptual

Lead with what Sero does and what the customer gets. Show output and outcomes, not abstractions.

02

Proof over promise

Back claims with real numbers or specifics. No proof? Soften the claim, never inflate it.

03

Sharp & efficient

Short, declarative sentences. Cut filler. The zero ethos applies to words too, zero waste.

04

Runs on real data

Stress it runs on jouw echte data. Be honest about what works and what doesn't. Never imply magic.

Do's

  • Use facts and real metrics
  • Lead with modularity: start small, scale up
  • Speak commerce: feeds, conversion, LTV
  • Sound premium and human

Don'ts

  • Make vague, unprovable promises
  • Use AI as decoration or buzzword
  • Say synergy, leverage, revolutionary, game-changing
  • Sound corporate, cold, or salesy
05 · Themes

Five themes, one stack

Challenge-based entry points: each theme is a customer problem, answered by one or more products. Products intentionally appear across multiple themes, they're navigation lenses, not exclusive buckets.

01

Data & Intelligence

“Your customer data already knows your next move.”

Sero CDP
02

Acquisition & Growth

“More reach. Better feeds. Visible in every search engine.”

Sero ReachSero FeedsSero Operate
03

Content & Creation

“From product to campaign visual, no photoshoot, no deadline stress.”

Sero OperateSero FashionSero FeedsSero Productshot
04

Experience & Conversion

“Every hesitating visitor is a sale left on the table.”

Sero Shopping AssistantSero Try Before You BuySero CDP
05

Support & Operations

“Fewer tickets. Less manual work. More time for what matters.”

Sero Support AgentSero Operate
06 · Principles

How Sero behaves

From the brand strategy and the live wireframe, the rules that shape every surface.

01

Modular & standalone

Every product works on its own. Start with what you need now; scale when you're ready.

02

On your real data

Sero runs on your real product, order and customer data. No hallucinations.

03

Connected via CDP

Standalone tools become one learning system through the CDP flywheel.

04

Demo-first, hype-last

Shown live on your data. Honest about what does and doesn't work.

05

E‑commerce native

Speaks feeds, conversion, lifecycle, margin. Not generic AI.

06

Premium & precise

Intelligent, sharp, visually strong. Premium but never distant.

07 · Components

Components

The Sero button: a gradient pill (30px) with a glow shadow and an arrow-circle badge, text in Google Sans Medium. Yellowgrape is an accent color, not the button fill.

On light

Checkbox
Selection

On gradient

Checkbox
Selection

On dark

Checkbox
Selection

Cards & badges

Sero Core

Sero Feeds

Always the right product data on every channel, fully automatic.

Sero Studio In development Acquisition & Growth
09 · Iconography

Icon kit

One set only: RemixIcon (24×24, Apache-2.0), curated into Sero-context groups. Click any icon to copy it: paste into Figma as an SVG vector, or into PowerPoint, Slides and Word as a PNG image.

Defaults · UI14
AI & Design18
Themes5
Products9
Finance8
Tooling & data11
Service & support8
E‑commerce & retail8
Devices8
Media8
Documents8
Communication8
Business9