flowmanceEcoPower Design System
EcoPower is a bright, confident renewable-energy company site. It feels like a clean annual report with a cinematic cover: a full-bleed, zoom-blurred wind-turbine photo, a frosted pill navigation floating over it, and a giant line of text scrolling across the bottom. Below the hero the page turns white and calm, with black type, orange accents and very round photo cards. A fine film grain sits over everything.
Four signatures make it recognisable:
- The glass pill nav. A frosted bar (white at 12%, 15px backdrop blur, 100px radius) floats 20px from the top and spans 62% of the width. Links are 30px-radius pills, and the cart is an orange pill with Cart | 0.
- The giant hero marquee. One line of Instrument Sans at 16vw (230px), weight 600, −3px tracking, running sideways across the bottom of the hero photo (…e Energy ▶ Su…), broken by frosted rounded play tiles.
- Signal orange on white. #E74900 is the only colour in the UI: pill buttons, the cart, the 40px corner icon buttons on blog cards and the thin line icons on feature cards.
- Very round photo cards. Service and inset images use a 66px radius and testimonial cards 50px, which makes the photos read as soft tiles rather than frames.
Colors
Surfaces
#FFFFFFPage background and most sections
#F7F7F7The testimonials section (--third-color) and feature cards
#333333#000000The "What we do" services band and the footer
Ink
#FFFFFFText on primary
#000000Text on secondary
#000000Headlines, metrics, card titles
#000000Body text is full ink: p sets opacity 1
#000000 · 70%Dates and small meta (.data-text); .sub-text uses 69%
#000000 · 60%Section labels like Numbers (.small-text, 18px weight 600)
#FFFFFFText on inverse-canvas
#FFFFFF · 50%Highlighted words in the dark band headline (green energy solutions)
#FFFFFFAction
#E74900Main pill buttons, the cart pill, blog icon buttons, line icons
#E74900#FFFFFFThe white Book a Call pill on dark or photo backgrounds
Lines & effects
#000000 · 10%1px input borders
#000000 · 13%1px rules between blocks
#D8DFE0The full-width hairline under the numbers row (--divider-color)
#333333Slider arrow buttons on the black band
#FFFFFF · 12%The nav bar
#FFFFFF · 30%Play tiles inside the hero marquee
#FFFFFF · 7%Nav link pills at rest and on hover or current
#FFFFFF · 20%With nav-pill: Nav link pills at rest and on hover or current
#000000 · 40%Dark layer on service photos under white text; hero overlays use 10% and 25% black
Typography
Instrument Sans · display-marquee
The quick brown fox jumpsThe scrolling hero line, 16vw. 230px · 600 · 1 · -3px
Instrument Sans · metric-affix
The quick brown fox jumps+ and % after a number, raised to the top. 60px · 400 · 0.9 · -2px
Instrument Sans · headline-lg
The quick brown fox jumpsSection titles (.main-title-page); a 55px variant is used in the dark band and testimonials. 54px · 600 · 1.1 · -1px
Instrument Sans · title-lg
The quick brown fox jumpsHero subhead Leading the charge in green power initiatives. 27px · 600 · 1.25
Instrument Sans · body-xl
The quick brown fox jumpsService card text over photos. 25px · 500 · 1.4
Instrument Sans · eyebrow
The quick brown fox jumpsSection labels Numbers, What we do, at 60% on white. 18px · 600 · 1.11
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1440px, centred |
| Section rhythm | 150px top and bottom for standard and dark sections (.section, 100px at ≤991px and below, side padding stays 5%); 100px for compact grey sections; the logo strip uses 100px top and 50px bottom |
| Breakpoints | 991px, 767px and 479px, plus min-width rules at 768, 1280 and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 4px | |
sm | 16px | |
md | 30px | |
lg | 40px | |
xl | 80px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section-compact | 100px | |
section | 150px | |
hero-top | 180px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Hero marquee | Lines move x 45vw ↔ −45vw as the hero scrolls through the viewport |
| Rise-in | y 10% → 0% over 500ms; text lines y → 0% 500ms outQuint |
| Slide-in | x −30px → 0 over 500ms outQuart, or x 30px → 0 over 800ms outExpo |
| Fade-in | opacity 0 → 1 with x/y → 0, 1000ms outQuart |
| Rotate | Rotate 500ms on six elements (icons and arrows) |
| Section lift | y 10vh → 0vh over 500ms on scroll |
| Hover text colour | Text colour 500ms outQuint |
| Size and border | Size 300ms ease / 400ms outCubic; border 200ms outSine |
| Menu icon | Lottie 0 → 100 over 600ms on open |
| CSS transitions | Nav links 200ms, buttons 300ms (all), image wrappers transform 0.3s |
Do’s and don’ts
- Use #E74900 only for pill buttons, the cart, corner icon buttons and line icons.
- Set all text in Instrument Sans; headlines weight 600 with −1px tracking at 54px and −2 to −3px above 90px.
- Keep body text solid #000000 at 17px / 1.4; use 70% and 60% black only for meta and labels.
- Round photo cards generously: 66px on service and blog images, 50px on testimonial cards, 20px on feature cards.
- Put the nav in a frosted pill (white 12%, 15px blur, 100px radius) floating over the hero photo.
- Keep button labels at 16px weight 600 or larger: white on #E74900 is 3.9:1, which passes only for large or bold text.
- Add drop shadows or gradients to UI. Depth is glass blur, surface steps and sticky stacking.
- Use orange for headlines, paragraphs or section backgrounds.
- Use grey hex values for text on black; dim white with opacity (50%) instead.
- Set small white text on orange below 16px or under weight 600.
- Use sharp corners on photos or buttons; only inputs are square.
- Mix in a second typeface or uppercase headings.
Example prompt
Any page in the EcoPower style
More design systems like this
Business 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 EcoPower 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/ecopower.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