Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Freight™
Freight™ is a logistics and transportation design system built to project scale, precision, and global reach. The palette pairs a crisp white canvas with a near-black ink and a deep midnight surface, punctuated by a single electric blue accent that carries every call-to-action, highlighted number, and interactive state across the system. Bold cargo photography — container ships crossing open water, aircraft wings slicing through blue sky, trucks on dusk highways — is treated as the hero content itself, framed in generously rounded 30px containers that soften the industrial subject matter. Typographically the system leans on a single confident sans-serif, Instrument Sans, scaled aggressively from small label text up to oversized 100px display headlines that bleed off the edge of the viewport. Rounded pill buttons, rounded card corners, and a full-bleed dark "network" section with a glowing world map reinforce a brand that feels both operationally serious and quietly futuristic.
Colors
Canvas
Mist Sage
#f2f2fa
Lifted surface tint. Card headers, rounded gray sections, subtle block backgrounds.
Harbor Navy
#0a0e27
Deep hero & network surface. Backdrop for the glowing world-map and trust-bar sections.
Paper White
#ffffff
Page canvas & card backgrounds. Base surface for nearly all content sections and light cards.
Ink
Fog Gray
#d9dae2
Muted body text on dark surfaces. Secondary copy inside subscribe fields and dark hero sections.
Midnight Ink
#000000
Primary text & dark surfaces. Headlines, body copy, and the full-bleed dark map section background.
Steel Divider
#d8dfe0
Hairline dividers. Borders between content blocks and table rows.
Accent
Cargo Blue
#4361ee
Primary accent & action color. CTA buttons, active nav pills, links, and stat emphasis.
Horizon Blue
#5670ee
Accent hover state. Lightened blue shown on button and link hover transitions.
State — utility only
Transit Red
#e5484d
Error & destructive state. Form validation errors and cart error messaging.
Signal Amber
#f5a623
Warning accent. Reserved for alerts and flagged shipment states, not used decoratively.
Typography
The quick brown fox jumps
Sole typeface across the system — labels, body copy, headlines, and display type.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
200pxCard padding
45pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-24
24px--spacing-30
30px--spacing-40
40px--spacing-45
45px--spacing-60
60px--spacing-70
70px--spacing-100
100px--spacing-150
150px--spacing-200
200pxBorder radius
hero30pxcards30pxsmall7pxbadges7pxinputs30pxbuttons30pxtextarea20pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Paper White
Level 2Mist Sage
Level 3Harbor Navy
Level 4Cargo Blue
Level 5Midnight Ink
Do's and don'ts
- Use Cargo Blue exclusively for interactive elements — buttons, active nav states, and linked numbers — to keep it meaningful.
- Apply the 30px rounded corner consistently to hero containers, buttons, inputs, and cards for a unified pill-and-pad aesthetic.
- Pair bold cargo photography (ships, planes, trucks) with oversized display type that overlaps or bleeds off image edges for drama.
- Reserve the Harbor Navy dark surface for high-impact global/network moments like the world map and trust-bar strip.
- Keep body copy on dark surfaces in Fog Gray rather than pure white to maintain softness and hierarchy.
- Use generous section padding (150–200px vertical) to let the large-format photography and stats breathe.
- Lead every content section with a small uppercase eyebrow label in Cargo Blue or muted gray before the headline.
- Don't introduce additional saturated accent colors — Cargo Blue is the system's only brand color.
- Don't use sharp, unrounded corners anywhere; every container, button, and input carries a radius.
- Don't set display headlines in anything other than Instrument Sans Semibold — no serif or secondary typeface.
- Don't crowd the oversized display type with other elements; let it bleed off-canvas as the template intends.
- Don't place dense paragraph text directly on cargo photography without a dark overlay gradient for legibility.
- Don't shrink section vertical padding below 100px on desktop; the system reads as spacious, not compact.
- Don't mix pure black (#000000) ink with pure white in adjacent thin-line UI — favor the softer divider gray for hairlines.
Example prompts
New service page hero
Stats block
Service card grid
Dark network section
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide