flowmancePoket Design System
Poket is a clean, light SaaS template that reads like a well-organised product sheet. An off-white page (#F9FAF5) holds white sections, near-black text and small, tidy controls: 10px-radius buttons, 5px-radius cards with a hairline border, and a pale lilac pill for labels. One dark band (#1A1E1C) carries the hero, and two fresh accents, lilac #AB97EE and lime #D3F36B, add colour in small doses.
Four signatures make it recognisable:
- The dark hero band under a light nav. The nav sits on the off-white canvas; directly below it a full-width #1A1E1C band holds a white 74px Roboto headline and a tablet mockup with a white bezel that runs off the right edge.
- Lime on hover. The dark button (Sign In, Get Started) flips to lime #D3F36B with dark text on hover. Lime also marks Most Popular chips and frames product shots on inner pages.
- Lilac as the second voice. The Buy Poket button is lilac #AB97EE with near-black text, and labels are lilac text in a pale #EFEDF5 pill (Multi Layout Template).
- Hairline cards with a 1px offset shadow. Cards and screenshots have a 1px #E1E1E1 border plus a 1px 1px 0 #E1E1E1 shadow, which gives them a crisp printed edge rather than a soft lift.
Poket is a light design with one dark band.
Colors
Surfaces
#F9FAF5Page background behind the nav (--white-smoke)
#FFFFFFContent sections, cards, footer, inputs
#1A1E1CThe hero band and dark pricing or blog bands
Ink
#FFFFFFText on primary
#0D0E0FText on secondary
#1A1E1CText on accent
#1A1E1CHeadlines, nav, footer links (--black-2)
#0D0E0FDropdown links, the underline under text links (--black)
#757575Paragraphs, list items, footer legal line (--grey-2); #747474 on a few dark links
#FFFFFFText on inverse-canvas
#9B84E7Text on tag
Action
#1A1E1CThe main dark button
#D3F36BButton hover: lime with dark text (--green-yellow)
#AB97EELilac button (Buy Poket), blockquote rule, card-title hover (--medium-purple)
#D3F36BMost Popular chips and product frames on inner pages
Lines & effects
#E1E1E11px card and input borders, and the 1px offset card shadow
#EFEDF5Lilac label pills
Typography
Roboto · display-hero
The quick brown fox jumpsHero See the power behind Poket template. 74px · 500 · 1.1
Roboto · headline-lg
The quick brown fox jumpsh1 on inner pages. 38px · 500 · 1.16
Roboto · title-quote
The quick brown fox jumpsBlockquote with a 4px lilac left rule. 30px · 400 · 1.07
Inter · body-lg
The quick brown fox jumpsParagraphs, in ink-muted. 15px · 500 · 1.3
Roboto · label
The quick brown fox jumpsNav and dropdown links. 17px · 500 · 1.18
Roboto · eyebrow
The quick brown fox jumpsText inside label pills. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; a 960px narrow container for centred text |
| Breakpoints | 991px, 767px and 479px, plus small min-width: 768px and min-width: 1440px steps |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 13px | |
md | 15px | |
lg | 25px | |
xl | 30px | |
2xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
footer-top | 55px | |
section-x | 72px | |
section | 95px | |
hero-gap | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button and link hover | transition: all 0.2s (dark → lime on buttons, colour shifts on links, opacity 0.7 on social icons) |
| Dropdown open | Caret rotate, 100ms ease; list fades opacity 0 → 1 and moves from y 50% to 0%, 350ms ease |
| Underline grow | width change, 300–500ms ease |
| Icon hover | scale 1 → 1.1, 100ms ease, back on mouse-out |
Do’s and don’ts
- Use the canvas #F9FAF5 under the nav and white #FFFFFF sections for content.
- Open the page with one dark #1A1E1C band holding a white Roboto 500 headline.
- Make the main button dark #1A1E1C with a 10px radius, and flip it to lime #D3F36B with dark text on hover.
- Give cards a 1px #E1E1E1 border, the 1px 1px 0 #E1E1E1 shadow and a 5px radius.
- Set headings in Roboto 500 and paragraphs in Inter 500 at 15px.
- Use lilac pills (#EFEDF5 / #9B84E7) for short labels only.
- Set long paragraphs in ink-muted #757575 directly on the #F9FAF5 canvas (4.4:1); put them on white sections, where it reaches 4.6:1.
- Use the tag's #9B84E7 text at any size other than its short 14px label on #EFEDF5 (2.6:1); never for sentences.
- Use pill-shaped buttons; buttons are 10px, pills are for tags.
- Add soft or blurred shadows; the only shadow is the hard 1px offset.
- Use lime as a fill for large areas or as text on white.
- Use Switzer: it is declared but not loaded.
Example prompt
Any page in the Poket style
More design systems like this
SaaS 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 Poket 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/poket.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