Mercury
Mountain Top Command Center
The design feels like a command center at twilight, expansive and focused. A deep, near-black neutral palette (#1e1e2a, #171721) creates an immersive, cinematic canvas where glowing off-white text (#ededf3) provides crisp clarity. All energy is channeled into a single, vibrant violet-blue accent (#5266eb) reserved strictly for primary calls-to-action, like indicator lights on a high-tech console. The typography is a defining feature, with custom fonts used at light weights for headlines, creating an authoritative yet approachable voice. The contrast between spacious, atmospheric hero imagery and the stark, text-driven UI below creates a journey from aspiration to action.
⚡️ Build with this templatehttps://mercury.comColor Palette
Typography
Heading: inherit
Body: inherit
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
# Mercury — Style Reference > Mountain Top Command Center Theme: dark The design feels like a command center at twilight, expansive and focused. A deep, near-black neutral palette (#1e1e2a, #171721) creates an immersive, cinematic canvas where glowing off-white text (#ededf3) provides crisp clarity. All energy is channeled into a single, vibrant violet-blue accent (#5266eb) reserved strictly for primary calls-to-action, like indicator lights on a high-tech console. The typography is a defining feature, with custom fonts used at light weights for headlines, creating an authoritative yet approachable voice. The contrast between spacious, atmospheric hero imagery and the stark, text-driven UI below creates a journey from aspiration to action. ## Colors | Name | Value | Role | |------|-------|------| | Mercury Blue | `#5266eb` | Primary CTA buttons — the single, vivid accent in a muted palette, focusing user action. | | Ghost Blue | `#cdddff` | Secondary button backgrounds, hover states — a desaturated, ethereal blue suggesting interaction. | | Deep Space | `#171721` | Outermost page background layer, providing depth. | | Midnight Slate | `#1e1e2a` | Primary page and section backgrounds. | | Graphite | `#272735` | Subtle button backgrounds and interactive surfaces. | | Lead | `#70707d` | Borders, dividers, subtle UI accents. | | Silver | `#c3c3cc` | Secondary text, footer copy, disabled states. | | Starlight | `#ededf3` | Primary text color for headlines, body, and navigation. | | Pure White | `#ffffff` | Text on primary CTA buttons (#5266eb). | ## Typography | Family | Role | |--------|------| | arcadiaDisplay | All major headlines. Use of the light 360 weight at large sizes is a signature choice creating authority through restraint, not volume. | | arcadia | Body copy, UI labels, navigation, legal text, and smaller headings. The workhorse font for all content and interface text. |