# Powertofly Design System

> High-contrast monochrome precision anchored by tight geometric typography and vibrant mint-green functional accents.

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

## TL;DR
Powertofly utilizes a "monochrome-plus" system where a stark black-and-white foundation is punctuated by a specific high-visibility mint green (`#4fe8a9`). The typography is exceptionally structured, pairing the geometric Swiss-style **PP Neue Montreal** for display with the high-legibility **Inter Tight** for data-heavy headlines and **Inter** for functional body copy. Layouts rely on a generous 100px vertical rhythm and large-scale photography to humanize the technical AI subject matter. Elevation is minimal, favoring 1px borders and deep, soft shadows for card-based containers.

## Signature DNA
1. **The Mint Signal** (The use of `--iri-green` (#4fe8a9) as a functional highlight for badges, icons, and "AI" indicators against the black/white base.)
2. **Tight Display Geometry** (Inter Tight headlines at 700+ weight with aggressive negative letter-spacing, e.g., -4.16px on display sizes, creating a "stamped" architectural feel.)
3. **Card-on-Canvas Depth** (White cards with 20px-22px radii sitting on off-white or white canvases using complex dual-layer shadows for soft elevation.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--ink` | `#0a0a0a` | Primary text, button backgrounds, borders | 104 | 1 | `css_variable` |
| `--bg` | `#ffffff` | Primary page background, card surfaces | 89 | 1 | `css_variable` |
| `--color-primary` | `#000000` | Brand primary, high-contrast text/borders | 12 | 1 | `css_variable` |
| `--ink-2` | `#2a2a2a` | Secondary text, subheadings | 18 | 1 | `css_variable` |
| `--bg-soft` | `#fafaf6` | Subtle section backgrounds | 3 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--iri-green` | `#4fe8a9` | AI indicators, badges, primary accent | 14 | 1 | `css_variable` |
| `--green` | `#0a8c66` | Success states, emphasized text | 7 | 1 | `css_variable` |
| `--color-grey-dark` | `#101828` | Dark mode surfaces, footer backgrounds | 80 | 1 | `css_variable` |
| `--color-pink` | `#ec5167` | Decorative accent (decorative_only) | 3 | 1 | `css_variable` |
| `--color-teal-light` | `#beece9` | Decorative accent (decorative_only) | 1 | 1 | `css_variable` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| PP Neue Montreal | 400, 500, 600 | Primary Display / Headings | Space Grotesk | Licensed |
| Inter Tight | 700, 800 | Data Display / Hero Headlines | Inter Tight (Google) | Open Source |
| Inter | 400, 500, 600, 700 | Body, UI, Labels | Inter (Google) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 104px | 104px | -4.16px | 700 | Stat numbers | `div.stat-big-num` |
| `{type.display-hero}` | 68px | 68px | -2.72px | 700 | Hero headlines | `h1.hero-headline` |
| `{type.display-lg}` | 52px | 54.6px | -1.56px | 700 | Section headers | `h2` |
| `{type.heading-md}` | 24px | 38.4px | normal | 400 | Sub-section headings | `div.main.v-sep` |
| `{type.body-lg}` | 18px | 27.9px | 0.09px | 500 | Stat labels | `div.stat-big-label` |
| `{type.body-md}` | 16px | 24.8px | normal | 400 | Default body text | `section.hero` |
| `{type.caption-bold}` | 11px | 17.05px | 1.1px | 700 | Suffixes/Tags | `span.fh-suffix` |
| `{type.badge}` | 10px | 15.5px | normal | 600 | Green badges | `span.sc-badge` |

### Principles
1. **Aggressive display tracking:** Large Inter Tight headings must use negative letter-spacing (approx -4% of font size) to maintain a compact, high-density look.
2. **Geometric clarity:** PP Neue Montreal is used for narrative headings to provide a "softer" geometric contrast to the rigid Inter Tight.
3. **Uppercase utility:** Small labels and tags frequently use uppercase with increased tracking (0.88px - 1.1px) for legibility.

## Spacing
**Base unit:** 4px (inferred from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.md}` | 20px | 11 |
| `{space.xl}` | 32px | 12 |
| `{space.section}` | 100px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 280 occurrences |
| `{radius.card}` | 16px | Standard UI cards | 22 occurrences |
| `{radius.panel}` | 22px | Large feature cards | 5 occurrences |
| `{radius.pill}` | 999px | Buttons, badges | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Default surfaces | Standard |
| `elevated-soft` | `rgba(15, 30, 26, 0.04) 0px 1px 2px, rgba(15, 30, 26, 0.08) 0px 8px 28px` | Feature cards | `Card` component |
| `elevated-strong`| `rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.08) 0px 8px 32px` | Floating UI | `Card` component |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action
**Pages observed:** https://powertofly.com, https://powertofly.com/about
**Spec:** Background: `#0a0a0a` | Text: `#ffffff` | Radius: `999px` | Typography: Inter 600
**States observed:** Default | Hover: Not captured | Active: Captured

#### Badge AI
**Role:** Product/Feature identifier
**Pages observed:** https://powertofly.com
**Spec:** Background: `#4fe8a9` | Text: `#0a0a0a` | Radius: `999px` | Font-size: `10px`
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific service offerings
**Pages observed:** https://powertofly.com
**Spec:** Background: `#ffffff` | Border: `1px solid rgba(10, 10, 10, 0.09)` | Radius: `20px` | Shadow: `{elevated-soft}`
**States observed:** Default

#### Testimonial Card
**Role:** Social proof
**Pages observed:** https://powertofly.com
**Spec:** Background: `#ffffff` | Border: `1px solid rgba(10, 10, 10, 0.08)` | Radius: `22px` | Padding: `24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Stat Block
**Role:** High-impact data visualization
**Pages observed:** https://powertofly.com/about
**Spec:** Text: `#0a0a0a` | Typography: `{type.display-mega}` | Padding: `100px 32px`
**States observed:** Default

#### Hero Section
**Role:** Page entry point
**Pages observed:** https://powertofly.com, https://powertofly.com/about
**Spec:** Background: `#ffffff` | Typography: `{type.display-hero}` | Padding: `100px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px (approx) |
| Section Gap | 100px |
| Column Grid | 12-column desktop |

## Do's
- Use `#4fe8a9` exclusively for functional "AI" moments and primary badges.
- Apply negative letter-spacing to any Inter Tight headline above 32px.
- Use 20px-22px border radii for all content-containing cards.
- Maintain a minimum of 100px vertical padding between major sections.
- Ensure all primary buttons are full-pill (`999px`) and black (`#0a0a0a`).

## Don'ts
- **Wrong:** Using `#ec5167` (Pink) for a primary CTA. **Right:** Use `#0a0a0a`. **Reason:** Pink is a decorative accent, not a functional brand primary.
- **Wrong:** Setting display headlines in standard Inter. **Right:** Use Inter Tight. **Reason:** The system relies on the specific condensed geometry of the Tight variant.
- **Wrong:** Using sharp corners for cards. **Right:** Use 16px-22px radius. **Reason:** Sharp corners are reserved for full-width section containers only.
- Do not use saturated colors for page backgrounds; stick to `#ffffff` or `#fafaf6`.

## Similar brands
- **Scale AI** (High-contrast, technical typography, green accents)
- **Vercel** (Monochrome foundation, geometric precision)
- **Linear** (Stark UI, specific functional accent colors)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #000000;
  --iri-green: #4fe8a9;
  --ink: #0a0a0a;
  --bg: #ffffff;
  --radius-card: 20px;
  --shadow-soft: rgba(15, 30, 26, 0.04) 0px 1px 2px 0px, rgba(15, 30, 26, 0.08) 0px 8px 28px 0px;
}
```

## Agent prompt examples
- "Generate a feature card using a white background, a 20px border radius, and the soft shadow `rgba(15, 30, 26, 0.08) 0px 8px 28px`. Use PP Neue Montreal for the title."
- "Create a primary pill button with a black background (#0a0a0a), white text, and 999px radius."
- "Design a stat section with a 104px Inter Tight bold number using -4.16px letter spacing."

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the evidence.
- The exact mobile breakpoint for the 100px section padding transition was not captured.
- Secondary button variants (outline) were not present in the validated component array.