# Vital.enterprises Design System

> High-contrast industrial interface utilizing deep obsidian canvases, technical condensed typography, and electric blue precision accents.

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

## TL;DR
Vital.enterprises employs a "Dark Industrial" aesthetic, leaning heavily on a primary background of `#0b0c0d` (Main BG) and `#1d1f2b` (Card BG). The system is anchored by **Saira Semi Condensed**, a technical typeface that provides an engineered feel to display headers, paired with **Open Sans** for high-legibility body content. The primary brand voltage is delivered via `#4c84f3` (Vital Blue), used strictly for interactive signals like focus states, active tabs, and icon accents. Geometry is characterized by extreme pill-shaped containers (radii up to 100px) and high-contrast white-on-dark text hierarchies.

## Signature DNA
1. **Technical Condensation** (Saira Semi Condensed at weights 100-300 for display headers creates a precision-engineered atmosphere; observed on Homepage and Pricing).
2. **Deep Space Layering** (The use of `#0b0c0d` as a base floor with `#1d1f2b` elevated cards creates functional depth without traditional drop shadows; observed on Pricing cards).
3. **Electric Precision Accents** (Vital Blue `#4c84f3` is reserved for "active" state signals—borders, icons, and focus rings—rather than large surface fills; observed across all analyzed pages).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--main-bg` | `#0b0c0d` | Primary page background, header, and tooltips | 7 | 1 | Computed Style |
| `--secondary-background-color` | `#1d1f2b` | Card surfaces and hover states | 76 | 1 | Computed Style |
| `--primary-foreground-color` | `#ffffff` | Primary text, titles, and button outlines | 478 | 1 | Computed Style |
| `--unobtrusive-color` | `#aaaaaa` | Footnotes, meta-text, and disabled states | 10 | 1 | Computed Style |
| `--hero-overlay-video-bg` | `#000000` | Button backgrounds and video overlays | 49 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--primary-accent-color` | `#4c84f3` | Links, active tabs, focus borders, and icons | 141 | 1 | Computed Style |
| `--error-color` | `#fa8072` | Form validation error text and borders | 2 | 0.8 | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Saira Semi Condensed | 100, 300, 400, 600 | Display and Section Headings | Saira Semi Condensed (Google) | OFL |
| Open Sans | 400, 600, 700 | Body, Buttons, Navigation | Open Sans (Google) | OFL |
| FontAwesome | 400 | UI Icons and Arrows | FontAwesome | Commercial/OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{typography.display-xl}` | 40px | 52px | 2px | 300 | Hero H1 | `h1` |
| `{typography.display-lg}` | 32px | 41.6px | 1.6px | 300 | Section Headers | `h1` |
| `{typography.heading-md}` | 30px | 45px | normal | 300 | Sub-section Headers | `h2` |
| `{typography.heading-sm}` | 28px | 40px | 2px | 300 | Pricing labels | `span` |
| `{typography.body-lg}` | 20px | 20px | normal | 400 | Nav Dropdowns | `a.dropdown-toggle` |
| `{typography.body-md}` | 16px | 25.6px | normal | 400 | Default Paragraph | `p` |
| `{typography.body-strong}` | 16px | 25.6px | normal | 700 | Bold Emphasis | `strong` |
| `{typography.body-sm}` | 14px | 20px | normal | 400 | List items | `li` |
| `{typography.caption}` | 13px | 20.48px | normal | 400 | Footnotes | `p.footnote` |

### Principles
1. **Wide Tracking for Display**: Saira Semi Condensed headers at 40px utilize 2px letter spacing to maintain "engineered" legibility.
2. **Lightweight Display**: Primary headers prefer weight 300 over bold weights to maintain a sophisticated industrial feel.
3. **High Contrast Body**: Body text is almost exclusively `#ffffff` on `#0b0c0d`, maintaining a minimum 15:1 contrast ratio for readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{spacing.xs}` | 4px | 6 |
| `{spacing.sm}` | 12px | 82 |
| `{spacing.base}` | 16px | 124 |
| `{spacing.lg}` | 20px | 14 |
| `{spacing.xl}` | 32px | 8 |
| `{spacing.section}` | 120px | 23 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers, sharp surfaces | 553 occurrences |
| `{radius.sm}` | 4px | Cards, small surface containers | 38 occurrences |
| `{radius.lg}` | 24px | Floating UI panels | 3 occurrences |
| `{radius.pill}` | 40px | Primary buttons, search inputs | 20 occurrences |
| `{radius.full}` | 100px | Pricing tier headers, large CTAs | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elevation.flat}` | none | Default cards and surfaces | Pricing cards |
| `{elevation.glow}` | `rgb(0, 0, 0) 0px 0px 20px 0px` | Hero content cards | Homepage hero |
| `{elevation.soft}` | `rgb(204, 204, 204) 0px 0px 10px 1px` | Light-themed pricing CTAs | Pricing page |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTAs (Launch App, Get a Demo)
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `rgba(0, 0, 0, 0.4)` / Text: `#ffffff` / Border: `2px #ffffff` / Radius: `40px` / Padding: `15px 25px` / Typography: `Open Sans 18px`
**States observed:** Default | Hover: `Background #000000` | Focus: Not captured

