# Conquerww Design System

> High-contrast architectural layouts anchored by deep teal surfaces, punctuated by a singular red "pixel" motif.

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

## TL;DR
Conquerww utilizes a sophisticated, high-contrast palette dominated by a deep teal (#002d3a) and pure white (#ffffff), with a vibrant red (#ed1a3d) serving as the primary action color. The system is built on the Barlow typeface, using medium weights (500) for headlines to maintain a modern, professional clarity. A signature "pixel" motif—a small red square—is used consistently as a bullet point, a decorative anchor for vertical lines, and a component of the logo. Layouts are structured with generous vertical padding (80px) and a sharp, zero-radius geometry that reinforces an architectural, disciplined aesthetic.

## Signature DNA
1. **The Red Pixel Anchor** (A 1:1 red square `#ed1a3d` used to anchor vertical rules, lead list items, and punctuate the wordmark. Seen on homepage hero and "The Core of Conquer" section).
2. **Deep Teal Immersion** (Large-scale section blocks using `#002d3a` as a primary surface color rather than just an accent, creating a "dark mode" editorial feel. Seen in the footer and logo grid sections).
3. **Sharp Geometry** (A strict adherence to `0px` border radius for all buttons, cards, and section containers, creating a rigid, professional grid. Seen across all primary CTA buttons and case study cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background, button text on dark | 58 | 1.0 | `--wp--preset--color--white` |
| `{color.teal.deep}` | `#002d3a` | Accent surfaces, primary text, footer background | 98 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Deep shadows, secondary surfaces | 2 | 1.0 | `--wp--preset--color--black` |
| `{color.ice}` | `#f0f8fa` | Subtle section backgrounds (alternating) | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.red.pixel}` | `#ed1a3d` | Primary CTA background, "pixel" icons, text accents | 14 | 1.0 | `--pixel-color` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Barlow | 400, 500, 600, 700 | All headlines, body, and UI | Barlow (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 60px | normal | 500 | Main Hero H1 | `h1` |
| `{type.h2.lg}` | 36px | 54px | normal | 500 | Section Headlines | `h2` |
| `{type.h2.md}` | 32px | 48px | normal | 500 | Sub-section titles | `h2.h1.mt0` |
| `{type.body.lg}` | 18px | 26.4px | normal | 400 | Intro text / Pixel titles | `div.title.pixel` |
| `{type.body.md}` | 16px | 32px | normal | 400 | Standard paragraphs | `p` |
| `{type.body.strong}` | 16px | 32px | normal | 700 | Bold emphasis | `strong` |
| `{type.button}` | 16px | 24px | 1px | 600 | Primary CTA text | `a.btn` |
| `{type.caption}` | 12px | 18px | normal | 400 | Small annotations | `section#block...` |

### Principles
1. **Barlow 500 for Authority:** Headlines never use heavy bolds; weight 500 provides a clean, modern weight that remains legible against dark teal.
2. **Generous Leading:** Body text uses a high line-height ratio (2.0x at 16px/32px) to ensure readability in dense paragraphs.
3. **Red Text for Interaction:** Small-scale links and "Case Study" labels use the red accent to signal clickability without a full button container.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 18 |
| `{space.sm}` | 16px | 42 |
| `{space.md}` | 32px | 13 |
| `{space.lg}` | 64px | 7 |
| `{space.section}` | 80px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and images | `141 occurrences` |
| `{radius.full}` | 50px | Rare decorative or specific UI panels | `5 occurrences` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Services, Our Work, Join the Team)
**Pages observed:** Homepage, About
**Spec:** Background: `#ed1a3d` / Text: `#ffffff` / Radius: `0px` / Padding: `8px 16px` / Typography: `Barlow 600 16px`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface: Dark Teal
**Role:** High-impact section containers and footer
**Pages observed:** Homepage, About
**Spec:** Background: `#002d3a` / Text: `#ffffff` / Radius: `0px` / Padding: `80px 0px`
**States observed:** Default

### Tier 2: Patterns

#### Case Study Card
**Role:** Portfolio and work display
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#002d3a` / Radius: `0px` / Border: `none` / Shadow: `none`
**Notes:** Features a top-aligned image and a red text link "CASE STUDY" at the bottom.

#### The Pixel Bullet
**Role:** List item indicator and decorative anchor
**Pages observed:** Homepage, About
**Spec:** Background: `#ed1a3d` / Width: `8px` / Height: `8px` / Radius: `0px`
**Notes:** Always precedes text or sits atop vertical rules.

### Tier 3: Surface-specific

#### Logo Grid
**Role:** Client trust signals
**Pages observed:** Homepage
**Spec:** Background: `#002d3a` / Logo Filter: `grayscale(1) brightness(0) invert(1)` (White logos)
**Padding:** `80px 0px`

#### Quote Block
**Role:** Testimonials
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#002d3a` / Border-left: `2px solid #ed1a3d` (implied by red pixel motif)
**Typography:** `Barlow 400 16px italic`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 80px (Vertical) |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-up grids become 1-up stacks. |
| Desktop | 1440px | Standard multi-column grid with 80px section spacing. |

## Do's
- Use `#ed1a3d` for all primary action buttons.
- Maintain `0px` border radius on all interactive elements.
- Anchor vertical lines with a `{color.red.pixel}` square.
- Use Barlow 500 for all H1 and H2 headlines.
- Ensure 80px vertical padding between major content sections.

## Don'ts
- **Wrong:** Using `#cf2e2e` (Vivid Red) for primary buttons. **Right:** Use `#ed1a3d`. **Reason:** `#ed1a3d` is the brand's specific "Pixel Color" token.
- **Wrong:** Applying rounded corners to buttons. **Right:** Use `0px` radius. **Reason:** The brand identity is strictly architectural and sharp.
- **Wrong:** Using the teal `#002d3a` for body text on a white background. **Right:** Use for headlines or as a background. **Reason:** Contrast and hierarchy management.

## Similar brands
- Huge Inc (Architectural, high-contrast)
- Pentagram (Typography-first, grid-heavy)
- Work & Co (Sharp geometry, limited palette)

## Quick start

```css
/* CSS Variables */
:root {
  --pixel-color: #ed1a3d;
  --color-teal-deep: #002d3a;
  --color-white: #ffffff;
  --font-primary: 'Barlow', sans-serif;
  --radius-none: 0px;
  --space-section: 80px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Conquerww system: sharp 0px corners, #ed1a3d background, white Barlow 600 text, and 8px 16px padding."
- "Design a section header with a vertical red line anchored by an 8px red square, followed by a Barlow 500 headline in #002d3a."
- "Generate a card component with no border-radius, a white background, and a 'Case Study' link in #ed1a3d text."

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