flowmanceStories Design System
Stories is a dark online magazine. A black page carries a classic news layout: search on the left, the logo in the middle, social icons on the right, then a ruled category bar, a big photo slider and rows of stories under thin white section rules. The type is plain Inter in weight 500–600, and the only colour comes from the photos and from the small category pills, each category with its own hue.
Four signatures make it recognisable:
- The ruled masthead. The category menu sits between two 2px near-white rules on black, and it sticks to the top as you scroll.
- Colour-coded pills. Every post shows a filled category pill (Science green, Politic coral, Business navy, Health teal, World sage), usually next to an outlined date pill (Mar 2021); the three lead stories show the category pill alone.
- Hero that dissolves into black. A full-width photo slider (800px tall) fades to black at the top and bottom, with a translucent dark story card on the right edged by a 2px white rule on its left.
- Rounded photos on a hard page. Story images have 30px corners while everything structural (rules, header bar, section labels) stays square and thin.
Stories is a dark-only design.
Colors
Surfaces
#000000Page and nav background
#000000 · 60%The hero story card, the only panel on the page; over the photo it reads as a dark translucent blue-black
#F0F0F0Form inputs, the only light fill
Ink
#000000Text on primary
#FAFAFATitles, nav links, section labels, tag text (--white)
#CCCCCCParagraphs and excerpts (--light-grey)
#2F3330Input text and placeholder
#4D4D4DInput text and placeholder
#FFFFFFSlide titles on the hero
Action
#FAFAFARead More pill
#F1F1F7Read More hover (--ghost-white)
Lines & effects
#FAFAFA2px rules under section labels, outline of date pills, left edge of the hero card
#EEEEEE · 93%2px rules above and below the category bar
#000000 · 60%The hero story card, the only panel on the page; over the photo it reads as a dark translucent blue-black
#88B49BWorld pill
#2E4285Business pill
#41A1B9Health pill
#F6584DPolitic pill
#17974EScience pill (fill and 2px border)
Typography
Inter · display-quote
The quick brown fox jumpsArticle blockquotes (base style, with a 2px white left rule and 25px padding). 34px · 400 · 1
Inter · headline-lg
The quick brown fox jumpsFeatured story titles (3 on the page). 30px · 600 · 1.4
Inter · title-lg
The quick brown fox jumpsThe three lead stories under the hero. 24px · 600 · 1.3
Inter · label-button
The quick brown fox jumpsRead More. 17px · 600 · 1.18
Inter · body
The quick brown fox jumpsParagraphs and excerpts, in #CCCCCC. 16px · 500 · 1.5
Inter · caption
The quick brown fox jumpsSmall meta and footer lines. 13px · 500 · 1.38
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | tight, like a newspaper: 40px top and 0 bottom per section (.section { padding: 40px 2% 0 }) |
| Section header | a title-sm label, 12px of padding, a 2px #FAFAFA bottom rule, then 30px before the cards |
| Breakpoints | 991px, 767px and 479px (max-width), plus a min-width: 768px step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 12px | |
sm | 15px | |
md | 16px | |
lg | 25px | |
xl | 30px | |
2xl | 40px | |
3xl | 50px | |
4xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 29px | |
section | 40px | |
footer-top | 60px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Nav link hover | opacity 1 → 0.6, 200ms |
| Read More hover | Background to #F1F1F7; label moves y 0 → 200%, arrow moves in, 500ms |
| Scroll reveal | opacity 0 → 1, 1000ms outQuart, with a 20px rise over 500ms |
| Image hover | Scale 1.2 → 1, 500ms; scale reveals at 400–600ms outExpo |
| Tag hover | background-color .1s, color .1s |
| Size reveals | 300–400ms outCubic |
| Hero slider | Webflow slider with arrow buttons |
Do’s and don’ts
- Keep the page #000000 with #FAFAFA titles and #CCCCCC body text.
- Put a 2px #FAFAFA rule under every section label.
- Show a filled category pill and an outlined date pill above every story title.
- Give each category one fixed colour: Science #17974E, Politic #F6584D, Business #2E4285, Health #41A1B9, World #88B49B.
- Round story images to 30px and keep rules, bars and labels square.
- Keep the category bar sticky and ruled above and below.
- Use category colours for anything but the pills.
- Put long text in the World (#88B49B) or Health (#41A1B9) pills: white on them is under 3:1, so keep pill labels to one 13px / 600 word.
- Add drop shadows or grey panels; separate sections with rules and space.
- Use white #FFFFFF for paragraphs; body copy is #CCCCCC.
- Use the declared Redaction font; it is not loaded.
- Set large display headlines; the biggest title on the home page is 30px.
Example prompt
Any page in the Stories 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 Stories 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/stories.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