# Blue Origin — Design System
> Aerospace manufacturer and sub-orbital spaceflight services company enabling a future where millions of people live and work in space.
- **Canonical:** https://uiuxskills.com/library/blue-origin
- **Source:** https://www.blueorigin.com/
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-14T04:13:40.625Z

---

---
version: alpha
name: Blue Origin
tagline: For the Benefit of Earth
description: >-
  Aerospace manufacturer and sub-orbital spaceflight services company enabling a future where
  millions of people live and work in space.
tone: Inspiring, technical, precise, and monumental
color-scheme: dark
colors:
  primary: "#264FEE"
  secondary: "#0033DD"
  accent: "#00A3E0"
  background: "#FFFFFF"
  surface: "#111111"
  surface-container: "#1A1A1A"
  surface-bright: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#FFFFFF"
  on-surface-variant: "#DADADA"
  outline: "#FFFFFF"
  divider: "#CCCCCC"
  error: "#FF0000"
typography:
  display-lg:
    fontFamily: fromTheStars
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: 0.05em
  display-md:
    fontFamily: fromTheStars
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: 0.05em
  headline-lg:
    fontFamily: fromTheStars
    fontSize: 30px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0.02em
  headline-md:
    fontFamily: fromTheStars
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: barlow
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.01em
  body-lg:
    fontFamily: barlow
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.6"
    letterSpacing: 0em
  body-md:
    fontFamily: barlow
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: barlow
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: barlow
    fontSize: 14px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.1em
  label-sm:
    fontFamily: barlow
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.1em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 44px
    width: auto
    borderColor: "{colors.outline}"
    outlineOffset: 0px
  button-primary-hover:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 44px
    width: auto
    borderColor: "{colors.surface-bright}"
    outlineOffset: 0px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 44px
    width: auto
    borderColor: "{colors.primary}"
    outlineOffset: 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    height: auto
    width: 100%
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    height: auto
    width: 100%
  input-field:
    backgroundColor: transparent
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    width: 100%
    borderColor: "{colors.outline}"
    outlineOffset: 0px
  input-field-focus:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 48px
    width: 100%
    borderColor: "{colors.primary}"
    outlineOffset: 0px
  link:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
    padding: 0px
    height: auto
    width: auto
  link-hover:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    padding: 0px
    height: auto
    width: auto
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
    height: 24px
    width: auto
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
    height: 24px
    width: auto
  divider:
    backgroundColor: "{colors.divider}"
    padding: 0px
    height: 1px
    width: 100%
  header:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
    padding: 0px 24px
    height: 64px
    width: 100%
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.2)
---

## Overview

The visual identity of Blue Origin is futuristic, technical, and highly structured, reflecting its mission of space exploration. It pairs high-contrast, full-bleed space imagery with sharp, zero-radius geometric elements and a bold, technical color palette. The resulting aesthetic feels inspiring, precise, and monumental, conveying the scale of aerospace engineering.

## Colors

The color strategy utilizes a high-contrast palette optimized for dark-mode rendering, representing the deep void of space and the technical precision of aerospace hardware. Deep blues and bright cyan accents punctuate a dark canvas, while crisp white and light gray elements ensure absolute legibility.

