From Chaos
to Clarity.
Your current WordPress site has accumulated years of design inconsistency. Different developers, different plugins, different decisions. We are replacing all of it with a unified design system built specifically for LeoLabs.
A note on colors and fonts: The 14 colors and typography choices below were derived from your current live website. We organized what was already there into a coherent system. If LeoLabs has an official brand style guide with defined colors and fonts, we are more than happy to use those instead.
14 Defined Colors
chaos = 132 color values
Every color on the site comes from this palette. No arbitrary hex values, no one-offs.
Foundation
Brand Greens
Neutrals & Accent
Warning & Alert
Fluid Type Scale
chaos = 76 font sizes, 20 font families
All sizes use clamp() for fluid responsive scaling. No breakpoint jumps. Reduced from 20 font families to 3 intentional choices.
Orbital Intelligence
Space Domain Awareness
Multi-Mission Radar Network
Authoritative Dataset
AI-Enabled Platform
Leverage our proliferated sensor network for continuous all-weather coverage.
Access the most comprehensive commercial catalog of objects in LEO.
Published March 2026 · 5 min read
Typography Choices
We identified that the current LeoLabs site uses Obvia Wide and Proxima Nova, both commercial typefaces. For this demo, we selected open-source alternatives that capture a similar feel while keeping the project lightweight and license-free.
Obvia Wide
Used for large headings and hero text. Commercial font by dooType, typically licensed through Adobe Fonts.
Proxima Nova
Used for body text and UI elements. Commercial font by Mark Simonson, one of the most widely used web fonts.
Demo Alternatives
Plus Jakarta Sans
Clean geometric sans-serif. Hero headings use uppercase with increased letter-spacing to match the LeoLabs brand style.
ORBITAL INTELLIGENCE
Anta
A geometric display font with a technical, engineered feel. Perfect for sub-headings and feature titles.
Space Domain Awareness
Inter
The closest open-source match to Proxima Nova. Highly legible at all sizes with excellent screen rendering.
Leverage our proliferated sensor network for continuous coverage.
Space Mono
A monospace font that reinforces the technical, data-driven nature of the LeoLabs brand.
ORBITAL INTELLIGENCE
All four fonts are free via Google Fonts. If LeoLabs prefers to keep Obvia Wide and Proxima Nova, the rebuild can use those with the proper licenses applied.
Four Variants, Three Sizes
chaos = 30+ inconsistent button rules
Primary (filled), Secondary (outline), Ghost (subtle), and the signature Text Link (underline CTA).
Variants
Sizes
Card Components
Sharp corners, graphite border, emerald glow on hover. Hover to see interactions.
Service Cards
Threat Monitoring
Protect high-value assets, monitor adversarial objects, and evaluate potential threats in real time.
Learn More →Collision Avoidance
Ensure safe operations with comprehensive, real-time data on objects and activity in LEO.
Learn More →Mission Support
Post-launch communications, collision avoidance, and orbital maneuver planning.
Learn More →Feature Cards
Radar Network
Rapidly deployable radars delivering continuous all-weather coverage
Authoritative Data
Most comprehensive commercial catalog of objects in LEO
AI Platform
Actionable intelligence and real-time threat alerts
Security First
Zero server-side code, zero database, zero attack surface
Content Cards
Space Year in Review: A 2025 Recap and 2026 Outlook
Global space activity continued to expand. Launch numbers climbed, satellite constellations surged...
LeoLabs Enhances Ability to Discover Adversarial Space Activities
Next-generation UHF radar in Arizona now operational for advanced detection...
Ramsey Price Joins LeoLabs as Chief Financial Officer
Appointment strengthens leadership team as company expands orbital intelligence...
Stats Bar
Shadow Scale
chaos = 14 random shadow values
Green-tinted glows on dark backgrounds, not black shadows that disappear.
Spacing Scale
chaos = random spacing per element
Angular by Default
chaos = 17 different border radius values
Sharp corners reflect precision. Only interactive elements get rounding.
Standardized Layout
chaos = 4 mixed breakpoints (544/767/921/1024), 3 competing max-widths
One set of breakpoints, one container width. No more conflicting layout rules.
Breakpoints
Container
Single max-width for all content
with clamp(1rem, 3vw, 2rem) padding
Gradient Palette
What Changed
Same brand identity, disciplined design system.
| Aspect | Current (WordPress) | New (Tailwind) |
|---|---|---|
| Colors | 132 arbitrary values | 14 defined tokens |
| Font Sizes | 76 different sizes | 10 fluid clamp() sizes |
| Font Families | 20 families loaded | 3 families, intentional use |
| Shadows | 14 random values | 5 semantic shadows |
| Buttons | 30+ inconsistent rules | 4 variants, 3 sizes |
| Border Radius | 17 different values | 5-step scale |
| Breakpoints | 4 mixed (544/767/921/1024) | 4 standardized (640/768/1024/1280) |
| Container Width | 3 competing max-widths | 1 max-width: 1280px |
| Spacing | Random per element | 7-step responsive scale |