flowmancePlanify Design System
Planify is a bright, tidy marketing-agency site. It is mostly white and pale grey with near-black Inter Tight set heavy, and it uses one loud colour: an electric violet #6F00FF for the main button, the featured plan and a block behind the hero portrait. Friendly lifestyle photography (people smiling at laptops and phones) sits next to clean white 3D product renders.
Four signatures make it recognisable:
- The violet block. The hero is split: a pale grey area with the headline on the left and, on the right, a solid #6F00FF block that the portrait photo overlaps and breaks out of.
- A hand-drawn underline. One word of the hero title (focused) carries a loose, double pen-stroke underline.
- Centred three-part header. Social icons (X, Instagram, LinkedIn, Dribbble) on the left, a striped P monogram in the centre and a long two-line hamburger on the right. No text links.
- Statements with full stops. Headings are short sentences ending in a full stop (Your growth focused partner., Simple, yet powerful features.), often followed by a heavy 28px lead.
Planify is a light design with one deep blue band for metrics.
Colors
Surfaces
#FFFFFFPage background and most sections
#F7F7F7Hero ground (part of the hero background image)
#F5F5F5Latest news section band
#F5F5F7App-download panel behind the phone mockup
#777777Input placeholders (--dark-grey)
#331CD2Metrics band (with a background image)
Ink
#FFFFFFText on primary
#060609Text on secondary
#060609Headlines, labels, icons, the hamburger
#060609Paragraphs are full ink (p has no own colour)
#060609 · 80%Small text, pricing feature rows (.small-text-2, opacity 0.8)
#747474Small meta text (.small-text)
#060609 · 40%Excluded plan features (struck through) and the grey half of Leading businesses choose Planify
#FFFFFFText on inverse-canvas
#FFFFFF · 72%Labels on the metrics band
Action
#6F00FFMain pill button, Most Popular badge, featured plan border
#6F00FF#C7C7C7 · 20%Grey pill buttons (Get started, Send Message)
#060609Grey pill on hover, with white text
Lines & effects
#FFFFFF · 95%The Let's build with Planify section over the hero
#444444Small overline labels such as Download app
#EFF0F61px border on pricing and testimonial cards
#000000 · 29%2px ring on step numbers
#000000 · 7%0 2px 7px card shadow
Typography
Inter Tight · display-metric
The quick brown fox jumpsWhite numbers on the metrics band (.metric-text). 96px · 600 · 1.0 · -0.96px
Inter Tight · headline-lg
The quick brown fox jumpsSimple, yet powerful features., Client Experiences. 45px · 600 · 1.3
Inter Tight · title-xl
The quick brown fox jumpsBlog titles centred over images. 32px · 600 · 1.2
Inter Tight · body-lead
The quick brown fox jumpsHero lead; 27px leads under section titles. 28px · 600 · 1.4
Inter Tight · label-button
The quick brown fox jumpsViolet pill button. 19px · 600 · 1.05
Inter Tight · eyebrow
The quick brown fox jumpsFooter tags, uppercase. 14px · 700 · 1.1 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | .section is 130px top and bottom with 5% sides (72px at 1440), dropping to 80px at ≤991px and 50px at ≤767px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1280 and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 6px | |
sm | 15px | |
md | 24px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
card | 46px | |
section-sm | 100px | |
logo-gap | 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 reveal | Lines rise from y 200% → 0% and un-skew skewY 7° → 0°, 500ms; slow variant 1100ms outQuint |
| Fade-in on scroll | opacity 0 → 1, 1000–1250ms outQuart, with x/y → 0px over 1000ms outQuart or a 28px rise |
| Card pop | scale 0.9 → 1 or 0 → 1, 500ms; scale 0.8 → 1 300ms outQuad on small items |
| Menu link roll | Label moves up inside its 74px mask, about 500ms |
| Link underline | Width grows, 300ms ease |
| Hover states | Background, filter and opacity changes 300ms ease; .button transition: all .3s |
| Mouse parallax and page scroll | Mouse-move and page-scroll interactions shift images slightly |
| Logo marquee | Continuous horizontal scroll |
Do’s and don’ts
- Keep the canvas white or #F7F7F7 and all text #060609 in Inter Tight 600 / 500.
- Use the #6F00FF pill (56px tall, 30px radius, 18px 30px padding) for one main action per screen.
- Use the soft grey pill (#C7C7C733, turning #060609 on hover) for every other button.
- End headings with a full stop and follow them with a 27–28px weight-600 lead.
- Give cards a 1px #EFF0F6 border plus the 0 2px 7px #00000012 shadow, with square corners.
- Pair warm lifestyle photos with white 3D renders.
- Add a second accent colour or use violet for text or large backgrounds beyond the hero block.
- Round cards or images; only buttons, tags and avatars are round.
- Use ink-subtle #747474 on #F7F7F7 or #F5F5F5 for small text; it is about 4.3:1 there. Keep it for 14px+ meta, ideally on white.
- Put body text in grey; use full #060609 or #060609 at 80%.
- Use letter spacing on headlines, except −0.96px on the 96px metrics.
- Replace the centred logo header with a row of text links.
Example prompt
Any page in the Planify style
More design systems like this
Business 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 Planify 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/planify.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