Fourlines / DESIGN SYSTEM
Style Guide
The foundations of Fourlines: warm paper on charcoal, a precise orange signal, Barlow Condensed display type, calm Barlow body copy and compact JetBrains Mono labels. Edit shared color and text styles to adapt the design.
01 / TYPOGRAPHY
Type with a clear hierarchy.
BARLOW CONDENSED / DISPLAY
Four lines.
Barlow Condensed carries the display headlines and section headings. Reuse the shared heading presets, preserve a clear hierarchy and let headings grow with their content.
BARLOW / BODY
Road, rail, sea and air — run as a single operation, so your cargo never waits between modes.
Body copy remains readable and calm beside the large display type. Keep paragraphs to a comfortable measure.
JETBRAINS MONO / LABELS
FLX—20418 / DAY 19
Use the mono family for shipment references, dates, section numbers and concise route details.
02 / COLORS
A restrained working palette.
The swatches below use the same shared color styles as the site. Neutral colors are ordered from the lightest foreground to the darkest background.
Neutral 100 / #F2EEE6
Foreground and warm paper
Neutral 500 / #96A0A7
Secondary copy and essential form-control borders on dark surfaces
Neutral 700 / #1B252D
Secondary surface
Neutral 800 / #182127
Muted surface
Neutral 900 / #080E13
Page background
Signal 500 / #F46622
Route marker and primary action
Border / #EFEFE61F
Subtle decorative rules at 12% opacity; use Neutral 500 for essential field outlines
03 / SPACING
Give each detail room.
A shared spacing scale provides the visual rhythm. Use native stack gaps and frame padding consistently; keep layout ratios and one-pixel borders local to the pattern that needs them.
0 px — Reset and flush alignment
8 px — Small icon and label gaps
16 px — Compact spacing and field padding
24 px — Cards and content groups
40 px — Column and container rhythm
64 px — Compact section spacing
96 px — Standard section spacing
160 px — Large editorial sections
04 / ACTIONS
One primary action.
PRIMARY BUTTON
Use a clear verb and a real destination. The primary action pairs Signal 500 with dark Neutral 900 text; keep supporting links quiet.
HTML elements and responsive type
The page title above is the H1 specimen. Use one H1 per page, then ordered section headings. Shared text presets keep headings, paragraphs and links consistent. The list, quotation and caption specimens below demonstrate native semantic text structures.
Typography modes
Keep ordinary page content centered within a 1440px outer container, including 40px desktop or 24px tablet and phone gutters. Limit normal body paragraphs to about 60ch and article or documentation prose to 65ch. Never stretch paragraphs or FAQ answers across a whole page. Keep FAQ introductions beside a bounded question list on desktop and stack them on smaller screens. Images may fill their visual frame while text keeps its reading measure.
Use the same two-column introduction on subpages: an orange monospace pre-heading and H1 on the left; supporting copy, actions and dates on the right. Reuse the native heading presets and their responsive sizes. Stack the heading before the description on smaller screens. If a photograph is included, place it below both text columns across the bounded content width, keeping its caption or route strip. Image-free pages keep the text introduction without an empty media row.
Keep the native frames, effects and component variants connected when editing. Update shared color and text styles before applying local overrides, and check long headings at desktop, tablet and phone widths.
H2 — Section heading
H3 — Subsection heading
H4 — Supporting heading
H5 — Small heading
H6 — Detail heading
Paragraph — useful planning starts with the cargo, the route and the next hand-off.
Describe the cargo.
Confirm the next hand-off.
Choose the relevant transport mode.
Agree the details before booking.
A useful brief connects the destination with what needs to happen next.
Figure — use a short caption to explain the image’s contribution.