# Powerfront Design System

> High-contrast enterprise AI canvas defined by bold Nunito typography, sharp monochrome foundations, and a singular high-voltage red accent.

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

## TL;DR
Powerfront utilizes a high-contrast monochrome foundation of pure white (#ffffff) and deep charcoal (#333333) to establish an enterprise-grade AI aesthetic. The brand's visual energy is concentrated in a primary red accent (#ff0038) used for critical CTAs and a secondary cyan accent (#1bb9da) for interactive highlights. Typography is anchored by the Nunito family, specifically leveraging an extra-bold 800 weight for display headlines to create a sense of authoritative scale. UI elements favor sharp or subtly rounded corners (6px to 12px), avoiding the hyper-soft pill shapes common in consumer SaaS.

## Signature DNA
1. **The 800-Weight Anchor** (Nunito at weight 800 is used for all major display and section headings, creating a heavy, stable typographic hierarchy across the homepage and pricing pages.)
2. **High-Voltage Red CTAs** (The use of #ff0038 as a primary action color provides a high-contrast focal point against the neutral canvas, specifically for "Book a Demo" and "Get Started" actions.)
3. **Cyan-Tinted Interactivity** (Interactive cards and secondary buttons utilize #1bb9da, creating a clear functional distinction between global brand actions and feature-level exploration.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| INSIDE™ | #ff0038 | Robotic avatars / Chat UI | All parent tokens | Product-specific imagery |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, primary surface, button text | 219 | 1 | computed_style |
| `{color.charcoal}` | #333333 | Primary text, footer background, dark surfaces | 97 | 1 | computed_style |
| `{color.gray-dark}` | #666666 | Secondary body text | 38 | 0.8 | computed_style |
| `{color.gray-mid}` | #999999 | Muted text, captions | 18 | 0.8 | computed_style |
| `{color.gray-light}` | #e4e4e4 | Form borders, dividers | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary-red}` | #ff0038 | Primary CTA background, border, and text | 8 | 1 | brand_page |
| `{color.accent-cyan}` | #1bb9da | Secondary button background, borders, text | 21 | 0.8 | computed_style |
| `{color.accent-gold}` | #ffc94c | Decorative text highlights | 3 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Nunito | 100, 400, 500, 600, 700, 800 | Display, Headings, UI | Nunito (Google Fonts) | SIL Open Font |
| Nunito Sans | 300, 400, 600, 700, 800 | Body, Subheadings | Nunito Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 48px | normal | 800 | Hero headlines | h2 |
| `{type.h2}` | 36px | 46.8px | 1px | 800 | Section titles | h2.title |
| `{type.h3}` | 26px | 32px | normal | 800 | Feature titles | h2.feature-title |
| `{type.h4}` | 20px | 28px | normal | 800 | Card titles | h3.card-title |
| `{type.body-lg}` | 18px | 28.8px | 0.09px | 500 | Intro paragraphs | p:nth-of-type(1) |
| `{type.body}` | 16px | 24px | normal | 500 | Default body | p |
| `{type.button}` | 16px | 38px | normal | 800 | Form buttons | input.hs-button.primary |
| `{type.caption}` | 12px | 24px | normal | 600 | Copyright, small labels | p.copyright |

### Principles
1. **Heavyweight Headlines:** Use weight 800 for all content-bearing titles to maintain brand authority.
2. **Sans-Serif Exclusivity:** No serifs are permitted; the brand relies on the rounded terminals of Nunito to soften the high-contrast palette.
3. **Generous Line Height:** Body text maintains a 1.5x (24px on 16px) ratio to ensure legibility on dense enterprise pages.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 12px | 125 |
| `{space.md}` | 16px | 22 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 100px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main sections, navigation | 307 occurrences |
| `{radius.sm}` | 6px | Buttons, inputs | 10 occurrences |
| `{radius.md}` | 12px | Feature cards | 16 occurrences |
| `{radius.lg}` | 20px | Large containers | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.input}` | rgba(0, 0, 0, 0.08) -3px 3px 10px 0px | Form fields | Text Input component |
| `{shadow.nav}` | rgba(0, 0, 0, 0.1) 0px 2px 8px -4px | Sticky navigation | Navigation component |
| `{shadow.card}` | rgba(82, 97, 115, 0.18) 0px 8px 16px 0px | Pricing cards | Card component |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: #ffffff | Text: #666666 | Shadow: `{shadow.nav}` | Font: 16px Nunito
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** pricing, homepage
**Spec:** Background: #ffffff | Border: 1px #e4e4e4 | Radius: 6px | Shadow: `{shadow.input}`
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Rounded Button (Primary)
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** All
**Spec:** Background: #ff0038 | Text: #ffffff | Radius: 6px | Typography: 16px Nunito 800
**States observed:** Default | Active: captured

#### Rounded Button (Secondary)
**Role:** Secondary actions or feature links
**Pages observed:** All
**Spec:** Background: transparent | Border: 2px #ff0038 | Text: #ff0038 | Radius: 6px
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** homepage
**Spec:** Background: #ffffff | Border: 1px #1bb9da | Radius: 12px | Padding: 18px 25px
**States observed:** Default | Hover: not captured

#### Pricing Card
**Role:** Plan selection
**Pages observed:** pricing
**Spec:** Background: #ffffff | Shadow: `{shadow.card}` | Radius: 0px | Padding: 16px 16px 12px
**States observed:** Default | Hover: not captured

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px |
| Section Padding (Vertical) | 100px |
| Grid Gutter | 25px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Multi-column grids (3-up or 4-up) |
| Mobile | 390px | Single column stack; navigation collapses to hamburger menu |

## Imagery & decoration
Powerfront uses high-fidelity 3D robotic avatars and clean, isometric UI screenshots to demonstrate the "INSIDE" platform. It avoids stock photography of humans, preferring to visualize the AI itself.

## Do's
- Use Nunito 800 for all section headers.
- Reserve #ff0038 for the most critical conversion actions.
- Use #1bb9da for informational icons and secondary borders.
- Maintain a minimum 100px vertical gap between major content sections.
- Apply `{shadow.input}` to all white-background form fields.

## Don'ts
- **Wrong:** Using #1bb9da for the "Book a Demo" button. **Right:** Use #ff0038. **Reason:** Red is the primary conversion color; cyan is for secondary interaction.
- **Wrong:** Using Serif fonts for body copy. **Right:** Use Nunito Sans. **Reason:** The brand is strictly sans-serif.
- **Wrong:** Applying pill-shaped (9999px) radii to buttons. **Right:** Use 6px. **Reason:** The system uses geometric, slightly rounded corners, not full pills.

## Similar brands
- Zendesk (Enterprise structure)
- Intercom (Chat-centric UI)
- Salesforce (Form and layout density)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --pf-primary-red: #ff0038;
  --pf-accent-cyan: #1bb9da;
  --pf-charcoal: #333333;
  --pf-white: #ffffff;
  --pf-font-main: 'Nunito', sans-serif;
  --pf-radius-sm: 6px;
  --pf-shadow-input: -3px 3px 10px 0px rgba(0, 0, 0, 0.08);
}
```

## Agent prompt examples
- "Create a primary CTA button using Powerfront red #ff0038, white text, and a 6px border radius with Nunito 800 typography."
- "Design a feature card with a 1px cyan #1bb9da border, 12px corner radius, and a Nunito 800 title."
- "Generate a contact form layout using white inputs with the specific Powerfront shadow: rgba(0, 0, 0, 0.08) -3px 3px 10px 0px."

## Known gaps
- Hover states for secondary cards were not fully captured in the static analysis.
- Specific tablet breakpoints (768px-1024px) were not sampled.

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