Movix Design System

Get DESIGN.md Download View template Works with

Movix (the demo brand is MOVEX™) is a calm, corporate logistics site. It reads like a well-made annual report for a freight company: white and light-grey pages with black Switzer headlines, small IBM Plex Mono labels in capitals, and big freight footage (ships, trucks, warehouses, a glowing globe) that runs full-bleed behind frosted-glass panels. The only colour in the interface is a signal red (#FF2600) on round arrow buttons.

Four signatures make it recognisable:

Two-tone headlines. Each section headline starts in black and finishes in grey: Shipping requires control, not assumptions. in #000000, then We use real-time tracking, optimized routing… at about 38% black. The grey half is the explanation; the black half is the claim.
Mono for almost everything small. Buttons, tags, tabs, roles and the logo are IBM Plex Mono, uppercase, 12–14px; only the nav links are uppercase Switzer (GET A FREE QUOTE, WHAT WE DO, MOVEX™ TRANSPORT DIRECTOR). Headlines and paragraphs are Switzer; the two never swap jobs.
Frosted glass on freight video. The nav, the hero contact card, testimonial cards, service captions and tags are white at 13–20% with a 10–25px backdrop blur, sitting directly on moving footage with a black overlay.
The crosshair grid. Thin + marks in a regular grid (about 110px apart, seen in the screenshots) sit over the hero and review images, like registration marks on a map.

Movix is a light design with a dark (#131313) band and full-bleed photo bands.

Colors

Surfaces

canvas#FFFFFF

Page background, white sections

surface-1#F2F2F2

The grey services band (--colors--footer-color), the form submit button, focused inputs

surface-2#706E6E · 13%

Light tags on white or grey (WHAT WE DO, SERVICES); reads as about #ECECEC

inverse-canvas#131313

The dark industries band (--colors--third-color)

field#FFFFFF

Inputs, which go grey on focus

field-focus#F2F2F2

With field: Inputs, which go grey on focus

Ink

on-primary#000000

Text on primary

on-secondary#000000

Text on secondary

on-accent#FFFFFF

Text on accent

ink#000000

Headlines, active tabs, button text

ink-muted#000000 · 70%

Paragraphs and list items (p { opacity: .7 })

ink-subtle#000000 · 44%

Inactive service tabs (AIR FREIGHT) in 14px mono

ink-faint#000000 · 38%

The grey second half of headlines (30px and up) and input placeholders

inverse-ink#FFFFFF

Text on the dark band and on photos

inverse-ink-muted#FFFFFF · 70%

Text on the dark band and on photos

on-media#FFFFFF

Action

primary#FFFFFF

The main pill button (GET A FREE QUOTE, LEAVE A REVIEW)

primary-hover#2B2B2B

A dark panel that slides up inside the button on hover; the text turns white

secondary#E6E6E6

Pill buttons on white (OUR SERVICES, LEARN MORE)

accent#FF2600

50px round arrow buttons on service cards, the active-tab arrow, the contact card arrow

Lines & effects

line#000000 · 12%

1px rules: the line above the button row, tab dividers

inverse-surface#313131

Icon squares on the dark band

inverse-line#FFFFFF · 19%

Rules inside testimonial cards and between dark-band rows

glass#FFFFFF · 20%

Nav bar, menu button, contact card, testimonial and service captions

glass-soft#FFFFFF · 13%

Tags on photos (WE ARE MOVEX, CUSTOMER REVIEWS)

overlay#000000 · 50%

Hero video overlay; other images use 20% and 30%

Typography

Switzer · display-hero

The quick brown fox jumps

Hero More than transport, we power global… (--counter-title, 3.5rem), split into characters. 56px · 500 · 1.15 · -0.5px

Switzer · headline-lg

The quick brown fox jumps

From cargo transit to warehousing, we offer unparalleled support. 46px · 500 · 1.15 · -0.8px

Inter · title-lg

The quick brown fox jumps

Service-card captions (Our non-asset Land model…), dark-band quote. 22px · 500 · 1.15 · -0.5px

Switzer · body

The quick brown fox jumps

Paragraphs at 70%. 16px · 500 · 1.3 · -0.4px

Switzer · label-nav

The quick brown fox jumps

Nav links HOME, ABOUT, SERVICES (0.9rem). 14px · 500 · 1.15 · -0.3px

IBM Plex Mono · eyebrow

The quick brown fox jumps

Tags, roles, LET'S TALK (0.75rem). 12px · 500 · 1.15

Spacing & shape

Purpose	Value
Container	100% wide, max 1400px, centred
Section rhythm	100px top and bottom on white sections; the grey band ends with 270px, the dark band with 150px
Breakpoints	991, 767 and 479px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	50px
`xl`	60px
`2xl`	120px

Layout spacing

Token	Value	Preview
`field-x`	22px
`section-x`	29px
`glass-gap`	70px
`column-gap`	100px
`section`	100px
`section-bottom-dark`	150px

Border radius

bar3px

field4px

sm5px

md6px

glass7px

lg8px

xl10px

2xl20px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Smooth scroll	Lenis on the whole page
Link underline wipe	x −110% → 0%, 300ms, power1.out
Text roll on hover	Label y 0 → −17px inside a 15px mask, 300ms, power1.out
Button fill	#2B2B2B panel y 100% → 0%, 500ms, cubic-bezier(0.614, 0.03, 0, 0.983)
Pop-in (icons, tags)	x 20px → 0, y 10px → 0, rotation 15° → 0°, scale 0.9 → 1, opacity 0 → 1, 300ms, sine.inOut
Menu panel	x 100% → 0%, 600ms, power1.out
Headline split	Lines or characters y → −100% and 0% → −120…−420% (number rolls), 400–500ms, power1.out / power2.out, staggered
Arrow nudge	x 0 → −14px, 200ms, power1.out
Fade-in on scroll	Opacity 0 → 1, 1000ms outQuart; slide x 30px → 0, 800ms outExpo
Parallax	ScrollTrigger top bottom → bottom top, scrub 0.8
Logo marquee	x 0 → −65%, 120000ms, linear loop
Input focus	400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

Do’s and don’ts

Write section headlines in two tones: black #000000 for the claim, ink-faint (black at 38%) for the explanation.
Set every button, tag, tab and role in IBM Plex Mono uppercase at 12–14px.
Use white #FFFFFF pills (30px radius, 45px tall) on photos and #E6E6E6 pills on white.
Put glass panels (white at 13–20%, 10–25px blur) only on photography or video.
Use the 2-column grid with a 100px gap and 100px section padding.
Keep #FF2600 to round arrow icons.
Use red for text, labelled buttons or backgrounds.
Set headlines in mono or labels in Switzer.
Add drop shadows to cards; depth comes from glass and overlap.
Use ink-subtle (black at 44%) for anything except inactive 14px mono tabs. It is under 4.5:1 on white.
Use ink-faint below 30px, except as a placeholder.
Put white text on a photo without a 20–50% black overlay.

Example prompt

Any page in the Movix style

Prompt

Build your page in the Movix style. Use white #FFFFFF sections, a #F2F2F2 band and a #131313 band, with 100px top and bottom padding and 2% side padding in a 1400px container. Headlines are Switzer 500 (30px, line height 1.3, −0.8px; 46px for big ones) in two tones: the first clause #000000, the rest black at 38%. Paragraphs are Switzer 16px at 70% black. Every label, tag, tab and button is IBM Plex Mono 12–14px uppercase. Buttons are 45px pills: white with black text on photos, #E6E6E6 on white; on hover a #2B2B2B panel slides up and the text turns white (500ms). Open each section with a small tag (5px radius, #706E6E at 13%). Use a 2-column grid with a 100px gap. Put frosted glass (white 20%, 20–25px blur, 5–7px radius) over full-bleed freight video with a 50% black overlay, and use #FF2600 only for 50px round arrow icons.

# Movix Design System

> Measured from the Movix template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Movix (the demo brand is MOVEX™) is a calm, corporate
logistics site. It reads like a well-made annual report
for a freight company: white and light-grey pages with
black Switzer headlines, small IBM Plex Mono labels in
capitals, and big freight footage (ships, trucks,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, white … |
| surface-1    | #F2F2F2     | The grey services band … |
| surface-2    | #706E6E 13% | Light tags on white or … |
| inverse-can… | #131313     | The dark industries ban… |
| field        | #FFFFFF     | Inputs, which go grey o… |
| field-focus  | #F2F2F2     | With field: Inputs, whi… |
| on-primary   | #000000     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| on-accent    | #FFFFFF     | Text on accent           |
| ink          | #000000     | Headlines, active tabs,… |
| ink-muted    | #000000 70% | Paragraphs and list ite… |
| ink-subtle   | #000000 44% | Inactive service tabs (… |
| ink-faint    | #000000 38% | The grey second half of… |
| inverse-ink  | #FFFFFF     | Text on the dark band a… |

## Typography

- display-hero: Switzer 56px / 500
- display-list: Switzer 56px / 500
- headline-lg: Switzer 46px / 500
- headline-md: Switzer 30px / 500

{
  "$description": "Movix design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The main pill button (GET A FREE QUOTE, LEAVE A REVIEW)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#2B2B2B",
      "$description": "A dark panel that slides up inside the button on hover; the text turns white"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#E6E6E6",
      "$description": "Pill buttons on white (OUR SERVICES, LEARN MORE)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#FF2600",
      "$description": "50px round arrow buttons on service cards, the active-tab arrow, the contact card arrow"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, white sections"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F2F2F2",

/* Movix theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #2B2B2B;
  --color-on-primary: #000000;
  --color-secondary: #E6E6E6;
  --color-on-secondary: #000000;
  --color-accent: #FF2600;
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F2F2F2;
  --color-surface-2: #706E6E21;
  --color-ink: #000000;
  --color-ink-muted: #000000B3;
  --color-ink-subtle: #00000070;
  --color-ink-faint: #00000061;
  --color-line: #0000001F;
  --color-inverse-canvas: #131313;
  --color-inverse-surface: #313131;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFB3;
  --color-inverse-line: #FFFFFF30;
  --color-on-media: #FFFFFF;
  --color-glass: #FFFFFF33;
  --color-glass-soft: #FFFFFF21;
  --color-overlay: #00000080;
  --color-field: #FFFFFF;
  --color-field-focus: #F2F2F2;

  /* Fonts */
  --font-sans: "Switzer", "Inter", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 56px;
  --text-display-hero--line-height: 1.15;
  --text-display-hero--letter-spacing: -0.5px;
  --text-display-hero--font-weight: 500;
  --text-display-list: 56px;
  --text-display-list--line-height: 0.85;

/* Movix design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #FFFFFF; /* The main pill button (GET A FREE QUOTE, LEAVE A REVIEW) */
  --color-primary-hover: #2B2B2B; /* A dark panel that slides up inside the button on hover; the text turns white */
  --color-on-primary: #000000; /* Text on primary */
  --color-secondary: #E6E6E6; /* Pill buttons on white (OUR SERVICES, LEARN MORE) */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-accent: #FF2600; /* 50px round arrow buttons on service cards, the active-tab arrow, the contact card arrow */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-canvas: #FFFFFF; /* Page background, white sections */
  --color-surface-1: #F2F2F2; /* The grey services band (--colors--footer-color), the form submit button, focused inputs */
  --color-surface-2: #706E6E21; /* Light tags on white or grey (WHAT WE DO, SERVICES); reads as about #ECECEC */
  --color-ink: #000000; /* Headlines, active tabs, button text */
  --color-ink-muted: #000000B3; /* Paragraphs and list items (p { opacity: .7 }) */
  --color-ink-subtle: #00000070; /* Inactive service tabs (AIR FREIGHT) in 14px mono */
  --color-ink-faint: #00000061; /* The grey second half of headlines (30px and up) and input placeholders */
  --color-line: #0000001F; /* 1px rules: the line above the button row, tab dividers */
  --color-inverse-canvas: #131313; /* The dark industries band (--colors--third-color) */
  --color-inverse-surface: #313131; /* Icon squares on the dark band */
  --color-inverse-ink: #FFFFFF; /* Text on the dark band and on photos */
  --color-inverse-ink-muted: #FFFFFFB3; /* Text on the dark band and on photos */
  --color-inverse-line: #FFFFFF30; /* Rules inside testimonial cards and between dark-band rows */
  --color-on-media: #FFFFFF;
  --color-glass: #FFFFFF33; /* Nav bar, menu button, contact card, testimonial and service captions */
  --color-glass-soft: #FFFFFF21; /* Tags on photos (WE ARE MOVEX, CUSTOMER REVIEWS) */
  --color-overlay: #00000080; /* Hero video overlay; other images use 20% and 30% */
  --color-field: #FFFFFF; /* Inputs, which go grey on focus */
  --color-field-focus: #F2F2F2; /* With field: Inputs, which go grey on focus */

  /* Fonts */
  --font-switzer: "Switzer", "Inter", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 56px;
  --text-display-hero-font: var(--font-switzer);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.15;
  --text-display-hero-tracking: -0.5px;
  --text-display-list: 56px;
  --text-display-list-font: var(--font-switzer);
  --text-display-list-weight: 500;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Logistic design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Switzer · display-hero

Switzer · headline-lg

Inter · title-lg

Switzer · body

Switzer · label-nav

IBM Plex Mono · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Movix style

More design systems like this

TransportX

Freights

Distribution

Logistic

Bring any of them to your AI tool