Design system

AffiWave Design System

A consistent visual language for an affiliate and partner program platform. Built for trust, control and revenue analytics - clean, commercial and fully ready to implement in Symfony/Twig.

Trust and control

Deep navy and legible financial data build credibility for merchants and admins.

Revenue energy

Jade green signals growth, conversion and payouts - without being loud.

Modularity

Components and tokens ready for future modules: publisher networks, influencers, white-label.

Logo

The "Amplitude" mark - rounded bars rising into a wave, where an equalizer meets a revenue growth chart. From the first click (blue) to a scaling result and payout (mint): an energetic, "dashboard" signal for an analytics product. Legible as a favicon and app icon. The direction chosen from the logo concepts.

AffiWave

Mark variants

Mark

App icon / favicon

Monochrome

On dark

16px

32px

64px

Files: logo.svg · logo-mark.svg · favicon.svg · app-icon.svg

Color palette

A WCAG-compliant system. Navy = trust, jade = revenue and growth, blue = technology, amber = pending payouts, red = risk.

Brand and status colors

Brand / Jade

#0EA37A

Ink / Navy

#0A1020

Tech / Blue

#3B6FF6

Mint / Highlight

#34E3B0

Success

#12A150

Pending

#DE911D

Risk

#E5484D

Under review

#8B6CF6

Neutral scale (slate)

50

100

200

300

400

500

600

700

800

900

Brand scale (jade)

50

100

200

300

400

500

600

700

800

Typography

Space Grotesk for headings (character, technology), Manrope for body copy (readability, full Latin-ext), IBM Plex Mono for IDs, codes and API keys. Numbers use tabular figures for financial data.

Revenue under control

Display · Space Grotesk · 600

Section heading H2

H2 · Space Grotesk · 600

Lead copy - AffiWave helps you manage partners and commissions.

Lead · Manrope · 400

Body text used in descriptions, forms and the app panel. It supports the full set of Latin-ext characters.

Body · Manrope · 400

AFF-9X2K-7QPL · sk_live_8a2f…c91 · conversion.created

Mono · IBM Plex Mono

$84,230.00

Financial data · tabular-nums

UI tokens

Radii, shadows and spacing defined as CSS variables - ready to map onto utility classes.

Border radius

sm

8px

md

11px

lg

14px

xl

20px

Shadows

sm

md

lg

brand

Buttons

Variants

Sizes

With icon

Statuses and badges

Conversion / payout statuses

approvedpendingrejectedunder reviewcanceledpaid out

Risk indicators

High riskMediumLowLifetimeRecurring

Forms

Fields

Email *

Business type

Field with errorA valid address is required

Controls

I accept the terms and privacy policy Marketing consent (optional)

Partner approval required

Data, tables and metric cards

Affiliate revenue

$84,230

▲ 12.4% vs. previous month

Active partners

186

▲ 8 new this week

Pending commissions

$12,460

8 payouts to approve

Risk signals

3

need review

Top partners

May 2026

Partner	Status	Clicks	Conversions	Revenue	Commission
AN Anna Nowak anna@blog-ecom.com	active	3,420	142	$28,400	$5,680
MZ Michael Green SaaS Review Hub	active	2,880	98	$19,600	$3,920
GP Growth Partners agency	pending	1,950	64	$14,200	$2,840

Feedback and navigation

Alerts

Demo mode. The data is sample.

8 payouts awaiting approval.

Unusually high CR detected for partner #482.

Navigation and progress

Panel/Affiliates/Anna Nowak

Payout threshold$340 / $500

Empty state

No campaigns

Create your first campaign to start tracking conversions.

Skeleton loading

Charts

Revenue (line)

Conversions (bars)

Attribution (donut)

Code, keys and webhooks

Copy field

https://go.affiwave.com/r/AFF-9X2K-7QPL

sk_live_8a2f••••••••••••c91

Code block

// Server-side conversion
affiwave.track({
  event: "conversion",
  orderId: "ORD-1042",
  amount: 1000
});