Error 403

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/manforcecondoms.com -->
<!-- Extracted: 2026-08-21T10:01:04.173Z | Schema: v1 | Quality: 85/100 -->
---
version: alpha
name: "Error 403"
description: "A stark, high-contrast digital presence that mimics a system error page to create a humorous, deadpan interruption. The aesthetic is purely functional and utilitarian, relying on standard system fonts and a rigid black-and-white palette to convey a sense of 'blocked access' or 'forbidden' content."
colors:
  neutral: "#7d7d7d"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#7d7d7d"
typography:
  headline-lg:
    fontFamily: "Verdana"
    fontSize: "20px"
    fontWeight: "700"
  headline-md:
    fontFamily: "Lato"
    fontSize: "24px"
    fontWeight: "800"
  body-md:
    fontFamily: "Verdana"
    fontSize: "13.3333px"
    fontWeight: "400"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
---

# Error 403 — Design System

## Overview

The design atmosphere of Error 403 is a deliberate exercise in digital minimalism and utilitarian deadpan humor. It mimics the aesthetic of a system error page, creating a stark, high-contrast presence that interrupts the user with a sense of forbidden access. The visual language is purely functional, relying on standard system fonts and a rigid monochrome palette to convey authority and finality. This approach aligns with the archetypes of The Jester and The Outlaw, using the subversion of expected web aesthetics to create a humorous, memorable experience. Comparable brands include Plain Text interfaces, System Default themes, and classic Terminal Interfaces, all of which prioritize clarity and raw functionality over decorative embellishment. The design is not about warmth, approachability, or modern trends; it is about starkness, efficiency, and a touch of rebellious wit. By embracing the 'blocked access' narrative, the interface becomes a character in its own right, communicating through absence and limitation rather than abundance and invitation. This creates a unique emotional register: one of slight confusion followed by amusement, as the user realizes the 'error' is the feature. The design avoids all marketing fluff, hedging, and decorative elements, focusing instead on the purity of the message and the integrity of the system's response.

**Key characteristics:**

- Vibe — utilitarian, deadpan, monochrome, system-ui, minimalist, humorous
- Archetypes — The Jester, The Outlaw
- Comparable to — Plain Text, System Default, Error 404 Pages, Terminal Interfaces
- Design era — flat-2.0
- Emotional tone — detached-ironic
- Target audience — Adults seeking humor or novelty, likely tech-savvy individuals who appreciate deadpan wit and anti-marketing aesthetics.
- Visual energy — 2/10 (calm/understated)

## Colors

The color philosophy is strictly monochrome, utilizing a binary palette of black and white to signal the brand's character. This stark contrast reinforces the utilitarian nature of the design, evoking the feel of a terminal or a printed error log. The absence of color eliminates distraction, forcing the user to focus solely on the text and the message. This choice is not merely aesthetic but functional, ensuring maximum readability and reinforcing the 'system error' narrative. The white surface provides a clean canvas, while black text delivers the authoritative voice of the interface. This simplicity is key to the brand's deadpan humor, as it strips away all non-essential visual noise.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#7d7d7d` | Gray |
| muted | `#7d7d7d` | Gray |

## Typography

The type system relies on standard, widely available fonts such as Verdana and Lato to ensure consistency and accessibility across all devices. Verdana’s readability at small sizes makes it ideal for the dense, informational text typical of error pages, while Lato offers a slightly more modern, neutral tone for headings. The hierarchy is simple and direct, using size and weight rather than color or decoration to distinguish elements. This approach communicates efficiency and clarity, aligning with the brand’s utilitarian values. The use of system-ui fonts further enhances the feeling of a native, unstyled interface, reinforcing the deadpan, no-nonsense character of Error 403.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Verdana | body | self-hosted | 400 |
| Verdana | heading | self-hosted | 700 |
| Lato | heading | self-hosted | 800 |
| Lato | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Verdana | 20px | 700 | — | — |
| Heading 3 | Lato | 24px | 800 | — | — |
| Body | Verdana | 13.3333px | 400 | — | — |

### Conventions

- Heading case — title-case

## Layout

- Base spacing unit — `2px`

## Do's and Don'ts

### Do

- Use Verdana 700 for all H1-H6 headings in Title Case, and Lato 800 for any secondary emphasis headings.
- Use Verdana 400 for all body copy and Lato 400 for supporting text, ensuring high readability with standard line-height (1.5).
- Maintain a strict monochrome palette: #ffffff for backgrounds and #000000 for all text and primary graphical elements.
- Apply a base spacing unit of 2px for all margins, padding, and gaps to maintain a tight, compact layout.
- Use 0px border-radius for all interactive elements and containers to enforce a sharp, system-like appearance.
- Implement zero visual effects: no box-shadows, no gradients, and no opacity variations on backgrounds.
- Format headings in Title Case (e.g., 'Error 403 Web Page Blocked') rather than sentence case or all caps.
- Use directive, matter-of-fact copy for CTAs (e.g., 'Contact Authority') without exclamations or emojis.

### Don't

- Do not use any color other than #000000 and #ffffff; avoid all accent colors, brand colors, or gradients.
- Do not apply any box-shadows (neither subtle nor multi-layer) to buttons, cards, or modals.
- Do not use rounded corners (border-radius > 0) on any UI element; keep all shapes rectangular.
- Do not use emojis, decorative icons, or illustrations; rely solely on typography and whitespace.
- Do not use exclamations (!) or enthusiastic punctuation in any copy; maintain a flat, serious tone.
- Do not use serif fonts or other sans-serif families (e.g., Arial, Helvetica); strictly use Verdana and Lato.
- Do not use lowercase or uppercase for headings; strictly adhere to Title Case.
- Do not use complex layouts or overlapping elements; maintain a flat, stacked, or grid-based structure.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 9/10 | casual |
| Playful ↔ Serious | 10/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 10/10 | matter-of-fact |
| Respectful ↔ Irreverent | 1/10 | respectful |
| Technical ↔ Accessible | 2/10 | technical |

### Copywriting style

- Avg. sentence length — 6 words
- Vocabulary — simple
- Jargon — heavy
- CTA style — directive instruction to contact authority

### Sample copy

> Error 403 Web Page Blocked

> What happened?

> What can I do?

> The page cannot be displayed.

> Please contact the administrator for additional information.

## Sources

- Official brand guidelines — https://peopleforce.io/press-kit
- Live brand page — https://extractvibe.com/brand/manforcecondoms.com
- Raw JSON — https://extractvibe.com/api/brand/manforcecondoms.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/manforcecondoms.com/design.md
- Extracted — 2026-08-21T10:01:04.173Z
- Generator — ExtractVibe vv1
- Quality score — 85/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md