flowmanceella Design System
ella (written ēlla on the site, with a macron over the e) is a light, quiet studio template. It reads like a gallery wall: a pure white page, very large black Inter Tight headlines with normal tracking, almost no chrome, and colour arriving only through bold product photography and one bright yellow. The live preview opens on a demo landing page: a giant Meet ēlla headline and a three-column grid of shadowed page thumbnails (homepages, work, blog, about, contact).
Four signatures make it recognisable:
- A photo inside the headline. The hero sets a 170px circular photo between two display words (Meet ◯ ēlla, ēlla ◯ Digital Design Agency). The circle sits on the text baseline like a letter.
- Bullet-dot section tags. Every section opens with a 12px black dot and a 21px label: ● Template Demos, • Work, • Latest Insights, • Our top clients.
- Yellow #FFEA00 as the only UI colour. It appears on square submit buttons, the 170px circle button and a small circle menu button; everything else is black on white.
- The centred location line. The nav carries ☀ Domiciled in the sunny Miami, FL in the middle, between the logo and a two-line hamburger.
Colors
Surfaces
#FFFFFFPage background, hero, sections, demo cards
#181818 · 10%Image wrappers behind card photos (the grey you see while images load)
#000000The full-screen menu overlay and the black footer band
Ink
#000000Text on primary
#000000Headlines, section tags, nav, the bullet dot
#525252Paragraphs (p colour in the CSS, --dim-grey)
#6D6D6DSmall meta text such as blog dates and categories
#000000Text on accent
#FFFFFFText on inverse-canvas
Action
#FFEA00Filled buttons (Send Message, Send Request), square corners
#000000.button:hover: black with white text
#FFEA00The 170px circle button on cards and the small circle menu button on Homepage 1
Lines & effects
#E2E2E2Light grey 1px dividers between blog rows (.blog-wrapper-bottom)
#181818The 1px left rule of block quotes (--black-2)
#FFFFFF · 29%Underline under footer links on black
#F0F5FFDeclared in the Webflow variables; not visible on the demo landing page
#FBE7E3Declared in the Webflow variables; not visible on the demo landing page
Typography
Inter Tight · display-hero
The quick brown fox jumpsēlla in the hero (.title-1, 9.5em of the 14px body). 133px · 500 · 1.0
Inter Tight · headline-lg
The quick brown fox jumpsBase h1 on inner pages. 46px · 500 · 0.96
Inter Tight · quote
The quick brown fox jumpsBlock quotes, with a 1px #181818 left rule and 20px side padding. 25px · 400 · 1.3
Inter Tight · title-md
The quick brown fox jumpsCard titles under thumbnails (Homepage 1, .blog-title). 21px · 500 · 1.43
Inter Tight · eyebrow
The quick brown fox jumpsSection tags after the bullet dot (.title-tag). 21px · 500 · 1.1
Inter Tight · label
The quick brown fox jumpsThe nav location line. 18px · 500 · 1.11
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1400px, centred (.container), with side padding of 5% of the viewport from the section (padding: 100px 5%) |
| Section rhythm | 100px top and bottom on every .section, 80px at ≤991, 50px at ≤767 |
| Section tag spacing | the dot and label sit 10px apart, with 20px below before the content |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a min-width: 768px rule set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 21px | |
grid-gap | 25px | |
hero-y | 50px | |
section | 100px |
Border radius
Motion
| Headline reveal | Lines start at y 100% (also 112% and 130%) inside an overflow-hidden mask with skewY 7°, then move to y 0% and skew 0° over 1100ms, outQuint |
| Fade in | opacity 0 → 1, 500ms; slower variant 1000ms outQuart |
| Slide in | x ±30px or y ±30px → 0, 500ms |
| Image zoom | scale 1.3 → 1, 500ms, on scroll into view |
| Circle button pop | scale 0.8 → 1, 300ms, outQuad |
| Hamburger | Bars rotate, 200ms outSine; menu opens with display toggles and a 300ms ease size change |
| Menu link roll | Text moves y 0 → 100% and a copy rolls in, 500ms |
| Small shift | x 4px, 500ms |
| Hover transitions | CSS transition: all 300ms on the button; social icons fade to 70% |
Do’s and don’ts
- Keep the page #FFFFFF with #000000 headlines in Inter Tight 500 and 0px tracking.
- Open every section with the 12px black dot and a 21px eyebrow label.
- Put a 170px circular photo inside the hero headline line, between words.
- Use #FFEA00 with black text for the one filled action, square-cornered and full width in forms.
- Set paragraphs in body-lg (17px, 500) at #525252.
- Use the black inverse-canvas only for the full-screen menu and the footer band.
- Choose photos with one product on one strong flat colour.
- Round buttons, inputs, cards or photos; only circles and the dot are round.
- Add a second accent colour or tint the UI with the photo colours.
- Use the declared Switzer font, uppercase outside the tiny form labels, or weights above 600.
- Add heavier shadows than 0 5px 15px black at 8%, or shadows on anything but thumbnail cards.
- Keep ink-subtle #6D6D6D for 14px+ meta text on white only, never for paragraphs and never over the surface-1 image placeholder (4.2:1).
- Invent a hover colour for the yellow button; its measured hover is black #000000 with white text.
Example prompt
Any page in the ella style
More design systems like this
Agency 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 ella 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/ella.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