# Winningsem Design System

> High-contrast racing aesthetic pairing industrial charcoals with a high-voltage kinetic orange.

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

## TL;DR
Winningsem utilizes a "monochrome plus one" strategy, where a deep grayscale foundation of #1d1d1d and #252525 is punctuated by a singular, high-vibrancy accent orange (#f37729). The typography is strictly sans-serif, pairing the geometric Montserrat for high-impact headings with the technical, multi-weight BentonSans for body and UI. Layouts are characterized by sharp 0px corners and heavy, full-width color blocking that alternates between white, dark gray, and orange. The visual language is aggressive and precise, utilizing wide letter-spacing (up to 15px) and uppercase styling to create a sense of mechanical speed and digital authority.

## Signature DNA
1. **Kinetic Orange Blocking** (#f37729 used as a full-width background or heavy text accent to signal "The Web Race" energy, seen on Homepage and About).
2. **Extreme Tracking** (15px letter-spacing on Montserrat headings and 3px-4px on subheads to create an architectural, expansive feel, seen on `span.orange`).
3. **Zero-Radius Industrialism** (A strict 0px border-radius policy across all buttons, cards, and section containers to maintain a sharp, professional edge).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.surface.dark}` | `#1d1d1d` | Primary dark background, button fills | 19 | 0.8 | Computed Style |
| `{color.surface.charcoal}` | `#252525` | Section backgrounds, borders | 61 | 0.8 | Computed Style |
| `{color.text.primary}` | `#333333` | Main body text on light surfaces | 97 | 0.8 | Computed Style |
| `{color.canvas}` | `#ffffff` | Page floor, button text on dark | 51 | 0.8 | Computed Style |
| `{color.text.muted}` | `#777777` | Secondary descriptions, footer text | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.orange}` | `#f37729` | Brand voltage, primary headings, active states | 8 | 1.0 | Brand Page |
| `{color.accent.silver}` | `#a5a5a5` | Decorative text, secondary UI labels | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 400, 700 | Display, Headings, Brand | Montserrat (Google) | OFL |
| BentonSansThin | 300, 400 | Hero Display, Section Heads | Inter Light | Proprietary |
| BentonSansMedium | 300, 600, 700, 900 | Body, Navigation, Buttons | Inter | Proprietary |
| BentonSansExtraLight | 300 | Descriptive Body | Inter Extra Light | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 50px | 55px | normal | 400 | Hero H1 | `h1.thin.font50` |
| `{type.heading.lg}` | 36px | 51.4px | normal | 300 | Section Headers | `div.darkGreyBg` |
| `{type.heading.md}` | 30px | 33px | 15px | 700 | Accent Spans | `span.orange` |
| `{type.heading.sm}` | 20px | 22px | 4px | 700 | Sub-headers | `span` |
| `{type.body.lg}` | 18px | 29.2px | normal | 300 | Lead Paragraphs | `p:nth-of-type(2)` |
| `{type.body.md}` | 14px | 24px | normal | 300 | Standard Body | `li#menu-item-78` |
| `{type.nav}` | 14px | 20px | normal | 300 | Top Navigation | `nav.navbar` |
| `{type.button}` | 14px | 20px | 1px | 600 | CTA Labels | `a.button` |
| `{type.caption}` | 10px | 20px | 3px | 900 | Small UI Labels | `footer a` |

### Principles
1. **Uppercase Dominance**: All display and navigation text is forced to uppercase.
2. **Tracking as Hierarchy**: Larger headings use extreme positive tracking (15px) to command space.
3. **Weight Contrast**: Pairing "Thin" weights (300) for large display text with "Medium/Bold" (700+) for small UI elements.

## Spacing
**Base unit:** 10px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 7 |
| `{space.sm}` | 20px | 21 |
| `{space.md}` | 30px | 7 |
| `{space.lg}` | 50px | 31 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and containers | 219 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{flat}` | none | All surfaces (brand relies on color blocking for depth) | Component Spec |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage, About
**Spec:** Background `{color.surface.dark}` (#1d1d1d) | Text `{color.canvas}` (#ffffff) | Border 1px `{color.canvas}` (#ffffff) | Radius 0px | Padding 20px 30px | Typography `{type.button}`
**States observed:** Default | Hover: Not captured

#### Surface
**Role:** Sectional color blocking
**Pages observed:** Homepage, About
**Spec:** Background `{color.surface.charcoal}` (#222222) | Text `{color.text.primary}` (#333333) | Radius 0px | Padding 50px
**States observed:** Default

### Tier 2: Patterns

#### Orange Feature Block
**Role:** Brand-heavy informational sections
**Pages observed:** Homepage, About
**Spec:** Background `{color.accent.orange}` (#f37729) | Text `{color.canvas}` (#ffffff) | Radius 0px | Padding 50px | Typography `{type.display.mega}` (300 weight variant)
**States observed:** Default

#### Dark Feature Block
**Role:** Secondary informational sections
**Pages observed:** Homepage, About
**Spec:** Background `{color.surface.dark}` (#1d1d1d) | Text `{color.accent.silver}` (#a5a5a5) | Radius 0px | Padding 50px
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global header
**Pages observed:** Homepage, About
**Spec:** Background transparent (over hero) | Text `{color.canvas}` (#ffffff) | Typography `{type.nav}` | Height 60px
**States observed:** Default

#### Footer
**Role:** Global site map and social
**Pages observed:** Homepage, About
**Spec:** Background `{color.surface.charcoal}` (#252525) | Text `{color.text.muted}` (#777777) | Typography `{type.caption}`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1170px (standard Bootstrap container) |
| Section Padding | 50px vertical |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; font sizes for H1 reduce; padding drops to 15px. |

## Imagery & decoration
- **High-Contrast Photography**: Grayscale imagery of racing (horses) with high grain and deep shadows.
- **Geometric Overlays**: Use of the "V" chevron logo as a watermark or background graphic.
- **Dividers**: Double-line custom SVGs with a central diamond motif.

## Do's
- Use `#f37729` for primary emphasis only; never for long-form body text.
- Maintain `0px` radius on every interactive element.
- Apply `uppercase` to all Montserrat headings.
- Use `50px` padding for all standard section containers.
- Keep tracking at `15px` for primary orange span accents.

## Don'ts
- **Wrong:** Using a rounded button. **Right:** Sharp 0px corners. **Reason:** Brand identity is industrial and aggressive.
- **Wrong:** Using `#007cba` (WP default) for UI. **Right:** Use `#f37729`. **Reason:** WordPress admin tokens are not part of the Winningsem consumer brand.
- **Wrong:** Centering body text. **Right:** Left-aligning for readability against the technical BentonSans font.

## Similar brands
- KTM (Orange/Black racing DNA)
- McLaren (Industrial speed aesthetic)
- Specialized (High-performance geometric)

## Quick start

```css
/* CSS Variables */
:root {
  --color-orange: #f37729;
  --color-dark: #1d1d1d;
  --color-charcoal: #252525;
  --color-white: #ffffff;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'BentonSans', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a full-width section with background #1d1d1d, featuring an H2 in Montserrat Bold, 30px size, with 15px letter-spacing and color #f37729."
- "Design a CTA button with 0px border radius, #1d1d1d background, and 1px white border, using 14px uppercase BentonSans text."
- "Generate a feature grid where every card has a 0px radius and alternates between #252525 and #ffffff backgrounds."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific transition timings for the "Web Race" animations were not captured.
- Form input styling (text fields, checkboxes) was not present on the analyzed pages.

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