# Idrivelogistics Design System

> Corporate logistics authority rendered in deep navy and slate, anchored by bold Poppins headlines and high-contrast functional surfaces.

**Source:** https://idrivelogistics.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Idrivelogistics utilizes a high-contrast "monochrome-plus" palette where deep navy `#0b1e3a` and slate blue `#293266` provide professional weight against a cool gray foundation `#f6f7f8`. The typography is exclusively **Poppins**, leveraging heavy weights (700) for display headers and medium weights (500) for interactive elements. UI components are characterized by a mix of sharp edges and generous 12px to 24px radii for content cards, while primary actions are strictly defined by `#293266` backgrounds with white text. The system prioritizes legibility and information density, using subtle 1px borders in `#cbd6e2` to organize complex data.

## Signature DNA
1. **The Navy Anchor** (Deep navy `#0b1e3a` and slate `#293266` are used for all primary brand moments, creating a "logistics-grade" sense of stability and trust across all pages.)
2. **Poppins Hierarchy** (The system relies on Poppins at weight 700 for massive display sizes up to 54px, contrasted against 16px body text to create clear information scaffolding.)
3. **Soft-Shell Surfaces** (Content is grouped in cards with 12px radii and subtle borders, floating on a light gray `#f6f7f8` canvas to prevent visual fatigue.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#f6f7f8` | Page background, input backgrounds | 36 | 1 | `css_variable:--input-bg-color` |
| `{color.white}` | `#ffffff` | Surface backgrounds, button text | 29 | 1 | `css_variable:--wp--preset--color--white` |
| `{color.border.soft}` | `#cbd1d7` | Card and divider lines | 11 | 0.8 | `computed_style` |
| `{color.border.neutral}` | `#d9d9d9` | Editor canvas background | 5 | 1 | `css_variable:--wp-editor-canvas-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.text.primary}` | `#424d57` | Primary body text, links | 286 | 1 | `css_variable:--base-text-color` |
| `{color.brand.navy}` | `#0b1e3a` | Brand headers, primary accents | 61 | 1 | `css_variable:--brand-color` |
| `{color.action.primary}` | `#293266` | Primary button background, active states | 26 | 1 | `css_variable:--accent-color` |
| `{color.text.muted}` | `#33475b` | Input text, placeholders | 16 | 1 | `css_variable:--input-color` |
| `{color.border.input}` | `#cbd6e2` | Form field borders | 16 | 1 | `css_variable:--input-border-color` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.error}` | `#f2545b` | Validation errors and alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Poppins | 400, 500, 600, 700 | Heading, Body, UI | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|------|------|------|------|------|
| `{type.display.xl}` | 54px | 54px | normal | 700 | Hero highlights | `strong.highlight-item__value` |
| `{type.display.lg}` | 52px | 62.4px | normal | 700 | Section titles | `h2.feature-holder__title` |
| `{type.display.md}` | 42px | 50.4px | normal | 700 | About headers | `h2.section-about__headtitle` |
| `{type.heading.lg}` | 38px | 45.6px | normal | 700 | Standard H2 | `h2` |
| `{type.heading.md}` | 28px | 36.4px | normal | 700 | Sub-section heads | `h3.title-lg` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 600 | Card titles | `h3` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Hero body copy | `section.module_hero` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body | `div.card.border` |
| `{type.button}` | 17px | 24.055px | normal | 600 | Primary CTA | `a.btn.btn--primary` |
| `{type.caption}` | 14px | 14px | normal | 700 | Form labels | `label.hs-form-booleancheckbox-display` |

### Principles
1. **Bold Display Hierarchy:** Headlines never drop below weight 600; weight 700 is preferred for all section titles.
2. **Generous Line Height:** Body text at 16px/18px uses a 1.5x ratio (24px/27px) to maintain readability in dense logistics descriptions.
3. **Functional Caps:** Small labels and form elements use weight 700 to maintain authority at reduced scales.

