UI & UX Strategy

Design System

The site uses a terminal-inspired design system with dark backgrounds and high-contrast text, matching the brand's command-line identity.

Layout

• Full-width content area for code blocks
• Sticky sidebar navigation
• Minimal header, max content
• Responsive breakpoints for mobile
• Service-led homepage hero with the Infrastructure Audit as the primary CTA
• Decorative hero visuals are hidden below 900px so small screens prioritize copy and conversion

Components

Component	Usage
Terminal panels	Highlight commands, output, and code
Code blocks	Syntax-highlighted with copy button
Info/warning/tip boxes	Callouts for notes, gotchas, best practices
Tables	Parameter docs, comparison, reference data
Mermaid diagrams	Architecture, flow, sequence diagrams
Infrastructure Pulse	Lightweight CSS-only hero visual representing inspect, change, and validate

Homepage Conversion Structure

The homepage is a monetization landing page rather than a large content hub. Its primary sequence is:

Infrastructure Audit hero
  -> service portfolio with starting prices
  -> audit workflow and delivery method
  -> technical capability stack
  -> three recent notes
  -> final audit CTA

The current homepage is rendered by GP Element 9594, Opshell Homepage - Services Landing. Older homepage elements are retained as drafts for rollback and are not rendered.

The primary homepage message is:

Your business runs on servers. We keep them fast, secure, and reliable.

The primary CTA links to /contact/, while the service cards link to the existing /services/.../ pages.

Accessibility

• WCAG AA compliant color contrast
• Keyboard-navigable documentation
• Screen-reader friendly code blocks
• Responsive text sizing
• Decorative CSS visuals are optional and must not reduce readability or delay the primary CTA

Member Experience

• Clear visual distinction between free and member content
• Seamless checkout flow
• Member dashboard with download history
• Community integration with single sign-on