VelvetEdge Design System

VelvetEdge Design System mockup preview
Click to expand

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.

Surface Base#0F0F14
Emerald#064E3B
Ruby#9F1239
Sapphire#1E3A8A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1DM Serif Display · 40px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2DM Serif Display · 32px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3DM Serif Display · 26px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Poppins · 20px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyPoppins · 15px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallPoppins · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tinyPoppins · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoSource Code Pro · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

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.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ActiveStatus ActiveStatus ExpiringStatus CancelledStatus Premium

Elevation & Depth

glow-emerald-sm
glow-emerald-md
glow-emerald-lg
glow-ruby-sm
glow-ruby-md
glow-sapphire-sm
glow-sapphire-md

Do's & Don'ts

Do

Use emerald as the primary action color; reserve ruby strictly for destructive and urgency states.
Apply soft gradients (135deg) to primary and destructive buttons for depth.
Keep body text light-weight (300) to maintain the velvet-soft reading experience.
Use DM Serif Display for headings only; switch to Poppins for all interface text.
Ensure all glowing elements have a non-glow fallback for reduced-motion preferences.
Test colored text on dark surfaces for WCAG AA compliance (minimum 4.5:1).

Don't

Mix jewel-tone glows on the same element -- each component gets one glow color.
Use jewel-tone colors as flat background fills for large sections.
Combine more than two jewel tones in a single component or card.
Use bright whites; tint text toward lavender (#F0EDF5) to preserve the jewel-box atmosphere.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 7.0 KB
Downloads 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/velvetedge and implement it in my code

Don't have the MCP? Install it here