flowmanceFlash Design System
Flash is a dense, photo-led news and magazine site. It reads like a modern online paper: a black sticky masthead, a white page packed with stories, heavy Poppins 700 headlines, tiny uppercase dates and read times, and a set of bright category colours (red World, orange Sports, pink Lifestyle, green Business, cyan Tech) that label every story and section. The photos are big, saturated and often run edge to edge with white titles laid over them.
Four signatures make it recognisable:
- Colour-coded categories. Every photo post carries a small rounded pill in its category colour (title-only and grid stories don't) (WORLD #D62828, SPORTS #FB8500, LIFESTYLE #FF006E), and every section opens with a square label in the same colour sitting on a 1px rule of that colour across the full width.
- Three-up photo hero. The page opens with three tall (670px) photo posts side by side, separated by 1px gaps, each with a pill, a date and a 30px white headline at the bottom-left.
- Black masthead. A 70px sticky black bar: the white FLASH wordmark left, bold white category links and a white pill search field with a cart icon right.
- Meta in two greys. Under most titles: the date in black 11px uppercase, then the read time (5 MIN READ) in pale #B8B8B8.
Colors
Surfaces
#FFFFFFPage background
#FFFFFFCards and the cart panel
#FFFFFF#2F3330#000000Nav bar, TRENDING NOW badge, the closing newsletter band
Ink
#FFFFFFText on primary
#000000Headlines, nav text on light, dates, section rules
#4D4D4DParagraphs (p, --dim-grey); title hover
#2F3330The trending headline link; input text (--dark-slate-grey)
#6B6B6BTrending-link hover (--dim-grey-2)
#B8B8B8N MIN READ meta only (about 2:1 on white)
#FFFFFFTitles, dates and pins on photos
#FFFFFF#FFFFFFText on inverse-canvas
Action
#000000Black buttons; hover #4D4D4D
#4D4D4DLines & effects
#E2E2E2Light 1px borders and the ad-slot fill (--gainsboro)
#CCCCCCInput and divider borders (--light-grey)
#000000Default section rule under a black label
#000000 · 15%Overlay on photo posts; clears to 0% on hover
#D62828World label, pill and rule
#FB8500Sports label, pill and rule
#FF006ELifestyle label, pill and rule
#6A994EBusiness label and rule
#00BBF9Tech label and rule
Typography
Poppins · display-cta
The quick brown fox jumpsh1: Get your digital news experience. 40px · 700 · 1.2
Poppins · headline-quote
The quick brown fox jumpsBlockquotes in articles, with a 4px black left rule. 36px · 300 · 1.1
Poppins · title-price
The quick brown fox jumpsPrices on the pricing page. 24px · 600 · 1.88
Poppins · label-nav
The quick brown fox jumpsNav links (Home, World, Business). 15px · 700 · 1
Poppins · body-lg
The quick brown fox jumpsNewsletter subtitle. 18px · 400 · 1.44
Poppins · caption
The quick brown fox jumpsBase text. 14px · 400 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1440px (.container), so the content nearly fills a desktop window; sections add 2% side padding (about 29px at 1440px) |
| Section rhythm | 80px top padding and no bottom padding, so sections stack at an 80px beat (side padding 3% at ≤479); the last block before the footer adds 80px below |
| Section header | a square label in the category colour, flush left, sitting on a full-width 1px rule of the same colour; about 25px to the content |
| Breakpoints | 991px, 767px and 479px (max-width), plus a min-width 768px step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 2px | |
xs | 7px | |
sm | 10px | |
md | 16px | |
lg | 30px | |
xl | 50px | |
2xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 18px | |
section-side | 29px | |
column-gap | 30px | |
section | 80px | |
section-footer | 120px |
Border radius
Motion
| Link and card hovers | all .3s (colour, opacity, background) |
| Nav-link hover | Opacity to 0.65, 300ms |
| Photo scrim | Background #00000026 → transparent, 300ms |
| Page load | Preloader logo (30% wide) fades opacity 0 → 1, 1000ms outQuart, then the panel slides off y 0 → 100vh, 500ms |
| Underline grow | Width, 400ms outCubic |
| Border and background hovers | 400ms ease; 200ms outSine |
| Mobile menu | Display toggle, opacity 300ms ease |
Do’s and don’ts
- Give every story a category and use only that category's colour (#D62828, #FB8500, #FF006E, #6A994E, #00BBF9) for its pill, label and rule.
- Set titles in Poppins 700 (16px in lists, 30px on photos) and meta in 11px uppercase with 0.25px tracking.
- Open each section with a square coloured label on a full-width 1px rule of the same colour.
- Keep the masthead black (#000000), sticky and 70px tall, with a white pill search field.
- Put white titles on photos only with the 15% black scrim, anchored bottom-left with 30px padding.
- Pack the page: 30px gaps, 80px between sections, no decorative empty space.
- Use #B8B8B8 (ink-subtle) for anything but the 11px read-time meta; it is about 2:1 on white.
- Put more than a one-word label in white on #FB8500 or #00BBF9; they are low contrast.
- Add shadows, gradients or rounded corners beyond 3px on photos and cards.
- Use Lora or any second typeface; Poppins only.
- Use category colours for buttons, links or backgrounds of whole sections.
- Uppercase headlines; uppercase is for meta, pills and labels only.
Example prompt
Any page in the Flash 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 Flash 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/flash.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