# Powr Design System

> A professional utility canvas defined by deep slate-blue ink, high-contrast white surfaces, and vibrant electric-blue interactive triggers.

**Source:** [https://powr.io](https://powr.io) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Powr utilizes a "utility-first" aesthetic that balances a corporate slate-blue foundation (`#55667d`) with a high-energy primary blue (`#3b8cff`) for all critical actions. The system is built on the **Gordita** typeface family, using bold weights for structural clarity and medium weights for interactive labels. Layouts are strictly modular, utilizing white cards with generous radii (16px to 24px) against light gray or deep navy backgrounds. The interface relies on clear vertical rhythms (spacing units of 16px and 20px) and a consistent 4px border radius for primary buttons to maintain a tool-like, efficient feel.

## Signature DNA
1. **The Electric Trigger** (Primary actions consistently use `#3b8cff` against white or dark backgrounds to signal high-priority conversion points across all pages).
2. **Gordita Geometry** (The system is anchored by the Gordita typeface, specifically using `__gorditaBold` for display headers at 48px to establish a friendly but authoritative hierarchy).
3. **Soft Modular Surfaces** (Content is encapsulated in cards with 16px or 24px corner radii, often using subtle borders `#eff2f4` or high-contrast backgrounds like `#142a60` to separate functional zones).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card surface | 189 | 1.0 | computed_style |
| `{color.ink.primary}` | `#55667d` | Default body text and navigation links | 210 | 0.8 | computed_style |
| `{color.ink.deep}` | `#32383e` | High-emphasis body text | 18 | 0.8 | computed_style |
| `{color.border.light}` | `#eff2f4` | Table dividers and subtle card outlines | 16 | 0.8 | computed_style |
| `{color.border.medium}` | `#bec6ca` | Secondary button borders and form edges | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.action.primary}` | `#3b8cff` | Primary CTA backgrounds, active toggles, and text links | 42 | 0.8 | computed_style |
| `{color.surface.navy}` | `#142a60` | Hero sections and high-contrast feature cards | 56 | 0.8 | computed_style |
| `{color.surface.slate}` | `#354051` | Footer background and secondary section bands | 45 | 0.8 | computed_style |
| `{color.surface.dark}` | `#1f2a3c` | Pricing table "Popular" column emphasis | 22 | 0.8 | computed_style |
| `{color.accent.gold}` | `#ffd480` | Decorative highlights and star ratings <decorative_only> | 5 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `Gordita Bold` | 400, 500, 700 | Display and section headings | Montserrat Bold | Licensed |
| `Gordita Medium` | 400, 500 | Subheadings and UI labels | Montserrat Medium | Licensed |
| `Gordita` | 400, 500 | Body copy and navigation | Montserrat | Licensed |
| `Sriracha` | 700 | Stylized display accents | Sriracha (Google) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 48px | 48px | normal | 400 | Main Hero H1 | `h1.text-4xl.font-gordita-bold` |
| `{type.display.lg}` | 36px | 40px | normal | 400 | Section Headers | `div.text-2xl.font-gordita-bold` |
| `{type.display.md}` | 32px | 35.2px | normal | 500 | Pricing Headlines | `h4.pricing-page__dollar-price` |
| `{type.heading.sm}` | 24px | 26.4px | normal | 700 | FAQ Categories | `h3.faq-category-title` |
| `{type.heading.xs}` | 20px | 28px | normal | 400 | Card Titles | `div.text-color9.text-base` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Intro Paragraphs | `div.text-sm.sm:text-lg` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body Copy | `div.font-gordita.text-base` |
| `{type.body.sm}` | 14px | 26px | normal | 400 | Footer/Small Print | `p` |
| `{type.caption}` | 12px | 17.14px | normal | 700 | Billing Labels | `div.slash.font-bold` |

