# Winmore Design System

> High-contrast industrial automation aesthetic defined by aggressive typographic scale, deep teal surfaces, and electric blue data accents.

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

## TL;DR
Winmore utilizes a "monochrome-plus" system where a stark black-and-white foundation is punctuated by a specific electric blue (#0000ee) and deep industrial teal (#11595c). The visual language is dominated by the **Inter Tight** family, specifically leveraging massive display sizes (up to 180px) and tight negative letter-spacing (-2.76px) to create a sense of scale and precision. Components are characterized by sharp 0px radii or minimal 2px rounding, reinforcing a "built for logistics" utility. Layouts use heavy horizontal banding and large-scale photographic backgrounds of industrial infrastructure.

## Signature DNA
1. **Aggressive Display Scale** (Inter Tight Medium at 92px or 180px with -2.76px tracking creates a "billboard" effect for key value props across all pages).
2. **Industrial Teal Banding** (The use of #11595c and #53a5a5 for full-width section backgrounds and cards provides a specialized "software-for-logistics" atmosphere).
3. **Electric Blue Accents** (#0000ee is reserved strictly for data points and high-voltage text links, providing a functional contrast against white or teal surfaces).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.ink}` | `#111111` | Primary text, dark section backgrounds | 837 | 1.0 | Computed |
| `{color.canvas}` | `#ffffff` | Page floor, primary surface | 129 | 1.0 | Computed |
| `{color.void}` | `#000000` | Secondary text, footer text | 66 | 0.8 | Computed |
| `{color.neutral.soft}` | `#e8e8e8` | Tertiary surfaces, meeting request blocks | 3 | 1.0 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.electric-blue}` | `#0000ee` | Data visualization, primary text links | 63 | 0.8 | Computed |
| `{color.teal.medium}` | `#53a5a5` | Feature card backgrounds | 18 | 0.8 | Computed |
| `{color.teal.deep}` | `#11595c` | Primary section backgrounds, CTA containers | 18 | 0.8 | Computed |
| `{color.blue.deep}` | `#193fb0` | Alternative text accent | 18 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter Tight | 400, 500, 600 | Display, Headings | Inter Tight (Google Fonts) | OFL |
| Inter | 400, 500, 600 | Body, UI, Labels | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 180px | 172px | normal | 500 | Hero emphasis | `p:nth-of-type(2)` |
| `{type.display.xl}` | 92px | 92px | -2.76px | 500 | Primary H1 | `h1.framer-styles-preset-1xbkfck` |
| `{type.display.lg}` | 80px | 80px | normal | 500 | Section headers | `h2.framer-styles-preset-1nf5vkx` |
| `{type.display.md}` | 64px | 64px | normal | 500 | Sub-section headers | `span:nth-of-type(1)` |
| `{type.display.sm}` | 44px | 47.6px | -1.32px | 600 | Feature titles | `h3.framer-text` |
| `{type.heading.md}` | 32px | 36px | -0.96px | 400 | Card titles | `h4.framer-styles-preset-1p9cphc` |
| `{type.body.lg}` | 18px | 24px | normal | 400 | Lead paragraph | `p.framer-styles-preset-11vsded` |
| `{type.body.md}` | 16px | 24px | -0.16px | 400 | Default body | `p.framer-styles-preset-u3pk1c` |
| `{type.body.sm}` | 14px | 18px | normal | 400 | Footer/Captions | `p.framer-styles-preset-1wvge3b` |

### Principles
1. **Negative Tracking on Display:** All Inter Tight headings above 32px utilize negative letter-spacing (up to -2.76px) to maintain density at large scales.
2. **Tight Line Heights:** Display type uses a 1:1 or near 1:1 ratio (e.g., 92px size / 92px line height) to stack tightly.
3. **Inter for Utility:** Standard Inter is strictly used for reading-length prose and navigation, never for brand-heavy display moments.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 9 |
| `{space.sm}` | 12px | 45 |
| `{space.md}` | 16px | 39 |
| `{space.lg}` | 24px | 24 |
| `{space.xl}` | 32px | 12 |
| `{space.xxl}` | 48px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Sections, large surfaces, footer | 1014 occurrences |
| `{radius.sm}` | 2px | Feature cards, primary buttons | 42 occurrences |
| `{radius.md}` | 10px | Specialized UI controls | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | Standard state for all cards and sections | Universal |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global header
**Pages observed:** 3
**Spec:** Background transparent (rgba 255,255,255,0) | Text #000000 | Padding 0px 48px | Typography Inter 12px
**States observed:** Default: captured | Hover: not captured

#### Footer
**Role:** Global site map
**Pages observed:** 3
**Spec:** Background #0a0a0a | Text #000000 | Padding 0px 48px | Radius 0px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card (Teal)
**Role:** Benefit and service highlights
**Pages observed:** 3
**Spec:** Background #53a5a5 | Text #0000ee | Radius 2px | Padding 18px 24px
**States observed:** Default: captured

#### Industrial Surface
**Role:** Dark content containers
**Pages observed:** 3
**Spec:** Background #111111 | Text #000000 | Radius 0px | Padding 3px 12px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Meeting Request Block
**Role:** Primary CTA section
**Pages observed:** 3
**Spec:** Background #e8e8e8 | Text #000000 | Radius 0px | Typography Inter 12px
**States observed:** Default: captured

#### Data Highlight Card
**Role:** Statistical evidence display
**Pages observed:** 3
**Spec:** Background #ffffff | Text #0000ee | Radius 2px | Padding 0px 32px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max content width | 1440px |
| Section padding (vertical) | 80px - 120px |
| Horizontal gutter | 48px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column grid, full display scale |
| Mobile | 390px | Single column stack, navigation collapses to menu |

## Imagery & decoration
- **Industrial Photography:** High-contrast, desaturated images of airplanes, shipping containers, and logistics hubs.
- **Teal Overlays:** Use of #11595c as a semi-transparent or solid overlay on industrial imagery.
- **Avoidance:** No soft gradients, no rounded "pill" shapes, no illustrative icons.

## Do's
- Use **Inter Tight Medium** for all primary headlines.
- Apply **negative tracking** (-2.76px) to headlines exceeding 80px.
- Use **#0000ee** for statistical values and data points.
- Maintain **0px border radius** on all major layout sections.
- Use **#11595c** for high-impact background bands.

## Don'ts
- Do not use rounded corners (>2px) on feature cards.
- Do not use #0000ee for body text; reserve it for accents and data.
- Do not use standard Inter for display headings.
- Do not add drop shadows to cards; the system is strictly flat.
- Do not use vibrant primary colors (red, yellow, green) unless for semantic status.

## Similar brands
- Flexport (logistics utility)
- Samsara (industrial IoT)
- Scale AI (high-contrast technical)

## Quick start

### CSS Custom Properties
```css
:root {
  --winmore-ink: #111111;
  --winmore-canvas: #ffffff;
  --winmore-electric-blue: #0000ee;
  --winmore-teal-deep: #11595c;
  --winmore-teal-med: #53a5a5;
  --winmore-font-display: "Inter Tight", sans-serif;
  --winmore-font-body: "Inter", sans-serif;
  --winmore-radius-sharp: 0px;
  --winmore-radius-sm: 2px;
}
```

## Agent prompt examples
- "Create a hero section with a background image of a shipping port, a #11595c overlay, and a headline in Inter Tight Medium 92px with -2.76px letter spacing."
- "Design a 3-column grid of cards using background #53a5a5, 2px border radius, and data points highlighted in #0000ee."
- "Generate a footer component with background #0a0a0a and text in Inter 14px, using 48px horizontal padding."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scale for the 180px display token was not captured.

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