Skip to content
DesignMunkDesignMunk Submit a site

Einride

einride.tech
Driving the Future with Autonomous, Electric, and Digital Freight Solutions
Climate & Energy Logistics & Mobility Framer Homepage Suisse Intl
Share Visit site
einride.tech DESKTOP · 1440
Einride

AI Breakdown

Design export

---
version: alpha
name: Einride
description: Driving the Future with Autonomous, Electric, and Digital Freight Solutions
colors:
  primary: "#000000"
  secondary: "#848484"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: sans-serif
    fontSize: 35px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: sans-serif
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.21
  headline-sm:
    fontFamily: Heldane Display Regular
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.46
  headline-xs:
    fontFamily: sans-serif
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: Suisse Intl Book
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 4px
  sm: 16px
  md: 30px
  lg: 46px
  xl: 150px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "#050505"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Einride: Monochrome Freight Tech with Editorial Serif Accents

## Overview

Einride's UI is monochrome, editorial, and technology-forward. The interface serves enterprise logistics buyers, so it favors clarity over flourish: black text on white surfaces, thin borders, and compact controls. Density is moderate—ample white space between sections, but concise typography to keep copy tight. Use the serif accent to add editorial emphasis at subhead level while keeping headlines and navigation strictly utilitarian.

## Colors

