flowmanceCreativum Design System
Creativum is a black-and-white creative studio site. Every line of type is Switzer at weight 500–600, the interface has no colour of its own, and the page swings between a full-screen black hero, rows of full-height saturated 3D and photo renders, and long stretches of white space with very large text. It feels calm and gallery-like, with the motion and imagery doing the talking.
Four signatures make it recognisable:
- The inverting navigation. The fixed nav has filter: invert() and mix-blend-mode: difference, so the same links, the round monogram and the button show white over the black hero, black over white, and shift colour over photos.
- The circle monogram. A 90px circle crossed by an X, with the letters C, U, M and E in the four gaps, sits centred at the top of every page.
- Full-height project panels. Projects run as tall portrait panels (about 0.88:1) placed edge to edge with no gaps or corners, and they slide sideways as you scroll.
- Giant scrolling sentences. Whole sentences set at 100px (An agency with a uniquely Japan-American approach to creativity.) run off both edges and move horizontally with the scroll.
Creativum is light with one black hero. There is no dark mode.
Colors
Surfaces
#FFFFFFPage background, footer, service items
#F7F7F7The subscribe field in the CTA
#000000The full-screen hero and the round arrow button
#F7F7F7The subscribe field in the CTA
Ink
#000000#000000Headlines, nav, buttons, quotes
#000000Body copy is full black too (big-text, quotes)
#A1A1A1Footer links, the legal line, dates
#000000 · 40%Testimonial roles (Marketing Manager)
#FFFFFFText on inverse-canvas
#FFFFFFProject titles on images; the hero lead
#FFFFFF · 70%Muted text on media
#FFFEFEAction
#000000 · 7%The soft grey pill button
#000000Pill button on hover, with white text
#00521FForm messages
#8A0A0AForm messages
Lines & effects
#A1A1A1 · 31%The 1px footer divider
#C7DBDBThe 2px inset underline on footer links when hovered
#000000 · 65%Round arrow button on hover
#F0F5FFThe three 100px service icon circles, one each
#EAFFF6The three 100px service icon circles, one each
#FFF1F0The three 100px service icon circles, one each
Typography
Switzer · display-hero
The quick brown fox jumpsCreate. 110px · 600 · 1.0
Switzer · headline-lg
The quick brown fox jumpsSection titles ending in a full stop: Our Blog. 66px · 600 · 1.0
Switzer · title-lg
The quick brown fox jumpsProject titles on images. 34px · 600 · 1.1
Switzer · body-lg
The quick brown fox jumpsLead paragraphs (big-text). 23px · 500 · 1.3
Switzer · label-lg
The quick brown fox jumpsProject categories (UI, UX, Development). 17px · 600 · 1.2
Switzer · caption
The quick brown fox jumpsLegal line (.footer-legal-text). 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 150px top and bottom on desktop; 80px at ≤991px and 50px at ≤767px are suggested |
| Breakpoints | 991px, 767px and 479px, plus one rule at 1440px+ |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 7px | |
sm | 16px | |
md | 24px | |
lg | 30px | |
xl | 50px | |
2xl | 60px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
hero-bottom | 100px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Section fade-up | opacity 0 → 1, y 20px → 0, 400–500ms ease, on scroll into view |
| Project panels and scrolling sentences | "while scrolling in view": horizontal moves between x −400px and x 400px, linked to scroll position |
| Image parallax | "while scrolling in view": vertical moves of ±50px, ±80px and ±220px |
| Button hover | Grey → black fill, black → white text, all 0.3s |
| Circle button hover | Black → black at 65%, 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
| Nav link hover | Opacity → 0.5, 300ms |
Do’s and don’ts
- Keep the UI black (#000000) and white (#FFFFFF); let renders carry the colour.
- Use Switzer 600 for headings and 500 for long text, with no tracking except −2px on the 80px CTA.
- Give the fixed nav mix-blend-mode: difference with filter: invert() so it reads on any section.
- Use the soft grey pill (#00000012, 100px radius, 17px 30px padding) that turns black on hover.
- End section titles with a full stop and keep them to one line of meaning.
- Run projects as edge-to-edge full-height panels with no radius and no gap.
- Add an accent colour, gradients or drop shadows.
- Set paragraphs in #A1A1A1 (ink-subtle); keep it for 14–16px semibold footer links, dates and legal text.
- Use ink-faint (black at 40%) for anything but short roles under a name.
- Round project or blog images; only the mission image gets the half-pill shape.
- Add a second typeface, uppercase labels or italic.
- Put a solid bar behind the nav; it must stay transparent and blended.
Example prompt
Any page in the Creativum 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 Creativum 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/creativum.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