# Wippo.md Design System

> High-contrast industrial utility anchored by condensed Oswald headlines and a stark cool-gray foundation.

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

## TL;DR
Wippo.md utilizes a monochrome-first "industrial" aesthetic, characterized by a cool-gray canvas `#edf0f2` and high-contrast charcoal text `#4e4e4e`. The system relies on **Oswald** for rhythmic section titles, often paired with **Roboto** for technical body copy. Visual interest is driven by functional red accents `#dc1814` used exclusively for primary action borders and semantic markers. Layouts are structured with generous vertical pacing (up to 77px) and a mix of sharp corners and large 50px pill-shaped containers.

## Signature DNA
1. **Condensed Oswald Headers** (Oswald weight 400 at 36px provides a vertical, architectural rhythm to section titles across all pages).
2. **The "Action Pill"** (Primary CTAs use a signature 22px or 50px radius with a 2px `#dc1814` red border, creating a high-visibility "hollow" button style).
3. **Cool-Gray Layering** (The use of `#edf0f2` for borders and `#f4f6f8` for surfaces creates a subtle depth against the pure white `#ffffff` cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#4e4e4e` | Primary body text, headings | 81 | 1.0 | `--black` |
| `{color.canvas}` | `#edf0f2` | Default page background, section borders | 19 | 1.0 | `--border` |
| `{color.surface}` | `#ffffff` | Primary card background | 24 | 0.8 | Computed |
| `{color.surface-alt}` | `#f4f6f8` | Secondary surface, subtle section fills | 5 | 0.6 | Computed |
| `{color.muted}` | `#666666` | Secondary text, footer content | 21 | 0.8 | Computed |
| `{color.deep}` | `#333333` | Emphasis text, dark labels | 11 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent-red}` | `#dc1814` | Primary CTA borders, bullet points | 3 | 1.0 | `--red` |
| `{color.accent-blue}` | `#47a3ef` | Inline text links (About page) | 7 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Oswald | 400, 700 | Display, Section Titles, Numbers | Oswald (Google Fonts) | OFL |
| Roboto | 100, 400, 700 | Body, Subheadings, UI Labels | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 36px | 48px | normal | 400 | Section Titles | `h2.section-title` |
| `{type.h-sm-roboto}` | 24px | 33.6px | normal | 100 | Light Subheads | `h4` |
| `{type.h-sm-oswald}` | 22px | 33px | normal | 700 | Solution Numbers | `div.solution-number` |
| `{type.h-xs-roboto}` | 20px | 30px | normal | 700 | Bold Emphasis | `b` |
| `{type.subhead}` | 18px | 21px | normal | 700 | Mini Titles | `h5.section-mini-title` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard Paragraphs | `p` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Section Footers | `section.w-section` |
| `{type.caption}` | 14px | 23.8px | normal | 400 | Excerpts/Descriptions | `div.solution-excerpt` |

### Principles
- **Header Condensing:** Display titles must use Oswald to maintain the brand's vertical, industrial feel.
- **Weight Contrast:** Pair heavy Oswald (700) numbers with light Roboto (100) subheads to create technical hierarchy.
- **Line Height Utility:** Body text maintains a 1.5x ratio (24px height on 16px size) for readability in dense technical descriptions.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 18 |
| `{space.md}` | 20px | 16 |
| `{space.lg}` | 30px | 21 |
| `{space.xl}` | 44px | 3 |
| `{space.section}` | 77px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Input fields, layout containers | 88 occurrences |
| `{radius.sm}` | 5px | Small cards, form elements | `div.solution-excerpt` |
| `{radius.md}` | 10px | Standard content cards | `Card` component |
| `{radius.pill}` | 22px | Primary buttons | `Rounded Button` |
| `{radius.full}` | 50px | Large decorative panels | 23 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | All cards and buttons | No shadows captured in source |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary Call to Action (e.g., "Let's get in touch", "Read more")
**Pages observed:** https://wippo.md
**Spec:** Background: transparent / Text: `#ffffff` / Border: 2px `#dc1814` / Radius: 22px / Padding: 8px 30px / Typography: Roboto 16px
**States observed:** Default captured.

#### Solution Card
**Role:** Service and feature highlights
**Pages observed:** https://wippo.md
**Spec:** Background: `#ffffff` / Text: `#4e4e4e` / Border: 1px `#edf0f2` / Radius: 10px / Padding: 0px 12px / Typography: 14px
**States observed:** Default captured.

### Tier 2: Patterns
#### Feature Grid Card
**Role:** Detailed service descriptions with large padding
**Pages observed:** https://wippo.md
**Spec:** Background: `#ffffff` / Text: `#666666` / Border: 1px `#f4f6f8` / Radius: 5px / Padding: 32px 44px 60px / Typography: 14px
**States observed:** Default captured.

#### Contact Form Input
**Role:** Lead generation fields
**Pages observed:** https://wippo.md, https://wippo.md/about
**Spec:** Background: transparent / Border-bottom: 1px `#333333` / Radius: 0px / Padding: 10px 0px
**States observed:** Default captured.

### Tier 3: Surface-specific
#### Footer Band
**Role:** Global site closure
**Pages observed:** https://wippo.md, https://wippo.md/about
**Spec:** Background: `#4e4e4e` / Text: `#47a3ef` / Typography: Roboto 14px / Padding: 20px 0px
**States observed:** Default captured.

#### Solution Number Badge
**Role:** Step-by-step process indicator
**Pages observed:** https://wippo.md
**Spec:** Typography: Oswald 700 22px / Color: `#d6d6d6` / Position: Top-right of card.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Gutter | 77px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Solution cards stack vertically. |
| Desktop | 1440px | Sidebar social/logo navigation becomes fixed-left. |

## Do's
- Use **Oswald 400** for all primary section headings.
- Apply `#dc1814` only to borders of primary action buttons.
- Maintain a minimum of **77px** vertical spacing between major content sections.
- Use `#edf0f2` for subtle dividers and background containers.
- Ensure all form inputs remain **sharp-edged** (0px radius).

## Don'ts
- **Wrong:** Using `#dc1814` as a solid button background. **Right:** Use transparent background with a 2px red border. **Reason:** Brand identity relies on "hollow" high-contrast actions.
- **Wrong:** Using Roboto for section titles. **Right:** Use Oswald. **Reason:** Oswald provides the necessary industrial rhythm.
- **Wrong:** Applying drop shadows to cards. **Right:** Use 1px borders in `#edf0f2`. **Reason:** The system is strictly flat.

## Quick start

### CSS Variables
```css
:root {
  --color-red: #dc1814;
  --color-black: #4e4e4e;
  --color-border: #edf0f2;
  --color-canvas: #f4f6f8;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-pill: 22px;
  --radius-card: 10px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #dc1814;
  --color-neutral-800: #4e4e4e;
  --color-neutral-100: #edf0f2;
  --font-oswald: "Oswald";
  --font-roboto: "Roboto";
  --radius-pill: 22px;
}
```

## Agent prompt examples
- "Create a section header using Oswald weight 400 at 36px with a 30px margin-bottom."
- "Generate a primary CTA button with a 2px red #dc1814 border, transparent background, and 22px border radius."
- "Design a content card with a white background, 1px #edf0f2 border, and 10px corner radius."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific mobile breakpoint transitions for the sidebar navigation were not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://wippo.md | 1440x900 | 2026-06-06 |
| About | https://wippo.md/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://wippo.md | 390x844 | 2026-06-06 |