# Whamcloud Design System

> High-contrast technical utility anchored by light-weight Muli typography and stark monochrome surfaces.

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

## TL;DR
Whamcloud utilizes a "monochrome parent" strategy where the primary interface is strictly achromatic (#000000, #ffffff, #cccccc). The system relies on the **Muli** typeface, specifically at a signature weight of 300, to provide an airy, technical feel to dense data-heavy layouts like pricing tables. Visual depth is achieved through a single, aggressive shadow token (`10px 10px 40px`) rather than layered color elevations. Saturated accents like Teal (#4aa6b1) are reserved for decorative hero backgrounds and logo marks, never appearing as functional UI states like buttons or links.

## Signature DNA
1. **Light-Weight Display** (Muli at weight 300 is used for everything from 14px body text to 60px pricing displays, creating a consistent "thin-line" technical aesthetic across all pages).
2. **Sharp Monochrome UI** (Buttons and cards use a 0px border-radius and high-contrast black/white pairings, signaling a utilitarian, enterprise-grade toolset).
3. **Deep Offset Shadows** (Content cards on the pricing page use a specific `10px 10px 40px` shadow that creates a "floating pane" effect against the white canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, primary button background | 87 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page canvas, button text, card background | 14 | 1.0 | `--wp--preset--color--white` |
| `{color.gray.light}` | `#cccccc` | Card borders, table dividers | 9 | 0.6 | Computed Style |
| `{color.gray.dark}` | `#272c30` | Secondary button background | 9 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.teal}` | `#4aa6b1` | Hero background, decorative text (decorative_only) | 2 | 1.0 | `--wp--preset--color--theme-primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Muli | 300, 600 | Primary Brand (Display & Body) | Mulish (Google Fonts) | OFL |
| Helvetica Neue | 500, 600 | Section Headings | Inter | System |
| Open Sans Condensed | 300 | Button Labels | Roboto Condensed | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display.xl}` | 60px | 112.5px | normal | 300 | Pricing Hero | `div.ab-pricing-table-price` |
| `{text.display.lg}` | 50px | 93.75px | normal | 300 | Pricing Hero | `div.ab-pricing-table-price` |
| `{text.display.md}` | 40px | 75px | normal | 300 | Pricing Hero | `div.ab-pricing-table-price` |
| `{text.heading.md}` | 30px | 36px | normal | 500 | Section Heads | `h2.wp-block-heading` |
| `{text.heading.sm}` | 24px | 45px | normal | 300 | Currency Labels | `span.ab-pricing-table-currency` |
| `{text.body.lg}` | 18px | 33.75px | normal | 300 | Article Body | `article.post-148.page` |
| `{text.button}` | 18px | 33.75px | 1px | 300 | CTA Buttons | `a.ab-button` |
| `{text.body.md}` | 16px | 30px | normal | 300 | Default Paragraph | `p` |
| `{text.caption}` | 14px | 26.25px | normal | 300 | Emphasis/Small | `em` |

### Principles
- **Weight 300 is the default.** Bold (600) is used only for `<strong>` emphasis within prose.
- **Vertical Rhythm is generous.** Line heights for display sizes are roughly 1.8x the font size (e.g., 60px size / 112.5px height).
- **Condensed CTA Type.** Buttons use Open Sans Condensed to distinguish interactive labels from static Muli content.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 5 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 20px | 7 |
| `{space.lg}` | 30px | 9 |
| `{space.xl}` | 40px | 8 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Primary Buttons, Pricing Tiers | 98 occurrences |
| `{radius.sm}` | 5px | Form Inputs, Secondary "Rounded" Buttons | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.05) 10px 10px 40px 0px` | Pricing Cards, Feature Blocks | Pricing Page |

## Components

### Tier 1: Foundational

#### Primary Button (Sharp)
**Role:** Main CTA for pricing and conversion.
**Pages observed:** https://whamcloud.com/pricing
**Spec:** 
- Background: `{color.gray.dark}` (#272c30)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sharp}` (0px)
- Typography: `{text.button}` (18px / 300 / Open Sans Condensed)
**States observed:** Default captured.

#### Primary Button (Rounded)
**Role:** Global navigation or secondary page CTAs.
**Pages observed:** https://whamcloud.com
**Spec:**
- Background: `{color.black}` (#000000)
- Text: `{color.white}` (#ffffff)
- Radius: `{radius.sm}` (5px)
- Padding: 12px 20px
- Typography: 14px
**States observed:** Default captured.

### Tier 2: Patterns

#### Pricing Card
**Role:** Displaying service packages.
**Pages observed:** https://whamcloud.com/pricing
**Spec:**
- Background: Transparent / White
- Border: 1px `{color.gray.light}` (#cccccc)
- Shadow: `{shadow.deep}`
- Padding: 34px
- Radius: `{radius.sharp}` (0px)

### Tier 3: Surface-specific

#### Hero Banner
**Role:** Top-of-page brand identity.
**Pages observed:** https://whamcloud.com
**Spec:**
- Background: `{color.teal}` (#4aa6b1)
- Text: `{color.white}` (#ffffff)
- Padding-top/bottom: `{space.section}` (100px)

## Layout
| Property | Value |
|----------|-------|
| Max-width | ~1200px |
| Grid | 2-column, 3-column, 4-column observed |
| Section Gap | 100px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Nav collapses to hamburger; pricing cards stack vertically. |

## Imagery & decoration
- **Technical Photography:** High-resolution server room and data center imagery.
- **Teal Overlays:** Large blocks of #4aa6b1 used as backgrounds for white text.
- **Avoidance:** No gradients, no illustrative icons, no soft shadows.

## Do's
- Use **Muli 300** for all primary body and display text.
- Apply **0px border-radius** to all primary content containers.
- Use **#000000** for primary text on white backgrounds to maintain 21:1 contrast.
- Reserve **#4aa6b1** for large-scale decorative backgrounds only.
- Use the **10px offset shadow** to separate cards from the background.

## Don'ts
- **Wrong:** Using Teal (#4aa6b1) for button backgrounds. **Right:** Use Black (#000000) or Dark Gray (#272c30). **Reason:** Accents are decorative; interactive elements are monochrome.
- **Wrong:** Using weight 700 for headings. **Right:** Use weight 500 or 600. **Reason:** The brand signature is a light-weight technical feel.
- **Wrong:** Mixing rounded and sharp corners in the same section. **Right:** Stick to 0px for cards.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-teal: #4aa6b1;
  --color-gray-light: #cccccc;
  --font-primary: 'Muli', sans-serif;
  --shadow-deep: 10px 10px 40px 0px rgba(0, 0, 0, 0.05);
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a pricing card using a 1px #cccccc border, a 10px offset shadow, and Muli weight 300 for the price display."
- "Create a hero section with a #4aa6b1 background and white Muli text at 40px size with a 75px line height."

## Known gaps
- Hover and Active states for buttons were not captured in the source.
- Error and Success semantic colors were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://whamcloud.com | 1440px | 2026-06-06 |
| Pricing | https://whamcloud.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://whamcloud.com | 390px | 2026-06-06 |