# Foxnetsolutions Design System

> High-contrast enterprise IT infrastructure defined by deep midnight canvases, vibrant orange energy bands, and geometric Poppins typography.

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

## TL;DR
Foxnetsolutions utilizes a "Dark Mode by Default" strategy for its primary brand presence, anchoring the experience in a deep midnight navy (`#061029`). The system is punctuated by high-voltage orange accents (`#ff8200`) used for primary calls to action and decorative kinetic energy bands. Typography is strictly Poppins, leaning on medium weights (500) for clarity in headings and light weights (300) for high-density body copy. Layouts are structured around large-scale section transitions, moving from dark navy surfaces to pure white or light blue gradients to maintain enterprise legibility.

## Signature DNA
1. **The Midnight Anchor** (The use of `#061029` as the primary surface and button background across all pages creates a consistent, secure enterprise atmosphere).
2. **Kinetic Orange Accents** (The specific hex `#ff8200` is reserved for "Book a meeting" CTAs and the signature "energy wave" footer graphic, providing a high-contrast focal point against the navy).
3. **Pill-to-Panel Radius** (A strict geometric progression from 30px pill buttons to 15px soft-corner cards, ensuring interactive elements feel distinct from content containers).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.midnight}` | `#061029` | Primary surface, button background, text | 26 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Primary text on dark, page background | 163 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Secondary text, footer icons | 25 | 0.8 | Computed Style |
| `{color.slate.deep}` | `#162137` | Card and section backgrounds | 15 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.orange}` | `#ff8200` | Primary CTA border, decorative energy bands | 20 | 0.8 | Computed Style |
| `{color.navy.light}` | `#0c205e` | Secondary text, link emphasis | 4 | 0.6 | Computed Style |
| `{color.gray.dark}` | `#333333` | Tertiary button backgrounds (decorative_only) | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Poppins | 300, 400, 500, 800 | All roles (Display, Body, UI) | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 55.2px | normal | 500 | Hero H1 | `h1.hero__title` |
| `{type.h3}` | 38px | 48.64px | normal | 500 | Section titles | `h3.scroll__title.title` |
| `{type.h3.bold}` | 38px | 48.64px | normal | 800 | Emphasized headings | `span` |
| `{type.h4}` | 22px | 33px | normal | 400 | Sub-section intro | `p` |
| `{type.card.title}` | 20px | 30px | normal | 500 | Resource/Feature titles | `p.resource-card__title` |
| `{type.body.lg}` | 18px | 20.7px | normal | 500 | Large grid items | `div.large-grid__items-title` |
| `{type.body}` | 16px | 18.4px | normal | 300 | Default running text | `section.hero.hero--homepage` |
| `{type.body.ui}` | 16px | 24px | normal | 400 | Slider labels, UI text | `div.col-xs-4.dual-slider__title` |
| `{type.button}` | 14px | 16.1px | normal | 500 | Primary/Secondary CTAs | `a.btn.js-calendly-btn` |
| `{type.caption}` | 11px | 12.65px | normal | 500 | Inline links | `span.btn-link` |

### Principles
1. **Light Weight for Density:** Body copy uses weight 300 (`Poppins Light`) to maintain legibility against dark backgrounds without "blooming."
2. **Medium for Authority:** Headings and buttons strictly use weight 500 (`Poppins Medium`).
3. **Tight Line Heights:** Display and heading styles use a leading ratio of ~1.15x to 1.28x, creating compact, impactful blocks of text.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 22 |
| `{space.md}` | 15px | 30 |
| `{space.lg}` | 20px | 31 |
| `{space.xl}` | 40px | 3 |
| `{space.section}` | 100px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 130 occurrences |
| `{radius.sm}` | 10px | Small UI surfaces | 5 occurrences |
| `{radius.md}` | 15px | Content cards, image containers | 45 occurrences |
| `{radius.lg}` | 25px | Panels | 15 occurrences |
| `{radius.pill}` | 30px | Primary and Secondary buttons | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | 15 occurrences (Card) |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main CTA (e.g., "Book a meeting")
**Pages observed:** https://foxnetsolutions.com, https://foxnetsolutions.com/about
**Spec:** Background: `#061029` / Text: `#ffffff` / Border: 1px solid `#ff8200` / Radius: 30px / Padding: 12px 22px / Typography: 14px Poppins 500
**States observed:** Default: captured | Hover: not captured

