flowmancePixel Design System
Pixel is a clean, high-contrast landing page for a mobile app. The interface is strictly black, white and pale grey, with bold Inter headlines that end in a full stop, black square-ish buttons and 2px black rules. All the colour comes from one vivid gradient (orchid, sky blue, coral) that sits behind glossy 3D phone mockups and on a few accent buttons and bands.
Four signatures make it recognisable:
- The split hero. A pale grey #F8F8FA panel with the text on the left, and a gradient panel on the right (sky blue #12C2E9 → orchid #C471ED → coral #F64F59, overlaid with fine wavy lines) holding a tilted 3D iPhone. Both halves sit inside the 1200px container, flush against each other.
- Black + gradient button pair. A black Sign Up ▸ button next to a gradient Buy Pixel ▸ button (153°, orchid → sky blue). Both are 58px tall with a 4px radius and a small white ▸ caret.
- 2px black rules. The nav ends in a 2px black bottom border, and the same 2px black line separates major sections (above People are diggin' it.).
- Off-grid colour blocks. The black Get Started. sign-up band starts about a third of the way in and runs off the right edge, and a solid coral #F64F59 panel sits beside a photo. Blocks butt up against each other with no gaps or rounding.
Colors
Surfaces
#FFFFFFPage and nav background
#F8F8FAHero text panel, feature cards, tab buttons, testimonial cards, the blog section
#000000The black Get Started
#FFFFFFInputs; placeholder #686868
#333333Text on field
Ink
#FFFFFFText on primary
#000000Headlines, eyebrows, names, the 2px rules
#222222Nav links and tab titles
#686868Paragraphs, footer links, the hero lead
#8A8A8ABlog categories and price tags
#FFFFFFText on gradient and coral
#FFFFFFText on inverse-canvas
#FFFFFF · 80%Paragraphs on black (.paragraph-white)
Action
#000000The main button, store buttons, the play button
#313137Button and play-button background on hover
#C471EDOrchid; first stop of the button gradient
#12C2E9Sky blue; second stop of the button gradient
#F64F59Coral; solid panels and the warm end of the hero gradient
Lines & effects
#FFFFFF · 70%Underlined links on black (Terms & Conditions), full white on hover
#0000002px rules under the nav and between sections; 3px active tab border
Typography
Inter · display-hero
The quick brown fox jumpsHero title Build designs that scale. 63px · 700 · 1.00
Inter · headline-lg
The quick brown fox jumpsSplit-section titles (title-2): We are introducing Pixel, the best ever., Watch the two-minute video to learn how. 48px · 700 · 1.00
Inter · title-lg
The quick brown fox jumpsBlog card titles. 25px · 600 · 1.20
Inter · body-lg
The quick brown fox jumpsHero lead. 20px · 400 · 1.20
Inter · eyebrow
The quick brown fox jumpsBlack line above titles: Try Pixel free for 14 days, Mindful by design!, No credit card required. 16px · 600 · 1.38
Inter · label
The quick brown fox jumpsButtons, testimonial names. 16px · 600 · 1.25
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 80px top and bottom with 5% side padding (72px at 1440px); 60px top and bottom at ≤991 and below |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 12px | |
md | 15px | |
lg | 20px | |
xl | 30px | |
2xl | 40px | |
3xl | 50px | |
4xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-short | 60px | |
section-side | 72px | |
section | 80px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | Background #000000 → #313137, caret background-position 85% → 88%, 0.2s |
| Gradient button hover | Caret slides 85% → 88%, 0.2s |
| Nav and dropdown links | Colour or opacity change, opacity .2s |
| Dropdown open | Caret rotates, 300ms ease; list fades in, 300ms ease |
| Tab switch | all .2s on the tab button (left border and height) |
| Blog title hover | Opacity 0.8 and colour #686868, 0.2s |
Do’s and don’ts
- Keep the UI black #000000, white #FFFFFF and #F8F8FA (the #FBF8FF ghost-white variable is unused), and save colour for the gradient and coral #F64F59 blocks.
- End headlines with a full stop and put a black 16/600 eyebrow above hero and split-section titles.
- Pair a black button-primary with one gradient button for the main action.
- Use 2px black rules to separate the nav and major sections.
- Use 4px corners on buttons, inputs and testimonial cards, and square corners on feature cards, tabs, large panels and bands.
- Show the product in angled 3D phone mockups on the gradient panel.
- Add shadows; Pixel has none.
- Put white text on the gradient or coral below 16px semibold. White on sky blue #12C2E9 is about 2.1:1 and on orchid #C471ED about 3:1, so keep gradient buttons at 16px/600 with short labels.
- Use ink-subtle #8A8A8A below 14px or for paragraphs; it is 3.4:1 on white and 3.3:1 on #F8F8FA.
- Round panels or use pill buttons. The only radii are 4px and full circles.
- Use a second typeface or uppercase labels.
- Spread the gradient across several small elements on one screen.
Example prompt
Any page in the Pixel style
More design systems like this
Tech 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 Pixel 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/pixel.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