# Powtoon Design System

> A vibrant, high-contrast canvas where deep navy ink meets a spectrum of energetic purples and playful pastels, anchored by light-weight geometric typography.

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

## TL;DR
Powtoon utilizes a "monochrome-plus" strategy where a foundational navy (`#0d1740`) and off-white (`#fbfafe`) base is electrified by a primary purple (`#7a59e9`). The system is characterized by high-density layouts, generous use of rounded containers (up to `100px` radii), and a sophisticated typographic hierarchy using **Poppins** at a signature weight of `300` for large displays. Interactive elements are clearly tiered: primary actions use the brand purple, while secondary actions utilize a bright cobalt blue (`#3a57fa`) or outlined white variants.

## Signature DNA
1. **The Light-Weight Display** (Poppins at weight `300` is used for all major headings from `43px` to `52px`, creating an approachable, airy feel despite the high-contrast color palette.)
2. **Hyper-Rounded Geometry** (Buttons and feature panels consistently use `50px` to `100px` border radii, softening the professional "Enterprise" sections with the brand's creative heritage.)
3. **The Purple Voltage** (A specific progression from pale lavender `#e4dffd` to primary purple `#7a59e9` creates depth in pricing and feature grids without relying on traditional grays.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.neutral.dark}` | `#0d1740` | Primary text, footer bg, deep navy ink | 640 | 1 | `--_powtoon-pricing---neutral` |
| `{color.canvas.base}` | `#fbfafe` | Page background, subtle off-white warmth | 79 | 1 | `--_powtoon-pricing---light-grey` |
| `{color.canvas.pure}` | `#ffffff` | Card surfaces, button text, high-contrast text | 162 | 0.8 | Computed |
| `{color.ink.primary}` | `#333333` | Standard body text | 306 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary.base}` | `#7a59e9` | Primary CTA background, active states | 43 | 1 | `--purple` |
| `{color.primary.alt}` | `#854ce0` | Pricing tier emphasis, secondary purple | 19 | 1 | `--_powtoon-pricing---purple` |
| `{color.action.blue}` | `#3a57fa` | Secondary buttons, link accents | 6 | 1 | `--_powtoon-pricing---blue-btn` |
| `{color.accent.lavender}` | `#c3a9f8` | Decorative surfaces, light accents | 5 | 1 | `--light-purple` |
| `{color.accent.pale}` | `#e4dffd` | Pricing card backgrounds | 3 | 1 | `--pale-purple` |
| `{color.decorative.green}` | `#7ecd8a` | Decorative only | 1 | 1 | `--green` |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{color.success}` | `#1baf70` | Confirmation, positive metrics |
| `{color.warning}` | `#ffea04` | Attention, highlights |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **Poppins** | 200, 300, 400, 500, 600, 700 | Display, Headings, Buttons | Poppins (Google Fonts) | SIL Open Font |
| **proxima-nova** | 300, 400, 500, 600, 700 | UI Labels, Pricing, Body | Montserrat | Adobe Licensed |
| **sofia-pro** | 300, 400, 500 | Subheadings | Montserrat | Adobe Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 52px | 62.4px | normal | 300 | Hero H1 | `h2.heading-2` |
| `{type.display.lg}` | 43px | 55.9px | normal | 300 | Section Headers | `h2.white-title` |
| `{type.heading.md}` | 24px | 24px | normal | 500 | Card Titles | `h4.heading-199` |
| `{type.body.lg}` | 18px | 30px | normal | 500 | Feature Intro | `p.paragraph-53` |
| `{type.body.md}` | 16px | 20px | normal | 400 | Default Body | `div.text-block-232` |
| `{type.button}` | 16px | 20px | 1px | 500 | CTA Labels | `a.button.tab` |
| `{type.body.sm}` | 14px | 20px | 0.7px | 400 | Nav/Footer | `li` |
| `{type.caption}` | 12px | 20px | normal | 400 | Small labels | `div.text_2-2` |

### Principles
1. **Lightweight Authority:** Use Poppins 300 for all text above 32px. Never use Bold for primary page headings.
2. **Wide Tracking on UI:** Buttons and navigation links (`14px-16px`) use `0.7px` to `1px` letter spacing for legibility.
3. **Navy as the New Black:** Avoid `#000000` for text; use `#0d1740` for display and `#333333` for body.

