flowmanceLulu Design System
Lulu is a calm, dark studio site. Everything sits on a blue-black #12141D page with slightly lighter #1E2028 panels; text is white or white at fixed alphas, and the only colour in the interface is a pale steel blue #A1C4E4. The hero is a large inset photo card rather than a full-bleed image, and the page uses generous spacing, thin white rules and quiet centred section intros. Bright, saturated product photography in the project slider supplies the colour.
Four signatures make it recognisable:
- Split hero backdrop. The left 40% of the first screen is a #1E2028 strip and the rest is #12141D; the photo hero card (5px radius, 700px tall, darkened 40%) sits across both, with the headline and a pale-blue Play Video pill on its right half.
- Handwritten signatures. Team cards print the first name in the Tuesday Night script font at 60px (John, Victoria, Henry), crossing the bottom edge of each photo.
- Vertical rules between sections. A 1px white line, about 100px tall, stands centred above section titles (Amazing projects, Testimonials).
- Underline links and pill quotes. Enquire Us links carry a 2px white-20% underline that fills with solid white on hover, and testimonials are #1E2028 pills with a round avatar and a one-line quote.
Lulu is a dark-only design.
Colors
Surfaces
#12141DPage background, hero sections, footer (--black-7)
#1E2028Service cards, team cards, the metrics band, the left hero strip, testimonial pills, social circles, inputs (--black-6)
#0C0E16Scrolled nav bar and the cart panel
#1E2028Ink
#FFFFFFText on primary
#FFFFFFHeadlines, nav, names, link labels
#FFFFFF · 70%Paragraphs (the base p colour)
#FFFFFF · 50%Section subtitles, roles, skill labels, footer titles, dropdown links
#FFFFFF · 80%A few small text elements (six measured); the hero lead itself is full white
#FFFFFFAction
#A1C4E4Buttons, nav hover underline, dropdown carets, Instagram badges, play icon
#7CAFDB.button:hover, and the play button's inner circle
Lines & effects
#FFFFFF · 9%Horizontal rule under Other features
#FFFFFF · 20%Resting underline on Enquire Us, skill-bar tracks
#FFFFFF · 23%Centred vertical section dividers
#A1C4E4 · 95%Play Video pill over the hero photo
#12141D · 40%Flat darkening on the hero photo
#12141D · 80%Bottom of the gradient on project and blog images
Typography
DM Sans · display-hero
The quick brown fox jumpsDigital agency, creative people. 70px · 700 · 1.0
DM Sans · headline-lg
The quick brown fox jumpsSection titles (.title-text): We build experience, Amazing projects, Testimonials. 50px · 700 · 1.12
DM Sans · logo
The quick brown fox jumpsLulu wordmark. 38px · 700 · 0.95
DM Sans · title-lg
The quick brown fox jumpsBlog titles; Other features is 27 / 700 / 34px. 28px · 700 · 1.18
DM Sans · body-lg
The quick brown fox jumpsHero lead line. 22px · 500 · 1.27
DM Sans · label
The quick brown fox jumpsNav links; buttons use 16 / 700. 15px · 700 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | section intros (.top-title) leave 80px before their content |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 70px | |
3xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
button-y | 19px | |
button-x | 32px | |
nav-height | 110px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | transition: all 0.2s, #A1C4E4 → #7CAFDB |
| Underline link | Solid white line width 0 → 100%, 500ms |
| Nav hover | 2px #A1C4E4 underline grows, 500ms |
| Nav on scroll | Background to the dark bar, 500ms |
| Skill bars | Fill width grows on scroll into view, 500ms ease |
| Dropdown caret | Rotates 300ms ease |
| Dropdown and menu items | Opacity 0 ↔ 1 and y 20px → 0, 300–600ms ease |
| Logos and dropdown links | Opacity 0.5–0.75 → 1, 0.2s |
Do’s and don’ts
- Keep the page #12141D with #1E2028 panels, and white text at 100 / 70 / 50%.
- Use #A1C4E4 only for buttons, hover underlines, carets and small badges.
- Start centred sections with a 1px vertical white rule, a headline-lg title and a 50% body-md subtitle.
- Use Enquire Us-style underline links for secondary actions and the pale-blue button for the main one.
- Give team cards a Tuesday Night signature name crossing the photo.
- Keep corners square on cards and images, 2px on buttons, and pills only for testimonials and the video button.
- Add drop shadows, gradients on UI, or a second accent colour.
- Use pure #000000 or grey hex values for muted text; use white with alpha.
- Put small or long labels in white on #A1C4E4; it is about 1.8:1. Keep button labels at 16px bold and short (View on Webflow).
- Use white at 50% below 14px; keep ink-subtle for 15px+ subtitles, roles and labels.
- Use the script font anywhere except signature names.
- Animate longer than 600ms or add bounce easing.
Example prompt
Any page in the Lulu 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 Lulu 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/lulu.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