Skip to content
DesignMunkDesignMunk Submit a site

Ouster

ouster.com
Transforming autonomy with high-performance digital lidar sensors.
Logistics & Mobility Technology Next.js Homepage Saans
Share Visit site
ouster.com DESKTOP · 1440
Ouster

AI Breakdown

Design export

---
version: alpha
name: Ouster
description: Transforming autonomy with high-performance digital lidar sensors.
colors:
  primary: "#ffffff"
  secondary: "#848484"
  neutral: "#6c7061"
  border: "#374151"
  brand-eerie-black: "#1a1a1a"
  brand-robo-master: "#adadad"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Saans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Saans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Saans
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: Saans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Saans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 2px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 160px
components:
  button-primary:
    backgroundColor: "#000704"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 21px 16px
    height: 56px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 21px 16px
    height: 56px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Ouster: Point-Cloud Hero and Quiet, Engineer-First UI

## Overview

A technical, product-first system designed for engineers and operations buyers. The tone is serious and utilitarian, prioritizing legibility over spectacle. Dark surfaces with high-contrast text support point-cloud imagery and video. Density is moderate, with generous section spacing to pace long pages.

## Colors

- **primary (#ffffff):** Primary text and icons on dark surfaces for maximum contrast.
- **secondary (#848484):** Secondary captions, meta, and helper text where reduced emphasis is needed.
- **neutral (#6c7061):** Base neutral used for subdued surfaces and tonal blocks.
- **border (#374151):** Hairlines, dividers, and input outlines; also useful for subtle separators in dark mode.
- **brand-eerie-black (#1a1a1a):** Core page background and masthead regions.
- **brand-robo-master (#adadad):** Accents, pictograms, and low-risk highlights against the dark UI.
- **surface (#6c7061):** Default surface tone (maps to neutral) for cards and feature tiles.
- **on-surface (#ffffff):** Text and icon color when placed on surface blocks.

## Typography

The system uses a single family: Saans at weights centered on Regular. Roles: headline-lg 28px/1.2 for primary section titles; headline-md 24px/1.2 and headline-sm 22px/1.2 for sub-sections; headline-xs 18px/1.22 for overlines; body-md 16px/1.5 for all running copy.
- Availability: Saans is self-hosted (type: custom) and not generally obtainable for agents. Recommended substitutes with similar neutral grotesk character: Inter, IBM Plex Sans, or Source Sans 3.
- Emoji support: Noto Color Emoji (Google) can be loaded where needed for inline symbols.
- Emphasis should rely on hierarchy levels rather than heavy weights; keep headings Regular unless a substitute requires Medium to match tone.

## Layout

Spacing follows a pragmatic 16-based cadence: sm 16px for inner gutters and button padding, md 24px for card gaps and section content spacing, lg 40px for section padding, and xl 160px for hero/major band top-and-bottom space. Use xs 2px only for micro-adjustments (icon nudge, hairline offsets). Build grids from stacked bands that switch to 2–4 column tiles at md or lg breakpoints; keep inter-card gaps at md (24px) to preserve rhythm on dark backgrounds.

## Elevation & Depth

Shadows are not used (all measured shadows: none). Hierarchy is communicated with tonal contrast (brand-eerie-black vs surface), precise borders in #374151, and controlled whitespace. Accents use #adadad sparingly. The primary button's solid fill (#000704) provides the strongest prominence without glow effects.

## Shapes

Two radii define the language: sm 4px for controls and buttons; md 8px for cards and tiles. Keep radii consistent within a block—mixing 4px and 8px in the same component reduces the engineered feel.

## Components

Buttons
- Primary: 56px height; padding 21px 16px; background #000704; text #ffffff; radius 4px. Use for the key action per section.
- Secondary: 56px height; padding 21px 16px; text #ffffff; radius 4px; no fill by default—pair with border or place on subdued surfaces.
- Link: text #ffffff; radius 0; inline with body copy.

Card
- Background #6c7061; text #ffffff; radius 8px; padding 16px. Use for feature tiles and data items.

### Global Navigation Bar
Dark masthead on #1a1a1a with high-contrast links in #ffffff. Include a single emphasis link (e.g., Talk to Sales) styled as button-secondary at 56px.

### Point-Cloud Hero
Full-bleed media with headline-lg (28px) and a short subline in secondary (#848484). One primary CTA uses the button-primary spec; place it within lg (40px) of the headline.

### REV8 Intro Band
A centered band with overline (headline-xs 18px) and headline-md 24px. Use xl (160px) vertical spacing and a single link-style CTA beneath.

### Technology Feature Tiles
Grid of 3–5 cards using the card spec. Gaps md (24px); each tile holds a short headline (headline-sm 22px) and a concise description in body-md.

### Trust Quote Band
Dark strip on #1a1a1a with body-md text and optional attribution in secondary. Keep max width constrained and pad vertically with lg (40px).

### Real-World Data Gallery
Four cards per row on desktop using the card spec; each links out. Maintain md (24px) gaps and use link-style CTAs.

### Developer Resources Panel
A dense list/grid of links (GitHub, SDKs, Documentation, Forum, Support). Use headline-xs for labels and body-md for descriptions; separate items with border #374151 at 1px or card tiles.

### Newsletter Signup
Compact form with body-md input, 4px radius, and a primary button at 56px height. Vertical rhythm uses lg (40px).

## Do's and Don'ts

- Do keep copy concise and action-oriented; pair each section title with a single, clear CTA.
- Do use #374151 for dividers instead of shadows.
- Do reserve the solid #000704 button for the primary action only; use link or secondary styles elsewhere.
- Do maintain 4px corners for controls and 8px for cards—never mix within the same component.
- Don't add drop shadows or bright brand colors; hierarchy should come from tone, spacing, and borders.
- Don't substitute type with decorative fonts; if Saans isn't available, use Inter, IBM Plex Sans, or Source Sans 3 at the same sizes.

## Agent Prompt Guide

Quick color reference — Text: #ffffff; Background: #1a1a1a; Border: #374151; Accent: #adadad.

1) Build a hero band on #1a1a1a with a centered heading set in Inter Regular 28px/1.2 (headline-lg) and a secondary line in Inter Regular 16px/1.5. Add one primary button (56px height, 21px 16px padding, radius 4px) with background #000704 and text #ffffff.

2) Create a three-tile feature grid. Each tile is a card with background #6c7061, text #ffffff, radius 8px, padding 16px. Use Inter Regular 22px/1.2 for the tile title (headline-sm) and 16px/1.5 for the description (body-md). Space tiles with 24px gaps and the section with 40px top/bottom padding.

3) Add a developer resources panel as a two-column list on #1a1a1a. Each item: title in Inter Regular 18px/1.22 (headline-xs), description in 16px/1.5, and a link-style CTA in #ffffff (radius 0). Separate items with a 1px border in #374151. Section spacing: 40px.

4) Implement a testimonial band on #1a1a1a with body copy in Inter Regular 16px/1.5 and attribution in #848484. Constrain width, add 40px vertical padding, and keep actions link-style only.

## Similar Brands

- Luminar: Dark, engineering-forward lidar site with product imagery; Ouster is sparer and uses more tile navigation.
- Skydio: Hardware-led robotics pages on dark backgrounds; Ouster is more text-light and CTA-disciplined.
- Boston Dynamics: Technical storytelling with restrained color; Ouster leans even harder on link tiles and border-only depth.
- NVIDIA (Autonomous Machines): High-fidelity visuals on dark UI; Ouster's scale is quieter with smaller typographic steps.

More like this

Browse Logistics & Mobility →
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 7 days ago
standardbots.com
Standard Bots AI
Standard Bots
AI-native robots for serious manufacturing—fast, safe, high-ROI.
Homepage · 1 week ago
einride.tech
Einride Climate & Energy
Einride
Driving the Future with Autonomous, Electric, and Digital Freight Solutions
Homepage · 1 week ago
podab.com
Podab Ecommerce
Podab
Gentle, efficient drying cabinets that extend textile lifespan.
Homepage · 1 week ago