# PowerReviews Design System

> High-contrast monochrome foundation punctuated by geometric Moderat headlines and vibrant, full-bleed color-blocked sections.

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

## TL;DR
PowerReviews utilizes a "monochrome-plus" strategy where a stark black (#000000) and white (#ffffff) foundation provides the structural frame for high-energy color bands. The system is anchored by the geometric sans-serif **Moderat**, used at heavy weights (700-900) for display and light weights for body. Primary actions are consistently rendered as black pill-shaped buttons with white text, while secondary accents like teal (#167f9c) and lime green appear in specific product-demo or testimonial contexts. Layouts rely on sharp 0px corners for containers, contrasted against 999px pill radii for interactive elements.

## Signature DNA
1. **The Black Pill CTA** (Solid #000000 background, #ffffff text, and 999px radius. This is the universal primary action across all pages.)
2. **Geometric Display Hierarchy** (Moderat at 44px/700 weight for section headers, often paired with 14px/100 weight wide-tracked subheaders.)
3. **Achromatic Framing** (The core UI—navigation, footers, and cards—stays strictly #000000 and #ffffff, allowing photography and full-width color-blocked sections to define the page rhythm.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, primary button background, logo | 66 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 26 | 1.0 | `--wp--preset--color--white` |
| `{color.light-gray}` | `#f8f8f8` | Secondary button backgrounds, subtle sections | 1 | 1.0 | `--uael-as-bg-light` |
| `{color.border}` | `#e1e8ed` | Card borders, horizontal dividers | 8 | 0.6 | Computed Style |
| `{color.ink-deep}` | `#1c2022` | Alternative body text for high-legibility | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.teal}` | `#167f9c` | Links, decorative text accents | 18 | 0.8 | Computed Style |
| `{color.slate-blue}` | `#697882` | Muted secondary text, captions | 8 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Moderat | 100, 400, 600, 700, 900 | All headings, body, and UI | Montserrat | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 44px | 44px | normal | 700 | Section Hero | `h2.elementor-heading-title` |
| `{type.heading-lg}` | 32px | 36px | normal | 900 | Feature titles | `p` |
| `{type.heading-md}` | 24px | 24px | normal | 600 | Sub-section titles | `span.elementor-heading-title` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Intro paragraphs | `p` |
| `{type.button}` | 19px | 19.2px | normal | 400 | CTA label | `a.elementor-button` |
| `{type.body-md}` | 16px | 18.4px | normal | 400 | Default body | `section.elementor-inner-section` |
| `{type.label-bold}` | 14px | 21px | normal | 700 | Testimonial names | `span.elementor-testimonial__name` |
| `{type.label-spaced}` | 14px | 20px | 2.5px | 100 | Eyebrow headers | `h2` |

### Principles
1. **Heavyweight Display:** Section headers must use Moderat at 700 or 900 weight to maintain brand authority.
2. **Wide-Tracked Eyebrows:** Small labels (14px) use weight 100 with 2.5px letter spacing to create an "architectural" feel.
3. **Tight Button Leading:** Buttons use a 1:1 ratio for size to line-height (e.g., 19px/19.2px) to keep the pill shape compact.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 18 |
| `{space.base}` | 16px | 28 |
| `{space.md}` | 20px | 17 |
| `{space.xl}` | 40px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, large images | 86 occurrences |
| `{radius.sm}` | 5px | Form inputs, content cards | 8 occurrences |
| `{radius.pill}` | 999px | Primary and secondary buttons | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard cards and sections | `observed_once: Card` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Get Started", "Analyze")
**Pages observed:** https://powerreviews.com, https://powerreviews.com/about
**Spec:** Background: #000000 | Text: #ffffff | Radius: 999px | Typography: Moderat 19px
**States observed:** Default | Hover: captured

#### Secondary Button
**Role:** Alternative actions or "Read More"
**Pages observed:** https://powerreviews.com/about
**Spec:** Background: #f8f8f8 | Text: #000000 | Radius: 999px | Typography: Moderat 14px
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature highlights and testimonial containers
**Pages observed:** https://powerreviews.com/about
**Spec:** Background: #ffffff | Border: 1px #e1e8ed | Radius: 5px | Padding: 20px
**States observed:** Default: captured

#### Testimonial Block
**Role:** Customer social proof
**Pages observed:** https://powerreviews.com, https://powerreviews.com/about
**Spec:** Text: #000000 | Typography: Moderat 14px (Name: 700, Title: 400) | Layout: Flex with avatar

### Tier 3: Surface-specific
#### Global Navigation
**Role:** Top-level site routing
**Pages observed:** https://powerreviews.com
**Spec:** Background: #ffffff | Text: #000000 | Height: 80px (approx) | Border-bottom: none

#### Resource Card
**Role:** Blog and whitepaper links
**Pages observed:** https://powerreviews.com
**Spec:** Background: #f2f2f2 | Text: #000000 | Radius: 0px | Typography: Moderat 16px

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding | 80px (Vertical) |
| Grid Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; section padding reduces to 40px; buttons become full-width. |

## Imagery & decoration
- **Color Blocking:** Uses full-width background bands in saturated colors (Blue, Green, Yellow) to separate content sections.
- **Iconography:** Uses thin-stroke, multi-colored line icons (Teal, Blue, Green) for "Goals" and "Values" lists.
- **Photography:** Features high-quality lifestyle and office environment shots, often placed in sharp-edged containers.

## Do's
- Use **#000000** for all primary CTA backgrounds.
- Set display headings in **Moderat 700** or higher.
- Apply **999px radius** to all interactive buttons.
- Use **2.5px letter spacing** for 14px eyebrow headers.
- Keep card containers at **5px radius** or **0px radius**.

## Don'ts
- **Wrong:** Using #167f9c (Teal) as a primary button background. **Right:** Use #000000. **Reason:** Teal is an accent/link color, not a primary action color.
- **Wrong:** Applying rounded corners to section background blocks. **Right:** Keep them 0px (sharp).
- **Wrong:** Using a sub-brand color (like the lime green in testimonials) for global navigation elements.
- Do not use shadows on cards; the system relies on 1px borders (#e1e8ed) for separation.

## Similar brands
- Intercom
- Zendesk
- G2
- Trustpilot

## Quick start

### CSS Custom Properties
```css
:root {
  --pr-color-black: #000000;
  --pr-color-white: #ffffff;
  --pr-color-teal: #167f9c;
  --pr-color-border: #e1e8ed;
  --pr-font-main: 'Moderat', sans-serif;
  --pr-radius-pill: 999px;
  --pr-radius-card: 5px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #000000;
  --color-accent-teal: #167f9c;
  --font-display: "Moderat";
  --radius-pill: 999px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the PowerReviews spec: black background, white Moderat text, pill-shaped with 999px radius."
- "Design a feature section header with a 14px weight 100 eyebrow (2.5px spacing) and a 44px weight 700 Moderat title."
- "Build a content card with a white background, 1px #e1e8ed border, and 5px border radius."

## Known gaps
- Hover and active states for navigation items were not explicitly captured in the token set.
- Mobile-specific typography scale (exact px values) was not fully documented in the source evidence.

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