# Omnifederal Design System

> High-contrast mission-critical interface pairing deep obsidian voids with electric violet and sky-blue accents.

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

## TL;DR
Omnifederal utilizes a high-contrast "monochrome-plus" system where a foundation of pure black (#000000) and white (#ffffff) is energized by a specific palette of electric blue (#638cfc) and deep violet (#7e1ff0). The typography is exclusively Montserrat, leaning heavily on semi-bold (600) and bold (700) weights for technical authority. Layouts alternate between stark white information-heavy sections and immersive dark-mode hero bands. Components are characterized by sharp geometry (0px radius) or very tight 3px rounded corners, signaling a precise, engineering-led aesthetic.

## Signature DNA
1. **The Obsidian/Violet Gradient Shift** (A signature transition from deep black surfaces to violet #7e1ff0 footers and accents, observed on the homepage and about page).
2. **Technical Montserrat Stacking** (Heavy use of Montserrat at 600 weight with tight -2px letter spacing for display headers, creating a "compressed power" look).
3. **Sharp-Edge Framing** (Preference for 0px or minimal 3px radii on buttons and containers, avoiding the "softness" of consumer SaaS).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.black}` | `#000000` | Primary background, display text | 104 | 1.0 | `--wp--preset--color--black` |
| `{colors.white}` | `#ffffff` | Primary canvas, button text | 187 | 1.0 | `--wp--preset--color--white` |
| `{colors.gray-dark}` | `#444444` | Secondary body text | 232 | 0.8 | computed_style |
| `{colors.canvas-alt}` | `#e2e2e2` | Section background | 3 | 1.0 | `--wp-editor-canvas-background` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#638cfc` | Links, active nav, primary accents | 24 | 0.8 | computed_style |
| `{colors.secondary}` | `#7e1ff0` | Footer background, brand gradients | 11 | 0.8 | computed_style |
| `{colors.accent-purple}` | `#9b51e0` | Decorative tokens | 5 | 0.6 | `--wp--preset--color--vivid-purple` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 400, 500, 600, 700, 800 | All Display, Body, UI | Montserrat (Google Fonts) | SIL OFL |
| WebSocialFonts | 400 | Iconography | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 45px | 45px | normal | 600 | Hero headers | `b` |
| `{type.h1}` | 42px | 50.4px | -2px | 600 | Section titles | `h1.wp-block-heading` |
| `{type.subheading}` | 19px | 19px | normal | 700 | Component heads | `h2.elementor-heading-title` |
| `{type.body-lg}` | 18px | 28.8px | normal | 400 | Main body copy | `header.elementor-16` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Secondary body | `section.elementor-top-section` |
| `{type.button}` | 15px | 15px | 3px | 500 | CTA buttons | `div.elementor-slide-button` |
| `{type.nav}` | 14px | 14px | normal | 500 | Navigation links | `a.hfe-menu-item` |
| `{type.caption}` | 12px | 12px | normal | 600 | Small CTAs | `a.elementor-button` |

### Principles
1. **Heavy Display Weights:** Headlines never drop below 600 weight.
2. **Negative Tracking on Display:** Large headers (42px+) use -2px letter spacing to increase visual density.
3. **Wide Tracking on Buttons:** Small button text (15px) uses 3px letter spacing for technical legibility.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 12px | 12 |
| `{space.md}` | 24px | 12 |
| `{space.lg}` | 30px | 22 |
| `{space.xl}` | 50px | 3 |
| `{space.section}` | 114px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sections, Cards, Panels | 326 occurrences |
| `{radius.sm}` | 3px | Inputs, Buttons | 18 occurrences |
| `{radius.md}` | 8px | Interactive Cards | 41 occurrences |
| `{radius.full}` | 50px | Large pill containers | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.2) 0px 0px 1.5px 0px` | Interactive Cards | 41 occurrences |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 10px 20px 0px` | Floating surfaces | 2 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://omnifederal.com
**Spec:** Background: transparent / Text: #ffffff / Border: 2px #ffffff / Radius: 3px / Padding: 12px 24px / Typography: 15px Montserrat 500
**States observed:** Default | Hover: Captured (border remains white)

#### Surface
**Role:** Sectional containment
**Pages observed:** https://omnifederal.com, https://omnifederal.com/about
**Spec:** Background: #ffffff / Text: #444444 / Radius: 0px / Padding: 15px 0px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Card
**Role:** Feature display
**Pages observed:** https://omnifederal.com
**Spec:** Background: #ffffff / Text: #444444 / Radius: 8px / Shadow: `{shadow.subtle}`
**States observed:** Default: Captured

#### Dark Surface
**Role:** Hero and high-impact sections
**Pages observed:** https://omnifederal.com
**Spec:** Background: #2a2a2a / Text: #ffffff / Radius: 0px / Padding: 70px 0px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site closure
**Pages observed:** https://omnifederal.com, https://omnifederal.com/about
**Spec:** Background: #7e1ff0 / Text: #ffffff / Radius: 0px / Typography: 18px Montserrat
**States observed:** Default: Captured

#### Navigation Active State
**Role:** Current page indicator
**Pages observed:** https://omnifederal.com/about
**Spec:** Background: #638cfc / Text: #ffffff / Radius: 0px / Padding: 15px 20px (approx)
**States observed:** Active: Captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 114px (vertical) |
| Grid | 4-column (desktop feature grid) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero headers stack; padding reduces to 30px; 4-column grids become 1-column stacks. |

## Imagery & decoration
Omnifederal uses high-resolution photography of military/technical personnel and abstract "digital" motifs (circuitry patterns, glass spheres). Decoration is limited to the blue-to-violet gradient and small circular pagination dots in violet.

## Do's
- Use Montserrat 600 for all section headings.
- Maintain a stark contrast between #000000 and #ffffff surfaces.
- Apply 3px border radius to primary buttons.
- Use #638cfc for all interactive text links.
- Set letter-spacing to 3px for all uppercase button labels.

## Don'ts
- **Wrong:** Using #0693e3 (Vivid Cyan Blue) as the primary brand color. **Right:** Use #638cfc. **Reason:** #0693e3 is a legacy WP token; #638cfc is the active brand primary.
- Do not use rounded corners larger than 8px for cards.
- Do not use serif fonts; the system is strictly Montserrat.
- Avoid using #444444 on black backgrounds; use #ffffff for all text on dark surfaces.

## Similar brands
- Palantir
- Anduril
- Lockheed Martin
- Raytheon

## Quick start

### CSS Custom Properties
```css
:root {
  --omni-black: #000000;
  --omni-white: #ffffff;
  --omni-primary: #638cfc;
  --omni-secondary: #7e1ff0;
  --omni-text-main: #444444;
  --omni-radius-sm: 3px;
  --omni-font-family: 'Montserrat', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #638cfc;
  --color-secondary: #7e1ff0;
  --color-obsidian: #000000;
  --font-montserrat: "Montserrat";
  --radius-button: 3px;
  --shadow-subtle: 0 0 1.5px 0 rgba(0, 0, 0, 0.2);
}
```

## Known gaps
- Hover states for navigation items were not explicitly captured in the computed style logs.
- Tablet-specific breakpoints (768px-1024px) were not analyzed.
- Form validation states (Error/Success) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://omnifederal.com | 1440px | 2026-06-06 |
| About | https://omnifederal.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://omnifederal.com | 390px | 2026-06-06 |