# Sovereignsolutionscorp Design System

> High-contrast utility surfaces defined by deep navy voids and sharp orange functional banners.

**Source:** [https://sovereignsolutionscorp.com](https://sovereignsolutionscorp.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Sovereignsolutionscorp utilizes a high-contrast, "dark mode" default aesthetic anchored by a deep navy canvas (`#101c36`). The system is characterized by its extreme structural rigidity, employing a `0px` border radius across all primary containers and banners. Functional highlights are delivered through a saturated orange (`#f49300`) used for global banners, while primary interactive links leverage a classic web-safe blue (`#0000ee`). Typography is functional and unadorned, relying on Roboto and generic sans-serif stacks at a base 16px scale.

## Signature DNA
1. **The Navy Void** (The background is defined by `--blue` (`#101c36`), creating a high-density dark environment for all content cards and text.)
2. **Zero-Radius Rigidity** (A strict `0px` border radius policy is applied to all banners and structural surfaces, creating a sharp, industrial silhouette.)
3. **Orange Utility Header** (A persistent `#f49300` banner acts as the primary navigational anchor and "sale" indicator across the domain.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| N/A | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--blue` | `#101c36` | Primary page background / Canvas | 3 | 1.0 | Declared token |
| `foundation-white` | `#ffffff` | Primary text and stroke color | 3 | 1.0 | Computed style |
| `foundation-black` | `#000000` | Secondary text on light surfaces | 3 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `accent-orange` | `#f49300` | Global banner surface / Utility | 3 | 0.6 | Computed style |
| `accent-blue` | `#0000ee` | Primary link color / Interactive | 3 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400 | UI Labels, Banners | Roboto | Apache 2.0 |
| sans-serif | 400 | Body, Links | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `text-display` | 32px | normal | normal | 400 | Main header | `h1` |
| `text-heading` | 24px | normal | normal | 400 | Section titles | `h2` |
| `text-body` | 16px | normal | normal | 400 | Links, body copy | `a` |
| `text-ui-sm` | 14px | normal | normal | 400 | Banner text | `div.sale_banner_orange_wide` |
| `text-label` | 13px | normal | normal | 400 | Metadata | `span` |
| `text-caption` | 12px | normal | normal | 400 | Footer links | `footer a` |
| `text-xs` | 10px | normal | normal | 400 | Legal text | `small` |
| `text-button` | 15px | normal | normal | 400 | Interactive items | `.btn` |

### Principles
1. **Achromatic Dominance:** Text is almost exclusively `#ffffff` on dark backgrounds or `#000000` on light banners.
2. **Standard Tracking:** No custom letter spacing is applied; the system relies on default font kerning.
3. **Weight Uniformity:** Only weight 400 is observed; emphasis is created via size and color rather than weight.

## Spacing
**Base unit:** 18px
| Token | Value | Occurrences |
|---|---|---|
| `space-base` | 18px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | All banners, containers, and cards | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | none | All components sit flush on the canvas | `shadows` array (empty) |

## Components

### Tier 1: Foundational

#### Global Banner
**Role:** Top-level utility and notification area.
**Pages observed:** 3
**Spec:** Background `#f49300` / Text `#000000` / Radius `0px` / Padding `18px 0px` / Typography `14px Roboto`
**States observed:** Default: captured | Hover: not captured

#### Link
**Role:** Primary navigation and interaction.
**Pages observed:** 3
**Spec:** Text `#0000ee` / Typography `16px sans-serif`
**States observed:** Default: captured | Hover: captured (underline)

### Tier 2: Patterns

#### Content Card
**Role:** Grouping related search or service terms.
**Pages observed:** 3
**Spec:** Background `transparent` / Border `1px #ffffff` / Radius `0px` / Padding `18px`
**States observed:** Default: captured | Hover: not captured

#### Navigation List
**Role:** Vertical stack of interactive items.
**Pages observed:** 3
**Spec:** Gap `12px` / Alignment `center`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Search Result Item
**Role:** Specific service category display.
**Pages observed:** 3
**Spec:** Text `#ffffff` / Typography `18px sans-serif` / Icon `Chevron Right`
**States observed:** Default: captured

#### Footer Legal
**Role:** Privacy and domain information.
**Pages observed:** 3
**Spec:** Background `#101c36` / Text `#ffffff` / Typography `12px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max content width | 100% (Fluid) |
| Section Padding | 18px |
| Gutter | 12px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Content stacks vertically; banner text wraps. |
| Desktop | 1440px | Horizontal centering of primary content blocks. |

## Imagery & decoration
The brand avoids photography and complex gradients. It uses simple vector chevrons for interactivity cues and solid color blocks for structural separation.

## Do's
- Use `#101c36` as the primary background for all main content areas.
- Maintain a strict `0px` border radius on all containers.
- Use `#f49300` for top-level global notifications only.
- Set primary body text in `#ffffff` when on the navy background.
- Apply `18px` padding for vertical spacing between major sections.

## Don'ts
- **Wrong:** Using `#0000ee` for background surfaces. **Right:** Use only for text links. **Reason:** Contrast and brand consistency.
- **Wrong:** Applying rounded corners to buttons or cards. **Right:** Keep all corners at `0px`. **Reason:** Signature brand rigidity.
- **Wrong:** Introducing gradients. **Right:** Use solid hex fills. **Reason:** The system is strictly monochrome/flat.
- **Wrong:** Using sub-brand colors (if they existed) for the global header. **Right:** Header must remain `#f49300`.
- Do not use shadows or elevation; the brand is intentionally flat.

## Similar brands
- Craigslist (Utility-first, link-heavy)
- GoDaddy Parking Pages (High-contrast, functional banners)
- IBM (Industrial, grid-focused, sans-serif)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --blue: #101c36;
  --accent-orange: #f49300;
  --accent-blue: #0000ee;
  --white: #ffffff;
  --black: #000000;
  --radius-sharp: 0px;
  --space-base: 18px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-navy: #101c36;
  --color-utility-orange: #f49300;
  --color-link-blue: #0000ee;
  --spacing-base: 18px;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a full-width banner using `#f49300` background and `#000000` text, with a padding of `18px` and `0px` border radius."
- "Design a content card with a `1px` white border, no background, and sharp `0px` corners on a `#101c36` background."
- "Generate a list of links using `#0000ee` text color and `16px` sans-serif font."

## Known gaps
- Hover and Active states for the orange banner were not captured in the source.
- Specific mobile-only breakpoints beyond the 390px sample were not validated.

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