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

Sage

style

A restrained green Neumorphism UI style with subtle top-right light and soft controls.

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

Premium blocks for shadcn/uiShadcnblocks.com · Affiliate

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#e7eee9

--foreground:

#1a2b24

--card:

#e7eee9

--card-foreground:

#1a2b24

--popover:

#eef5f0

--popover-foreground:

#1a2b24

--primary:

#23856b

--primary-foreground:

#ffffff

--secondary:

#dbe6de

--secondary-foreground:

#1a2b24

--muted:

#d8e3db

--muted-foreground:

#50665b

--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%2350665b%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:

#f2f7f3

--accent-foreground:

#23856b

--destructive:

#cf5962

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(95 116 106 / 0.22)

--input:

rgb(95 116 106 / 0.18)

--ring:

#23856b

--radius:

18px

--neu-surface:

#e7eee9

--neu-surface-soft:

#f2f7f3

--neu-surface-low:

#d8e3db

--neu-edge:

transparent

--neu-shadow-dark:

rgb(26 56 43 / 0.15)

--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), -3px 3px 8px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 3px -3px 8px 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), -1px 1px 5px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 1px -1px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-inset:

inset -2px 2px 5px rgb(26 56 43 / 0.15), inset 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset -1px 1px 3px rgb(26 56 43 / 0.15), inset 1px -1px 3px rgb(255 255 255 / 0.94)

--neu-shadow-plate:

-1px 2px 3px -1px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), -3px 3px 8px -2px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 2px -2px 5px -1px color-mix(in srgb, rgb(255 255 255 / 0.94) 68%, transparent)

--neu-shadow-primary:

-1px 2px 6px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 1px -1px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset -1px 1px 2px color-mix(in srgb, #23856b 94%, white)

--neu-shadow-primary-hover:

-2px 2px 8px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 2px -2px 8px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent), inset -1px 1px 2px color-mix(in srgb, #23856b 94%, white)

--neu-fill-inset:

linear-gradient(225deg, color-mix(in srgb, #d8e3db 35%, #e7eee9), color-mix(in srgb, #f2f7f3 30%, #e7eee9))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

8px

--neu-radius-small:

4px

--neu-accent-ink:

#227860

--neu-radius-surface:

18px

--neu-radius-overlay:

18px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(225deg, color-mix(in srgb, #f2f7f3 12%, #e7eee9), #e7eee9)

--neu-fill-primary:

linear-gradient(225deg, #23856b, color-mix(in srgb, #23856b 94%, black))

--neu-selected:

color-mix(in srgb, #23856b 8%, #e7eee9)

--neu-selected-border:

color-mix(in srgb, #23856b 44%, rgb(95 116 106 / 0.22))

--neu-error-text:

color-mix(in srgb, #cf5962 76%, #1a2b24)

--neu-shadow-hover:

1px -1px 0px 0px color-mix(in srgb, rgb(255 255 255 / 0.94) 82%, transparent), -2px 2px 8px color-mix(in srgb, rgb(26 56 43 / 0.15) 92%, transparent), 2px -2px 8px color-mix(in srgb, rgb(255 255 255 / 0.94) 64%, transparent)

--neu-shadow-floating:

0 16px 40px rgb(26 56 43 / 0.15), 0 3px 8px rgb(26 56 43 / 0.15), inset -1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#121b17

--foreground:

#e9f5ee

--card:

#19251f

--card-foreground:

#e9f5ee

--popover:

#19251f

--popover-foreground:

#e9f5ee

--primary:

#62c8a7

--primary-foreground:

#071710

--secondary:

Light Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#e7eee9

--foreground:

#1a2b24

--card:

#e7eee9

--card-foreground:

#1a2b24

--popover:

#eef5f0

--popover-foreground:

#1a2b24

--primary:

#23856b

--primary-foreground:

#ffffff

--secondary:

#dbe6de

--secondary-foreground:

#1a2b24

--muted:

#d8e3db

--muted-foreground:

#50665b

--neu-select-arrow:

--accent:

#f2f7f3

--accent-foreground:

#23856b

--destructive:

#cf5962

--destructive-foreground:

#000000

--success:

#0a9b78

--border:

rgb(95 116 106 / 0.22)

--input:

rgb(95 116 106 / 0.18)

--ring:

#23856b

--radius:

18px

--neu-surface:

#e7eee9

--neu-surface-soft:

#f2f7f3

--neu-surface-low:

#d8e3db

--neu-edge:

transparent

--neu-shadow-dark:

rgb(26 56 43 / 0.15)

--neu-shadow-light:

rgb(255 255 255 / 0.94)

--neu-shadow-raised:

--neu-shadow-raised-sm:

--neu-shadow-inset:

inset -2px 2px 5px rgb(26 56 43 / 0.15), inset 2px -2px 5px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent)

--neu-shadow-inset-sm:

inset -1px 1px 3px rgb(26 56 43 / 0.15), 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(225deg, color-mix(in srgb, #d8e3db 35%, #e7eee9), color-mix(in srgb, #f2f7f3 30%, #e7eee9))

--neu-shadow-primary-inset:

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

--neu-shadow-destructive-inset:

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

--neu-overlay:

rgb(15 23 42 / 0.28)

--neu-radius-control:

8px

--neu-radius-small:

4px

--neu-accent-ink:

#227860

--neu-radius-surface:

18px

--neu-radius-overlay:

18px

--neu-duration:

180ms

--neu-fill-raised:

linear-gradient(225deg, color-mix(in srgb, #f2f7f3 12%, #e7eee9), #e7eee9)

--neu-fill-primary:

linear-gradient(225deg, #23856b, color-mix(in srgb, #23856b 94%, black))

--neu-selected:

color-mix(in srgb, #23856b 8%, #e7eee9)

--neu-selected-border:

color-mix(in srgb, #23856b 44%, rgb(95 116 106 / 0.22))

--neu-error-text:

color-mix(in srgb, #cf5962 76%, #1a2b24)

--neu-shadow-hover:

--neu-shadow-floating:

0 16px 40px rgb(26 56 43 / 0.15), 0 3px 8px rgb(26 56 43 / 0.15), inset -1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent)

Dark Mode

--neu-font-sans:

"Pretendard Variable", Pretendard, sans-serif

--neu-font-mono:

Consolas, monospace

--background:

#121b17

--foreground:

#e9f5ee

--card:

#19251f

--card-foreground:

#e9f5ee

--popover:

#19251f

--popover-foreground:

#e9f5ee

--primary:

#62c8a7

--primary-foreground:

#071710

--secondary: