flowmanceCircle Design System
Circle is a minimal, almost monochrome studio template. It is pure black on pure white, with large weight-500 Satoshi headlines that break across lines at unusual indents, bold black body text, and a lot of empty space. Colour comes only from photography, which is often cropped into circles.
Four signatures make it recognisable:
- The circle mark. The logo is an 80px black disc with circle reversed out in white, with the tagline Digital studio based in San Diego. under it. Circles repeat everywhere: round photo crops, a rotating circular badge, a black ring icon set into a headline.
- Staggered headline lines. Display headlines are set at 110px, weight 500, line height 0.9, and each line starts at a different indent: Lift your brand with is pushed right and a smart template. starts at the left edge.
- The 2×2 dot menu. The menu trigger is four black dots in a square next to the word Menu, centred in the nav.
- One outlined button that floods black. View on Webflow is a white button with a 2px inset black outline and a 5px radius. On hover a black shape slides up inside it and the text turns white.
Circle is a light-only design. There are no accent colours, no gradients and almost no shadows.
Colors
Surfaces
#FFFFFFPage background and the overlay menu
#F3F3F3 · 70%Preview cards on the landing page
#D8D8D8 · 70%Track of the small switch fixed bottom-right (the --gainsboro variable)
#333333Text on field
#000000The logo disc, the button hover fill
Ink
#000000Text on primary
#000000All text: headlines, labels, links, body
#000000Body text is full black here (same as ink) at weight 700
#000000 · 60%Paragraph links on hover
#000000 · 51%Footer links on hover only
#FFFFFFText on inverse-canvas
Action
#FFFFFFThe outlined button: white face, black text
#000000The black fill that slides into the button on hover (text turns #FFFFFF)
Lines & effects
#0000001px input and submit borders, the 2px inset button outline, the 2px menu underline
Typography
Satoshi · display-hero
The quick brown fox jumpsHero headline (.title-1): Lift your brand with / a smart template. 110px · 500 · 0.9
Satoshi · headline-lg
The quick brown fox jumpsSection titles on inner pages (h2 base). 32px · 700 · 1.13
Satoshi · quote
The quick brown fox jumpsBlockquotes with a 3px left rule. 30px · 500 · 1.27
Satoshi · title-lg
The quick brown fox jumpsFooter column titles: Sitemap, Contact, Subscribe to our newsletter. 21px · 700 · 1.43
Satoshi · label-lg
The quick brown fox jumpsFooter links. 18px · 700 · 1.28
Satoshi · body
The quick brown fox jumpsParagraphs and list items, black. 17px · 700 · 1.29
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, for inner content |
| Section rhythm | 120px top and bottom, 5% sides; 80px with 2% sides at ≤991; 60px top and bottom at ≤479 |
| Breakpoints | 991px (tablet), 767px (landscape phone) and 479px (phone), plus a min-width: 768px group |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 15px | |
md | 16px | |
lg | 20px | |
xl | 40px | |
2xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
footer-bottom | 30px | |
footer-top | 50px | |
nav-height | 80px | |
section | 120px | |
hero-top | 230px |
Border radius
Motion
| Hover colour change | Background, border and text colour over 200ms ease; CSS transition: all .2s on links, .3s on the submit |
| Image hover | Filter change over 200ms ease; image scale 1 → 1.2 over 500ms on some cards |
| Button flood | Black overlay slides in; its border-radius eases over 975ms ease-out |
| Slide in on scroll | x −30% → 0% or y 20% → 0% over 500ms; text lines y → 0% over 800ms outCubic |
| Fade in | opacity 0 → 1 over 1000ms outQuart or outExpo; smaller items over 300ms ease |
| Rotating badge and icons | rotate over 400ms swingTo on hover |
| Logo on scroll | Logo disc resizes over 500ms as the page scrolls |
| Menu | Display toggles at 0ms, links fade in at 300ms ease, underline moves x → 0% over 300ms |
Do’s and don’ts
- Use only #000000 and #FFFFFF for type and UI, with #F3F3F3 at 70% for preview cards.
- Set display headlines at 110px, weight 500, line height 0.9, and give each line its own indent.
- Set body and labels in Satoshi weight 700, black, with no letter spacing.
- Use the outlined button (2px inset #000000, 5px radius, 43px tall) and flood it black with white text on hover.
- Repeat the circle: the black logo disc, round photo crops, circular badges.
- Leave the narrow left column of each landing section (0.25fr, about a fifth of the width) for a single headline-md label.
- Add an accent colour, gradient or coloured band. Colour belongs to photos.
- Use grey body text; the declared greys (#4B4B4B, #717171) are not used on the live pages.
- Round rectangular cards or inputs; only the button (5px) is rounded, and circles stay perfect circles.
- Add drop shadows or blur to the nav.
- Use the alpha blacks (#00000099, #00000082) as resting text; they are hover states only. ink-faint (#00000082, about 4.1:1 on white) belongs only on the 18px bold footer links while hovered.
- Set display headlines in weight 700; the big type is always 500.
Example prompt
Any page in the Circle 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 Circle 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/circle.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