glassmorphismv1.0.0·light

Prism

Prism — Colorful Light Glass

glassmorphismcolorfulblurgradientlight

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

prism · rendered from tokens

Color

brand.primary

oklch(0.58 0.18 285)

brand.secondary

oklch(0.66 0.15 200)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.25 0.02 285)

text.muted

oklch(0.47 0.025 285)

text.link

oklch(0.58 0.18 285)

surface.base

oklch(0.97 0.01 285)

surface.raised

oklch(0.995 0.005 285)

surface.sunken

oklch(0.945 0.014 285)

border.default

oklch(0.9 0.014 285)

state.success

oklch(0.58 0.14 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.72 0.14 75)

state.info

oklch(0.6 0.15 245)

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 Prism into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Prism splits light into color. Translucent panels float over a rainbow gradient, catching violet and cyan at their edges. Playful but premium — interfaces that feel like they're made of glass and sunlight.

Layout & Grid

Frosted cards stack over a vivid gradient backdrop with depth and parallax. Color lives in the background; content sits on a faintly raised, legible layer.

Components

Buttons

Rounded radius.md translucent buttons with a violet color.brand.primary fill and a colorful glow on hover.

Glass Cards

Semi-transparent cards with a hairline border and a colored shadow.md halo; text always renders on a sufficiently opaque layer.

Accessibility

Color and blur never cost legibility — primary and muted text pass WCAG AA on the opaque content layer. Gradients are decorative; focus rings stay visible.

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: prism

4name: Prism

5title: Prism — Colorful Light Glass

6version: 1.0.0

7category: glassmorphism

8tags: [glassmorphism, colorful, blur, gradient, light]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.58 0.18 285)", type: color }

17 secondary: { value: "oklch(0.66 0.15 200)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.25 0.02 285)", type: color }

21 muted: { value: "oklch(0.47 0.025 285)", type: color }

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

23 surface:

24 base: { value: "oklch(0.97 0.01 285)", type: color }

25 raised: { value: "oklch(0.995 0.005 285)", type: color }

26 sunken: { value: "oklch(0.945 0.014 285)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.014 285)", type: color }

29 state:

30 success: { value: "oklch(0.58 0.14 150)", type: color }

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

32 warning: { value: "oklch(0.72 0.14 75)", type: color }

33 info: { value: "oklch(0.6 0.15 245)", type: color }

34 typography:

35 family:

36 sans: { value: "SF Pro Display, system-ui, sans-serif", type: fontFamily }

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

38 scale:

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

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

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

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

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

58 shadow:

59 sm: { value: "0 2px 10px oklch(0.45 0.08 285 / 0.14)", type: shadow }

60 md: { value: "0 16px 44px oklch(0.45 0.08 285 / 0.22)", type: shadow }

61 motion:

62 duration:

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

64 easing:

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

66 breakpoint:

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

68 iconography:

69 style: { value: "1.5px stroke, rounded, prismatic", type: descriptor }

70 zIndex:

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

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

73---

75# Prism Design System

77## Brand & Voice

78Prism splits light into color. Translucent panels float over a rainbow gradient,

79catching violet and cyan at their edges. Playful but premium — interfaces that

80feel like they're made of glass and sunlight.

82## Layout & Grid

83Frosted cards stack over a vivid gradient backdrop with depth and parallax.

84Color lives in the background; content sits on a faintly raised, legible layer.

86## Components

87### Buttons

88Rounded `radius.md` translucent buttons with a violet `color.brand.primary` fill

89and a colorful glow on hover.

91### Glass Cards

92Semi-transparent cards with a hairline border and a colored `shadow.md` halo;

93text always renders on a sufficiently opaque layer.

95## Accessibility

96Color and blur never cost legibility — primary and muted text pass WCAG AA on

97the opaque content layer. Gradients are decorative; focus rings stay visible.

Related systems

View →

Button

Frost

98AA

Frost — Light Glassmorphism

glassmorphismglassmorphismblur

View →

Button

Halo

98AA

Halo — Pearlescent Light Glass

glassmorphismglassmorphismpearlescent

View →

Button

Aurora

98AA

Aurora — Dark Glassmorphism

glassmorphismglassmorphismdark