# Ampifire Design System

> High-contrast digital publishing engine anchored by a vibrant magenta-pink pulse on a clean, structured canvas.

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

## TL;DR
Ampifire utilizes a high-energy "monochrome plus accent" system where a saturated magenta-pink (`#c41453` / `#ed256e`) provides the primary visual voltage against a clinical white and deep slate background. The typography is a mix of the system-native `-apple-system` for high-utility data and **DM Sans** for approachable marketing headers. Layouts are heavily structured with 14px rounded cards and consistent 1px borders in light indigo-grey (`#e9ebf3`). The system balances professional SaaS density with aggressive, high-contrast call-to-actions.

## Signature DNA
1. **The Magenta Pulse** (Saturated pink accents used for critical CTAs, emphasis text, and progress indicators across all pages).
2. **Soft-Structured Containers** (14px rounded corners on cards and surfaces, often paired with subtle 1px borders to organize dense content).
3. **Hybrid Typography** (The juxtaposition of geometric DM Sans for headers with the utilitarian precision of system fonts for technical labels and numbers).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 69 | 1.0 | `--white` |
| `{color.slate.dark}` | `#141418` | Primary text, borders, high-contrast button text | 52 | 0.8 | Computed style |
| `{color.slate.deep}` | `#0b0b0e` | Dark section backgrounds, headings | 26 | 0.8 | Computed style |
| `{color.grey.standard}` | `#555555` | Secondary body text | 23 | 0.8 | Computed style |
| `{color.grey.border}` | `#e9ebf3` | Default 1px card and section dividers | 28 | 0.8 | Computed style |
| `{color.grey.light}` | `#f5f6fb` | Subtle section backgrounds, alternating rows | 19 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#ed256e` | Primary button background, active states | 6 | 0.6 | Computed style |
| `{color.accent.deep}` | `#c41453` | Emphasis text, brand highlights | 28 | 0.8 | Computed style |
| `{color.accent.bright}` | `#ff2d70` | Decorative borders, soft surface highlights | 16 | 0.8 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| DM Sans | 400, 500, 700 | Marketing headers, primary buttons | DM Sans (Google Fonts) | OFL |
| -apple-system | 300, 600, 700, 800 | Technical data, labels, hero subtitles | Inter | System |
| Poppins | 500, 600 | Testimonial names, sub-labels | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 35px | 39.74px | -0.34px | 700 | Main Page Hero | `h1#title` |
| `{type.h2}` | 32px | 40px | normal | 500 | Section Headers | `h2` |
| `{type.display.num}` | 30px | 44.08px | -0.30px | 800 | Metric/Number callouts | `div.num` |
| `{type.h3}` | 30px | 36px | normal | 400 | Sub-section headers | `h3` |
| `{type.h4}` | 24px | 31px | normal | 400 | Small feature headers | `h4` |
| `{type.body.lg}` | 18px | 26.1px | normal | 300 | Hero intro text | `header.hero` |
| `{type.button.lrg}` | 18px | 24px | normal | 700 | Primary CTA | `a.btn.btn-lrg` |
| `{type.body.md}` | 16px | 26px | normal | 400 | Standard body copy | `div.top-content` |
| `{type.label.sm}` | 14px | 20.88px | 1.72px | 700 | Kickers / Eyebrow text | `span.kicker` |

### Principles
1. **Metric Emphasis:** Large numbers use weight 800 and negative letter spacing to command attention.
2. **Kicker Styling:** Small labels use heavy tracking (1.72px) and bold weights (700) for categorization.
3. **Header Hierarchy:** DM Sans is reserved for narrative headers, while system fonts handle data-heavy UI.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 10 |
| `{space.sm}` | 12px | 19 |
| `{space.md}` | 16px | 50 |
| `{space.lg}` | 24px | 12 |
| `{space.xl}` | 32px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp sections, images | 161 occurrences |
| `{radius.sm}` | 4px | Form inputs, secondary buttons | `about` page buttons |
| `{radius.md}` | 10px | Content cards, testimonial blocks | `div.card` |
| `{radius.lg}` | 14px | Feature surfaces, pricing cards | `Surface` component |
| `{radius.pill}` | 999px | Badges, tags | `span.tag` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Standard cards | `Surface` component |
| Raised | `rgba(108, 108, 108, 0.41) 0px 4px 4px 0px` | Primary buttons | `Rounded Button` |
| Focus | `rgba(255, 45, 112, 0.12) 0px 0px 0px 4px` | Active/Focus states | Evidence shadow list |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Primary content container for features and pricing.
**Pages observed:** Homepage, Pricing.
**Spec:** Background: transparent / Text: `#141418` / Border: 1px `#e9ebf3` / Radius: 14px / Padding: 18px / Typography: 18px.
**States observed:** Default: Captured | Hover: Not captured.

