OutRay

Overview

OutRay is a developer-centric tunneling platform that transforms localhost exposure into a seamless, accessible experience. The design system embraces **Technical Minimalism**—a philosophy that strips away visual noise while maintaining high-contrast accessibility and functional clarity. The brand serves developers and DevOps engineers who demand precision, speed, and reliability; the UI reflects this through a pure black canvas (rgb(0, 0, 0)) punctuated by high-contrast white (rgb(255, 255, 255)) and strategic accent colors (electric blue #646cff, vivid red #e0234e) that signal interactivity and status without distraction.

The voice is direct, confident, and technically literate—never condescending, always precise. Example: "Tunnel your localhost in 30 seconds. No configuration, no friction." The brand personality balances approachability (friendly, open-source ethos) with authority (battle-tested infrastructure, production-ready). Every visual element serves a functional purpose: buttons are unmistakable, terminal output is legible, and error states are immediately recognizable.

Colors

The color system is built on a **high-contrast dark foundation** optimized for developer environments and extended terminal sessions. Primary surface is pure black (#000000, rgb(0, 0, 0)), with a carefully calibrated surface stack that avoids muddy grays: surface-container-low is #0c0c0c (just 12 levels above black), surface-container is #121212 (18 levels), and surface-container-high is #1f1f1f (31 levels). This restrained palette prevents eye fatigue while maintaining clear visual hierarchy through subtle shifts in luminance.

Primary is white (#ffffff, rgb(255, 255, 255))—the dominant CTA color on all action buttons ("Get Started Free", "Get Started"). Secondary is electric blue (#646cff, rgb(100, 108, 255)), used for interactive elements, focus states, and accent highlights; it provide

Typography

The type system uses **Geom** exclusively across all scales, a geometric sans-serif that conveys technical precision without sacrificing warmth. Display (72px, 700 weight, -0.02em tracking) anchors hero sections and major headings; headline-lg (48px, 700 weight) is used for section titles; headline-md (32px, 600 weight) for subsections; body-lg (18px, 400 weight, 28px line-height) for hero copy and feature descriptions; body-md (16px, 400 weight, 24px line-height) for standard paragraph text; label-md (14px, 600 weight, 0.01em tracking) for button labels and interactive text; label-sm (12px, 500 weight, 0.02em tracking) for badges, metadata, and small UI labels. The progression from display to body creates a clear visual hierarchy without relying on color alone. All headings use negative l

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px (container-max), centered on the viewport. The gutter is 24px (spacing.md), applied consistently between columns and as horizontal padding on the container. Hero sections use full-width backgrounds (black, #000000) with centered content constrained to the 1280px container. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections (hero, features, pricing), md spacing (24px) separates cards and feature blocks, sm spacing (12px) separates inline elements. The design favors generous whitespace—no section should feel cramped. Container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. Mobile breakpoint is 768px; below this, padding increases

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than bright highlights or gradients. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for subtle hover states on cards and buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards, modals, and dropdowns; lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating elements like tooltips and popovers. Shadows use pure black (rgba(0, 0, 0, ...)) with opacity as the only variable, avoiding color shifts that would muddy the dark theme. The surface stack (surface-container-low through surface-con

Shapes

The shape system follows **Technical Roundness**—a philosophy that applies generous border-radius to buttons and interactive elements (full, 9999px) while keeping cards and containers slightly softer (lg, 1rem). This distinction signals interactivity: pill-shaped buttons (border-radius: 9999px) are unmistakably clickable, while cards (border-radius: 1rem) feel contained and organized. Input fields use DEFAULT radius (0.5rem, 8px) for a balanced, professional appearance. Code blocks and terminal windows use md radius (0.75rem, 12px) to suggest containment without appearing overly rounded. The r

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses white background (rgb(255, 255, 255)), black text (rgb(0, 0, 0)), full border-radius (9999px), padding 16px 32px, and font-weight 700 (Geom). On hover, transition to primary-container (#e9ecef) with a 0 3px 8px rgba(0, 0, 0, 0.15) shadow over 150ms (cubic-bezier(0.4, 0, 0.2, 1)). **button-secondary** uses transparent background with rgba(255, 255, 255, 0.1), white text, 1px border at rgba(255, 255, 255, 0.2), and full radius. Hover state increases background opacity to 0.15 and border to rgba(255, 255, 255, 0.3). **button-accent** uses secondary blue (#646cff) background, white text, lg radius (1rem), padding 12px 24px. Hover adds a 0 3px 8px rgba(100, 108, 255, 0.25) shadow (blue-tinted for accent con

Do's and Don'ts

**Do**

• Do use white (#ffffff) for primary CTAs and high-emphasis actions—it creates unmistakable affordance against the black canvas.
• Do apply the full border-radius (9999px) to all buttons to signal interactivity and create visual momentum.
• Do maintain the surface stack hierarchy (surface-container-low through surface-container-highest) to convey depth without relying solely on shadows.
• Do use secondary blue (#646cff) for focus states, links, and accent highlights—it provides 7.2:1 contrast and signals interactivity.
• Do apply negative letter-spacing (-0.02em to -0.01em) on all display and headline text to enhance visual impact and technical precision.
• Do use monospace font-family (e.g., 'Courier New', 'SF Mono') for code blocks and terminal output to maintain developer familiarity.
• Do include a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on all interactive elements (buttons, cards, inputs) for smooth, predictable feedback.

**Don't**

• Don't use gradients or blur effects (backdrop-filter) on the main canvas—they muddy the technical aesthetic and reduce terminal-like clarity.
• Don't apply border-radius below lg (1rem) to buttons; use full radius exclusively to maintain the pill-shaped affordance.
• Don't mix accent colors (secondary blue and tertiary red) on the same component; reserve blue for interactive elements and red for errors/warnings only.
• Don't use light grays (e.g., #e9ecef) as primary text on the black canvas—they reduce contrast and readability. Use white (#ffffff) or on-surface-variant (#b3b3b3).
• Don't exceed 1280px container max-width; wider layouts dilute focus and reduce readability for developer-focused content.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2))—they create visual clutter and distract from content.
• Don't use system fonts (system-ui, -apple-system) for body text; enforce Geom across all scales to maintain brand consistency and technical personality.