flowmanceLaunchy Design System
Launchy is a dark, high-energy marketing-agency site. It sits on pure black with white Inter Tight in weight 600, and all its colour comes from one diagonal gradient, purple #BF0FFF to lime #CBFF49, used on every button, every service icon and the big testimonial card. Charcoal cards, abstract 3D gradient renders and thin white sparkle stars fill the rest. The live preview brands it "Launch" with a rocket logo.
Four signatures make it recognisable:
- The purple-to-lime gradient. linear-gradient(36deg, #BF0FFF, #CBFF49) fills the pill buttons, the 90px service icon circles, the 110px "view project" cursor and a full-width 30px-radius testimonial card. It is the only colour in the UI.
- The outlined hero word. The hero reads Create, / Design, / Launch. at 130px. The last word is hollow (transparent fill, 1px white text stroke) and its full stop stays solid white.
- Two-tone sentences. Leads, quotes and titles start in white and finish at 50% white: Harness the full strength of your business with our Webflow template, curated for professional excellence. The split happens mid-sentence, after a comma.
- Sparkle stars and glow. Thin four-point stars (about 44px) float in the corners of the hero, and very faint soft white glow circles sit behind it.
Launchy is a dark-only design.
Colors
Surfaces
#000000Page background (--black)
#121212The about split panel next to a photo (40px corners)
#141414Service cards, form inputs (--blue-light, the name is legacy)
#222222Date chips, social icon circles, the 34px number badges in the menu (--black-second)
#141414Contact inputs (9px radius, no border)
Ink
#FFFFFFButton labels and testimonial text on the gradient
#000000The "View project" label inside the gradient cursor circle
#FFFFFFHeadlines, labels, links, the first half of two-tone sentences
#FFFFFF · 60%Paragraphs (p has opacity 0.6) and footer links
#999999List items, date chip text (--grey)
#FFFFFF · 50%The second half of two-tone headlines and leads (.gray-color)
#FFFFFFAction
#BF0FFFThe gradient
#BF0FFF#CBFF49The gradient
Lines & effects
#FFFFFF · 15%The thin vertical divider between Cart [0] and the menu cross
#FFFFFF1px award rows, the 2px underline under work titles
#81818B · 20%The newsletter field in the footer
Typography
Inter Tight · display-hero
The quick brown fox jumpsCreate, Design, Launch. 130px · 600 · 1.1
Inter Tight · headline-lg
The quick brown fox jumpsCentred section titles: Recent works, What they think. 44px · 600 · 1.3
Inter Tight · title-quote
The quick brown fox jumpsSmaller quotes on the about panels. 30px · 600 · 1.2
Inter Tight · label
The quick brown fox jumpsButtons, award rows. 18px · 600 · 1.1
Inter Tight · body-lg
The quick brown fox jumpsParagraphs (always at 60%). 18px · 500 · 1.3
Inter Tight · caption
The quick brown fox jumpsDate chips. 15px · 500 · 1.3
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom on desktop; 80px at ≤991 and 60px at ≤479 |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 30px | |
lg | 50px | |
xl | 60px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 15px | |
section | 100px | |
block | 130px | |
hero-top | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-in | opacity 0 → 1, 1000ms outQuart, triggered on scroll into view |
| Button hover | The label lifts out while the arrow rises into place, about 500ms; reversed on mouse out |
| View-project cursor | Follows the mouse over work cards; scales 0 → 1 in 600ms outExpo on enter, back to 0 in 400ms outExpo on leave |
| Marquee | x 0% → −100% over 40000ms, linear, looping |
| Work title underline | The 2px line wipes x 0% → 100% and back, 300ms ease |
| Menu open | Each link rises from y 200% to 0 with skewY 7° → 0° inside its mask, 1100ms outQuint; on hover the word swaps up in about 300ms; the menu cross scales down slightly (about 0.8) |
| Hover transitions | all 0.3s on links, blog images and footer links |
| Scroll scenes | Stars and the "OUR WORKS" badge move and rotate with page scroll |
Do’s and don’ts
- Use the purple-to-lime gradient (#BF0FFF → #CBFF49, 36°) for every button and icon circle, and nowhere else except one testimonial card.
- Keep the page on pure black #000000 with cards on #141414 and chips on #222222.
- Split leads and quotes into a white first half and a 50% white second half.
- Set headlines in Inter Tight 600 with normal tracking, ending with a full stop.
- Use 12px radius on cards, 20px on images and 30px on buttons and big cards.
- Keep button text at 18px weight 600; white on the gradient is about 4.4:1 at the purple end and lower at the lime end.
- Use #BF0FFF or #CBFF49 as flat fills or text colours.
- Add drop shadows, borders around cards, or a background blur on the nav.
- Put body copy in full white; paragraphs are always 60% white.
- Use the 50% ink-faint half-tone for text under 18px.
- Add a second typeface or uppercase labels; uppercase is only for the stat numbers.
- Put small text over the lime end of the gradient.
Example prompt
Any page in the Launchy 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 Launchy 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/launchy.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