flowmanceNimbo Design System
Nimbo is a loud, cheerful agency site. It opens on a full-screen signal yellow with a huge black three-line headline, a hand-drawn oval circling the middle word and a paper plane trailing a looped line. Below the yellow, the page turns white and stays black-on-white, with vivid 3D renders and product shots carrying the colour. It feels like a sketchbook laid over a clean grid.
Four signatures make it recognisable:
- Signal yellow #FFEF43. The hero (95vh) and the Featured Works band sit on full-bleed yellow. The same yellow is the button hover. Everything else is white, apart from the light grey #F7F7F7 form band.
- Hand-drawn marks on the headline. High-End / Creative / Agency. at 150px, with a sketched black oval around Creative and a small hollow circle as the full stop. Loose line doodles (a paper plane with a looping trail, a scribble) recur through the page.
- The black showreel badge. A 130px black circle with PLAY SHOWREEL running round the edge in white caps and a play triangle in the middle. No rotation is measured in the interaction data.
- The three-part top bar. Stacked links top-left, the lowercase nimbo wordmark centred, and We based in New York plus the email right-aligned. It is all black text on whatever band is behind it, with no bar background.
Nimbo is a light design with one yellow accent.
Colors
Surfaces
#FFFFFFPage background below the hero
#F7F7F7The grey Start your project with us form band
#ECECECSmall grey fills (about 3 on the page), such as skill-bar tracks
#FFFFFFInk
#747474Text on primary
#000000Text on accent
#FFFFFFText on secondary
#000000Headlines, nav, paragraphs, links
#000000Body text is full black at weight 600 (the CSS p colour), so ink-muted equals ink
#747474List items, input text and placeholders, the grey button text
#020A0CFooter links, which go #8D8D8D on hover
#FFFFFFText on photos and on the black cart
Action
#E2E2E2The flat grey button
#FFEF43#FFEF43Hero and Featured Works bands, button hover
#000000The showreel badge, the Up circle and the cart panel
Lines & effects
#DFDEDE1px input borders
#FFFFFF · 30%Thin lines laid over photos
Typography
Plus Jakarta Sans · display-hero
The quick brown fox jumpsHigh-End / Creative / Agency. 150px · 500 · 0.9
Plus Jakarta Sans · headline-lg
The quick brown fox jumpsSection titles: Our top—notch services, We are blessed to work with leading brands. 55px · 700 · 1.1
Plus Jakarta Sans · title-lg
The quick brown fox jumpsSmall section labels such as Featured Works. 27px · 700 · 1.19
Plus Jakarta Sans · body-quote
The quick brown fox jumpsTestimonial quotes. 21px · 400 · 1.43
Plus Jakarta Sans · nav
The quick brown fox jumpsTop-bar links and the location and email lines. 19px · 600 · 1.05
Plus Jakarta Sans · label-link
The quick brown fox jumpsUnderlined text links (.button-main). 19px · 700 · 1.16
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; narrow blocks at 700px |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 70px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-top | 30px | |
footer-bottom | 30px | |
section | 120px |
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 → 0 over 1000ms outQuart |
| Pop-in (badge, doodles) | scale 0.4 → 1, 500ms swingTo (a slight overshoot) |
| Skew settle | skewX −15° → 0°, 500ms ease |
| Parallax drift | y ±80px or 50px scrubbed while in view |
| Arrow slide | One element moves x 0 → 200% in 400ms ease and returns from x 0% in 600ms outExpo |
| Line grow | Underline and skill bars grow in width, 500ms ease (400ms outCubic on some) |
| Icon hover | scale 1 → 1.1, 100ms ease |
| Button hover | Colour and background, 200ms (transition: all .2s) |
| Background or border change | 400ms ease / 200ms outSine |
| Top bar | Scroll-direction events are set |
Do’s and don’ts
- Open with a full-bleed #FFEF43 yellow hero and return to yellow for one more band (the work row).
- Set paragraphs in black #000000 at weight 600; use #747474 only for inputs and list items.
- Keep photos square-cornered and colourful; round only buttons (7px), inputs (5px) and circles.
- Add a hand-drawn mark to the headline (an oval, an underline) and one doodle per section.
- Use the black 130px showreel badge for video.
- Make the grey #E2E2E2 button turn yellow with black text on hover.
- Put yellow #FFEF43 on text, or a second accent colour (the unused #4353FF, #FE0000, #0505AF).
- Add shadows, gradients or blur.
- Set the grey button text below 17px bold: #747474 on #E2E2E2 is only 3.61:1.
- Use ink-subtle #747474 for paragraphs on the grey band: it is 4.36:1 on #F7F7F7 and 3.96:1 on #ECECEC, so keep it to inputs and short labels.
- Give the top bar a background or a border; it floats as plain black text.
- Use uppercase or letter spacing outside the showreel badge.
Example prompt
Any page in the Nimbo 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 Nimbo 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/nimbo.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