#### Rounded Button (Secondary)
**Role:** Ghost-style actions or secondary navigation.
**Pages observed:** Homepage, Pricing.
**Spec:** Background: transparent / Text: `#141418` / Border: 1px `rgba(20, 20, 24, 0.14)` / Radius: 14px / Padding: 18px.
**States observed:** Default: Captured.

### Tier 2: Patterns

#### Primary CTA Button
**Role:** Main conversion action (e.g., "Apply for DIY").
**Pages observed:** About.
**Spec:** Background: `#ed256e` / Text: `#ffffff` / Border: none / Radius: 4px / Padding: 12px 35px / Shadow: `rgba(108, 108, 108, 0.41) 0px 4px 4px 0px`.
**States observed:** Default: Captured.

#### Feature Card
**Role:** Displaying specific service benefits.
**Pages observed:** About.
**Spec:** Background: `#ffffff` / Text: `#282b30` / Border: 1px `#eeeeee` / Radius: 10px / Padding: 0px.
**States observed:** Default: Captured.

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Highlighted pricing options.
**Pages observed:** Pricing.
**Spec:** Background: transparent / Text: `#141418` / Border: 1px `rgba(255, 45, 112, 0.22)` / Radius: 14px / Padding: 16px 18px.
**States observed:** Default: Captured.

#### Metric Badge
**Role:** Displaying percentage growth or status.
**Pages observed:** Homepage.
**Spec:** Background: transparent / Text: `#c41453` / Typography: 14px 800 / Radius: 999px.
**States observed:** Default: Captured.

## Layout
| Property | Value |
|------|-------|
| Max Content Width | ~1200px |
| Section Gap | 45px - 64px |
| Grid | 3-column (Features), 4-column (Pricing) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked cards, centered headers, reduced padding (16px) |
| Desktop | 1440px | Multi-column grids, horizontal navigation |

## Imagery & decoration
Ampifire uses a "Logoscape" motif—circular clusters of third-party platform logos (YouTube, LinkedIn, etc.) surrounding the Ampifire brand mark. Decorative elements include thin magenta horizontal rules and large, high-contrast numeric counters.

## Do's
- Use `#ed256e` for primary conversion buttons only.
- Apply 14px border radius to all major content surfaces.
- Use DM Sans for marketing headlines to maintain brand approachability.
- Maintain 1px border in `#e9ebf3` for card-based layouts.
- Use system fonts (`-apple-system`) for data-dense tables and technical labels.

## Don'ts
- **Wrong:** Using `#c41453` as a button background. **Right:** Use `#ed256e`. **Reason:** `#c41453` is reserved for text emphasis and brand signals, not interactive fills.
- **Wrong:** Applying sharp corners to content cards. **Right:** Use 10px or 14px radius. **Reason:** The brand identity relies on soft-structured containers.
- **Wrong:** Using DM Sans for technical data. **Right:** Use system fonts. **Reason:** System fonts provide better legibility for high-density metrics.

## Similar brands
- HubSpot (Structure and density)
- ClickUp (Color usage and SaaS layout)
- Sprout Social (Platform-centric imagery)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #ed256e;
  --color-accent: #c41453;
  --color-slate-dark: #141418;
  --color-border: #e9ebf3;
  --radius-card: 14px;
  --font-header: 'DM Sans', sans-serif;
  --font-data: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
```

## Known gaps
- Hover and Active states for primary buttons were not fully captured in the static evidence.
- Mobile navigation transition states were not sampled.
- Semantic colors for success/error messages were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://ampifire.com | 1440px | 2026-06-06 |
| Pricing | https://ampifire.com/pricing | 1440px | 2026-06-06 |
| About | https://ampifire.com/about | 1440px | 2026-06-06 |