ai futuristicv1.0.0·dark

Synth

Synth — Neon AI Futuristic

ai-futuristicneonmagentacyandark

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

synth · rendered from tokens

Color

brand.primary

oklch(0.66 0.27 350)

brand.secondary

oklch(0.74 0.16 200)

brand.onBrand

oklch(0.15 0.02 320)

text.primary

oklch(0.95 0.01 300)

text.muted

oklch(0.73 0.02 300)

text.link

oklch(0.74 0.16 200)

surface.base

oklch(0.17 0.024 290)

surface.raised

oklch(0.22 0.03 290)

surface.sunken

oklch(0.13 0.02 290)

border.default

oklch(0.34 0.04 290)

state.success

oklch(0.76 0.16 155)

state.danger

oklch(0.68 0.22 25)

state.warning

oklch(0.82 0.16 90)

state.info

oklch(0.74 0.15 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 Synth into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Synth is the look of the machine age: deep violet-black surfaces, electric magenta, and a cyan secondary that hums like a CRT. Built for AI products that want to feel powerful, fast, and a little from the future.

Layout & Grid

Dark canvases with glowing edges and gradient seams. Generative content gets spotlighted with neon shadow.md halos; chrome stays minimal and sharp.

Components

Buttons

Sharp radius.md buttons in magenta color.brand.primary with dark onBrand text and a neon outer glow. Cyan is reserved for links and streaming states.

Prompt & Output Cards

Cards on color.surface.raised with a glowing border; streaming responses pulse in color.brand.secondary with a label, never color alone.

Accessibility

Neon, but legible: light and muted text pass WCAG AA on the dark 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: synth

4name: Synth

5title: Synth — Neon AI Futuristic

6version: 1.0.0

7category: ai-futuristic

8tags: [ai-futuristic, neon, magenta, cyan, dark]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.66 0.27 350)", type: color }

17 secondary: { value: "oklch(0.74 0.16 200)", type: color }

18 onBrand: { value: "oklch(0.15 0.02 320)", type: color }

19 text:

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

21 muted: { value: "oklch(0.73 0.02 300)", type: color }

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

23 surface:

24 base: { value: "oklch(0.17 0.024 290)", type: color }

25 raised: { value: "oklch(0.22 0.03 290)", type: color }

26 sunken: { value: "oklch(0.13 0.02 290)", type: color }

27 border:

28 default: { value: "oklch(0.34 0.04 290)", type: color }

29 state:

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

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

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

33 info: { value: "oklch(0.74 0.15 230)", 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 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.5rem", type: dimension }

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

45 weight:

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

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

48 leading:

49 tight: { value: 1.05, 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 0 0 1px oklch(0.66 0.27 350 / 0.25)", type: shadow }

60 md: { value: "0 0 40px oklch(0.66 0.27 350 / 0.35)", type: shadow }

61 motion:

62 duration:

63 base: { value: "200ms", 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, neon glow, sharp", type: descriptor }

70 zIndex:

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

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

73---

75# Synth Design System

77## Brand & Voice

78Synth is the look of the machine age: deep violet-black surfaces, electric

79magenta, and a cyan secondary that hums like a CRT. Built for AI products that

80want to feel powerful, fast, and a little from the future.

82## Layout & Grid

83Dark canvases with glowing edges and gradient seams. Generative content gets

84spotlighted with neon `shadow.md` halos; chrome stays minimal and sharp.

86## Components

87### Buttons

88Sharp `radius.md` buttons in magenta `color.brand.primary` with dark `onBrand`

89text and a neon outer glow. Cyan is reserved for links and streaming states.

91### Prompt & Output Cards

92Cards on `color.surface.raised` with a glowing border; streaming responses pulse

93in `color.brand.secondary` with a label, never color alone.

95## Accessibility

96Neon, but legible: light and muted text pass WCAG AA on the dark surfaces. Glows

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

Related systems

View →

Button

Hologram

98AAA

Hologram — Holographic AI

ai futuristicai-futuristicholographic

View →

Button

Quantum

98AAA

Quantum — Deep Space AI

ai futuristicai-futuristicdeep-space

View →

Button

Nebula

100AAA

Nebula — Luminous AI Interface

ai futuristicaidark