flowmanceDistribution Design System
Distribution is a dark, industrial site for freight and logistics. It pairs a near-black #0E0E0E page with one loud signal orange (#FF4F00) and large, real-world photography of rail yards, ships, planes, containers and forklifts. The type is plain Inter, tight and bold, and the layout is orderly: left-aligned section intros, three-column service cards and big right-aligned numbers.
Four signatures make it recognisable:
- Headlines that fade mid-sentence. Section titles start in white and finish in grey #A8A8A8: The future of logistics technology / starts here with us., Distribution in numbers., Discover the latest tips, / trends and ideas.
- Orange left-bar tags. Most sections open with a 2px orange vertical bar and an orange 17px / 600 label: About us, Fun facts, From Blog.
- Orange figures. Stats are set huge (130px / 500) in orange, right-aligned, with an orange label under each: 99%, 16, 1.401+.
- An orange brush stroke under one word of the hero title (Distribution), on a darkened full-screen photo slider.
Distribution is a dark-only design.
Colors
Surfaces
#0E0E0EPage and footer background (--black-dark)
#1A1A1AThe blog band (--section-gray)
#0E0E0ESubscribe field fill; the 2px border of the transparent contact inputs
#A8A8A8 · 40%With field: Subscribe field fill; the 2px border of the transparent contact inputs
Ink
#FFFFFFText on primary
#FF4F00Text on secondary
#FFFFFFHeadlines, card titles, links
#A8A8A8Paragraphs, the grey second half of titles, placeholders (--dim-grey)
#FFFFFF · 55%Footer links
#FFFFFFText over photos
Action
#FF4F00Main button, round phone and play buttons, subscribe arrow
#FF4F00#FFFFFFGet a Quote on the orange CTA band
#FF4F00Section tags, tag bar, stats, hero brush stroke, link hover
Lines & effects
#2E2E2E1px borders of the logo grid
#FFFFFF · 22%2px border of category pills
#FFFFFF · 40%Inactive slider dots
#000000 · 40%Flat overlays on hero and CTA photos
#000000 · 60%With scrim: Flat overlays on hero and CTA photos
Typography
Inter · display-stat
The quick brown fox jumps99%, 16, 1.401+. 130px · 500 · 0.9
Inter · headline-lg
The quick brown fox jumpsDistribution in numbers. 50px · 600 · 1.1 · -1px
Inter · title-lg
The quick brown fox jumpsBlog titles: Key trends and innovations shaping the logistics. 30px · 600 · 1.3
Inter · body-xl
The quick brown fox jumpsLarge statements (.label, 7 uses on inner pages). 26px · 500 · 1.23
Inter · eyebrow
The quick brown fox jumpsSection tags. 17px · 600 · 1.1
Inter · label-link
The quick brown fox jumpsUnderlined text links, stat labels. 17px · 500 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1200px (.container), with 740px for narrow intros and 850px for the centred CTA |
| Section rhythm | 140px top and bottom (.section), 60px at ≤991px; the orange CTA band uses 150px, 89px at ≤991px and 50px at ≤479px; the footer 70px top and 30px bottom |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 768px step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 60px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 30px | |
footer-top | 70px | |
gutter | 72px | |
nav-height | 110px | |
section | 140px | |
section-cta | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline rise | Text moves y 15em → 0em over 1500ms outQuart |
| Fade-in | opacity 0 → 1 over 1250ms outQuart |
| Image reveal | A cover slides y 0 → −102% over 1250ms inOutCirc while the image scales 1.5 → 1 over 2000ms outQuart |
| Link underline | The line moves x −101% → 0% in and 0% → 100% out, 300ms ease |
| Icon pop | scale 1 → 1.1 and back, 100ms ease |
| Menu open | The panel width grows from 0%, 300–500ms; the hamburger lines rotate, 200ms easeInOut |
| Nav on scroll | Reacts to scroll up and down |
| Link colours | color .3s on footer links; background-color .2s cubic-bezier(0.645, 0.045, 0.355, 1) on the circle button |
Do’s and don’ts
- Keep the page #0E0E0E and use #FF4F00 for the one main action, the tags and the figures.
- Split titles into white and #A8A8A8 parts, at 44px / 600 with −1px tracking.
- Open content sections with the orange left-bar tag (2px bar, 13px left padding, 17px / 600); the orange CTA band and the centred logo-grid title have none.
- Use 7px radius for buttons and 20px for photo cards.
- Fade image cards to #0E0E0E at the bottom before placing text.
- Keep orange button labels at 16px / 600 or larger: white on #FF4F00 is only about 3.3:1.
- Add a second accent colour or the unused #E9EAEC surface.
- Use the Newsreader serif, or uppercase labels.
- Set body copy in full white; use #A8A8A8.
- Make buttons into pills; only category pills and the subscribe field are round.
- Add drop shadows or blur.
- Set small orange text on white (the Get a Quote style) below 16px semibold.
Example prompt
Any page in the Distribution style
More design systems like this
Logistic 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 Distribution 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/distribution.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