ai futuristicv1.0.0·dark

Hologram

Hologram — Holographic AI

ai-futuristicholographiccyanvioletdark

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

hologram · rendered from tokens

Color

brand.primary

oklch(0.78 0.14 200)

brand.secondary

oklch(0.68 0.17 300)

brand.onBrand

oklch(0.16 0.02 240)

text.primary

oklch(0.95 0.008 220)

text.muted

oklch(0.73 0.016 220)

text.link

oklch(0.78 0.14 200)

surface.base

oklch(0.18 0.02 240)

surface.raised

oklch(0.23 0.024 240)

surface.sunken

oklch(0.14 0.016 240)

border.default

oklch(0.34 0.026 240)

state.success

oklch(0.76 0.16 155)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.82 0.15 90)

state.info

oklch(0.78 0.14 200)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Hologram shimmers between cyan and violet like a projection in the dark. Built for AI products that feel holographic and alive — iridescent edges, scanline texture, and a techno-optimistic tone.

Layout & Grid

Dark panels lit by dual-hue gradients and glowing borders. Generative surfaces get an iridescent shadow.md; chrome stays sharp and minimal.

Components

Buttons

Crisp radius.md buttons in cyan color.brand.primary with dark onBrand text and an iridescent outline. Violet marks secondary and streaming states.

Output Panels

Cards on color.surface.raised with a glowing dual-hue border; streaming responses pulse with a label so color is never the only signal.

Accessibility

Holographic yet legible: light and muted text pass WCAG AA on the dark surfaces. Glows are decorative shadows, accents stay bright, 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: hologram

4name: Hologram

5title: Hologram — Holographic AI

6version: 1.0.0

7category: ai-futuristic

8tags: [ai-futuristic, holographic, cyan, violet, dark]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.78 0.14 200)", type: color }

17 secondary: { value: "oklch(0.68 0.17 300)", type: color }

18 onBrand: { value: "oklch(0.16 0.02 240)", type: color }

19 text:

20 primary: { value: "oklch(0.95 0.008 220)", type: color }

21 muted: { value: "oklch(0.73 0.016 220)", type: color }

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

23 surface:

24 base: { value: "oklch(0.18 0.02 240)", type: color }

25 raised: { value: "oklch(0.23 0.024 240)", type: color }

26 sunken: { value: "oklch(0.14 0.016 240)", type: color }

27 border:

28 default: { value: "oklch(0.34 0.026 240)", type: color }

29 state:

30 success: { value: "oklch(0.76 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: "{color.brand.primary}", type: color }

34 typography:

35 family:

36 sans: { value: "Chakra Petch, 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.4rem", type: dimension }

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

45 weight:

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

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

48 leading:

49 tight: { value: 1.1, 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.78 0.14 200 / 0.25)", type: shadow }

60 md: { value: "0 0 40px oklch(0.68 0.17 300 / 0.3)", type: shadow }

61 motion:

62 duration:

63 base: { value: "220ms", 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, iridescent, scanline", type: descriptor }

70 zIndex:

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

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

73---

75# Hologram Design System

77## Brand & Voice

78Hologram shimmers between cyan and violet like a projection in the dark. Built

79for AI products that feel holographic and alive — iridescent edges, scanline

80texture, and a techno-optimistic tone.

82## Layout & Grid

83Dark panels lit by dual-hue gradients and glowing borders. Generative surfaces

84get an iridescent `shadow.md`; chrome stays sharp and minimal.

86## Components

87### Buttons

88Crisp `radius.md` buttons in cyan `color.brand.primary` with dark `onBrand` text

89and an iridescent outline. Violet marks secondary and streaming states.

91### Output Panels

92Cards on `color.surface.raised` with a glowing dual-hue border; streaming

93responses pulse with a label so color is never the only signal.

95## Accessibility

96Holographic yet legible: light and muted text pass WCAG AA on the dark surfaces.

97Glows are decorative shadows, accents stay bright, and motion is calm.

Related systems

View →

Button

Synth

98AAA

Synth — Neon AI Futuristic

ai futuristicai-futuristicneon

View →

Button

Quantum

98AAA

Quantum — Deep Space AI

ai futuristicai-futuristicdeep-space

View →

Button

Nebula

100AAA

Nebula — Luminous AI Interface

ai futuristicaidark