*   **Primary (`{colors.primary}`) (#264FEE):** The signature bright blue used for primary interactive highlights and brand accents.
*   **Secondary (`{colors.secondary}`) (#0033DD):** A deeper blue used for text links and secondary brand elements.
*   **Accent (`{colors.accent}`) (#00A3E0):** A light cyan/blue accent color used for highlights and badges.
*   **Background (`{colors.background}`) (#FFFFFF):** The primary light background color for content sections.
*   **Surface (inferred) (`{colors.surface}`) (#111111):** A dark surface color used for immersive hero sections and dark mode blocks.
*   **Surface Container (inferred) (`{colors.surface-container}`) (#1A1A1A):** A slightly lighter dark surface for container elements.
*   **Surface Bright (`{colors.surface-bright}`) (#FFFFFF):** A bright surface variant used for high-contrast interactive elements.
*   **On Primary (inferred) (`{colors.on-primary}`) (#FFFFFF):** High-contrast white text used on primary blue backgrounds.
*   **On Surface (`{colors.on-surface}`) (#FFFFFF):** White text used on dark surface backgrounds.
*   **On Surface Variant (`{colors.on-surface-variant}`) (#DADADA):** A light gray text color used for secondary labels and input placeholders.
*   **Outline (`{colors.outline}`) (#FFFFFF):** White outline color used for transparent button borders and input fields.
*   **Divider (`{colors.divider}`) (#CCCCCC):** A light gray divider color for separating content sections.
*   **Error (`{colors.error}`) (#FF0000):** Standard red color used for error states and critical alerts.

## Typography

The typography system pairs the futuristic, geometric display face `fromTheStars` with the clean, highly legible technical sans-serif `barlow`. This pairing balances monumental, high-impact messaging with precise, readable technical data.

*   **Display Large (`{typography.display-lg}`):** Futuristic display font used for main hero headlines.
*   **Display Medium (inferred) (`{typography.display-md}`):** Medium display font used for secondary hero titles.
*   **Headline Large (inferred) (`{typography.headline-lg}`):** Large headline font used for section titles.
*   **Headline Medium (`{typography.headline-md}`):** Medium headline font used for sub-sections.
*   **Headline Small (`{typography.headline-sm}`):** Small headline font used for technical features.
*   **Body Large (`{typography.body-lg}`):** Large body copy font for introductory paragraphs.
*   **Body Medium (`{typography.body-md}`):** Standard body copy font for general reading.
*   **Body Small (inferred) (`{typography.body-sm}`):** Small body copy font for captions and technical specs.
*   **Label Medium (`{typography.label-md}`):** Uppercase label font used for buttons and navigation items.
*   **Label Small (inferred) (`{typography.label-sm}`):** Small uppercase label font for metadata and badges.

## Layout

*   The layout is structured around full-bleed, immersive sections that prioritize high-impact visual storytelling.
*   A standard header height of 64px establishes the top navigation boundary.
*   Vertical rhythm relies on generous spacing, utilizing `{spacing.2xl}` between major content blocks to let photographic assets breathe.
*   The observed page pattern follows a strict top-to-bottom flow: `nav` -> `hero` -> `features` -> `footer`.
*   Hero sections feature a full-screen background (video or high-resolution imagery) with left-aligned, bold, uppercase display typography and a single outlined call-to-action button.
*   Responsive layouts adapt mobile-first, collapsing the top navigation into a clean drawer and scaling full-bleed hero sections to portrait aspect ratios.

## Elevation & Depth

Depth is primarily conveyed through high-contrast color overlays and full-bleed imagery rather than shadows, maintaining a flat, technical interface. The minimal elevation scale is reserved for interactive elements and containers:

*   `elevation.sm` — Subtle card lift and interactive element hover states.
*   `elevation.md` — Dropdown menus, popovers, and secondary container layering.
*   `elevation.lg` — Modals, drawer overlays, and high-priority floating elements.

## Shapes

The shape philosophy is defined by extreme technical precision, utilizing a sharp, zero-radius aesthetic across almost all components. The tokens `{rounded.sm}`, `{rounded.md}`, `{rounded.lg}`, and `{rounded.xl}` are all set to `0px` to reinforce an uncompromising, aerospace engineering feel.

The only exception to this rigid geometric rule is `{rounded.full}`, which is set to `9999px` and reserved exclusively for pill-shaped utility elements like badges and status indicators, ensuring they stand out clearly against the sharp grid.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary

The primary action button features a transparent background with a solid white border defined by `{colors.outline}`. It uses `{typography.label-md}` for uppercase, high-contrast text and has a sharp `{rounded.sm}` profile. Use this as the default call to action over dark photographic backgrounds.

### button-primary-hover

On hover, the primary button transitions to a solid `{colors.surface-bright}` background with `{colors.secondary}` text. The shape remains sharp with `{rounded.sm}` to maintain the technical aesthetic.

### button-secondary

The secondary button utilizes a solid `{colors.primary}` blue background with `{colors.on-primary}` white text. It is used for secondary actions within content blocks that require distinct visual separation from the primary hero actions.

### card

A flat container utilizing `{colors.surface}` as its background and `{colors.on-surface}` for text. It features a sharp `{rounded.md}` profile and `{spacing.lg}` padding, making it ideal for grouping technical specifications or feature lists.

### card-elevated

An elevated container utilizing `{colors.surface-container}` to stand out slightly from the base background. It uses `{rounded.md}` and `{spacing.lg}` padding, providing a subtle layer of depth for interactive content blocks.

### input-field

A technical text input with a transparent background, `{colors.outline}` border, and `{colors.on-surface-variant}` text. It uses `{typography.body-md}` and a sharp `{rounded.sm}` shape to align with the overall geometric system.

### input-field-focus

When active, the input field transition highlights the border with `{colors.primary}` and shifts the text color to `{colors.on-surface}` for maximum clarity during data entry.

### link

A text link utilizing `{colors.secondary}` and `{typography.body-md}`. Used for inline navigation and secondary technical resources.

### link-hover

On hover, the text link transitions to the brighter `{colors.primary}` to provide clear interactive feedback.

### badge

A pill-shaped status indicator utilizing `{colors.accent}` background, `{colors.on-primary}` text, and `{rounded.full}`. Use this to highlight technical metadata, active statuses, or categories.

### badge-error

A pill-shaped alert indicator utilizing `{colors.error}` background, `{colors.on-primary}` text, and `{rounded.full}`. Reserved strictly for critical errors, system alerts, or failed states.

### divider

A thin, high-contrast horizontal rule utilizing `{colors.divider}` with a height of `1px`. Use this to separate distinct technical content sections.

### header

The main navigation bar utilizing `{colors.background}` background and `{colors.secondary}` text. It has a fixed height of `64px` and horizontal padding of `{spacing.lg}`.

### swatch-outline

A utility outline swatch utilizing `{colors.outline}` and `{rounded.sm}` with a fixed size of `32px`. Used for technical color indicators and UI borders.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Apply `{typography.display-lg}` in uppercase for high-impact hero headlines. | Never apply `{typography.display-lg}` to body copy or long paragraphs. |
| Maintain a sharp `{rounded.sm}` border radius on all buttons and input fields to preserve the technical aesthetic. | Do not use rounded corners on `{components.button-primary}` or `{components.input-field}`. |
| Use `{colors.primary}` for primary interactive highlights and brand accents. | Avoid using `{colors.secondary}` on dark backgrounds without verifying contrast ratios. |
| Separate technical content sections using a subtle `{components.divider}`. | Do not introduce heavy drop shadows on `{components.card}` elements, keeping the design flat. |
| Maintain generous spacing using `{spacing.2xl}` between major content blocks to prevent clutter. | Do not crowd elements with `{spacing.xs}` or `{spacing.sm}` when separating major sections. |
| Use `{components.button-primary}` with a transparent background and white border for primary hero actions. | Do not use `{components.button-secondary}` as the default hero action over photographic backgrounds. |
| Apply `{colors.on-surface}` to text elements over dark `{colors.surface}` backgrounds to ensure legibility. | Do not use `{colors.on-surface-variant}` for primary body copy where high contrast is required. |
| Use `{components.badge}` with `{rounded.full}` and `{colors.accent}` for technical metadata and status highlights. | Do not use `{rounded.sm}` on badges, as pill shapes are reserved for status indicators. |

## Content Style

*   **CTA Style:** Call-to-action labels must be imperative, direct, and uppercase. Keep them short and action-oriented (e.g., "OUR MISSION", "REPLAY", "EXPLORE ENGINES") to drive immediate engagement.
*   **Heading Tone:** Headlines must be inspiring, futuristic, and mission-driven. Use bold, uppercase display typography to convey a monumental scale and sense of purpose.
*   **Copy Density:** Maintain minimal copy density. The layout relies heavily on full-screen visual storytelling, short headlines, and a single clear call to action per section rather than dense paragraphs.

## Imagery & Icons

The brand relies on high-contrast, professional photography of Earth from space, rocket launches, and advanced engineering hardware. Imagery must be full-bleed, immersive, and highly technical. Graphic elements and icons should remain minimal, sharp, and secondary to the photographic assets, avoiding complex illustrations or non-essential decorative graphics.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Blue Origin, an inspiring, technically precise aerospace brand with a monumental, enterprise dark-mode aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every color, typography, spacing, and radius value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{spacing.2xl}` — never hardcode hex values, pixel sizes, or font names.
2. Respect only the components listed under `components:` — `button-primary`, `card`, `input-field`, `badge`, etc. Do not invent variants the spec doesn't define.
3. All border radii are `{rounded.sm}` (0px). The only exception is `{rounded.full}` where explicitly specified. Never soften corners; the zero-radius aesthetic is non-negotiable.
4. Apply the Layout notes: use full-bleed sections, a 64px header, and `{spacing.2xl}` between major content blocks to let imagery breathe.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — rounded buttons, heavy shadows, dense copy — surface the conflict before proceeding.

## Output contract

**Must:**
- Use named tokens for every visual property.
- Cover hover, focus, and disabled states for `button-primary`, `input-field`, and `link` per the spec.
- Apply `{typography.display-lg}` in uppercase only for hero headlines, never body copy.
- Use `{colors.on-surface}` for text on dark backgrounds; verify contrast before using `{colors.secondary}` on dark surfaces.
- Match CTA copy style: imperative, uppercase, short, per the Voice and Content section.

**Must NOT:**
- Invent colors, fonts, or radii absent from the spec.
- Apply drop shadows to `{components.card}` — the design is flat.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or extend existing headings, navigation labels, routes, or page copy.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If a token is undefined, ask the user before inventing a value.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on them, `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px.
- If a source design file or theme contradicts an inferred token here, the authoritative source takes precedence.