flowmanceULF Light Design System
ULF Light is a quiet, typographic agency site in black and white. Big centred Inter Tight headlines at 100px, generous white space and almost no decoration: grey letter-spaced eyebrows, hairline rules, and one flat light-grey button. Colour only arrives through the project images, and the page itself turns black when the work section scrolls into view.
Four signatures make it recognisable:
- The petal glyph in headlines. A black four-petal shape (an image set on a transparent letter e, 60px wide) sits inside the big headings: Accelerate the growth of your ✦ brands., Testimonials ✦, Let's work together ✦.
- The page flip. When Our Work scrolls in, the whole page background fades from white to black in 200ms and the headings and project titles turn white; scrolling back out reverses it.
- Eyebrow + giant title. Most sections open with a 13px uppercase grey label with 2px tracking (MEET ULF TEMPLATE, WHAT WE DO, WHO WE ARE), then a centred 100px or a left 60px title.
- Hairline accordions. Services are 90px-tall rows with a line icon, a 24px name and a thin +, separated by 1px black rules.
Colors
Surfaces
#FFFFFFPage background and the fixed nav
#EEEEEEThe flat button fill; the only grey surface
#666666Contact form text and placeholders
#000000The logo band, the work section after the flip, the footer
#FFFFFF · 22%Bottom border of the newsletter field
Ink
#000000#000000Headlines, nav, links, rules
#000000Body copy is full black, the same as ink
#999999Eyebrows, the faded second half of the hero lead, testimonial company names
#FFFFFFText on black; button text on hover
#FFFFFF · 60%Eyebrows and links on black (footer links use #FFFFFF at 57%)
#FFFFFFAction
#EEEEEEThe flat button fill; the only grey surface
#000000Lines & effects
#E1E1E11px border on testimonial cards
#0000001px service and accordion rules, skill bars, link underlines
#FFFFFF · 15%The rule under the footer's top row
Typography
Inter Tight · display-hero
The quick brown fox jumpsHero, Improve your company with a great website., Our Work, Testimonials, Let's work together (.hero-title, centred). 100px · 600 · 1
Inter Tight · headline-lg
The quick brown fox jumpsOur Services, Our Skills, News (.title-2); the logo band line is the same size in weight 500. 60px · 600 · 1.1
Inter Tight · title-project
The quick brown fox jumpsProject names (Whimsy Tales, Night Desert). 28px · 600 · 1
Inter Tight · label-nav
The quick brown fox jumpsNav links. 19px · 600 · 1.05
Inter Tight · body-lg
The quick brown fox jumpsParagraphs, testimonial quotes, footer links. 18px · 500 · 1.28
Inter Tight · caption
The quick brown fox jumpsProject meta (UI, UX, DEVELOPMENT). 14px · 600 · 1.3 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; sections add 5% side padding |
| Section rhythm | 120px top and bottom (80px at ≤991, 60px at ≤479) |
| Breakpoints | 991px, 767px and 479px, plus a 1440px+ tweak for the logo strip |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 16px | |
sm | 20px | |
md | 30px | |
lg | 50px | |
xl | 60px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 25px | |
nav-height | 80px | |
section | 120px | |
block | 150px | |
inner-top | 180px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-up | opacity 0 → 1 and y → 0, 1000ms outQuart, when elements scroll into view |
| Page flip | On the work section: page background #FFFFFF → #000000, titles #000000 → #FFFFFF, 200ms ease; reversed when it scrolls out |
| Link underline | .line width 0% → 100%, 500ms outExpo on hover; back to 0 in 300ms ease |
| Accordion | The + rotates (about 45°), 400ms swingTo; content height opens over 400ms outCubic |
| Skill bars | Width 0 → 89–100%, 500ms ease, on scroll into view |
| Photo parallax | Images move y −50px (500ms) while scrolling through view, with a slight zoom (about 1.5 → 1) |
| Button | Background and text colour, 200ms |
Do’s and don’ts
- Keep the page black and white: #FFFFFF canvas, #000000 ink, #999999 only for eyebrows and faded lead text.
- Open sections with a 13px / 700 uppercase eyebrow at 2px tracking, then a 100px or 60px Inter Tight 600 title.
- Use the flat #EEEEEE button with a 6px radius that turns black with white text on hover.
- Separate list rows with 1px black rules and use thin outline icons.
- Use full-bleed black bands (#000000) for the logo strip, the work section and the footer.
- Put the petal glyph inside a headline, at about 60% of the cap height, not beside it.
- Add a brand colour, gradients or shadows.
- Use #999999 for body text or anything under 13px bold; it is about 2.8:1 on white, so keep it for eyebrows and 25px+ text, and never on the #EEEEEE button.
- Round buttons into pills or cards beyond 15px; images stop at 30–40px.
- Left-align the big display-hero titles; they are centred.
- Put grey surfaces behind sections; the only grey fill is the button.
- Add a backdrop blur or transparency to the nav; it is solid white.
Example prompt
Any page in the ULF Light 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 ULF Light 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/ulf.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