# Xometry Design System

> Industrial precision meets digital agility through a high-contrast navy and electric blue palette anchored by Open Sans.

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

## TL;DR
Xometry utilizes a "monochrome-plus" system where a deep industrial navy `#092c47` provides the structural foundation, while a vibrant electric blue `#0e6aed` signals interactivity. The interface is characterized by high-density information layouts, sharp `0px` or soft `8px` geometry, and a strict reliance on **Open Sans** across all hierarchies. White space is functional rather than editorial, supporting a utilitarian "manufacturing-on-demand" aesthetic. Primary actions are consistently rendered in electric blue, while secondary information and footers retreat into the deep navy or neutral grays.

## Signature DNA
1. **The Industrial Anchor** (Deep navy `#092c47` used for primary text and footer backgrounds to establish manufacturing authority; seen on all pages).
2. **Action Electric** (Electric blue `#0e6aed` used exclusively for primary CTAs and links to drive conversion against the dark anchor; seen on all pages).
3. **Utility Typography** (Open Sans used from 12px captions to 48px display headers, prioritizing legibility over stylistic flair).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, card surface, button text | 188 | 1 | `--color-xom-white` |
| `{colors.navy}` | `#092c47` | Primary text, footer background, dark headers | 186 | 1 | `--color-xom-primary` |
| `{colors.black}` | `#000000` | High-contrast text | 66 | 1 | `--color-black` |
| `{colors.gray-light}` | `#f5f5f5` | Section backgrounds, subtle borders | 45 | 1 | `--color-xom-light-grey` |
| `{colors.border-muted}` | `#d9d9d9` | Default component borders | 27 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.blue-action}` | `#0e6aed` | Primary button background, text links | 95 | 1 | `--color-xom-link` |
| `{colors.navy-deep}` | `#031a6d` | Decorative text emphasis | 49 | 1 | `--color-xom-navy` |
| `{colors.blue-secondary}` | `#3c89e8` | Secondary text/icons | 20 | 0.8 | Computed |
| `{colors.yellow-accent}` | `#ffc118` | Warning/Highlight (decorative_only) | 2 | 1 | `--color-xom-yellow-100` |
| `{colors.micro-copy}` | `#476175` | Deemphasized metadata (decorative_only) | 2 | 1 | `--color-xom-micro-copy` |

### Semantic
- **Error:** `#f5222d` (Observed in text validation)
- **Success:** `#13bf87` (Declared as `--color-xom-green-100`)

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 300, 400, 500, 600, 700 | All (Display, Heading, Body, UI) | N/A (Open Source) | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 60px | normal | 600 | Homepage hero | `h1` |
| `{type.h2}` | 30px | 38px | normal | 700 | Section headers | `h2.ant-typography` |
| `{type.h3}` | 24px | 32px | normal | 700 | Sub-section titles | `h3.ant-typography` |
| `{type.h4}` | 20px | 28px | normal | 700 | Card titles | `h4.ant-typography` |
| `{type.subheading}` | 16px | 25px | normal | 500 | Feature labels | `h4` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard prose | `p` |
| `{type.body-sm}` | 14px | 22px | normal | 400 | UI labels, footer | `span.ant-typography` |
| `{type.caption}` | 12px | 18px | normal | 400 | Metadata, secondary | `span.ant-typography-secondary` |

### Principles
1. **Weight for Hierarchy:** Boldness (600-700) is strictly reserved for headers and primary navigation labels.
2. **Standard Tracking:** No custom letter-spacing is applied; the system relies on Open Sans's native metrics.
3. **High Density:** Line heights are kept tight (approx 1.2x to 1.5x) to accommodate technical content.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 15 |
| `{space.sm}` | 8px | 9 |
| `{space.md}` | 16px | 54 |
| `{space.lg}` | 24px | 38 |
| `{space.xl}` | 32px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Primary Buttons, Section Containers | Component Spec |
| `{radius.input}` | 6px | Form Fields | Radii evidence |
| `{radius.md}` | 8px | Cards, Secondary Buttons | Radii evidence |
| `{radius.pill}` | 9999px | Badges, Tags | Radii evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Standard cards and sections | Component Spec |
| `{shadow.raised}` | `0 6px 16px rgba(0,0,0,0.08)` | Hovered cards, dropdowns | Shadows evidence |

