CloudFront Error System

Overview

CloudFront Error System is a utilitarian, information-focused design language for HTTP error pages served by AWS CloudFront. It serves users experiencing access failures with clarity and directness, employing a 'Austere Clarity' aesthetic that prioritizes legibility and technical accuracy over visual embellishment. The interface evokes the precision of system diagnostics—monochromatic, serif-based, with minimal ornamentation—creating an atmosphere of technical competence and reliability even in failure states. The brand personality is matter-of-fact and helpful: it explains what went wrong without jargon, provides actionable next steps, and respects the user's time. Voice example: 'Request blocked. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.'

Colors

The color palette embraces a neutral, high-contrast foundation rooted in grayscale with subtle warm undertones. Primary (#505050) serves as the dominant text and interactive accent—a mid-tone gray that commands attention without aggression. Surface colors range from pure white (#ffffff) at the brightest to #fafafa for subtle container differentiation, with the surface-container-high (#e9ecef) used for disabled states and secondary emphasis. Secondary (#6c757d) provides a softer alternative for supporting text and metadata, while the secondary-container (#f0f9fa) offers a cool, barely-perceptible hover state for interactive elements. Tertiary (#666666) is reserved for decorative accents like dropdown arrows. The outline token (#d0d0d0) defines borders and dividers with a 1px stroke weight.

Typography

The type system anchors on Times New Roman serif, a choice that signals institutional authority and technical documentation heritage—evoking the aesthetic of system logs and terminal output. Display (48px, 700 weight, -0.02em tracking) is reserved for error codes and critical headings; headline-md (24px, 700 weight) for explanatory subheadings; body-lg (16px, 400 weight, 24px line-height) for primary message text. The serif choice creates visual distinction from contemporary web interfaces, reinforcing the 'this is a system message, not marketing' tone. All text uses line-height of 1.5em or greater to ensure readability on error pages where users may be stressed or distracted. Apply no text-shadow or text-decoration except for links, which use text-decoration: underline with color: {colors

Layout

The layout follows a single-column, full-width model (100% container-max-width) with left-aligned text and minimal horizontal padding. Content flows vertically with semantic spacing: lg (24px) between major sections (heading, subheading, body, divider, metadata), md (16px) between related paragraphs, and sm (8px) for inline spacing within form controls. Horizontal dividers (1px solid #d0d0d0) separate logical sections and provide visual breathing room. The grid is effectively 1 column; no multi-column layouts are used. Margins are set to 0 by default; padding is applied to containers only when necessary for touch targets (minimum 44px height for interactive elements like select dropdowns). The philosophy is 'content-first, space-efficient'—every pixel serves information delivery.

Elevation & Depth

Depth is conveyed through subtle shadow and border treatments rather than color shifts. Level 1 (Base): flat, no shadow, white background (#ffffff). Level 2 (Interactive Elements): 1px solid border at #d0d0d0 + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Dropdowns/Modals): same as Level 2, with z-index: 999999 to ensure overlay above all content. Hover states do not increase shadow depth; instead, they shift background color to the -container variant (e.g., select-option-hover uses secondary-container #f0f9fa). Focus states are indicated by a 2px outline at {colors.primary} (#505050) w

Shapes

The shape philosophy is 'Minimal Geometry'—sharp corners are the default, with border-radius applied sparingly and only to interactive controls. Buttons and select dropdowns use border-radius: 4px (lg token) to provide subtle affordance without softening the utilitarian tone. Input fields use border-radius: 0px (no rounding) to reinforce their role as data containers. Dividers are always 1px with no rounding. The rationale: rounded corners suggest friendliness and approachability; this system intentionally avoids that, instead signaling 'this is infrastructure, not a consumer app.' The single

Components

Error Display. Error headings use typography.display (48px, 700 weight) with text-color: {colors.on-surface} (#000000) and no background. Subheadings use typography.headline-md (24px, 700 weight). Body text uses typography.body-lg (16px, 400 weight) with line-height: 24px and margin-bottom: {spacing.md} (16px). All error text is left-aligned with no text-shadow or text-decoration. ### Dividers & Separators. Horizontal dividers are 1px solid {colors.outline} (#d0d0d0) with margin-top and margin-bottom of {spacing.md} (16px). They create visual breaks between the error heading, explanation, and metadata sections. ### Select Dropdowns. The select-container is position: relative; display: inline-block; width: 100%. The select-opener (button) has background-color: {colors.primary-container}

Do's and Don'ts

**Do**

• Do use Times New Roman serif for all body and heading text to maintain the technical, institutional tone.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all interactive elements (dropdowns, buttons) to establish depth.
• Do use left-aligned text and single-column layouts; avoid centered or multi-column compositions.
• Do reserve color changes (hover states) for background-color only; never change text color on hover.
• Do maintain minimum 44px height for all interactive touch targets (buttons, select openers).
• Do use 1px solid #d0d0d0 dividers to separate logical sections; apply {spacing.md} (16px) margin above and below.

**Don't**

• Don't use rounded corners (border-radius > 4px) on any element except future badge components; sharp corners reinforce the utilitarian aesthetic.
• Don't apply text-shadow, text-decoration, or text-transform to error messages; keep typography plain and direct.
• Don't use color to convey status unless it's an error state (#d32f2f); rely on text and layout hierarchy instead.
• Don't add gradients, blur effects, or glassmorphism; the system is flat and technical, not atmospheric.
• Don't center-align error messages or use multi-column layouts; single-column, left-aligned text is the standard.
• Don't increase shadow depth on hover; instead, shift background-color to a container variant (e.g., #f0f9fa).