#### Secondary Button (Outline)
**Role:** Alternative actions (e.g., "Learn more")
**Pages observed:** https://foxnetsolutions.com, https://foxnetsolutions.com/about
**Spec:** Background: transparent / Text: `#061029` / Border: 1px solid `#ff8200` / Radius: 30px / Padding: 12px 22px / Typography: 14px Poppins 500
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying service details or resource links
**Pages observed:** https://foxnetsolutions.com
**Spec:** Background: `#162137` / Text: `#ffffff` / Border: none / Radius: 15px / Padding: 0px / Typography: 16px Poppins 300
**States observed:** Default: captured

#### Resource Card Title
**Role:** Labeling content within grids
**Pages observed:** https://foxnetsolutions.com
**Spec:** Background: transparent / Text: `#ffffff` / Typography: 20px Poppins 500
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Energy Band (Footer/Transition)
**Role:** Visual brand signature at section ends
**Pages observed:** https://foxnetsolutions.com, https://foxnetsolutions.com/about
**Spec:** Background: `#ff8200` / Height: variable / Decoration: White kinetic lines and dots
**States observed:** Default: captured

#### About Surface
**Role:** Content container on internal pages
**Pages observed:** https://foxnetsolutions.com/about
**Spec:** Background: transparent / Text: `#000000` / Radius: 10px / Padding: 40px 30px 50px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Vertical Padding | 100px |
| Grid Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero titles scale down; Grid columns stack to 1-up. |

## Imagery & decoration
- **Kinetic Waves:** Abstract blue or white line graphics with floating nodes, representing network connectivity.
- **Energy Bands:** Solid orange (`#ff8200`) blocks with white line overlays used as footer transitions.
- **Photography:** High-quality office and hardware imagery with dark navy overlays to ensure text contrast.

## Do's
- Use `#061029` for all primary dark surfaces to maintain brand depth.
- Apply `Poppins` weight 300 for body copy to avoid visual heaviness on dark backgrounds.
- Reserve `#ff8200` for interactive borders and primary CTA emphasis.
- Maintain a 30px radius for all primary action buttons.
- Use 100px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#ff8200` as a text color for long-form body copy. **Reason:** Insufficient contrast and legibility issues.
- **Wrong:** Using sharp 0px corners for interactive buttons. **Reason:** Breaks the established 30px pill-shape pattern.
- **Wrong:** Applying heavy drop shadows to cards. **Reason:** The system is flat-by-design, relying on color blocking for depth.
- **Wrong:** Mixing Poppins with other sans-serif families like Arial or Inter. **Reason:** Poppins is the exclusive brand typeface.

## Similar brands
- Cloudflare (Dark mode infrastructure aesthetic)
- Datadog (High-contrast technical surfaces)
- CrowdStrike (Midnight navy and vibrant accent pairing)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-midnight: #061029;
  --color-orange: #ff8200;
  --color-slate-deep: #162137;
  --color-white: #ffffff;
  
  --font-primary: 'Poppins', sans-serif;
  
  --radius-card: 15px;
  --radius-button: 30px;
  
  --space-section: 100px;
}
```

## Agent prompt examples
- "Generate a service card using a midnight navy background #061029, a 15px border radius, and Poppins 300 white text."
- "Create a primary CTA button with a 1px orange #ff8200 border, midnight navy background, and 30px pill radius."
- "Design a hero section with a 48px Poppins 500 title and a 100px bottom margin."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in the source tokens.
- Shadow values were not present in the rendered output, suggesting a flat design system.

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