## Components

### Tier 1: Foundational

#### Button (Primary)
**Role:** Main call to action (e.g., "Get an Instant Quote")
**Pages observed:** pricing, about
**Spec:** Background `{colors.blue-action}` (#0e6aed) / Text `{colors.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 0px 11px
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Form entry
**Pages observed:** homepage
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.border-muted}` (#d9d9d9) / Radius `{radius.input}` (6px) / Padding 4px 11px

### Tier 2: Patterns

#### Card (Standard)
**Role:** Content grouping
**Pages observed:** pricing, about
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `rgba(128, 126, 163, 0.8)` / Radius `{radius.md}` (12px) / Padding 16px

#### Card (Elevated)
**Role:** Interactive feature cards
**Pages observed:** homepage
**Spec:** Background `{colors.blue-action}` (#0f5dcc) / Shadow `{shadow.raised}` / Radius `{radius.md}` (8px)

### Tier 3: Surface-specific

#### Footer
**Role:** Site navigation and legal
**Pages observed:** homepage
**Spec:** Background `{colors.navy}` (#092c47) / Text `{colors.white}` (#ffffff) / Border-top 1px `{colors.border-muted}` (#d9d9d9) / Padding 12px 0px

#### Surface Section
**Role:** Page layout bands
**Pages observed:** pricing, about
**Spec:** Background `{colors.white}` (#ffffff) / Padding 64px 16px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 64px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px. |
| Desktop | 1440px | Multi-column grid (up to 4 columns for cards). |

## Imagery & decoration
- **Technical Graphics:** Uses isometric 3D illustrations (e.g., the "Oops" robot) and technical line icons.
- **Photography:** High-quality macro shots of machined parts (metal, plastic) to emphasize precision.
- **Avoids:** Soft gradients, organic shapes, or whimsical decorative elements.

## Do's
- Use `#0e6aed` for all primary conversion paths.
- Apply `Open Sans` weight 700 for all section headers.
- Maintain a high-contrast ratio (minimum 14:1) for text on white backgrounds.
- Use `0px` radius for primary buttons to signal industrial rigidity.
- Use `#f5f5f5` for alternating section backgrounds to define page rhythm.

## Don'ts
- **Wrong:** Using a light blue for primary buttons. **Right:** Use `#0e6aed`. **Reason:** Light blue is reserved for secondary backgrounds or decorative tokens.
- Do not use serif fonts; the system is strictly sans-serif.
- Do not apply shadows to standard layout cards unless they are interactive/hovered.
- Do not use `#ffc118` (Yellow) for text; it is a decorative/border accent only.
- Do not exceed 16px padding on mobile containers.

## Similar brands
- Protolabs
- Fast Radius
- McMaster-Carr
- Grainger

## Quick start

```css
/* CSS Variables */
:root {
  --xom-navy: #092c47;
  --xom-blue-action: #0e6aed;
  --xom-white: #ffffff;
  --xom-gray-light: #f5f5f5;
  --font-main: 'Open Sans', sans-serif;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "brand": {
      "primary": { "value": "#092c47" },
      "action": { "value": "#0e6aed" }
    },
    "surface": {
      "base": { "value": "#ffffff" },
      "muted": { "value": "#f5f5f5" }
    }
  }
}
```

## Agent prompt examples
- "Create a primary action button using Xometry's electric blue #0e6aed, white text, and a sharp 0px border radius."
- "Design a content card with a 12px border radius, white background, and a 1px border using #d9d9d9."
- "Generate a section header using Open Sans at 30px, weight 700, in Xometry navy #092c47."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Specific tablet breakpoints (768px-1024px) were not analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://xometry.com | 1440px | 2026-06-06 |
| Pricing | https://xometry.com/pricing | 1440px | 2026-06-06 |
| About | https://xometry.com/about | 1440px | 2026-06-06 |