flowmanceElectro Design System
Electro is a soft, friendly electronics shop. The top of the page is a warm seashell (#F2EBE7) hero with large organic blob shapes in a slightly deeper tone, a dark Roboto headline and a coral pill button. Below it the page turns white and practical: category tiles, product carousels and grids of square product photos on white cards with a gentle shadow, a teal shipping banner and a grey band of compact product lists. Coral and teal are the two brand colours; everything else is white, near-black and one mid grey.
Four signatures make it recognisable:
- Coral pills. The cart button (Cart with a white count circle), Shop Collection and the form submit are all #EA8465 pills with a 30px radius. The 120px round play button in the hero uses the same coral.
- The teal category bar. Once you scroll, a #367384 strip appears under the white header: Shop by Category: in white, then Accessories, Phone, Television, Printer, Camera, Batteries, Machines in white at 70%.
- Ruled section titles. Section names (Popular Products, Recently Added, Our Brands) are 20px weight 500, centred on a 1px #E1E1E1 line with a white gap behind the text.
- Seashell blobs. The hero has large rounded blob shapes in #EADFD9 over #F2EBE7, plus a column of 50px square social tiles fixed to the left edge.
Electro is a light-only design.
Colors
Surfaces
#FFFFFFPage background below the hero, header once scrolled
#FFFFFFProduct cards, which lift off the canvas with a soft shadow rather than a colour step
#F6F6F7The grey band with three product lists (section gray), the promo panel
#FFFFFF#FAFAF7Footer subscribe field
#818187Ink
#FFFFFFText on primary
#212127Hero headline, product names, section titles (body colour)
#121217Nav links and category tile titles
#919197Paragraphs, prices, View Details links, footer links
#818187Secondary text links and input placeholders
#FFFFFFText on accent
#FFFFFF · 70%Category links on the teal bar
#FFFFFFText on success
Action
#EA8465Pill buttons, cart button, play button, subscribe submit, nav hover pill (--burntsienna)
#EC9B82Button, cart, play and submit hover
#367384Category bar and the shipping banner (--teal)
#29C982Uppercase product tag strip along the bottom of a product image (defined in CSS; not shown in the live demo)
Lines & effects
#F2EBE7Hero background and category tiles (--seashell)
#EADFD9Hero blob shapes and the social tiles on the left edge
#E1E1E1The rule behind section titles
#EDEDEDBottom border of the subscribe field
#CAC7C5Round carousel arrows
#000000 · 10%Product card shadow
Typography
Roboto · display-hero
The quick brown fox jumpsHero title Awesome Webflow Ecommerce Template (.banner-heading). 55px · 500 · 1.09
Roboto · headline-lg
The quick brown fox jumpsShipping banner, promo headline (h2). 32px · 500 · 1.13
Roboto · title-lg
The quick brown fox jumpsCategory tile titles Accessories, Phone (h3). 24px · 500 · 1.42
Roboto · label-price
The quick brown fox jumps$ 700.00 USD in ink-muted. 17px · 400 · 1.18
Roboto · body
The quick brown fox jumpsParagraphs, hero lead, category bar. 15px · 400 · 1.73
Roboto · eyebrow
The quick brown fox jumpsProduct tag strip. 12px · 500 · 1.67 · 1.5px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container is max 1200px, centred, with items centred |
| Section rhythm | .section is 150px top and bottom with 30px sides |
| Section title | centred, 40px below it (.top-title), with the 1px line running the full container |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus some min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 20px | |
md | 30px | |
lg | 40px | |
xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-x | 30px | |
footer-bottom | 50px | |
section-band | 80px | |
footer-top | 80px | |
section-grey | 100px | |
nav | 100px | |
section | 150px |
Border radius
Motion
| Header on scroll | Background transparent → white, 500ms; height change 500ms; the category bar moves in (y 45px → 0, 500ms) |
| Nav link hover | The coral pill moves y 100% → 0 behind the label, 300ms ease; text colour changes in 200–300ms ease |
| Product title roll | Title moves y 0 → −130% while the coral copy comes from 130% → 0, 300–500ms with swingTo / swingFromTo |
| Buttons and cart | Background colour change, 200ms (transition: all .2s) |
| Arrow link | Padding-right 30 → 34px and underline, 200–300ms |
| Brand logo | Opacity 0.55 → 1, 200ms |
| Dropdown | Size 400ms outCubic, border 200ms outSine |
Do’s and don’ts
- Use coral #EA8465 pills (30px radius, white 14px weight 500 text) for every button, with #EC9B82 on hover.
- Use teal #367384 only for full-width bands: the category bar and the shipping banner.
- Put products on white cards with the single 0 10px 30px -10px 10% black shadow and a 5px radius.
- Centre section titles at 20px weight 500 on a 1px #E1E1E1 line with a white gap behind the text.
- Keep the warm #F2EBE7 / #EADFD9 tints for the hero and category tiles.
- Use uppercase 13px weight 700 with 0.5px tracking for nav links only.
- Set coral buttons with small or light text: white on #EA8465 is about 2.6:1 (2.2:1 on the #EC9B82 hover), so keep button labels at 14px weight 500 or larger, and use coral text (hover titles, the promo headline) only at 20px+.
- Use #919197 for text under 15px: it is about 3.1:1 on white and 2.7–2.9:1 on #F2EBE7 and #F6F6F7. The 13px links and footer links are the template's real use; keep them short, and keep paragraphs at 15px / 26px.
- Put text on the #CAC7C5 arrows, the #EADFD9 social tiles or the green #29C982 tag beyond an icon or one uppercase word; white on #29C982 is about 2.2:1. Keep the teal bar's 70% white links at 15px (about 3.5:1).
- Add more shadows, gradients or borders to cards.
- Use Roboto Slab; it is loaded but not used.
- Put coral on teal or teal on coral.
- Round category tiles or inputs; only cards (5px), pills (30px) and circles are rounded.
Example prompt
Any page in the Electro style
More design systems like this
Ecommerce design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Electro design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/electro.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows