flowmanceMaleo X Design System
Maleo X is a loud, poster-like agency site built from almost nothing: a white page, black type and photography. Every word is set in Unbounded, a wide geometric display face, and every word is in capitals, body copy included. The page is centred and symmetrical, with large white gaps between sections, and the only colour comes from the images and three tiny blog category chips.
Four signatures make it recognisable:
- Solid and outlined words. Headlines mix filled black words with hollow ones: MALEO X / DIGITAL / AGENCY has an outlined middle line, and WHO WE ARE has an outlined ARE. The outline is not a stroke; it is white text with a 1px black text-shadow in four directions (.title-line), which gives the slightly offset, drawn look.
- The hanging pennant logo. A 100×112px black flag hangs from the top edge in the centre of the nav, with a notched bottom edge (shape.svg) and the white M mark inside. Social icons sit far left, a 2-line hamburger far right.
- Uppercase Unbounded at every size. From the 130px hero to the 11px tags, everything is capitals, with positive tracking (1–5px) on headings and labels.
- Lines and outlines, never fills. The calls to action are underlined text links (MEET THE TEAM, VIEW ALL WORK) and thin outlined pills (OUR WORK, USER INTERFACE). A pill only fills black on hover.
Maleo X is a light-only design.
Colors
Surfaces
#FFFFFFPage background, nav bar, overlay menu (--black is white in this template)
#F1F1F7The wipe panel that slides across headings as they reveal, blockquote rule
#696969 · 30%1px input border
#000000The pennant logo, the 2px underline fill, slider dots
Ink
#000000Text on primary
#000000All headings, labels, links (--dark is black)
#000000Body copy
#747474Default link colour from the base styles; the nav icons inherit it
#FFFFFFText on inverse-canvas
#FFFFFFAction
#FFFFFFThe outlined button: transparent on white with black text
#000000The outlined button fills black on hover, text turns white
Lines & effects
#383838 · 30%1px border of the outlined eyebrow and work-tag pills
#9999991px border of the outlined button
#999999 · 30%The 2px track under every underlined link
#3C19FFBlog category chips only: Marketing, Design, Code
#2AFF12Blog category chips only: Marketing, Design, Code
#FF1216Blog category chips only: Marketing, Design, Code
#222222 · 40%Inactive testimonial slider dots
Typography
Unbounded · display-hero
The quick brown fox jumpsHero line DIGITAL (outlined). 130px · 700 · 1.2 · 1px
Unbounded · headline-lg
The quick brown fox jumpsWHO WE ARE (.about-title). 48px · 700 · 1.1 · 3px
Unbounded · title-lg
The quick brown fox jumpsTestimonial quote. 24px · 600 · 1.5
Unbounded · body
The quick brown fox jumpsParagraphs, testimonial names. 15px · 500 · 1.5
Unbounded · label-link
The quick brown fox jumpsUnderlined links: MEET THE TEAM, VIEW ALL WORK. 15px · 600 · 1.47 · 2px
Unbounded · eyebrow
The quick brown fox jumpsOutlined pills: OUR WORK, USER INTERFACE, AGENCY TEMPLATE. 12px · 600 · 1.67 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container is max 1200px, centred |
| Section rhythm | 100px top and bottom (.section, .section-cta) |
| Breakpoints | 991px, 767px, 479px (Webflow defaults), plus a 1440px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 7px | |
sm | 15px | |
md | 30px | |
lg | 50px | |
xl | 70px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 15px | |
blog-gap | 30px | |
section-gutter | 72px | |
section | 100px | |
nav-height | 112px | |
hero-bottom | 150px | |
hero-top | 200px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-in on scroll | opacity 0 → 1, 1000ms outQuart, with move 0px from an offset over 1000ms outQuart |
| Heading wipe | A surface-1 panel at translate(-100%) slides across the title, then the text shows |
| Link and button text roll | Label y 0% → −100% while a copy moves to 0%, 300ms ease (400ms inOutCubic on menu links) |
| Underline grow | Black bar width 0 → 100%, 300ms ease |
| Image hover zoom | scale 1 → 1.1 on mouse over, back to 1 on mouse out, 100ms ease |
| Parallax | Elements move y ±25px and ±100px while scrolling in view, 500ms |
| Nav hide and show | Moves out on page scroll down, back on scroll up |
| Hamburger | Lines rotate, 200–400ms ease |
| Button hover | all 0.2s to a black fill; blog title opacity → 0.6 over 0.3s |
Do’s and don’ts
- Set every word in Unbounded, uppercase, on canvas #FFFFFF with ink #000000.
- Outline one word or line in the hero and the about title with the 4-way 1px text-shadow on white text.
- Open sections with an outlined eyebrow-pill (40px radius, 1px #3838384D) and a centred headline-md title at 3px tracking.
- Use the underlined text link (label-link, 2px #9999994D track) as the main call to action.
- Keep images square-cornered and give the type plenty of white space (100px section padding).
- Keep body copy full black (ink-muted equals ink).
- Add a brand accent or coloured buttons. tag-blue, tag-green and tag-red are for blog category chips only.
- Put white text on tag-green #2AFF12 anywhere except the 11px category chip it came with; it fails contrast. Prefer black text if you add new green chips.
- Use lowercase, sentence case or a second typeface (Inter Tight is loaded but unused).
- Use filled buttons at rest. Buttons fill black only on hover.
- Round images, or use radii outside 20 / 30 / 40px and circles.
- Add drop shadows, gradients or glass blur.
- Use grey text for paragraphs; #747474 (ink-subtle) is only the base link colour. Keep it on white at 14px or larger and never on surface-1 #F1F1F7, where it drops below 4.5:1.
Example prompt
Any page in the Maleo X 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 Maleo X 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/maleo.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