# Ubersmith Design System

> Deep indigo foundations punctuated by high-contrast amber actions and geometric Manrope typography.

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

## TL;DR
Ubersmith employs a high-contrast "Dark Mode" aesthetic as its primary identity, utilizing a deep indigo (#150840) for core surfaces and typography. This dark foundation is balanced by a vibrant amber (#f79b34) used exclusively for primary calls to action and critical highlights. The system relies on the geometric sans-serif **Manrope**, often set at significant scale (up to 96px) for data visualization and hero headers. Layouts are structured with generous internal card padding (up to 50px) and a mix of sharp and pill-shaped containers.

## Signature DNA
1. **Indigo-Amber Polarity** (The stark contrast between the deep #150840 background and #f79b34 action color defines the hierarchy across all hero and feature sections.)
2. **Geometric Scale** (Massive 96px Manrope 700 counters used to anchor the "Years of Experience" and "Active Users" sections.)
3. **Softened Containers** (Widespread use of 16px and 18px radii for content cards, contrasting with 100px pill buttons and sharp 0px section transitions.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.foundation.white}` | `#ffffff` | Page background, primary text on dark surfaces | 66 | 1.0 | `--wp--preset--color--white` |
| `{color.foundation.indigo}` | `#150840` | Primary surface background, footer, heading text | 227 | 0.8 | Computed Style |
| `{color.foundation.slate}` | `#333333` | Primary body text on light surfaces | 142 | 0.8 | Computed Style |
| `{color.foundation.mist}` | `#e6eaed` | Secondary section backgrounds, card surfaces | 17 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.amber}` | `#f79b34` | Primary CTA background, active highlights | 77 | 0.8 | Computed Style |
| `{color.accent.purple}` | `#37236f` | Secondary surfaces, gradient transitions | 88 | 0.8 | Computed Style |
| `{color.accent.lavender}` | `#aca3c2` | Secondary buttons, borders, shadow tint | 16 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Manrope | 400, 700 | All headings, body, and UI | Manrope (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 96px | 86.4px | normal | 700 | Statistical counters | `span.elementor-counter-number-prefix` |
| `{type.display.xl}` | 64px | 64px | normal | 700 | Page hero H1 | `h1.elementor-heading-title` |
| `{type.display.lg}` | 48px | 48px | normal | 700 | Section H2 | `h2.elementor-heading-title` |
| `{type.heading.md}` | 32px | normal | normal | 700 | Feature titles | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 30px | normal | 700 | Card sub-titles | `h4.elementor-heading-title` |
| `{type.ui.lg}` | 20px | normal | normal | 400 | Navigation/Large buttons | `a.elementor-button` |
| `{type.body.md}` | 16px | normal | normal | 400 | Default body text | `p` |
| `{type.ui.sm}` | 14px | normal | normal | 400 | Captions, small labels | Noted in secondary UI |

### Principles
1. **Tight Display Leading:** Large display sizes (64px+) use a 1:1 or slightly negative line-height ratio (e.g., 96px size on 86.4px height).
2. **Achromatic Body:** Body text on white backgrounds is strictly #333333, never pure black.
3. **Bold Hierarchy:** Headings are exclusively weight 700; interactive elements and body are weight 400.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 14 |
| `{space.sm}` | 8px | 77 |
| `{space.md}` | 16px | 58 |
| `{space.lg}` | 24px | 30 |
| `{space.xl}` | 50px | 14 |
| `{space.section}` | 114px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers | 388 occurrences |
| `{radius.sm}` | 8px | Feature cards (dark) | 8 occurrences |
| `{radius.md}` | 16px | Content cards | 60 occurrences |
| `{radius.lg}` | 18px | Light grey cards | 14 occurrences |
| `{radius.pill}` | 100px | Primary buttons | 24 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(172, 163, 194, 0.15) 0px 8px 20px 0px` | Floating white cards | 14 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site CTAs (Contact Us, Request Demo)
**Pages observed:** https://ubersmith.com
**Spec:** Background `{color.accent.amber}` (#f79b34) | Text `{color.foundation.indigo}` (#150840) | Radius 100px | Padding 8px 16px | Typography 16px
**States observed:** Default | Hover: Not captured

#### Secondary Button
**Role:** De-emphasized actions (Learn More)
**Pages observed:** https://ubersmith.com
**Spec:** Background `{color.accent.lavender}` (#aca3c2) | Text `{color.foundation.indigo}` (#150840) | Radius 100px | Padding 8px 16px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting core platform features
**Pages observed:** https://ubersmith.com
**Spec:** Background `{color.foundation.indigo}` (#150840) | Text `{color.foundation.white}` (#ffffff) | Radius 8px | Padding 16px
**States observed:** Default

#### Content Card (Light)
**Role:** Industry solutions and blog insights
**Pages observed:** https://ubersmith.com
**Spec:** Background `{color.foundation.mist}` (#e6eaed) | Text `{color.foundation.slate}` (#333333) | Radius 18px | Padding 0px 24px
**States observed:** Default

### Tier 3: Surface-specific

#### Elevated Surface
**Role:** White cards on light backgrounds
**Pages observed:** https://ubersmith.com
**Spec:** Background `{color.foundation.white}` (#ffffff) | Shadow `{shadow.card}` | Radius 16px | Padding 24px
**States observed:** Default

#### Icon Plate
**Role:** Decorative industry icons
**Pages observed:** https://ubersmith.com
**Spec:** Background transparent | Border 1px `{color.foundation.indigo}` (#150840) | Radius 50% | Padding 8px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding (Vertical) | 114px |
| Column Gap | 24px |

## Imagery & decoration
- **Abstract Grids:** Uses dot-matrix and geometric line patterns in the hero background to signal "infrastructure."
- **Grayscale Logos:** Partner logos are displayed in a grayscale filter to maintain brand neutrality.
- **Avoids:** Saturated photography; prefers high-contrast UI mockups or abstract technical textures.

## Do's
- Use `{color.accent.amber}` (#f79b34) for the primary "Contact" or "Request" action.
- Set statistical counters in Manrope 700 at 96px.
- Apply `{radius.md}` (16px) to all white content cards.
- Use `{color.foundation.indigo}` (#150840) for footer backgrounds.
- Maintain 114px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using #000000 for body text. **Right:** Use `{color.foundation.slate}` (#333333). **Reason:** Maintains the "ink on paper" softness against white backgrounds.
- **Wrong:** Applying amber to secondary buttons. **Right:** Use `{color.accent.lavender}` (#aca3c2). **Reason:** Amber is reserved for conversion-critical paths.
- **Wrong:** Using sharp corners for buttons. **Right:** Use 100px pill radius. **Reason:** Buttons must contrast against the sharp 0px section containers.

## Similar brands
- DigitalOcean (Indigo/Blue focus, geometric type)
- Stripe (High-contrast typography, technical patterns)
- Cloudflare (Infrastructure-focused, dark hero sections)

## Quick start

```css
/* CSS Variables */
:root {
  --color-indigo: #150840;
  --color-amber: #f79b34;
  --color-slate: #333333;
  --color-mist: #e6eaed;
  --font-main: 'Manrope', sans-serif;
  --radius-card: 16px;
  --radius-pill: 100px;
  --shadow-subtle: 0px 8px 20px 0px rgba(172, 163, 194, 0.15);
}
```

## Agent prompt examples
- "Generate a hero section with a background of #150840, a 64px Manrope 700 heading in #ffffff, and a pill-shaped CTA button in #f79b34."
- "Create a 3-column grid of cards using #e6eaed background, 18px border radius, and 24px internal padding."
- "Design a statistical highlight component with a 96px Manrope 700 number in #f79b34 and a 16px label in #ffffff."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific navigation transitions were not fully analyzed.
- Form input validation states (Success/Error) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://ubersmith.com | 1440px | 2026-06-06 |