Overview
Build a system that feels field-tested, procedural, and conversion-ready. A freight-operations marketing system that pairs field photography, cream process boards, and rectangular orange conversion controls.
Vooma
Vooma automates quoting and order entry for logistics teams. AI-powered tools that boost efficiency, reduce errors, and unlock inbox revenue.
3.0
7
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Vooma Home design analysis
Build a system that feels field-tested, procedural, and conversion-ready. A freight-operations marketing system that pairs field photography, cream process boards, and rectangular orange conversion controls.
Image Direction
Use road, truck, dock, and container proof alongside structured cream process diagrams. Visual evidence should make the operations story feel real and measurable.
Colors
Orange is a conversion spike, not a general theme wash. The main canvas is cream and warm white, grounded by black text and dark green proof bands.
Typography
Use an assertive contemporary sans. Small eyebrow labels can go monospaced and compact, but the body copy should remain blunt and readable.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Freight Signal Route
A freight-operations marketing system that pairs field photography, cream process boards, and rectangular orange conversion controls.
grounded, operational, and diagrammatic
Primary mode: lightlogistics operations marketingmarketing-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
grounded, operational, and diagrammatic
Density
4
Variance
3
Motion
2
Signals
road and truck hero · cream process diagrams · orange split buttons · dark green proof bands
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Route Orange
#FF6A00
Freight Black
#0C0C0C
Field Cream
#F4F0E2
Haul Green
#0B3B3A
Warm White
#FBFAF5
Survey Line
#CFC5AE
Signal Lime
#B9F46A
Usage rules
Orange should stay attached to conversion controls and a few process highlights.
Cream boards should remain readable and lightly gridded, never washed out.
Use the dark green banding to anchor proof and stats, not to dominate the full page.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
96px
Token Radii
Corner radii tokens with a live surface sample.
sm
0px
md
0px
lg
20px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter
strong operational headline voice
Body
Inter
plainspoken process copy voice
Mono
IBM Plex Mono
eyebrow and technical label voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4.75rem/—
Display
H2
2.45rem/—
H2
Body
1rem/—
Body
Caption
0.75rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use strong sans headlines with tight line breaks for clarity under photography. · Keep eyebrow labels small, monospaced, and uppercase-oriented. · Let process copy stay calm and readable instead of overly condensed.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
160ms-240ms
Easing
cubic-bezier(.22,.84,.18,1)
Spring
stiffness 100, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-240ms |
easing | cubic-bezier(.22,.84,.18,1) |
spring | stiffness 100, damping 18 |
Layout Principles
Open with full-bleed field photography, then shift into cream process boards and dark proof stages.
Use diagrams, tab rails, and proof bands to make operations feel tangible.
Keep the CTA system sharp and rectangular so it reads as a working tool, not a lifestyle brand.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FF6A00
Text
#111111
Border
1px solid #FF6A00
Radius
0px
Padding
14px 18px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#111111
Border
1px solid #111111
Radius
0px
Padding
12px 16px
Min height
42px
Shadow
none
Typography
body
Cards board
Feature Card
Component preview content
Base Attributes
Background
#F4F0E2
Text
#111111
Border
1px solid #CFC5AE
Radius
0px
Padding
24px
Shadow
none
Cards proof band
Feature Card
Component preview content
Base Attributes
Background
#0B3B3A
Text
#FBFAF5
Border
1px solid rgba(255,255,255,0.08)
Radius
0px
Padding
24px
Shadow
none
Navigation eyebrow
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FBFAF5
Active text
#FBFAF5
Item padding
8px 0px
Item radius
0px
Badges micro label
Base Attributes
Background
transparent
Text
#111111
Border
1px solid #CFC5AE
Radius
0px
Padding
8px 12px
Shadow
none
Inputs field
Base Attributes
Background
#FBFAF5
Text
#111111
Border
1px solid #CFC5AE
Radius
0px
Padding
12px 16px
Min height
44px
Placeholder
rgba(17,17,17,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Media types
- -photography
- -process diagram
- -product illustration
Subject patterns
- -roads, trucks, dockyard proof, container line drawings, and cream process boards with route lines
Composition logic
- -Use one dominant field photograph to establish credibility.
- -Pair diagrams with large typographic claims rather than small caption stacks.
Treatment rules
- -Keep diagrams structured and precise.
- -Use orange and lime as small guide signals across cream boards.
Generation cues
- -freight road photography, cream logistics board, orange rectangular CTA
Avoid
- -No round playful SaaS chrome.
- -No soft pastel text on cream backgrounds.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not round the primary CTA into a pill.
- -Do not use white text on the orange conversion fill.
- -Do not leave cream process sections so low-contrast that the diagrams disappear.