flowmanceOsaka Design System
Osaka is a dark, dense news magazine. Charcoal #222222 runs edge to edge, headlines are white Inter 600, and colour comes from two places only: the photographs and small saturated category pills (World purple, Business orange, Politic red, Health blue, Science green). The layout feels like a newspaper front page: a lead story, a main feed and a sidebar.
Four signatures make it recognisable:
- Pill pairs. Almost every post carries two small 30px-radius pills side by side: a coloured category pill with white text and a white date pill with a clock icon and dark grey text.
- Photos that dissolve. Images have square corners and a transparent → #222222 gradient over their lower part (ending at 70%), so the bottom of each photo melts into the page.
- Underlined section names. Each block opens with a short white title (Health, Business, Categories, Authors) underlined by a 2px white bar the width of the word; main-feed sections also start after a full-width hairline.
- A working sidebar. The right column stacks a grey pill search field, a weather widget (New York, Sunny, 60px 14 °C, a 5-day strip), a category list with → arrows and author rows with coloured-circle avatars.
Osaka is a dark-only design.
Colors
Surfaces
#222222Page background (set on body)
#181818The 5-day weather strip
#4D4D4DSearch pill; also the hover fill of grey buttons
#121212Newsletter input
Ink
#FFFFFFText on primary
#FFFFFFHeadlines, nav, links, pill text
#FFFFFF · 78%Author names and bylines
#FFFFFF · 70%Excerpts and paragraphs (p has opacity 0.7)
#FFFFFF · 60%The current nav item (Home) and nav hover
#4D4D4DText on chip
#12141DText on accent
#FFFFFFAction
#6B6B6BThe grey button; hover #4D4D4D
#4D4D4D#39FF14Newsletter subscribe button; hover #1C4A36 with white text
#1C4A36Lines & effects
#FFFFFFDate pills (some use #6B6B6B text)
#8A2BE2World pill
#FE5A1DBusiness pill
#FF0800Politic pill
#0000FFHealth pill
#4CBB17Science pill
#6155551px hairlines between sections, author rows and weather rows (reads as mid grey)
#E2E2E22px left rule on blockquotes
Typography
Inter · display-weather
The quick brown fox jumpsThe temperature 14 with a raised °C. 60px · 500 · 1.0
Inter · headline-lg
The quick brown fox jumpsHero lead story title. 40px · 600 · 1.2
Inter · title-md
The quick brown fox jumps4-column card titles. 20px · 600 · 1.3
Inter · body
The quick brown fox jumpsExcerpts at 70%, author names at 78%. 16px · 500 · 1.31
Inter · label
The quick brown fox jumpsRead More →, sidebar category links. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsSearch text, small meta. 15px · 500 · 1.4
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | compact |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 15px | |
lg | 30px | |
xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 15px | |
section-side | 29px | |
footer-bottom | 30px | |
section | 50px | |
column-gap | 50px | |
footer-top | 60px | |
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, CSS opacity .2s |
| Dropdown open | Size change over 400ms outCubic; opacity and border over 400ms ease |
| Fade-up | Opacity 0 → 1 over 450–800ms with y 20px → 0 over 400ms cubic-bezier(0, 0, 0.16, 0.96); out in 150ms |
| Card hover | Background colour, border and filter over 400ms ease |
| Buttons | all .2s (subscribe) and all .3s (grey button) |
Do’s and don’ts
- Keep the canvas #222222 and all headlines white Inter 600.
- Give every post the pill pair: a category pill in its fixed colour plus a white date pill with a clock icon.
- Fade the bottom of every image into #222222 and keep image corners square.
- Open each section with a hairline and a title-section name underlined in 2px white.
- Use Read More → text links as the default action; keep filled buttons for forms.
- Set excerpts at white 70% and author names at 78%.
- Use category colours outside their pills, or swap a category's colour.
- Put long text on the orange, red or green pills. White on #FE5A1D (3.1:1), #FF0800 (4.0:1) and #4CBB17 (2.5:1) is only acceptable for one 13px semibold word.
- Round images or add shadows.
- Use the Redaction family or any second typeface.
- Spread the neon #39FF14 beyond the subscribe button.
- Add uppercase labels outside the weather day names.
Example prompt
Any page in the Osaka 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 Osaka 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/osaka.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