mdDesignMD
ai futuristicv1.0.0·dark

Nebula

Nebula — Luminous AI Interface

aidarkneonfuturisticglow
100
AAA
45 tokens
primarysecondarybaseraisedprimarydefaultsuccessdanger
Fork & edit

Live preview

nebula · rendered from tokens
Color
brand.primary
oklch(0.72 0.19 320)
brand.secondary
oklch(0.82 0.14 195)
brand.onBrand
oklch(0.18 0.02 320)
text.primary
oklch(0.96 0.01 280)
text.muted
oklch(0.78 0.02 280)
text.link
oklch(0.82 0.14 195)
surface.base
oklch(0.16 0.02 280)
surface.raised
oklch(0.21 0.03 280)
surface.sunken
oklch(0.12 0.02 280)
border.default
oklch(0.34 0.03 280)
state.success
oklch(0.80 0.16 155)
state.danger
oklch(0.70 0.20 22)
state.warning
oklch(0.84 0.15 85)
state.info
oklch(0.80 0.13 235)
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
xsThe 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
C
Confetti
A bright, joyful design language with playful motion.
Pro
$12/ mo
Unlimited exports
Private systems
Priority support
AM
Aria Moss
Owner
success
RK
Ravi Kohli
Editor
info
LP
Lena Park
Viewer
warning
Radius, shadow & spacing
sm
md
lg
full
sm
md
lg

Use this system

Three ways to drop Nebula into your workflow.

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

CCClaude Code
CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor
.cursor/rules/nebula.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

Luminous, intelligent, and a little uncanny. Nebula is for AI products: deep space surfaces, neon brand glows, and type that feels engineered. Light carries meaning — accents emit, they don't just sit.

Layout & Grid

Dark canvas with floating surface.raised panels and soft neon shadow glows. Generous spacing keeps the luminance from overwhelming the content.

Components

Buttons

Primary buttons fill with color.brand.primary and dark onBrand text, wrapped in a shadow.sm glow that intensifies on hover.

Motion

Smooth, slightly springy entrances on the standard easing. Glows pulse subtly; all motion respects prefers-reduced-motion.

Accessibility

Light text clears AA on the deep surfaces. Neon accents are never the only signal — they pair with text and shape.

Do & Don't

  • Use glow shadows derived from brand hues, not flat drop shadows.
  • Keep large dark areas calm; let accents do the work.
  • Don't place low-luminance accents as text on the dark base.

Tokens

Color (14)

Tokens

breakpoint
iconography
imagery
motion
radius
shadow
spacing
typography
zIndex

Export

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

design.md
1---
2$schema: https://designmd.in/schema/v1.json
3id: nebula
4name: Nebula
5title: Nebula — Luminous AI Interface
6version: 1.0.0
7category: ai-futuristic
8tags: [ai, dark, neon, futuristic, glow]
9author: designmd
10license: CC-BY-4.0
11updatedAt: 2026-06-19
12colorMode: [dark]
13tokens:
14 color:
15 brand:
16 primary: { value: "oklch(0.72 0.19 320)", type: color }
17 secondary: { value: "oklch(0.82 0.14 195)", type: color }
18 onBrand: { value: "oklch(0.18 0.02 320)", type: color }
19 text:
20 primary: { value: "oklch(0.96 0.01 280)", type: color }
21 muted: { value: "oklch(0.78 0.02 280)", type: color }
22 link: { value: "{color.brand.secondary}", type: color }
23 surface:
24 base: { value: "oklch(0.16 0.02 280)", type: color }
25 raised: { value: "oklch(0.21 0.03 280)", type: color }
26 sunken: { value: "oklch(0.12 0.02 280)", type: color }
27 border:
28 default: { value: "oklch(0.34 0.03 280)", type: color }
29 state:
30 success: { value: "oklch(0.80 0.16 155)", type: color }
31 danger: { value: "oklch(0.70 0.20 22)", type: color }
32 warning: { value: "oklch(0.84 0.15 85)", type: color }
33 info: { value: "oklch(0.80 0.13 235)", type: color }
34 typography:
35 family:
36 sans: { value: "Space Grotesk, system-ui, sans-serif", type: fontFamily }
37 mono: { value: "Space Mono, ui-monospace, monospace", type: fontFamily }
38 scale:
39 xs: { value: "0.75rem", type: dimension }
40 sm: { value: "0.875rem", type: dimension }
41 base: { value: "1rem", type: dimension }
42 lg: { value: "1.25rem", type: dimension }
43 xl: { value: "1.625rem", type: dimension }
44 "2xl": { value: "2.25rem", type: dimension }
45 "3xl": { value: "3.5rem", type: dimension }
46 weight:
47 regular: { value: 400, type: fontWeight }
48 medium: { value: 500, type: fontWeight }
49 bold: { value: 700, type: fontWeight }
50 leading:
51 tight: { value: 1.1, type: number }
52 normal: { value: 1.55, type: number }
53 tracking:
54 tight: { value: "-0.03em", type: dimension }
55 spacing:
56 base: { value: "0.25rem", type: dimension }
57 radius:
58 sm: { value: "0.5rem", type: dimension }
59 md: { value: "0.875rem", type: dimension }
60 lg: { value: "1.25rem", type: dimension }
61 full: { value: "9999px", type: dimension }
62 shadow:
63 sm: { value: "0 0 12px oklch(0.72 0.19 320 / 0.25)", type: shadow }
64 md: { value: "0 0 32px oklch(0.72 0.19 320 / 0.35)", type: shadow }
65 lg: { value: "0 0 64px oklch(0.82 0.14 195 / 0.30)", type: shadow }
66 motion:
67 duration:
68 fast: { value: "180ms", type: duration }
69 base: { value: "300ms", type: duration }
70 easing:
71 standard: { value: "cubic-bezier(0.2, 0.8, 0.2, 1)", type: cubicBezier }
72 breakpoint:
73 md: { value: "768px", type: dimension }
74 lg: { value: "1024px", type: dimension }
75 zIndex:
76 modal: { value: 1300, type: number }
77 iconography:
78 style: { value: "thin 1.5px glowing line icons", type: descriptor }
79 imagery:
80 style: { value: "volumetric gradients, particle fields, deep space", type: descriptor }
81---
82
83# Nebula Design System
84
85## Brand & Voice
86Luminous, intelligent, and a little uncanny. Nebula is for AI products: deep
87space surfaces, neon brand glows, and type that feels engineered. Light carries
88meaning — accents emit, they don't just sit.
89
90## Layout & Grid
91Dark canvas with floating `surface.raised` panels and soft neon `shadow` glows.
92Generous spacing keeps the luminance from overwhelming the content.
93
94## Components
95### Buttons
96Primary buttons fill with `color.brand.primary` and dark `onBrand` text, wrapped
97in a `shadow.sm` glow that intensifies on hover.
98
99## Motion
100Smooth, slightly springy entrances on the standard easing. Glows pulse subtly;
101all motion respects `prefers-reduced-motion`.
102
103## Accessibility
104Light text clears AA on the deep surfaces. Neon accents are never the only signal
105— they pair with text and shape.
106
107## Do & Don't
108- Use glow shadows derived from brand hues, not flat drop shadows.
109- Keep large dark areas calm; let accents do the work.
110- Don't place low-luminance accents as text on the dark base.

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

Quantum

98AAA

Quantum — Deep Space AI

ai futuristicai-futuristicdeep-space