## Spacing
**Base unit:** 4px (approximated)
Table: | Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 8 |
| `{space.lg}` | 24px | 29 |
| `{space.xl}` | 30px | 23 |
| `{space.section}` | 110px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|------|
| `{radius.none}` | 0px | Sharp containers, secondary buttons | 311 occurrences |
| `{radius.sm}` | 3px | Form inputs | Text Input component |
| `{radius.md}` | 10px | Primary buttons | Rounded Button component |
| `{radius.lg}` | 12px | Content cards | Surface component |
| `{radius.xl}` | 24px | Large feature panels | Card observed once |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|------|------|
| `{shadow.flat}` | none | Standard cards and inputs | Surface/Input components |
| `{shadow.raised}` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Hover states or floating panels | Surface component (2 occurrences) |

## Components
### Tier 1: Foundational

#### Text Input
**Role:** Form data entry
**Pages observed:** Home, About
**Spec:** Background `#f5f8fa` / Text `#33475b` / Border 1px `#cbd6e2` / Radius 3px / Padding 0px 10px / Typography Poppins 16px
**States observed:** Default | Focus: captured (border `#a0b4ca`)

#### Rounded Button
**Role:** Primary site actions
**Pages observed:** Home, About
**Spec:** Background `#293266` / Text `#ffffff` / Border 1px `#293266` / Radius 10px / Padding 14px 27px / Typography Poppins 17px
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature and service descriptions
**Pages observed:** Home, About
**Spec:** Background `transparent` / Text `#424d57` / Border 1px `#cbd1d7` / Radius 12px / Padding 24px 30px 30px
**States observed:** Default

#### Section Surface
**Role:** Large layout banding
**Pages observed:** Home, About
**Spec:** Background `#f6f7f8` / Text `#424d57` / Border 0px / Radius 0px / Padding 110px 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Compact Action Button
**Role:** Secondary form submissions
**Pages observed:** Home, About
**Spec:** Background `#293266` / Text `#ffffff` / Border 1px `#293266` / Radius 3px / Padding 12px 24px / Typography Poppins 14px
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max content width | ~1200px |
| Section vertical padding | 110px |
| Card internal padding | 24px - 30px |
| Grid | 3-column (features), 2-column (split hero) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|------|
| Mobile | 390px | Section padding reduces; 3-column grids stack to 1-column; display type scales down. |

## Imagery & decoration
- **Photography:** High-quality office/team shots and logistics hardware (trucks, packages).
- **Logos:** Grayscale "Trusted By" bar for partner brands.
- **Icons:** Simple blue/navy line icons for feature lists.
- **Avoids:** Bright illustrative styles, heavy gradients, or rounded "bubbly" UI.

## Do's
- Use Poppins 700 for all primary section headers.
- Apply `#293266` for primary CTA backgrounds.
- Use `#f6f7f8` for alternating section backgrounds to create rhythm.
- Set card border radius to 12px for content groupings.
- Maintain 110px vertical spacing between major sections.

## Don'ts
- **Wrong:** Using `#00d084` (Vivid Green) for primary buttons. **Right:** Use `#293266`. **Reason:** Green is a preset token but not the brand's primary action color.
- **Wrong:** Using sharp 0px corners for primary buttons. **Right:** Use 10px radius.
- **Wrong:** Setting body text below 16px for long-form content.
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#424d57`.

## Similar brands
- Flexport
- C.H. Robinson
- Maersk
- FedEx (Corporate)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --idrive-navy: #0b1e3a;
  --idrive-slate: #293266;
  --idrive-text: #424d57;
  --idrive-bg: #f6f7f8;
  --idrive-border: #cbd6e2;
  --font-main: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using Poppins 600 for the title, a 1px border in #cbd1d7, and a 12px border radius."
- "Generate a primary CTA button with a #293266 background, white Poppins 17px text, and 10px corner radius."
- "Design a section header using Poppins 700 at 38px in #0b1e3a navy."

## Known gaps
- Hover and active states for buttons were not fully captured in the static evidence.
- Mobile-specific typography tokens (fluid type) were not explicitly declared in the CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Home | https://idrivelogistics.com | Desktop 1440 | 2026-06-06 |
| About | https://idrivelogistics.com/about | Desktop 1440 | 2026-06-06 |