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.
Cargo+
Cargo+ is a logistics and freight brand identity built on the tension between heavy industrial reality and clean operational clarity. Full-bleed warehouse footage and amber-lit highway video sit beneath confident grotesk headlines, while monochrome utility tags and uppercase mono labels lend the system a dispatch-board rigor. The palette swings between a near-black ink and a warm off-white linen, joined by a single muted aubergine accent that never raises its voice. Surfaces are flat, corners are softly rounded, and every interaction — pill buttons, sliding icon reveals, marquee headlines — feels engineered rather than decorative. The result is a template that reads as both heavy industry and contemporary studio.
Sections from Cargo+
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
News Slider with Cards
View section
Navigation Bar with Dropdowns
View section
About Hero with Parallax Image
View section
About Services Slider Section
View section
Network Countries with 3D Background
View section
Values Accordion with Parallax
View section
Service Features Grid Section
View section
Mission Statement Content Section
View section
Video Hero with Content
View section
Client Case Study Slider
View section
Statistics Grid With Animated Content
View section
Client Case Study Grid
View section
Colors
Canvas
Dock Stone
#d9d9d9
Secondary surface lift. Secondary buttons, input fills, and lifted card backgrounds on light pages.
Linen White
#ededed
Primary light canvas. Page background, dark-mode text, and primary button labels on ink.
Loading Bay
#272727
Lifted dark surface. Cards, inputs, and panels on dark sections to layer above pure ink.
Warehouse Paper
#f6f3f0
Warm lifted canvas. Article bodies and elevated content panels with a tactile, paper-like feel.
Ink
Freight Ink
#151515
Primary ink & dark canvas. Headlines on light surfaces, body type, and the brand's hero dark sections.
Accent
Twilight Haul
#4c3e5e
Brand accent. Reserved for emphasis moments — never decorative chrome or large fills.
State — utility only
Halt Red
#c94040
Error state. Form errors and destructive confirmations.
Signal Amber
#c56a21
Warning state. Caution messaging and shipment alert affordances only.
Clearance Green
#2ad87f
Success state. Delivery confirmations and positive system feedback.
Typography
The quick brown fox jumps
Display, headings, and body. Carries the entire editorial voice — confident, slightly condensed, with a quiet humanist warmth.
The quick brown fox jumps
Labels, tags, and button text. Uppercase mono used for system metadata, navigation, and CTAs — the dispatch-board voice.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
120pxCard padding
24pxElement gap
32pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120px--spacing-160
160pxBorder radius
tag0pxpill9999pxcards8pxsmall4pxinputs8pxpanels12pxbuttons8pxSurfaces
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 1Linen White
Level 1Freight Ink
Level 2Warehouse Paper
Level 2Loading Bay
Level 3Dock Stone
Do's and don'ts
- Use Overused Grotesk Medium with -0.02em to -0.03em tracking for all headlines — the negative letter-spacing is core to the brand's tightly-engineered feel.
- Reserve IBM Plex Mono uppercase for tags, labels, and CTA text to maintain the dispatch-board voice across the system.
- Pair full-bleed warehouse, freight, or highway video with a translucent dark overlay so light type stays legible on top.
- Anchor each section to either Linen White (#ededed) or Freight Ink (#151515) — alternating these full-section blocks creates the template's signature rhythm.
- Layer compact image cards (case-small, 8px radius, dark-48 fill, backdrop-blur) over hero video as an information ticker rather than a CTA.
- Apply the headline-rise motion (translate3d 0,130%,0 → 0 with a 1deg micro-rotate) to hero copy so type arrives like cargo settling into place.
- Use Twilight Haul (#4c3e5e) sparingly — single accent moments only, never as a button or large fill.
- Don't introduce additional saturated brand colors; the palette is intentionally monochrome plus one muted accent and three reserved utility hues.
- Don't use rounded-pill buttons everywhere — primary CTAs use a soft 8px radius rectangle, not capsule shapes.
- Don't set body copy in IBM Plex Mono; mono is exclusively for uppercase labels, tags, and short CTA strings.
- Don't place Halt Red, Signal Amber, or Clearance Green decoratively — they are reserved system states only.
- Don't stack multiple drop shadows; the system relies on flat color blocks, hairline rules, and backdrop-blur for depth.
- Don't center-align body paragraphs by default — left alignment is the dispatch-style default; centering is reserved for CTA sections.
- Don't combine the warm Warehouse Paper canvas with the cool Linen White in the same section — pick one light surface per block.
Example prompts
Hero section
Service card grid
Dark testimonial
CTA closer
# 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