flowmanceOlea Design System
Olea is a bright, quiet online store for fashion and accessories: sunglasses, watches, hats, shoes. The page is white, the type is Poppins at weight 500 and every section heading is centred. Colour comes from the photography and from three small, saturated details: a coral announcement bar, coral Sale badges and green Featured badges. The layout is classic Webflow e-commerce: a sticky header, a full-screen photo hero, a category mosaic, a four-up product row, a photo band, a blog band, an Instagram strip and a light footer.
Four signatures make it recognisable:
- The coral announcement bar. A 40px #FF6462 strip sits on top of the header on every screen with a white 14px message (🎉Add an announcement about an active sale or promotion.) and a thin × to close it.
- The two-part logo. A lowercase olea wordmark at 32px weight 500, followed by ECOMMERCE TEMPLATE at 10px with 1px tracking in grey #919197.
- Photo cards with centred white captions. Category tiles are large photos behind a 15% black tint, with a title-lg name (weight 400) and a Shop Now link centred near the bottom.
- One hand-written line. The "Best of the day" photo band uses Indie Flower at 100px in white. It is the only non-Poppins text on the page.
Olea is a light-only design.
Colors
Surfaces
#FFFFFFPage background, header, product cards, the Follow button
#F5F5F7The grey blog band (section gray)
#000000The small Quick View tooltip
#FFFFFFForm inputs and their placeholder
#818187Placeholder text on field
Ink
#FFFFFFText on primary
#121217Headings, product titles, logo, footer titles
#333333Header links
#717177Paragraphs (p base colour), search hint
#515157Dropdown links on hover, secondary text links
#919197Prices, logo tagline, dropdown links, category labels, secure-text
#FFFFFFText on accent
#FFFFFFText on secondary
#FFFFFFText on inverse-canvas
#FFFFFFAction
#090E1DThe filled checkout and cart buttons
#2D303A · 92%Checkout button hover
#FF6462Announcement bar and Sale badges
#5CCC87Featured badges
Lines & effects
#E1E1E1Client-logo tile rules, the cart divider, the "Featured on" frame
#EDEDEDHeader bottom rule
#121217The 2px bottom border of the newsletter field and arrow button
#000000 · 40%Tint over the hero photo
#000000 · 15%Tint over category photos (20% on the "Best of the day" band)
Typography
Poppins · display-hero
The quick brown fox jumpsHero title Olea Collection on Sale Now (.banner-title). 60px · 500 · 1.17
Poppins · headline-lg
The quick brown fox jumpsCentred section titles Latest Arrivals, From Blog (h2). 32px · 500 · 1.13
Poppins · logo
The quick brown fox jumpsolea wordmark. 32px · 500 · 0.94
Poppins · title-lg
The quick brown fox jumpsCategory tile names Accessories, Optical, Apparel. 28px · 400 · 1.07
Poppins · label-price
The quick brown fox jumps$ 450.00 USD in ink-subtle. 17px · 400 · 1.18
Poppins · body-lg
The quick brown fox jumpsHero lead Mid-Season SALE only at Olea. 16px · 400 · 1.63
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container is max 1200px and centred |
| Section rhythm | .section is 140px top and bottom |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-x | 30px | |
announcement | 40px | |
footer-x | 50px | |
nav-scrolled | 60px | |
footer-top | 80px | |
nav | 80px | |
heading-gap | 120px | |
section | 140px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Header shrink on scroll | The header height eases from 80px to about 60px; size changes of 500ms on page scroll |
| Text-link hover | Size change on the link's inner element, 200–300ms ease, reverting on mouse out |
| Product image zoom | scale 1 → 1.1, 400ms ease on hover, back to 1 on mouse out |
| Quick View tooltip | Opacity 0 → 1 and y up by 10–15px, 200ms ease |
| Fade and lift | Opacity plus y −30px → 0, 300ms ease |
| Dropdown | Size change 400ms outCubic, border change 200ms outSine |
| Checkout button | Background colour transition 200ms |
Do’s and don’ts
- Keep the page white (#FFFFFF) with near-black #121217 headings and centred section titles in headline-lg (32px, weight 500).
- Use Poppins 500 for every label, link and title, and 400 only for paragraphs, prices and category names.
- Put coral #FF6462 on the announcement bar and Sale badges only, and green #5CCC87 on Featured badges only.
- Tint every photo that carries text with flat black (15–40%) and set the text in white.
- Use text links (Shop Now, View Collection) as the main call to action, and keep the dark #090E1D button for cart and checkout.
- Keep product photos square with no radius and the name and price centred below.
- Add shadows, gradients or rounded product cards.
- Use Indie Flower for anything except one large white display line on a photo.
- Set ink-subtle #919197 below 14px or use it for paragraphs; it only reaches about 3:1 on white. Keep it for prices, the tagline and meta.
- Put long text on the coral bar or the coral and green badges: white on #FF6462 is about 2.9:1 and on #5CCC87 about 2:1, so keep the bar to one 14px weight 500 line and badges to one 13px weight 500 word.
- Set small ink-muted text on the #F5F5F7 band below 14px; it sits just under 4.5:1 there.
- Use letter spacing on headings; tracking is only for the 10px tagline and the uppercase button.
- Animate longer than 500ms or add bounce easing.
Example prompt
Any page in the Olea 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 Olea 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/olea.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