flowmanceMag Design System
Mag is a straightforward online news magazine. It feels like a busy front page: a black masthead with a centred wordmark, a two-up hero slider of full-bleed photos, then alternating white and black bands packed with story cards. Every story carries the same metadata kit, a solid colour-coded category pill and an outlined date pill with a clock icon, so colour on the page comes from photos and from the category system, not from the UI.
Four signatures make it recognisable:
- Category pill plus date pill. Every story starts with a solid pill in its category colour (World red #FF0800, Health blue #007FFF, Politic coral #F6584D, Science amber #FFBF00) next to a 1px outlined pill holding a clock icon and the date.
- The 1200px black link bar. The category nav is a sticky black strip exactly as wide as the container, not the viewport, so on scroll it floats over the page as a bar with white margins on each side.
- Underlined section labels. Sections are named by a small 19px 600 word (Politic, Trending, Author) with a 2px underline the width of the word, not by big titles.
- Black and white bands. Story sections alternate between a white canvas and a black inverse-canvas, and the Latest News block splits into a black sidebar list beside a white two-column grid.
Mag is a light design with full-width black bands.
Colors
Surfaces
#FFFFFFPage background and light story bands
#F0F0F0The newsletter input
#F1F1F7--ghost-white, light panels on inner pages
#000000The masthead, the sidebar, the Health and Author bands, the nav bar
#F0F0F0The newsletter input
Ink
#6B6B6BText on primary
#FFFFFFText on primary-hover
#FFFFFFText on secondary
#000000Headlines, section labels, story titles on white
#4D4D4DExcerpts and body copy (--dim-grey)
#6B6B6BBylines and date-pill text on white (--dim-grey-second)
#FFFFFFTitles on black / bylines on black and on photos (.author-title, 41 uses)
#FFFFFF · 78%Titles on black / bylines on black and on photos (.author-title, 41 uses)
#FFFFFFAction
#FFFFFFView My Post button on the black author band
#4D4D4DIts hover state (0.3s)
#000000Square icon badges on images and the newsletter submit
Lines & effects
#CCCCCC1px date-pill outline on white / 2px section-label underline
#000000With line: 1px date-pill outline on white / 2px section-label underline
#222222The search pill in the masthead
#EEEEEE · 15%The hairline under the masthead nav and between sidebar stories
#000000 · 28%Slider arrow squares / slider dots
#FFFFFF · 40%Slider arrow squares / slider dots
#FF0800#007FFF#F6584D#FFBF00#8A2BE2#615555Typography
Inter · headline-feature
The quick brown fox jumpsLead stories in the Latest News grid (What's standing between Joe Biden and nuclear war?). 32px · 600 · 1.1
Inter · title-md
The quick brown fox jumpsStory titles on black (sidebar list, Health band) and author names. 19px · 600 · 1.3
Inter · body
The quick brown fox jumpsExcerpts in ink-muted. 16px · 500 · 1.31
Inter · label-author
The quick brown fox jumpsby Ava Sullivan. 16px · 500 · 1.25
Inter · caption
The quick brown fox jumpsSmall meta lines. 13px · 500 · 1.38
Inter · quote
The quick brown fox jumpsArticle blockquote with a 2px black left rule. 34px · 500 · 1.0
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max 1200px, centred |
| Breakpoints | 991px, 767px and 479px (the most rules), plus a 768px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 16px | |
lg | 30px | |
xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 29px | |
masthead-y | 40px | |
section | 50px | |
section-team | 80px | |
section-insta | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Nav hover | opacity 1 → 0.6, 0.2s |
| Button hover | Background #FFFFFF → #4D4D4D and text → white, 0.3s |
| Page-load fade | opacity 0 → 1, 800–1000ms (ease, ease-out-quart), with y −20px → 0 over 500ms |
| Image hover zoom | scale 1 → 1.2, 500ms, inside the overflow-hidden image box |
| Search and menu reveal | Width grows over 300–400ms ease-out-cubic; the mobile menu slides from x 100vw or y 100vh to 0 in 500ms |
| Slider | Webflow slider, horizontal slide |
Do’s and don’ts
- Give every story the pill pair: a solid category pill (#FF0800, #007FFF, #F6584D, #FFBF00) and an outlined date pill with a clock icon, both 30px radius and 13px 600.
- Alternate white #FFFFFF and black #000000 bands, and keep the masthead black.
- Name sections with a 19px 600 word and a 2px underline, not with big titles.
- Keep photos square-cornered and use 30px pills and circles for everything round.
- Set excerpts in #4D4D4D and bylines in #6B6B6B on white, and white at 78% on black.
- Keep the sticky link bar 1200px wide and black.
- Add shadows, card backgrounds or rounded image corners.
- Reuse a category colour for anything else, or give one category two colours.
- Put small white text on the amber #FFBF00 or coral #F6584D pills at sizes below 13px 600; these pills only pass as short bold labels.
- Use a second typeface or uppercase labels; Inter 500 and 600 cover everything except the 700 newsletter field.
- Make headlines bigger than 32px on story grids; size steps are small (18, 19, 24, 30, 32).
- Use the declared Redaction font; it is not loaded.
Example prompt
Any page in the Mag style
More design systems like this
Blog 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 Mag 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/mag.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