- Primary (#000000): Black for headlines, icons, and high-contrast text.
- Secondary (#848484): Cool gray for metadata, captions, and subdued UI text.
- Neutral (#ffffff): White for page backgrounds and cards.
- Border (#e5e7eb): Hairline dividers, input strokes, and subtle section delineation.
- Surface ({colors.neutral}): Default card and panel surface; stays white.
- On-surface ({colors.primary}): Standard text color on surfaces, maintaining AA+ contrast.

## Typography

- Headline LG (sans-serif, 35px/1.2, 700): Primary page headings and hero claims—strong, utilitarian. Family is generic; use an obtainable modern grotesk such as Inter (preferred), IBM Plex Sans, or Work Sans.
- Headline MD (sans-serif, 29px/1.21, 700): Section intros and key value props. Same substitutions as above.
- Headline SM (Heldane Display Regular, 24px/1.46, 400): Editorial subheads and emphasis lines. This font is proprietary/self-hosted; substitute with Playfair Display, Cormorant Garamond, or Lora.
- Headline XS (sans-serif, 19px/1.21, 400): Card titles and compact section headers. Substitute with Inter/IBM Plex Sans/Work Sans.
- Body MD (Suisse Intl Book, 16px/1.5, 400): Core paragraphs and long-form copy. Suisse is proprietary/self-hosted; substitute with Inter (regular), IBM Plex Sans (regular), or Source Sans 3.

## Layout

Spacing uses a stepped scale for rhythm: 4px (xs) for micro offsets, 16px (sm) for inner padding and gaps, 30px (md) for card spacing, 46px (lg) for section breathing room, and 150px (xl) for large hero offsets. Build sections on a simple column grid (12 columns recommended) with generous white margins; align headlines flush left and constrain text widths for readability. Cards and tiles use consistent 16px internal padding.

## Elevation & Depth

Depth is almost entirely tonal and spatial. Only one shadow is measured (sm: rgba(0,0,0,0.3) 0px 32px 68px) and should be reserved for media overlays or featured cards. Everyday separation relies on white surfaces, #e5e7eb borders, and whitespace—not stacked shadows.

## Shapes

Corners are minimal. Buttons use 4px radius (rounded.sm) for crisp, utilitarian controls; cards step up to 8px (rounded.md) for a softer container. Avoid additional rounding; increased curvature reads as off-brand.

## Components

Buttons
- Primary: #000000 background, #ffffff text, 40px height, 8px×16px padding, 4px radius. Use for core CTAs.
- Secondary: Text-only in #000000, 40px height, 8px×16px padding, 4px radius. Works on white surfaces where a quieter action is preferred.
- Link: #050505 text, no radius. Use inline with copy or in navigation.

Card
- Background #ffffff, text #000000, 8px radius, 16px padding. Optional 1px #e5e7eb border; reserve the single shadow only for standout media.

### Top news bar
A compact strip at the very top for "Latest news" and Investor Relations. Use Body MD (16px), #000000 text on #ffffff or dark film overlay, with sm spacing (16px) padding.

### Global header with Live indicator
Left-aligned links (Platform, Live, More) and right-aligned "Get in touch." Use Headline XS (19px, 400) for items; render "Get in touch" as a link button. Spacing sm (16px) horizontally; no shadows.

### Hero video with caption rail
Full-bleed media block with a bottom caption rail carrying region availability and a short descriptor. Text in #ffffff on a dark rail; set headings in Headline MD/LG, supporting copy in Body MD. Internal padding sm–md (16–30px).

### Platform grid (4-up)
Four navigational tiles: Autonomous, Electric road freight, Charging, Saga AI. Each tile is a Card (8px radius, 16px padding) with a title in Headline XS or SM (use serif when an editorial tone is desired), summary in Body MD, and an arrow link.

### Region availability strip
A narrow section announcing "Live and operational in Europe, US, and Middle East." Use Headline MD with secondary text in #848484. Provide a small secondary action linking to Live.

### Contact CTA banner
Short paragraph ("Transform the way your goods move") followed by a Primary button. Keep the button at 40px height with 4px radius and 8px×16px padding.

### Footer navigation and social
Two tiers: platform links and company/legal. Typography is Body MD; link color #000000 with hover underline. Spacing lg (46px) above, sm (16px) within groups; include social icons as text links.

### Newsletter signup
Single-field form. Input with 1px #e5e7eb border, 4px radius, 16px vertical padding; Submit uses the Primary button style.

## Do's and Don'ts

- Do keep body text #000000 on #ffffff for maximum contrast; use #848484 only for metadata and de-emphasis.
- Do respect button spec: 40px height, 8px×16px padding, 4px radius; promote key CTAs with the Primary style.
- Do use 16px internal padding on cards and tiles; step to 30px or 46px for section spacing.
- Don't introduce additional accent colors or gradients; the palette is monochrome with one border gray.
- Don't add extra shadows; if elevation is necessary, use the single sm shadow sparingly.
- Don't exceed 8px radii; larger rounding conflicts with the brand's industrial precision.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #000000

1) Build the global header
- Background #ffffff, text #000000. Navigation items set in Inter (or system-ui, sans-serif) at 19px/1.21, 400. Left: "Platform", "Live", "More". Right: "Get in touch" as a link (color #050505, no radius). Horizontal padding 16px, vertical padding 16px. No shadow; use a 1px bottom border #e5e7eb if separation is needed.

2) Create the hero with caption rail
- Full-bleed video/image. Bottom caption rail: background #000000, text #ffffff. Headline in Inter 35px/1.2, 700; supporting line in Inter 16px/1.5, 400. Internal padding 16–30px. Primary CTA uses button-primary spec: background #000000, text #ffffff, height 40px, padding 8px 16px, radius 4px.

3) Platform grid (four tiles)
- Grid: 2 columns desktop, 1 column mobile. Each tile is a card: background #ffffff, 1px border #e5e7eb, radius 8px, padding 16px. Title in Playfair Display 24px/1.46, 400 (serif accent) or Inter 19px/1.21, 400; description in Inter 16px/1.5, 400 with text #848484 when de-emphasized. Include an inline arrow link styled as button-link (#050505).

4) Contact CTA banner
- Section background #ffffff; copy in Inter 29px/1.21, 700 for the lead sentence with a short 16px body line beneath. Place a primary button ("Get in touch") using: #000000 background, #ffffff text, 40px height, 8px 16px padding, 4px radius. Section spacing: 46px top/bottom, 30px internal gaps.

5) Footer with newsletter field
- Two columns of links set in Inter 16px/1.5, 400, color #000000. Newsletter input: 1px border #e5e7eb, radius 4px, padding 8px 16px. Submit uses primary button spec. Outer spacing 46px; link hover is underline only.

## Similar Brands

- Tesla: Similarly stark black/white palette and generous whitespace; Tesla leans more on large product photography with fewer editorial subheads.
- Waymo: Technical, low-color site with utilitarian sans; Waymo uses more blues and rounded shapes than Einride's sharper corners.
- Rivian: Quiet typography and grayscale with selective color; Rivian's imagery carries more outdoors lifestyle, where Einride stays industrial.
- Volvo Trucks: Structured grid and restrained UI chrome; Volvo uses more mid-gray panels and heavier section dividers than Einride.

More like this

Browse Climate & Energy →
ouster.com
Ouster Logistics & Mobility
Ouster
Transforming autonomy with high-performance digital lidar sensors.
Homepage · 7 days ago