## Spacing
**Base unit:** 10px (observed as the most frequent increment)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 51 |
| `{space.sm}` | 10px | 384 |
| `{space.md}` | 20px | 107 |
| `{space.lg}` | 40px | 28 |
| `{space.xl}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sm}` | 4px | Inputs, small tags | `radii.role:input` |
| `{radius.md}` | 10px | Secondary buttons | `Rounded Button (blue)` |
| `{radius.lg}` | 24px | Feature cards | `Card (white)` |
| `{radius.pill}` | 50px | Primary CTA buttons | `Rounded Button (purple)` |
| `{radius.max}` | 100px | Hero containers | `radii.role:panel` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.surface}` | `rgba(18, 27, 78, 0.11) 0px -20px 35px 0px` | Pricing cards, floating panels | `Surface component` |
| `{shadow.pop}` | `rgba(0, 0, 0, 0.22) 5px 5px 33px 0px` | Hover states | `shadows[1]` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Start now, Get started)
**Pages observed:** All
**Spec:** Background `{color.primary.base}` (#7a59e9) | Text `#ffffff` | Radius `50px` | Padding `4px 20px 0px` | Typography `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button (Blue)
**Role:** Alternative actions (Learn more, Demo)
**Pages observed:** All
**Spec:** Background `{color.action.blue}` (#3a57fa) | Text `#ffffff` | Radius `10px` | Padding `0px 20px` | Typography `{type.button}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background `rgba(255, 255, 255, 0.9)` | Text `#333333` | Radius `0px` | Font Size `14px`
**States observed:** Default | Hover: Captured

#### Feature Card
**Role:** Benefit and tool showcases
**Pages observed:** https://powtoon.com
**Spec:** Background `#ffffff` | Border `0px` | Radius `24px` | Typography `{type.body.md}`
**States observed:** Default | Hover: Captured

### Tier 3: Surface-specific

#### Pricing Panel
**Role:** Subscription tier display
**Pages observed:** https://powtoon.com/pricing
**Spec:** Background `#ffffff` | Border `1px #e4e5ea` | Shadow `{shadow.surface}` | Radius `0px`
**States observed:** Default

#### Accordion (FAQ)
**Role:** Frequently asked questions
**Pages observed:** https://powtoon.com/pricing
**Spec:** Border-bottom `1px #333333` | Text `#0d1740` | Typography `{type.body.md}`
**States observed:** Default | Active: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1200px (approx) |
| Section Padding | 90px vertical |
| Grid Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; 1-column stack; Heading size reduction to ~32px |
| Desktop | 1440px | Multi-column grids (3-up or 4-up); Full horizontal navigation |

## Imagery & decoration
Powtoon uses high-saturation photography mixed with 3D-rendered abstract shapes (spheres, cones). Graphics often break container boundaries to create a sense of "creativity unleashed." Avoids: Grayscale photography or sharp-cornered UI elements.

## Do's
- Use Poppins 300 for any heading exceeding 32px.
- Apply `#7a59e9` for the primary conversion path.
- Use `#0d1740` for heavy text blocks to maintain brand depth.
- Ensure all cards have at least a `16px` border radius.
- Use `100px` spacing for major section transitions.

## Don'ts
- **Wrong:** Using `#000000` for body text. **Right:** Use `#333333`. **Reason:** Pure black creates vibrating contrast on the off-white canvas.
- **Wrong:** Using Poppins Bold (700) for hero headlines. **Right:** Use Poppins Light (300). **Reason:** Signature brand weight is 300.
- **Wrong:** Mixing sharp-cornered buttons with rounded cards. **Right:** Keep all interactive elements at `radius.md` or higher.
- **Wrong:** Using sub-brand colors (like a specific product orange) as the global nav background. **Right:** Keep nav white/transparent.

## Similar brands
- Canva
- Loom
- Pitch
- Miro

## Quick start

```css
/* CSS Custom Properties */
:root {
  --powtoon-primary: #7a59e9;
  --powtoon-navy: #0d1740;
  --powtoon-canvas: #fbfafe;
  --powtoon-blue: #3a57fa;
  --font-display: 'Poppins', sans-serif;
  --radius-pill: 50px;
  --radius-card: 24px;
}
```

## Agent prompt examples
- "Create a pricing card using Powtoon's navy text (#0d1740), a white background, and a primary purple button (#7a59e9) with a 50px border radius."
- "Generate a hero section with a Poppins 300 weight headline at 52px and a background color of #fbfafe."
- "Design a feature grid where each card has a 24px border radius and uses Poppins 500 for the 24px titles."

## Known gaps
- Hover and Focus states for primary buttons were not explicitly captured in the static CSS tokens.
- The specific transition timing for the "Odometer" price animation was not captured.
- Mobile-specific spacing tokens (e.g., `--mobile-gutter`) were not declared in the source.

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