Example Domain

Overview

Example Domain is a reference implementation for documentation and testing purposes, embodying a philosophy of 'Functional Minimalism'—where every visual element serves a clear informational purpose without ornament. The design prioritizes legibility, accessibility, and predictability through a restrained neutral palette (light grays #eeeeee to #e9ecef), a single accent blue (#334488), and generous whitespace. The aesthetic evokes institutional clarity: think technical documentation, reference materials, and educational platforms where the content itself is the hero. The brand personality is straightforward, authoritative yet approachable, and deliberately understated. Voice: precise, instructional, never marketing-speak. Example sentence: 'This domain is reserved for documentation examples. Use it freely in your tests and guides.'

Colors

The color system is built on a neutral foundation with a single, purposeful accent. Surface colors range from #eeeeee (primary background) through #e9ecef (container) to #e0e0e0 (highest container), creating subtle visual hierarchy through luminance alone. The primary accent is #334488—a muted, professional blue used exclusively for interactive elements (links, buttons, focus states) and never for passive surfaces. This restraint ensures that when users encounter #334488, they immediately recognize it as actionable. Secondary grays (#505050 for text, #6c757d for outlines, #d0d0d0 for borders) provide tonal variation without competing for attention. The tertiary color #f0f9fa (a very pale cyan) is reserved for hover states and subtle highlights in select dropdowns. Error states use #d32f2f

Typography

The type system uses a single font family—system-ui, -apple-system, sans-serif—ensuring consistent rendering across all platforms and eliminating font-loading delays. This choice reinforces the 'functional' aesthetic: no decorative typefaces, only the most legible default stack. Display (56px, 700 weight, -0.02em tracking) is reserved for page titles and major headings; Headline-lg (32px, 700 weight) for section breaks; Headline-md (24px, 700 weight) for component titles like 'Example Domain'; Body-md (16px, 400 weight, 24px line-height) for all body copy and form labels; Label-md (14px, 600 weight, 0.02em tracking) for button text and small UI labels. Line-height is set generously (1.5 for body, 1.33 for headlines) to maximize readability on screen. When labels appear over busy background

Layout

The layout follows a 12-column grid with a fixed container max-width of 960px, centered on the viewport with symmetric margins (15vh top/bottom in the hero, 24px gutter on sides). This creates a 'centered column' aesthetic typical of documentation sites, where content width is constrained to ~60vw for optimal reading. Whitespace is semantic: lg spacing (40px) separates major sections (hero from footer), md spacing (24px) separates cards and form groups, sm spacing (12px) separates inline elements. The body background is #eeeeee, providing a subtle frame around white content cards. All interactive elements (buttons, inputs, select panels) use consistent padding: 12px horizontal, 6px vertical for compact elements; 24px horizontal, 12px vertical for primary buttons. This rhythm creates visual

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The base elevation (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and input fields, creating a barely-perceptible lift from the background. Medium elevation (md: 0 3px 8px rgba(0, 0, 0, 0.15)) is used for dropdown panels and hover states on cards, signaling interactivity and focus. Large elevation (lg: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for modals and overlays (if present). All surfaces also carry a 1px border in {colors.outline-variant} (#d0d0d0) to define edges crisply without rely

Shapes

The shape philosophy is 'Technical Precision'—corners are slightly rounded (4px / 0.5rem DEFAULT) to soften the harshness of pure rectangles while maintaining a structured, engineered feel. Buttons and inputs use the DEFAULT radius (4px), creating a subtle visual softness without appearing playful or organic. Select panels and cards also use 4px, ensuring consistency across all interactive surfaces. The full radius (9999px) is reserved for badges or pill-shaped elements if they appear. This conservative rounding strategy reflects the brand's institutional, documentation-focused identity: not a

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use {colors.primary} (#334488) background with white text, 44px height, 12px vertical / 24px horizontal padding, and 4px border-radius. On hover, the background darkens to #2a3a70 with a 150ms ease-in-out transition. Secondary buttons are transparent with a 1px border in {colors.outline} (#6c757d), same padding and height, and fill with {colors.surface-container} (#e9ecef) on hover. Links are inline, underlined, and use {colors.primary} text; on hover they darken to #2a3a70. All interactive text uses {typography.label-md} (14px, 600 weight, 0.02em tracking) for consistency.

Containers & Surfaces Cards are the primary content container: {colors.surface-container-lowest} (#f9f9f9) background, 1px borde

Do's and Don'ts

**Do**

• Do use #334488 (primary) exclusively for interactive elements—buttons, links, focus rings, and active states—to create instant visual recognition of what is clickable.
• Do maintain 24px gutter spacing on all sides of content containers and 40px between major sections to preserve the spacious, documentation-like aesthetic.
• Do apply the system-ui font stack without fallbacks to web fonts; the native system font ensures instant rendering and reinforces the 'functional' brand identity.
• Do use the sm elevation shadow (0 1px 2px rgba(0, 0, 0, 0.06)) as the default for all cards and surfaces; reserve md and lg elevations only for hover, focus, and modal states.
• Do pair dark text (#1a1a1a) on all light backgrounds and white text on #334488 to maintain WCAG AA contrast ratios (minimum 4.5:1) across the entire interface.

**Don't**

• Don't introduce additional accent colors or gradients; the single #334488 blue is the entire interactive vocabulary—adding secondary accents dilutes the clarity.
• Don't use border-radius values larger than 4px on buttons, inputs, or cards; the 'technical precision' aesthetic requires sharp, engineered corners, not soft, playful rounding.
• Don't apply shadows larger than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to standard components; excessive shadow depth contradicts the flat, minimalist design philosophy.
• Don't reduce line-height below 1.5 for body text or 1.33 for headlines; the generous vertical rhythm is essential for readability and the spacious, institutional feel.
• Don't use decorative fonts, icons without labels, or ornamental graphics; every visual element must serve a functional purpose in the documentation or reference context.