# Phishfirewall Design System

> High-contrast cybersecurity utility meets geometric confidence, anchored by a deep blood-red primary and stark slate foundations.

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

## TL;DR
Phishfirewall utilizes a high-contrast "Dark Mode" aesthetic even on light canvases, leaning heavily on a deep primary red (#ac2024) for critical actions and brand markers. The system is built on a geometric foundation of Montserrat, favoring bold weights (700) for display and medium weights (500) for UI labels. Surfaces alternate between pure white (#ffffff), soft gray (#f3f4f6), and deep slate (#111827) to create a rhythmic, section-based narrative. Components are defined by generous radii (12px to 16px) and a distinct "pill" geometry for badges and secondary buttons, while primary CTAs often use a softer 12px rounded corner with a deep, multi-layered drop shadow.

## Signature DNA
1. **The Crimson Anchor** (#ac2024 used for primary buttons, critical borders, and brand accents to signal urgency and security across all pages).
2. **Geometric Boldness** (Montserrat at 700 weight for all display headers, ranging from 24px to 72px, creating a technical yet accessible authority).
3. **Layered Elevation** (Use of complex, multi-stop shadows like `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` to lift primary conversion cards and buttons off the slate or white canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 204 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#1a1a1a` | Primary body text | 172 | 0.8 | Computed Style |
| `{color.slate.deep}` | `#111827` | Dark section backgrounds / Header text | 127 | 0.8 | Computed Style |
| `{color.border.light}` | `#e5e7eb` | Default hairline dividers and card borders | 66 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#f3f4f6` | Alternating section backgrounds | 39 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#ac2024` | Primary CTA background, brand borders | 62 | 0.8 | Computed Style |
| `{color.text.muted}` | `#4b5563` | Secondary descriptive text | 115 | 0.8 | Computed Style |
| `{color.brand.success}` | `#22c55e` | Success indicators, positive metrics | 28 | 0.8 | Computed Style |
| `{color.brand.slate-alt}` | `#0f172a` | Footer and deep-contrast surfaces | 3 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#16a34a` | Positive comparison markers, checkmarks |
| `{color.error}` | `#dc2626` | Warning text, negative comparison markers |
| `{color.info}` | `#3b82f6` | Focus rings (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 300, 400, 500, 600, 700 | All headings, body, and UI | Montserrat (Google Fonts) | OFL |
| ui-monospace | 400, 700 | Technical labels, mono-badges | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.2xl}` | 72px | 72px | normal | 700 | Hero H1 | `h1.text-5xl.md:text-7xl` |
| `{type.display.xl}` | 60px | 60px | normal | 700 | Section Hero | `h2.text-4xl.md:text-6xl` |
| `{type.display.lg}` | 48px | 48px | normal | 700 | Section Headers | `h2.text-4xl.md:text-5xl` |
| `{type.heading.lg}` | 36px | 40px | normal | 700 | Subsection Headers | `h2.text-3xl.md:text-4xl` |
| `{type.heading.md}` | 24px | 32px | normal | 700 | Card Titles | `h3.text-2xl.font-bold` |
| `{type.body.lg}` | 19px | 31.2px | normal | 400 | Lead Paragraphs | `p.text-gray-600.leading-relaxed` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `div.min-h-screen.bg-white` |
| `{type.caption.mono}` | 14px | 20px | 0.7px | 700 | Technical Badges | `div.text-sm.font-mono` |

### Principles
1. **Bold Intent:** All major headings must use weight 700.
2. **Relaxed Prose:** Body copy at 16px and 19px uses a leading of ~1.6x for high readability on technical topics.
3. **Monospace Utility:** Use `ui-monospace` only for small labels (12-14px) that denote machine-driven or status-based data.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 59 |
| `{space.sm}` | 16px | 98 |
| `{space.md}` | 24px | 135 |
| `{space.lg}` | 32px | 48 |
| `{space.xl}` | 96px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.control}` | 8px | Form inputs | 8px radius on Text Input |
| `{radius.button}` | 12px | Primary Action Buttons | 12px radius on Rounded Button |
| `{radius.card}` | 16px | Content Cards | 16px radius on Card component |
| `{radius.panel}` | 24px | Large Section Containers | 24px radius on Dark Cards |
| `{radius.pill}` | 9999px | Badges, Tags, Secondary Buttons | 9999px radius on Card/Badge |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Hover states for small items | 16 occurrences |
| `{shadow.standard}` | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Primary Buttons and Pricing Cards | 34 occurrences |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | Floating Hero Elements | 7 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** All
**Spec:** Background: `#ac2024` | Text: `#ffffff` | Radius: `12px` | Padding: `16px 0px` | Typography: `Montserrat 700 18px` | Shadow: `{shadow.standard}`
**States observed:** Default: captured | Hover: not captured

#### Text Input
**Role:** Lead generation and contact forms
**Pages observed:** All
**Spec:** Background: `#f9fafa` | Text: `#1a1a1a` | Border: `1px solid #e5e7eb` | Radius: `8px` | Padding: `12px 16px`
**States observed:** Default: captured | Focus: not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature display and pricing tiers
**Pages observed:** All
**Spec:** Background: `#ffffff` | Border: `1px solid #e5e7eb` | Radius: `16px` | Padding: `32px` | Shadow: `{shadow.deep}` (on hover/active)
**States observed:** Default: captured | Active: captured

#### Status Badge
**Role:** Inline labels and category tags
**Pages observed:** All
**Spec:** Background: `rgba(172, 32, 36, 0.1)` | Text: `#b91c1c` | Border: `1px solid rgba(172, 32, 36, 0.4)` | Radius: `9999px` | Padding: `6px 16px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-impact narrative breaks
**Pages observed:** All
**Spec:** Background: `#111827` | Text: `#ffffff` | Radius: `24px` | Padding: `80px 0px`
**States observed:** Default: captured

#### Success Metric Card
**Role:** Displaying positive ROI or guarantees
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#ffffff` | Border: `2px solid #15803d` | Radius: `8px` | Padding: `16px 32px` | Text: `#15803d`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (implied by container) |
| Section Vertical Padding | 96px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | H1 scales to 48px; Section padding reduces to 48px |
| Desktop | 1440px | H1 at 72px; 3-column card layouts |

## Imagery & decoration
Phishfirewall uses high-fidelity photographic portraits of "users" (e.g., Bob, Elizabeth) to humanize security risks. Decorative elements include stylized line-art icons for features and a "Virtual Assistant" (LoRa) UI overlay that uses a white card with `{shadow.standard}`.

## Do's
- Use `#ac2024` for all primary conversion buttons.
- Apply `Montserrat 700` for any text larger than 20px.
- Use `9999px` (pill) radius for non-interactive badges and status tags.
- Maintain a `96px` vertical gap between major page sections.
- Use `#f3f4f6` as a background to separate white content blocks.

## Don'ts
- Do not use sharp corners (0px) for interactive components; minimum radius is 8px.
- Do not use `#ac2024` for body text; reserve it for headers and UI accents.
- Do not use pure black (#000000) for text; use `#1a1a1a` or `#111827`.
- Do not apply `{shadow.deep}` to small inline elements; reserve for large cards.
- Do not mix font families in display headings; stick to Montserrat.

## Similar brands
- CrowdStrike (High contrast, security-focused)
- Snyk (Technical utility with bold accent colors)
- Palo Alto Networks (Enterprise security aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --pf-color-primary: #ac2024;
  --pf-color-slate: #111827;
  --pf-color-gray-soft: #f3f4f6;
  --pf-font-main: 'Montserrat', sans-serif;
  --pf-radius-card: 16px;
  --pf-shadow-standard: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #ac2024;
  --color-slate-900: #111827;
  --font-montserrat: "Montserrat";
  --radius-card: 16px;
  --shadow-pf: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Create a pricing card using a white background, 16px border radius, and a 1px border in #e5e7eb. The heading should be Montserrat 700 in #111827."
- "Generate a primary CTA button with a #ac2024 background, 12px border radius, and white Montserrat 700 text."
- "Design a status badge with a pill shape, light red background (10% opacity of #ac2024), and #b91c1c text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static CSS evidence.
- Mobile-specific navigation menu transitions were not sampled.
- Specific animation timing functions for the "LoRa" assistant were not captured.

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