### Principles
1. **Heading Weight is Structural:** Use `Gordita Bold` for all H1-H3 elements to create a clear visual anchor.
2. **Medium for Interaction:** Buttons and navigation links use `Gordita Medium` to distinguish them from static body text.
3. **Tight Display Leading:** Display sizes (32px+) use a tight line-height (approx 1.1x) to keep multi-line headers cohesive.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 81 |
| `{space.sm}` | 12px | 24 |
| `{space.md}` | 16px | 91 |
| `{space.lg}` | 20px | 64 |
| `{space.xl}` | 32px | 35 |
| `{space.xxl}` | 48px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Page sections, footer | `0px` (594 occurrences) |
| `{radius.sm}` | 4px | Buttons, inputs | `Rounded Button` (Tier 1) |
| `{radius.md}` | 8px | Control elements | `8px` (17 occurrences) |
| `{radius.lg}` | 16px | Standard cards | `Surface` (Observed once) |
| `{radius.xl}` | 24px | Feature/Hero cards | `Card` (Observed once) |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `Flat` | none | Default card state | Most components |
| `{shadow.nav}` | `rgb(160, 171, 190) 0px 2px 1px -2px` | Top navigation bar | `Navigation` component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Primary site-wide CTA
**Pages observed:** pricing, about
**Spec:** Background `#3b8cff` / Text `#ffffff` / Border `#3b8cff` (1px) / Radius `4px` / Padding `8px 16px` / Typography `16px`
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Rounded Button (Secondary)
**Role:** Ghost/Outline action
**Pages observed:** pricing, about
**Spec:** Background `transparent` / Text `#3b8cff` / Border `#bec6ca` (1px) / Radius `4px` / Padding `8px 16px` / Typography `16px`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Navigation
**Role:** Global header
**Pages observed:** pricing, about
**Spec:** Background `#ffffff` / Text `#55667d` / Border `none` / Radius `0px` / Padding `0px 14.25px` / Shadow `{shadow.nav}`
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site footer
**Pages observed:** pricing, about
**Spec:** Background `#354051` / Text `#6b7f9a` / Border `none` / Radius `0px` / Padding `40px` / Typography `16px`
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card (Standard)
**Role:** Pricing tier display
**Pages observed:** pricing
**Spec:** Background `#ffffff` / Text `#55667d` / Border `#eff2f4` (1px) / Radius `16px` / Padding `24px`
**States observed:** Default

#### Feature Card (Dark)
**Role:** High-impact feature highlight
**Pages observed:** homepage
**Spec:** Background `#142a60` / Text `#ffffff` / Border `none` / Radius `24px` / Padding `32px`
**States observed:** Default

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

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding-x reduced to 16px; font-size `text-4xl` scales to `text-2xl`. |

## Imagery & decoration
Powr uses stylized vector accents, such as the yellow "hand-drawn" arrow and underline on the homepage hero. It avoids heavy photography in favor of product screenshots and clean iconography.

## Do's
- Use `#3b8cff` for all primary conversion buttons.
- Wrap content in cards with at least `16px` radius.
- Use `Gordita Bold` for display headers at `48px`.
- Maintain a white canvas (`#ffffff`) for readability in tool-heavy sections.
- Use `#55667d` for secondary text to maintain soft contrast.

## Don'ts
- Do not use `#000000` for body text; use `{color.ink.primary}` or `{color.ink.deep}`.
- Do not apply sharp corners (`0px`) to buttons; always use `{radius.sm}`.
- Do not use sub-brand accent colors (like a hypothetical orange) for global navigation elements.
- Do not exceed `1.1` line-height for display headers.

## Similar brands
- Intercom
- Zendesk
- HubSpot
- Typeform

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #3b8cff;
  --color-ink: #55667d;
  --color-canvas: #ffffff;
  --color-surface-dark: #142a60;
  --radius-button: 4px;
  --radius-card: 16px;
  --font-main: "Gordita", sans-serif;
}
```

### Tailwind v4 Theme
```javascript
@theme {
  --color-primary: #3b8cff;
  --color-slate-blue: #55667d;
  --color-navy-deep: #142a60;
  --font-gordita: "Gordita", "ui-sans-serif";
  --radius-card: 16px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Powr's electric blue #3b8cff, 4px border radius, and Gordita Medium 16px text."
- "Design a feature card with a #142a60 background, 24px corner radius, and white Gordita Bold header."
- "Build a pricing table row using #eff2f4 for dividers and #55667d for the text labels."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated trace.
- Specific mobile breakpoint values (e.g., 768px, 1024px) were inferred from standard responsive behavior as only 390px and 1440px were sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | `https://powr.io` | 1440px | 2026-06-06 |
| Pricing | `https://powr.io/pricing` | 1440px | 2026-06-06 |
| Mobile Home | `https://powr.io` | 390px | 2026-06-06 |