flowmanceTransportX Design System
TransportX is a clean, businesslike freight and logistics site. White pages and near-black Inter Tight headlines carry the structure; one hot orange-red (#FF2F00) marks every action, label and icon; and big, cinematic transport photos (a speeding truck, a container ship from above) fill the hero and one service band. It feels efficient and dependable rather than flashy.
Four signatures make it recognisable:
- The orange logo tile. The logo is a 100px orange square with a white line-drawn T, hanging from the top edge of the page in the nav.
- Chevron eyebrows. Most sections open with a small > chevron and a 16px weight 600 label (> About TransportX, > Our Services, > What they think), orange on white and white on photos.
- Orange line icons. Services use thin orange outline icons (a folded map with a pin, a box with a plane, a train, a ship) above a 21px title, with a short orange dash under each Learn more link.
- Square white cards on photography. Service cards and testimonial cards are plain white rectangles with no radius, sitting on a full-bleed photo or the light grey band.
Colors
Surfaces
#FFFFFFPage background and every card
#F6F6F7The grey bands (testimonials, the services photo section's fallback)
#F1F1F1Skill bar tracks and the dropdown link hover
#333333Typed text in fields; placeholders are #252525
#131615Footer band and its titles
Ink
#FFFFFFText on primary
#131615Headlines, labels, quotes (--black)
#131615 · 75%Paragraphs
#FFFFFFHero and band text over photos; the muted tone is the first half of the band headline
#FFFFFF · 70%Muted text on media
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Footer links, which turn full white on hover
Action
#FF2F00Every pill button, the logo tile, eyebrow text, service card titles, icons, skill bar fill, link dashes, partner names in testimonials
#131615Hover background of the solid submit .button, at 80% opacity
Lines & effects
#DDDDDD1px borders on inputs and the textarea
#000000 · 35%A flat black overlay on the hero and services band photos
Typography
Inter Tight · display-hero
The quick brown fox jumpsHero h1 Advancing / Global / Logistics, one word per line. 115px · 600 · 1.1
Inter Tight · headline-lg
The quick brown fox jumpsSection h2: Trusted experience since 1998, International Partners. 46px · 600 · 1.2
Inter Tight · title-lg
The quick brown fox jumpsBlog card titles. 26px · 600 · 1.3
Inter Tight · body-lg
The quick brown fox jumpsParagraphs at 75% opacity. 18px · 500 · 1.4
Inter Tight · label-nav
The quick brown fox jumpsNav links (1.1rem). 17.6px · 600 · 1.14
Inter Tight · eyebrow
The quick brown fox jumps> About TransportX with a 16px chevron and 19px left padding. 16px · 600 · 1.4
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; text intros are capped at 700px |
| Section rhythm | white sections pad 120px top and bottom; grey and photo bands pad 100px |
| Breakpoints | 991px, 767px and 479px, plus 768px+ and 1440px+ rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 60px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
footer-bottom | 40px | |
section-band | 100px | |
footer-top | 100px | |
nav-height | 100px | |
hero-bottom | 105px | |
section | 120px | |
hero-top | 140px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-up on scroll | opacity 0 → 1 over 1000ms outQuart (1250ms on some), moving to y 0, x 0 over 1000ms outQuart |
| Pop-in | scale 0 → 1 over 600ms outExpo; out over 400ms outExpo |
| Link and line width | Size changes over 300ms ease and 500ms, used on the short orange link dashes and bars |
| Arrow nudge | x 0 → 6px over 500ms outQuint; a diagonal x 3px, y −3px over 300ms ease |
| Slide fill | x 100% → 0% over 300ms ease |
| Mouse-move drift | y ±7% over 500ms on mouse-move triggers |
| CSS transitions | Buttons, nav links, footer links and dropdown links all .3s; testimonial cards transform .3s, color .3s to scale(.97) |
Do’s and don’ts
- Keep the canvas white #FFFFFF with #131615 headlines and #FF2F00 as the only colour.
- Start each section with a chevron eyebrow (> Label, 16px weight 600), orange on white and white on photos.
- Use the orange pill (button-primary, 30px radius, 50px tall, 15px 24px padding) for the main action and a dashed Learn more text link for the rest.
- Use thin orange outline icons about 60px wide for services.
- Keep cards and images square-cornered, white, with at most the soft 0 5px 15px #0000000F shadow.
- Put a flat 35% black scrim on any photo that carries white text.
- Pad white sections 120px and grey or photo bands 100px.
- Add a second brand colour, gradients or tinted overlays.
- Set button text on #FF2F00 below 16px weight 600; white on #FF2F00 is about 3.7:1 and only works at that size and weight.
- Use #FF2F00 for text smaller than 16px weight 600. Orange eyebrows and card titles are also about 3.7:1 on white, so keep them short and semibold.
- Round cards or photos; only buttons (30px), fields (8–9px) and skill bars are rounded.
- Use grey hex values for paragraph text; use #131615 at 75%.
- Use uppercase or letter spacing anywhere.
- Use the declared Hubotsans font or the unused alice-blue, honeydew and green-light variables.
Example prompt
Any page in the TransportX 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 TransportX 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/transportx.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