flowmanceSkyRocket Design System
SkyRocket is a bright, playful agency site on white. Wide, geometric Unbounded in uppercase carries the headlines, nav and buttons; Inter Tight carries the sentences. The interface is black and white with 2px outlines, and colour arrives in small, loud doses: a pink-to-blue gradient on pill tags, three saturated icon circles (red, green, blue), and an iridescent 3D rocket in the hero.
Four signatures make it recognisable:
- Gradient pill tags. Small labels like INTRODUCING SKYROCKET and WHAT WE DO sit in pills filled with linear-gradient(63deg, #F88EE6, #6179FE) and set in 12px white Unbounded.
- Outlined pills that fill. Every home-page button is a transparent pill with a 2px black border (LET'S TALK, MEET THE TEAM, ALL WORKS, CONTACT US). On hover it fills black.
- The list of works. Projects are a full-width list of uppercase rows, each with a (1) count on the right and a 1px black rule below. On hover a row turns black and its text shifts in 25px.
- Outlined giant numbers. Metrics (17, 130, 10) are 180px Inter Tight with transparent fill, so only their outline shows.
SkyRocket is a light-only design.
Colors
Surfaces
#FFFFFFPage background, nav background once scrolled
#F1F1F1Testimonial quote panel
Ink
#000000Text on primary
#FFFFFFText on gradient tags
#000000Headlines, nav, outlines, row titles
#000000 · 75%Paragraphs (p has opacity 0.75), testimonial roles
#000000 · 40%The faded second half of the hero lead and of the logo-strip statement
#FFFFFFWhite line icons inside the service circles
Action
#FFFFFFOutlined buttons: no fill, black text and border
#000000Button, tag and project-row hover fill (text turns white)
#F88EE6The 63° gradient on pill tags (5 uses)
#6179FEWith accent: The 63° gradient on pill tags (5 uses)
Lines & effects
#0000002px pill and tag outlines; 1px rules under project rows; the scroll progress bar
#FF4545The three service icon circles, one each
#4FFC61The three service icon circles, one each
#3D47FFThe three service icon circles, one each
#BFBFBFTestimonial slider dots
#222222With dot: Testimonial slider dots
#222222 · 40%Overlay on the full-width image band
Typography
Inter Tight · display-number
The quick brown fox jumpsMetrics 17, 130, 10 (transparent fill, black stroke). 180px · 600 · 0.9
Unbounded · headline-md
The quick brown fox jumpsSection titles THE WORK WE DO,. 38px · 600 · 1.4
Inter Tight · title-lg
The quick brown fox jumpsHero lead, logo-strip statement. 25px · 600 · 1.4
Inter Tight · label-sub
The quick brown fox jumpsCaptions under the about images. 19px · 600 · 1.05
Inter Tight · body
The quick brown fox jumpsParagraphs at 75%. 18px · 500 · 1.3
Inter Tight · caption
The quick brown fox jumpsTestimonial roles MARKETING MANAGER. 15px · 500 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 130px top and bottom, 80px at ≤991px and 50px at ≤767px; the CTA section 120px; the take section 100px (50px at ≤767px) |
| Breakpoints | 991px, 767px and 479px, plus 1280px and 1440px steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 18px | |
md | 30px | |
lg | 50px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
row | 30px | |
column-gap | 30px | |
hero-top | 80px | |
section-take | 100px | |
section-cta | 120px | |
section | 130px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Heading wipe | A black block (.heading-overlay) starts at translateX(−100%) and sweeps across headings, about 500ms |
| Button text roll | Label y 0 → −100%, copy rolls in, 400ms inOutCubic (300ms ease on nav) |
| Pill and tag hover | Background to #000000, 200ms (transition: all .2s); label colour change 300ms ease |
| Project row hover | Black fill and side padding 0 → 25px, 200ms |
| Nav underline | Line height 0 → about 2px, 300ms ease |
| Scroll progress | Bar width follows page scroll, 500ms size steps |
| Scroll fade-in | opacity 0 → 1, 1000ms outQuart |
| Drift | Images move x/y ±30px, 500ms, while in view |
| Card press | scale 1 → 0.95, 300ms outSine |
| Icon pop | scale 0 → 1, 300–500ms (outQuint on return); rotate 400ms ease |
| Ticker | Rows scroll sideways continuously |
Do’s and don’ts
- Use Unbounded uppercase for headlines, nav, buttons and project names, and Inter Tight for sentences.
- Make every action a 2px black outlined pill (50px radius) that fills #000000 on hover.
- Use the #F88EE6 → #6179FE gradient only on small pill tags above section titles.
- Give each service its own saturated circle: #FF4545, #4FFC61, #3D47FF.
- List projects as full-width rows with a 1px black rule and a bracketed count.
- Fade the second half of a lead to ink-subtle.
- Add filled black or coloured buttons at rest.
- Put white text on the gradient for anything longer than a short 12px uppercase label; white on #F88EE6 is low contrast. Keep tags to two or three words.
- Use ink-subtle (black at 40%) below 25px; it is under 3:1 on white.
- Round images or the testimonial panel.
- Use Oswald, or set Unbounded in sentence case.
- Leave the Latin placeholder quotes in testimonials.
Example prompt
Any page in the SkyRocket 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 SkyRocket 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/skyrocket.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