Design System

Prototype

Logo

Action logo (vector)
Action
Action
Logo + webshop (samengesteld)
Action webshop
Bestand: images/action-logo.svg
Formaat: SVG, 127×24 viewBox
Opmerking: Logo is wit — gebruik op donkere achtergrond. "webshop" wordt als tekst-element toegevoegd (Ubuntu Bold Italic, #66D3F1).

Kleuren

Brand
Dark Blue #001489
Orange #ff8200
Cyan #00b6e7
Accessibility (WCAG AA)
A11y Cyan #007a99
A11y Orange #b34d00
Neutrals
Neutral 50 #f3f4f6
Neutral 150 #dadfe3
Neutral 300 #b6bec8
Neutral 500 #8593a3
Neutral 700 #505862
White #ffffff
Backgrounds
Light Blue #ecf6fc
Cyan Light #b2e9f8
Blue Wash #d9edf9
Cyan Wash #e6f8fd
Orange Wash #fff3e6

Typografie

hero-title
Hero Title
category-list-title
Page Title
product-lane-title
Section Title
myaction-section-title
Subsection Title
menu-item-title
Menu Item Title
hero-subtitle
Body Text
top-tab.active
Tab Label Active
menu-item-subtitle
Subtitle / Caption
webshop-card-name
Card Name
category-bubble-label
Small Label
tabbar-tab-label
Tab Bar Label
product-card-price
€12,99
webshop-card-price
€24,99
wa-price-euros + cents
product-card-name
Product Card Name
webshop-card-desc
Card Description
product-card-price-old
€3,49

Componenten

Webshop Header (web)
Uniek assortiment voor de webshop
Action webshop
2
Top Tabs
In de winkel
Online only
Search Bar (standaard)
Search Bar (ecom / trapeze)
Menu Items
Klantenkaart Scan je kaart bij de kassa
Weekactie Bekijk de weekactie aanbiedingen
Badges
Actie Nieuw 2
Buttons
Hero Banner
Disney Stitch knuffel
25 cm | diverse kleuren
Disney Stitch knuffel
9 99
9,99/st
Hero Price Tag
9 99
9,99/st
Product Cards (3-kolom)
Actie
Haribo Fun Mix
€2,49
Curver Prullenbak 10L
€2,99
Kappa Sneakersokken 3 paar
€1,98
Webshop Cards (2-kolom)
Nieuw
Wandplantenbakken set
3 stuks | S-M-L
€39,95
Luxe kunsthagen
4 stuks | 1 m²
€39,95
Weekactie Header
28 september t/m 4 oktober
Weekactie Cards
Category Bubbles
Wonen
Wonen
Keuken
Keuken
Tuin
Tuin
Speelgoed
Speelgoed
Verzorging
Verzorging
Category List Items
Wonen
Keuken
Tuin
Webshop Category Items
Tuin
Wonen
Keuken
Lijstje Cards
Mijn verlanglijst
Mijn verlanglijst 12 producten
Boodschappenlijst
Boodschappenlijst 5 producten
Profile Card
Jan de Vries jan@voorbeeld.nl
My Action Menu Items
Mijn gegevens
Instellingen
Tab Bar
Start
Producten
Weekactie
Mijn lijstjes
2
Mijn Action
Empty State
Geen resultaten Probeer een andere zoekterm of filter

Spacing & Radii

Border Radius
4px xs 8px sm 360px round