Fast integration
Purpose-built components that reflect this brand language in every interaction.
Physics-lab dark: cold plasma blue, superfluid teal.
Real product preview
Physics-lab dark: cold plasma blue, superfluid teal.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
99.99%
Uptime
4.8M
Monthly users
147ms
Median response
24/7
Support
---
version: alpha
name: Quantum Lab
description: Physics-lab dark: cold plasma blue, superfluid teal.
colors:
primary: "#E6F3FF"
secondary: "#6A8AA8"
tertiary: "#4FD6E0"
neutral: "#050A14"
surface: "#0A1220"
on-primary: "#050A14"
typography:
display:
fontFamily: Space Grotesk
fontSize: 3.5rem
fontWeight: 500
letterSpacing: "-0.02em"
h1:
fontFamily: Space Grotesk
fontSize: 1.85rem
fontWeight: 500
body:
fontFamily: IBM Plex Sans
fontSize: 0.92rem
lineHeight: 1.55
label:
fontFamily: IBM Plex Mono
fontSize: 0.7rem
letterSpacing: "0.12em"
rounded:
sm: 2px
md: 4px
lg: 8px
spacing:
sm: 8px
md: 16px
lg: 32px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.md}"
padding: 12px 20px
card:
backgroundColor: "{colors.surface}"
textColor: "{colors.primary}"
rounded: "{rounded.lg}"
padding: 24px
---
## Overview
A quantum-computing console aesthetic: cold blues, teal accents, monospace readouts.
## Colors
The palette is built around high-contrast neutrals and a single accent that drives interaction.
- **Primary (`#E6F3FF`):** Headlines and core text.
- **Secondary (`#6A8AA8`):** Borders, captions, and metadata.
- **Tertiary (`#4FD6E0`):** The sole driver for interaction. Reserve it.
- **Neutral (`#050A14`):** The page foundation.
## Typography
- **display:** Space Grotesk 3.5rem
- **h1:** Space Grotesk 1.85rem
- **body:** IBM Plex Sans 0.92rem
- **label:** IBM Plex Mono 0.7rem
## Do's and Don'ts
- **Do** use Tertiary for exactly one action per screen.
- **Do** let Neutral carry the composition — negative space is a feature.
- **Don't** introduce gradients. This system is flat on purpose.
- **Don't** mix Tertiary with alternate accents; the single-accent rule is load-bearing.
3d Sculpt
/design-mds/dark/3d-sculpt/design.md
Battle Royale
/design-mds/dark/battle-royale/design.md
Cafe Racer
/design-mds/dark/cafe-racer/design.md
Chapel Stained
/design-mds/dark/chapel-stained/design.md
Crypto Violet
/design-mds/dark/crypto-violet/design.md
Cyber Matrix
/design-mds/dark/cyber-matrix/design.md
Cyberpunk City
/design-mds/dark/cyberpunk-city/design.md
Daw Waveform
/design-mds/dark/daw-waveform/design.md
Defi Chrome
/design-mds/dark/defi-chrome/design.md
Devops Graphite
/design-mds/dark/devops-graphite/design.md
Dungeon Crawl
/design-mds/dark/dungeon-crawl/design.md
Exchange Tick
/design-mds/dark/exchange-tick/design.md
Graphite
/design-mds/dark/graphite/design.md
Hackerspace
/design-mds/dark/hackerspace/design.md
Horology Chronograph
/design-mds/dark/horology-chronograph/design.md
Jazz Club
/design-mds/dark/jazz-club/design.md
Midjourney Dream
/design-mds/dark/midjourney-dream/design.md
Neon Arcade
/design-mds/dark/neon-arcade/design.md
Nightclub Strobe
/design-mds/dark/nightclub-strobe/design.md
Observatory
/design-mds/dark/observatory/design.md
Obsidian
/design-mds/dark/obsidian/design.md
Ocean Depth
/design-mds/dark/ocean-depth/design.md
Poker Felt
/design-mds/dark/poker-felt/design.md
Quantum Lab
/design-mds/dark/quantum-lab/design.md
Social Dusk
/design-mds/dark/social-dusk/design.md
Space Mission
/design-mds/dark/space-mission/design.md
Speakeasy
/design-mds/dark/speakeasy/design.md
Speedrun Clock
/design-mds/dark/speedrun-clock/design.md
Tarot Deck
/design-mds/dark/tarot-deck/design.md
Tattoo Studio
/design-mds/dark/tattoo-studio/design.md
Terminal
/design-mds/dark/terminal/design.md
Tokyo Midnight
/design-mds/dark/tokyo-midnight/design.md
Vercel Ink
/design-mds/dark/vercel-ink/design.md
Wealth Noir
/design-mds/dark/wealth-noir/design.md
Whisky Peat
/design-mds/dark/whisky-peat/design.md
Zed Dev
/design-mds/dark/zed-dev/design.md
3D Sculpt / UI
Preview
3D viewport: studio grey, mesh cyan, normal magenta.
Battle Royale / UI
Preview
Drop-in HUD: blood-orange alerts, squad chevrons.
Cafe Racer / UI
Preview
Cafe-racer: engine black, tank stripe, chrome spoke.
Chapel Stained / UI
Preview
Chapel hymnal: stained-glass blue, gilt, parchment.
Crypto Violet / UI
Preview
Web3 violet: holo gradients, mono addresses.
Cyber Matrix / UI
Preview
Cyberpunk neon grid meets operator terminal.