Skip to main content

​
Context

The Atlas documentation site at atlas.devarno.cloud was rendering with three competing visual signals: black (night sky background), orange/red (Mars iron oxide from --mars-iron-oxide: #CD5C5C), and blue (electric blue from --mars-electric: #3B82F6). The blue was used as a “secondary” accent for borders on cards, sidebar, code blocks, tables, callouts, navbar, search, inline code, accordions, footer, and horizontal rules — but it clashed with the Mars survival theme and diluted the SO1 brand identity. Additionally, the landing page (index.mdx) was a simple card grid with no visual architecture context, no Mermaid diagrams, and no requirement traceability — making it a poor first impression for anyone arriving via a Devarno conversion.

​
Root Cause

The mars.css custom theme defined --mars-electric: #3B82F6 (Tailwind blue-500) and used it in 17 CSS rules as border colors and backgrounds for structural UI elements. This was originally intended as a “cool contrast” to the warm Mars palette, but in practice it created visual confusion — users couldn’t tell if the blue was intentional branding, a Mintlify default bleeding through, or a bug. The index.mdx also used color="#3B82F6" on the Ground Control cards (Rover Console, GitHub), which rendered as bright blue card icons against the otherwise warm page.

​
Changes Made

​
mars.css — Color Unification

Every instance of #3B82F6 / rgba(59, 130, 246, ...) was replaced with warm Mars tones:
ElementBefore (Blue)After (Mars)
Sidebar borderrgba(59, 130, 246, 0.12)rgba(205, 92, 92, 0.12) — iron oxide
Card bordersrgba(59, 130, 246, 0.15)rgba(160, 82, 45, 0.18) — sienna
Code block bordersrgba(59, 130, 246, 0.12)rgba(160, 82, 45, 0.12) — sienna
Table bordersrgba(59, 130, 246, 0.12)rgba(160, 82, 45, 0.12) — sienna
Callout bordersrgba(59, 130, 246, 0.2)rgba(205, 92, 92, 0.2) — iron oxide
Navbar borderrgba(59, 130, 246, 0.1)rgba(160, 82, 45, 0.1) — sienna
Inline code bg/borderrgba(59, 130, 246, 0.1/0.15)rgba(160, 82, 45, 0.1/0.18) — sienna
Search borderrgba(59, 130, 246, 0.15)rgba(160, 82, 45, 0.15) — sienna
Accordion bordersrgba(59, 130, 246, 0.12)rgba(160, 82, 45, 0.12) — sienna
Footer borderrgba(59, 130, 246, 0.08)rgba(160, 82, 45, 0.08) — sienna
HR gradientred-to-blue gradientred-to-sienna gradient
Body backgroundblue radial gradientsienna radial gradient
The --mars-electric CSS variable was removed entirely. The --mars-night backgrounds were also shifted from blue-tinted (#0A0E27) to neutral-dark (#0A0E17) to eliminate any residual blue cast.

​
index.mdx — Landing Page Redesign

The landing page was rebuilt with five Mermaid diagrams:
  1. Platform Architecture (Fig 1) — Full system topology showing The Hab, Mission Control, Rover, and Surface modules with communication pathways
  2. FORGE Pipeline (Fig 2) — Five-stage engineering pipeline with gate verification at each transition
  3. Agent Fleet Topology (Fig 3) — 21 agents across 7 domains with orchestration and gatekeeper flows
  4. Verification Traceability Matrix (Fig 4) — Requirement → Implementation → Test mapping for core platform concerns
  5. Deployment Topology (Fig 5) — Infrastructure mapping showing Vercel, Railway, Supabase, and external service integration
All Mermaid diagrams use the Mars color palette via %%{init}%% directives, with iron oxide as primary, sienna as borders, and regolith as line colors. Ground Control cards were changed from color="#3B82F6" to color="#CD5C5C" (iron oxide) and color="#A0522D" (sienna).

​
Design Principles Applied

  1. One accent family — All accent colors are now in the warm spectrum: iron oxide (#CD5C5C), sienna (#A0522D), regolith (#D2B48C). No cool tones.
  2. Diagrams over descriptions — The landing page now shows architecture visually before listing modules as cards.
  3. Traceability as a first-class concept — The VTM diagram on the landing page signals that SO1 takes requirement coverage seriously.
  4. Captions on every diagram — Each Mermaid block has a figure number and explanatory caption.

​
Impact

  • Users arriving from a Devarno conversion now see a cohesive Mars-red branded experience
  • The architecture is immediately legible without clicking into any sub-pages
  • The FORGE pipeline is visible before any technical deep-dive
  • The blue contamination is fully eliminated from the theme