VelvetEdge Design System
VelvetEdge is a deep, jewel-toned design system that radiates indulgence and premium sophistication. Built for high-end subscription services and luxury digital experiences, it layers emerald, ruby, and sapphire over dark surfaces with soft gradients and colored glows. The palette evokes gemstones displayed on black velvet -- each color precious, each accent deliberate and luminous.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxVelvetEdge is a deep, jewel-toned design system that radiates indulgence and premium sophistication. Built for high-end subscription services and luxury digital experiences, it layers emerald, ruby, and sapphire over dark surfaces with soft gradients and colored glows. The palette evokes gemstones displayed on black velvet -- each color precious, each accent deliberate and luminous.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here