ai futuristicv1.0.0·dark

Quantum

Quantum — Deep Space AI

ai-futuristicdeep-spacebluemagentadark

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

quantum · rendered from tokens

Color

brand.primary

oklch(0.62 0.2 265)

brand.secondary

oklch(0.66 0.2 340)

brand.onBrand

oklch(0.97 0.005 265)

text.primary

oklch(0.95 0.01 270)

text.muted

oklch(0.73 0.018 270)

text.link

oklch(0.66 0.2 340)

surface.base

oklch(0.16 0.022 270)

surface.raised

oklch(0.21 0.026 270)

surface.sunken

oklch(0.12 0.018 270)

border.default

oklch(0.33 0.03 270)

state.success

oklch(0.74 0.16 155)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.82 0.15 90)

state.info

oklch(0.74 0.14 230)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Quantum into your workflow.

Save the file for your tool — your agent then generates UI in Quantum, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/quantum.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Quantum is the night sky after midnight: deep indigo-black depths, an electric blue star, and a magenta flare. For AI and data products that want to feel vast, intelligent, and a little awe-inspiring.

Layout & Grid

Layered dark surfaces with soft orbital glows and generous space. Visualizations float on shadow.md halos; chrome recedes into the dark.

Components

Buttons

Rounded radius.md buttons in electric blue color.brand.primary with light onBrand text and a soft glow. Magenta marks links and accents.

Panels

Cards on color.surface.raised with faint borders and a glowing shadow; status combines state color with a label.

Accessibility

Vast but legible: light and muted text pass WCAG AA on the deep surfaces. Glows are decorative shadows, accents stay bright enough to read, and motion is calm.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: quantum

4name: Quantum

5title: Quantum — Deep Space AI

6version: 1.0.0

7category: ai-futuristic

8tags: [ai-futuristic, deep-space, blue, magenta, dark]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.62 0.2 265)", type: color }

17 secondary: { value: "oklch(0.66 0.2 340)", type: color }

18 onBrand: { value: "oklch(0.97 0.005 265)", type: color }

19 text:

20 primary: { value: "oklch(0.95 0.01 270)", type: color }

21 muted: { value: "oklch(0.73 0.018 270)", type: color }

22 link: { value: "{color.brand.secondary}", type: color }

23 surface:

24 base: { value: "oklch(0.16 0.022 270)", type: color }

25 raised: { value: "oklch(0.21 0.026 270)", type: color }

26 sunken: { value: "oklch(0.12 0.018 270)", type: color }

27 border:

28 default: { value: "oklch(0.33 0.03 270)", type: color }

29 state:

30 success: { value: "oklch(0.74 0.16 155)", type: color }

31 danger: { value: "oklch(0.68 0.2 25)", type: color }

32 warning: { value: "oklch(0.82 0.15 90)", type: color }

33 info: { value: "oklch(0.74 0.14 230)", type: color }

34 typography:

35 family:

36 sans: { value: "Sora, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "JetBrains Mono, ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.3rem", type: dimension }

42 xl: { value: "1.75rem", type: dimension }

43 "2xl": { value: "2.45rem", type: dimension }

44 "3xl": { value: "3.4rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 600, type: fontWeight }

48 leading:

49 tight: { value: 1.08, type: number }

50 normal: { value: 1.5, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.375rem", type: dimension }

55 md: { value: "0.75rem", type: dimension }

56 lg: { value: "1.25rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 2px 10px oklch(0 0 0 / 0.5)", type: shadow }

60 md: { value: "0 0 48px oklch(0.62 0.2 265 / 0.32)", type: shadow }

61 motion:

62 duration:

63 base: { value: "240ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.2, 0, 0, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.5px stroke, orbital, luminous", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Quantum Design System

77## Brand & Voice

78Quantum is the night sky after midnight: deep indigo-black depths, an electric

79blue star, and a magenta flare. For AI and data products that want to feel vast,

80intelligent, and a little awe-inspiring.

82## Layout & Grid

83Layered dark surfaces with soft orbital glows and generous space. Visualizations

84float on `shadow.md` halos; chrome recedes into the dark.

86## Components

87### Buttons

88Rounded `radius.md` buttons in electric blue `color.brand.primary` with light

89`onBrand` text and a soft glow. Magenta marks links and accents.

91### Panels

92Cards on `color.surface.raised` with faint borders and a glowing shadow; status

93combines state color with a label.

95## Accessibility

96Vast but legible: light and muted text pass WCAG AA on the deep surfaces. Glows

97are decorative shadows, accents stay bright enough to read, and motion is calm.

Related systems

View →

Button

Synth

98AAA

Synth — Neon AI Futuristic

ai futuristicai-futuristicneon

View →

Button

Hologram

98AAA

Hologram — Holographic AI

ai futuristicai-futuristicholographic

View →

Button

Nebula

100AAA

Nebula — Luminous AI Interface

ai futuristicaidark