#### Text Input
**Role:** Newsletter and Contact form fields
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `rgba(0, 0, 0, 0.4)` / Text: `#ffffff` / Border: `2px #ffffff` / Radius: `28px` / Padding: `16px 16px 16px 64px`
**States observed:** Default | Focus: `Border #4c84f3` | Active: Not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Tiered service selection
**Pages observed:** Pricing
**Spec:** Background: `#1d1f2b` / Text: `#ffffff` / Border: `0px` / Radius: `4px` / Padding: `0px` / Shadow: `none`
**States observed:** Default | Hover: Not captured

#### Floating UI Panel
**Role:** Overlay information or video player controls
**Pages observed:** Homepage, About
**Spec:** Background: `rgba(11, 12, 13, 0.7)` / Text: `#ffffff` / Border: `2px #ffffff` / Radius: `24px` / Padding: `10px 12px`
**States observed:** Default | Active: Not captured

### Tier 3: Surface-specific

#### Pricing Header Pill
**Role:** Distinctive tier labeling within pricing tables
**Pages observed:** Pricing
**Spec:** Background: `#4c84f3` / Text: `#ffffff` / Border: `0px` / Radius: `100px` / Padding: `12px 30px`
**States observed:** Default | Hover: `Background #4c84f3` (active state)

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1170px (standard container) |
| Section Padding | 120px - 140px (vertical) |
| Grid Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Nav collapses to Hamburger; Section padding reduces to 64px; H1 size reduces to 32px. |
| Desktop | > 1024px | Standard 12-column grid; 120px section spacing. |

## Imagery & decoration
Vital uses high-contrast industrial photography (AR headsets, factory floors) with dark overlays. Decorative elements include subtle geometric patterns (hexagonal mesh) in the background of `#0b0c0d` sections. Avoids bright, multi-color illustrations or rounded "friendly" iconography.

## Do's
- Use **Saira Semi Condensed** weight 300 for all primary section headers.
- Reserve **Vital Blue** `#4c84f3` for interactive signals and active states only.
- Apply a **2px white border** to all primary rounded buttons on dark backgrounds.
- Maintain a **pill radius** (28px-40px) for all form inputs and action buttons.
- Use `#1d1f2b` for card surfaces to distinguish them from the `#0b0c0d` page floor.

## Don'ts
- **Wrong:** Using `#4c84f3` as a large section background. **Right:** Use `#0b0c0d`. **Reason:** The brand relies on dark-mode immersion; blue is an accent, not a foundation.
- **Wrong:** Setting display headers in Open Sans. **Right:** Use Saira Semi Condensed. **Reason:** Open Sans lacks the technical "engineered" signature of the brand.
- **Wrong:** Using standard 4px or 8px radius for buttons. **Right:** Use 40px (pill). **Reason:** The brand's component language is strictly pill-shaped.

## Similar brands
- Tesla (Industrial dark mode, technical type)
- SpaceX (High-contrast, utilitarian typography)
- Palantir (Dark canvas, precision-accented UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --vital-bg-main: #0b0c0d;
  --vital-bg-card: #1d1f2b;
  --vital-blue-accent: #4c84f3;
  --vital-text-primary: #ffffff;
  --vital-text-muted: #aaaaaa;
  --vital-font-display: 'Saira Semi Condensed', sans-serif;
  --vital-font-body: 'Open Sans', sans-serif;
  --vital-radius-pill: 40px;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-brand-main: #0b0c0d;
  --color-brand-card: #1d1f2b;
  --color-brand-accent: #4c84f3;
  --font-display: "Saira Semi Condensed";
  --font-body: "Open Sans";
  --radius-pill: 40px;
}
```

## Agent prompt examples
- "Create a pricing card using the Vital.enterprises theme: background #1d1f2b, white text, and a pill-shaped button with a 2px white border."
- "Generate a hero section with a #0b0c0d background, a Saira Semi Condensed H1 at 40px with 2px letter spacing, and a Vital Blue #4c84f3 active tab."
- "Design a contact form input with a 28px border radius, 2px white border, and a #4c84f3 focus state."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the computed style logs.
- Mobile-specific typography tokens for H2-H5 were not fully sampled.
- Success semantic color was not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://vital.enterprises | Desktop 1440 | 2026-06-06 |
| Pricing | https://vital.enterprises/pricing | Desktop 1440 | 2026-06-06 |
| About | https://vital.enterprises/about | Desktop 1440 | 2026-06-06 |