Nginx Error Page System

Overview

This design system governs server error pages and system feedback interfaces, prioritizing utilitarian clarity and rapid information hierarchy. The aesthetic is 'Austere Minimalism'—a deliberate rejection of ornament in favor of pure functional typography and neutral surfaces. The interface serves as a calm, honest messenger: when systems fail, the UI does not distract or deceive, but instead presents the error state with typographic dignity and restrained color. The brand personality is precise, matter-of-fact, and respectful of the user's time: no animations, no flourishes, no false reassurance. Example voice: 'nginx/1.24.0 (Ubuntu) — the server returned a 502 error at 14:32 UTC.'

Colors

The color palette is anchored in neutral grays and whites, with minimal accent usage. Surface (#ffffff) is the dominant background, paired with on-surface (#000000) for maximum contrast and accessibility. The primary color (#505050) is a mid-tone gray used for interactive elements and disabled states—it is deliberately muted to avoid drawing attention away from error messaging. Secondary (#6c757d) provides a softer alternative for metadata and timestamps. The surface-container stack (#fafafa through #d0d0d0) creates subtle visual separation for form controls and panels without introducing color. Error states use #dc3545 (red) only when necessary to flag critical failures; the error-container (#f8d7da) provides a light background for error messages. Hover states shift to secondary-container

Typography

The type system uses Times New Roman serif throughout, reinforcing the austere, institutional character of system messaging. Display (48px, 700 weight) is reserved for error codes and critical headings; headline-lg (32px, 700 weight) for primary error messages; body-md (14px, 400 weight) for explanatory text and metadata. The serif choice—unusual in modern web design—signals authority and permanence: this is not a marketing message, but a factual system state. Line-height is set to 1.5 (24px for body-md) to ensure readability even when users are stressed. Letter-spacing is minimal (0 to -0.02em) to maintain density and formality. For small labels over busy backgrounds (e.g., form hints), apply text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) to ensure legibility without color shifts.

Layout

The layout uses a centered, single-column grid with max-width 1200px, ensuring error messages remain readable on all viewport sizes. Vertical rhythm is governed by the spacing scale: lg (24px) separates major sections (heading, divider, subheading), md (12px) separates form groups, and sm (8px) separates inline elements. The page uses minimal horizontal padding (gutter: 16px on mobile, 24px on desktop) to maximize content width while maintaining breathing room. Form controls (select dropdowns, inputs) are full-width within their container to simplify mobile interaction. The divider element (1px solid #d0d0d0) provides visual separation without introducing new colors; it sits at 24px vertical margin above and below. Container max-width of 1200px ensures that even on ultra-wide displays, tex

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments, never through color or blur. The select-panel uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift it above the page surface, creating a clear z-index hierarchy (z-index: 999999 ensures it always appears above other content). Disabled form elements use a 1px solid border (#d0d0d0) and reduced opacity (0.6) rather than shadow, signaling their inactive state through flatness. Hover states on interactive elements (select options, buttons) shift background color to secondary-container (#f0f9fa) with no shadow change, maintaining the

Shapes

The shape philosophy is 'Minimal Technical'—rounded corners are used sparingly and only where they serve a functional purpose. All form controls (select openers, panels, inputs) use border-radius: 4px (DEFAULT), a subtle softening that prevents sharp corners from appearing harsh on screen while maintaining a technical, non-playful character. Buttons and interactive elements do not use full-radius (9999px); instead, they maintain the 4px radius to stay consistent with form controls. The rationale: sharp 90° corners feel institutional and austere (appropriate for error pages), while full-radius

Components

Form Controls Select dropdowns are the primary interactive element. The select-opener uses background-color: #e9ecef, border: 1px solid #d0d0d0, padding: 12px, and border-radius: 4px. The dropdown arrow is a pure CSS triangle (border-left: 5px solid transparent, border-right: 5px solid transparent, border-top: 5px solid #666666) positioned absolutely at right: 8px, top: 50%, transform: translateY(-50%). When the container has class bb-is-open, the arrow rotates 180deg. The select-panel appears at margin-top: 4px with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and max-height: 300px with overflow-y: auto for long option lists. ### Option States Each select-option uses padding: 6px 12px, line-height: 1.5, and cursor: pointer. On hover or focus (classes bb-has-focus or :hover), the backgrou

Do's and Don'ts

**Do**

• Do use Times New Roman serif for all body text and headings—it reinforces institutional authority and system credibility.
• Do maintain contrast ratios of at least 7:1 (WCAG AAA) between text and background, especially for error messages.
• Do use the spacing scale (lg: 24px for sections, md: 12px for groups, sm: 8px for inline) to create predictable, scannable layouts.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to floating panels (dropdowns, modals) to establish clear z-index hierarchy.
• Do use border-radius: 4px consistently across all form controls to maintain a cohesive, technical aesthetic.

**Don't**

• Don't use sans-serif fonts (Arial, Helvetica, system-ui) in place of Times New Roman—they undermine the austere, institutional character.
• Don't apply color transitions or animations to interactive elements; state changes must be instantaneous to maintain utilitarian clarity.
• Don't use full-radius (border-radius: 9999px) on buttons or form controls—it introduces a playful, consumer-focused tone inappropriate for error messaging.
• Don't add drop shadows to disabled form elements; instead, use reduced opacity (0.6) and flat borders to signal their inactive state.
• Don't exceed max-width: 1200px for page containers—wider layouts reduce readability and increase cognitive load during error states.