Graphite – shadcn/ui Style by neumorphism-ui | shadcnregistry

Graphite

style

A high-contrast neutral Neumorphism UI style with deep shadows and quick motion.

pnpm dlx shadcn@latest add "https://neumorphism-ui.andongmin.com/r/style-graphite.json"

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#e6e8eb

--foreground:

#1d232b

--card:

#e6e8eb

--card-foreground:

#1d232b

--popover:

#edf0f2

--popover-foreground:

#1d232b

--primary:

#3f536f

--primary-foreground:

#ffffff

--secondary:

#d9dde1

--secondary-foreground:

#1d232b

--muted:

#d5d9de

--muted-foreground:

#55606b

--neu-select-arrow:

url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2355606b%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")

--accent:

#f1f3f5

--accent-foreground:

#3f536f

--destructive:

#c8545f

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(98 107 118 / 0.22)

--input:

rgb(98 107 118 / 0.18)

--ring:

#3f536f

--radius:

8px

--neu-surface:

#e6e8eb

--neu-surface-soft:

#f1f3f5

--neu-surface-low:

#d5d9de

--neu-edge:

transparent

--neu-shadow-dark:

rgb(31 39 50 / 0.17)

--neu-shadow-light:

rgb(255 255 255 / 0.94)

--neu-shadow-raised:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 8px 8px 18px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -8px -8px 18px color-mix(in srgb, rgb(255 255 255 / 0.94) 74%, transparent)

--neu-shadow-raised-sm:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 3px 3px 9px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-inset:

inset 3px 3px 9px rgb(31 39 50 / 0.17), inset -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(31 39 50 / 0.17), inset -1px -1px 3px rgb(255 255 255 / 0.94)

--neu-shadow-plate:

1px 2px 3px -1px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 5px 5px 12px -2px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -4px -4px 9px -1px color-mix(in srgb, rgb(255 255 255 / 0.94) 68%, transparent)

--neu-shadow-primary:

3px 4px 10px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #3f536f 94%, white)

--neu-shadow-primary-hover:

4px 4px 12px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -4px -4px 12px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset 1px 1px 2px color-mix(in srgb, #3f536f 94%, white)

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #d5d9de 35%, #e6e8eb), color-mix(in srgb, #f1f3f5 30%, #e6e8eb))

--neu-shadow-primary-inset:

inset 2px 2px 5px color-mix(in srgb, #3f536f 68%, black), inset -2px -2px 5px color-mix(in srgb, #3f536f 78%, white)

--neu-shadow-destructive-inset:

inset 2px 2px 5px color-mix(in srgb, #c8545f 68%, black), inset -2px -2px 5px color-mix(in srgb, #c8545f 78%, white)

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

6px

--neu-radius-small:

4px

--neu-accent-ink:

#3f536f

--neu-radius-surface:

8px

--neu-radius-overlay:

8px

--neu-duration:

120ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f1f3f5 12%, #e6e8eb), #e6e8eb)

--neu-fill-primary:

linear-gradient(135deg, #3f536f, color-mix(in srgb, #3f536f 94%, black))

--neu-selected:

color-mix(in srgb, #3f536f 8%, #e6e8eb)

--neu-selected-border:

color-mix(in srgb, #3f536f 44%, rgb(98 107 118 / 0.22))

--neu-error-text:

color-mix(in srgb, #c8545f 76%, #1d232b)

--neu-shadow-hover:

-1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), 4px 4px 12px color-mix(in srgb, rgb(31 39 50 / 0.17) 92%, transparent), -4px -4px 12px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-floating:

0 16px 40px rgb(31 39 50 / 0.17), 0 3px 8px rgb(31 39 50 / 0.17), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.70) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#111419

--foreground:

#edf1f6

--card:

#181c22

--card-foreground:

#edf1f6

--popover:

#181c22

--popover-foreground:

#edf1f6

--primary:

#b2c2d8

--primary-foreground:

#11161d

--secondary:

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#e6e8eb

--foreground:

#1d232b

--card:

#e6e8eb

--card-foreground:

#1d232b

--popover:

#edf0f2

--popover-foreground:

#1d232b

--primary:

#3f536f

--primary-foreground:

#ffffff

--secondary:

#d9dde1

--secondary-foreground:

#1d232b

--muted:

#d5d9de

--muted-foreground:

#55606b

--neu-select-arrow:

--accent:

#f1f3f5

--accent-foreground:

#3f536f

--destructive:

#c8545f

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(98 107 118 / 0.22)

--input:

rgb(98 107 118 / 0.18)

--ring:

#3f536f

--radius:

8px

--neu-surface:

#e6e8eb

--neu-surface-soft:

#f1f3f5

--neu-surface-low:

#d5d9de

--neu-edge:

transparent

--neu-shadow-dark:

rgb(31 39 50 / 0.17)

--neu-shadow-light:

rgb(255 255 255 / 0.94)

--neu-shadow-raised:

--neu-shadow-raised-sm:

--neu-shadow-inset:

inset 3px 3px 9px rgb(31 39 50 / 0.17), inset -3px -3px 9px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset 1px 1px 3px rgb(31 39 50 / 0.17), inset -1px -1px 3px rgb(255 255 255 / 0.94)

--neu-shadow-plate:

--neu-shadow-primary:

--neu-shadow-primary-hover:

--neu-fill-inset:

linear-gradient(135deg, color-mix(in srgb, #d5d9de 35%, #e6e8eb), color-mix(in srgb, #f1f3f5 30%, #e6e8eb))

--neu-shadow-primary-inset:

inset 2px 2px 5px color-mix(in srgb, #3f536f 68%, black), inset -2px -2px 5px color-mix(in srgb, #3f536f 78%, white)

--neu-shadow-destructive-inset:

inset 2px 2px 5px color-mix(in srgb, #c8545f 68%, black), inset -2px -2px 5px color-mix(in srgb, #c8545f 78%, white)

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

6px

--neu-radius-small:

4px

--neu-accent-ink:

#3f536f

--neu-radius-surface:

8px

--neu-radius-overlay:

8px

--neu-duration:

120ms

--neu-fill-raised:

linear-gradient(135deg, color-mix(in srgb, #f1f3f5 12%, #e6e8eb), #e6e8eb)

--neu-fill-primary:

linear-gradient(135deg, #3f536f, color-mix(in srgb, #3f536f 94%, black))

--neu-selected:

color-mix(in srgb, #3f536f 8%, #e6e8eb)

--neu-selected-border:

color-mix(in srgb, #3f536f 44%, rgb(98 107 118 / 0.22))

--neu-error-text:

color-mix(in srgb, #c8545f 76%, #1d232b)

--neu-shadow-hover:

--neu-shadow-floating:

0 16px 40px rgb(31 39 50 / 0.17), 0 3px 8px rgb(31 39 50 / 0.17), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.70) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#111419

--foreground:

#edf1f6

--card:

#181c22

--card-foreground:

#edf1f6

--popover:

#181c22

--popover-foreground:

#edf1f6

--primary:

#b2c2d8

--primary-foreground:

#11161d

--secondary: