# Winsbyinc Design System

> High-contrast corporate clarity anchored by deep navy foundations and vibrant yellow-gold highlights.

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

## TL;DR
Winsbyinc utilizes a high-contrast palette of deep navy (#004680) and bright yellow (#ffe600) to create a professional, data-driven aesthetic. The system relies on the geometric softness of **Filson Soft** for display headers and the high legibility of **Asap** for body and interface elements. Layouts are structured with significant vertical breathing room (up to 90px section gaps) and frequent use of circular imagery masks. Primary actions are consistently rendered as navy rounded pills with white text, while secondary accents use a vibrant lime green (#7fbc04).

## Signature DNA
1. **The Gold Band** (A full-width #ffe600 horizontal band used to transition between major content sections or highlight specific value propositions, observed on the homepage and about pages.)
2. **Circular Framing** (Key service and team imagery is consistently masked into perfect circles with 100% border-radius, creating a soft, approachable counterpoint to the rigid corporate grid.)
3. **Navy Anchoring** (Primary CTAs, navigation bars, and emphasized text blocks use #004680 as the structural "ink" of the brand.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 48 | 1.0 | `--bs-white` |
| `{color.navy}` | `#004680` | Primary brand color, buttons, borders, headers | 93 | 0.8 | Computed style |
| `{color.charcoal}` | `#333333` | Primary body text, secondary button text | 177 | 0.8 | Computed style |
| `{color.black}` | `#000000` | High-emphasis text, shadows | 42 | 1.0 | `--bs-black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.yellow}` | `#ffe600` | Section backgrounds, highlight bands | 3 | 1.0 | Brand page |
| `{color.green}` | `#7fbc04` | Secondary button text, success indicators | 3 | 0.6 | Computed style |
| `{color.lime-soft}` | `#bfde82` | Decorative borders, footer dividers | 3 | 0.6 | Computed style |
| `{color.gold-decorative}` | `#ffdb3f` | Decorative only (low frequency) | 0 | 0.9 | Brand page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Filson Soft** | 400, 700 | Display, Hero Headlines | Montserrat | Licensed |
| **Asap** | 400, 500, 700 | Body, Navigation, Subheads | Asap (Google Fonts) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 65px | 84.5px | normal | 700 | Hero H1 | `h1.rda_fadeInLeft` |
| `{type.display-lg}` | 40px | 52px | normal | 700 | Section Headers | `h3.text-center.text-dark` |
| `{type.heading-md}` | 28px | 36.4px | normal | 700 | Sub-section Heads | `h3.rda_fadeInLeft` |
| `{type.heading-sm}` | 24px | 33.6px | normal | 400 | Emphasized Labels | `span` |
| `{type.body-lg}` | 18px | 25.2px | normal | 400 | Lead Paragraphs | `p.mb-5.active` |
| `{type.body-md}` | 16px | 22.4px | normal | 400 | Standard Body | `div.header` |
| `{type.body-ui}` | 16px | 22.4px | normal | 500 | Nav Links, Buttons | `a` |
| `{type.caption}` | 14px | 19.6px | normal | 400 | Small Print | `section#block-7` |

### Principles
1. **Geometric Headers.** Filson Soft is used exclusively for large-scale typography to maintain a modern, friendly corporate voice.
2. **High Contrast Ratios.** Navy text on white or white text on navy is the standard for legibility.
3. **Asap for Utility.** All interactive elements (buttons, inputs, nav) use Asap to ensure clarity across different screen densities.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 39 |
| `{space.sm}` | 8px | 3 |
| `{space.md}` | 16px | 33 |
| `{space.lg}` | 30px | 42 |
| `{space.xl}` | 48px | 15 |
| `{space.section}` | 90px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp surfaces | 279 occurrences |
| `{radius.sm}` | 3px | Form inputs | Observed on contact forms |
| `{radius.md}` | 20px | Standard buttons | Rounded Button component |
| `{radius.full}` | 100% | Image masks, avatars | Card component |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | Standard cards and buttons | Component spec |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: `{color.navy}` (#004680) | Text: `{color.white}` (#ffffff) | Radius: 20px | Padding: 4px 15px | Font: Asap 16px
**States observed:** Default | Hover: Not captured | Active: Captured

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `{color.white}` (#ffffff) | Text: `{color.charcoal}` (#333333) | Padding: 28px 0px | Font: Asap 16px
**States observed:** Default: Captured | Active: Captured

### Tier 2: Patterns

#### Circular Image Card
**Role:** Service and Team highlights
**Pages observed:** All
**Spec:** Background: `{color.black}` (#000000) | Radius: 100% | Border: none | Shadow: none
**States observed:** Default: Captured

#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background: transparent | Border-top: 1px `{color.lime-soft}` (#bfde82) | Padding: 25px 0px | Text: `{color.charcoal}` (#333333)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Highlight Surface
**Role:** High-impact value proposition sections
**Pages observed:** Homepage, About
**Spec:** Background: `{color.yellow}` (#ffe600) | Text: `{color.black}` (#000000) | Padding: 60px 0px | Radius: 0px
**States observed:** Default: Captured

#### Content Overlay Surface
**Role:** Hero text containers on image backgrounds
**Pages observed:** Homepage
**Spec:** Background: rgba(255, 255, 255, 0.73) | Padding: 60px 90px 60px 80px | Text: `{color.charcoal}` (#333333)
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 60px to 90px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px; headers scale to ~32px. |
| Desktop | 1440px | Full horizontal navigation; 90px section spacing. |

## Imagery & decoration
Winsbyinc uses high-resolution photography of professional environments (offices, industrial sites) often overlaid with data visualizations (charts, graphs). A signature decorative move is the use of circular masks for all photography to soften the corporate feel.

## Do's
- Use `#004680` (Navy) for all primary call-to-action buttons.
- Apply `100%` border-radius to service-level imagery.
- Utilize `#ffe600` (Yellow) for full-width highlight bands only.
- Maintain a minimum of `60px` vertical padding between major content blocks.
- Pair **Filson Soft** (700) with **Asap** (400) for clear hierarchy.

## Don'ts
- **Wrong:** Using `#ffe600` for text on a white background. **Right:** Use `#004680` or `#333333`. **Reason:** Contrast ratio is 1.3:1, failing accessibility.
- **Wrong:** Applying shadows to buttons. **Right:** Keep buttons flat with solid fills. **Reason:** The system is strictly flat/monochrome-style.
- **Wrong:** Using `#7fbc04` (Green) for primary CTAs. **Right:** Use Navy. **Reason:** Green is reserved for secondary/success accents.

## Similar brands
- GE (Corporate typography/color balance)
- Nielsen (Data-driven corporate aesthetic)
- Deloitte (High-contrast professional services)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-navy: #004680;
  --color-yellow: #ffe600;
  --color-charcoal: #333333;
  --color-green: #7fbc04;
  --font-display: 'filson-soft', sans-serif;
  --font-body: 'Asap', sans-serif;
  --radius-button: 20px;
  --space-section: 90px;
}
```

## Agent prompt examples
- "Generate a hero section for Winsbyinc using a Filson Soft 700 headline at 65px, a navy primary button with 20px radius, and a circular image mask on the right."
- "Create a pricing card with a 1px #bfde82 border, using Asap for the body text and a navy header."
- "Design a full-width highlight band using background #ffe600 and black Filson Soft text for a 'Winsby Makes It Happen' section."

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the static trace.
- Mobile navigation transition (hamburger menu animation) was not analyzed.
- Specific shadow tokens for "deep" or "natural" (declared in CSS variables) were not observed in use on the analyzed pages.

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