Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Velvet Shaker
Velvet Shaker is a moody, after-dark identity built for cocktail bars, lounges, and nightlife venues. Deep almost-black surfaces hold a single warm cream as both ink and accent, channeling the candle-lit hush of a Lan Kwai Fong speakeasy where every glass catches a sliver of amber light. The system leans into editorial scale and quiet confidence: oversized Inter Tight wordmarks anchor each section, while small uppercase index numerals (01//, 06//) thread a magazine-style hierarchy through the page. Pill-shaped buttons, hairline dividers in faded cream, and full-bleed photography of glassware do the rest of the talking.
Sections from Velvet Shaker
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Staggered Scroll Occasions Gallery
View section
Hero with Moving Gallery
View section
Fixed Navigation Bar with Dropdown
View section
About Story with Slider
View section
About Gallery Asymmetric Grid
View section
Contact Form Two Column
View section
FAQ Accordion Section
View section
Story Section Two Column
View section
Full Screen Hero with Links
View section
Animated Menu List Section
View section
Cocktail Menu Grid
View section
Contact Info Grid Gallery
View section
Colors
Canvas
Obsidian Pour
#0f100a
Primary canvas & ink. Page background, section fills, and dark text on cream surfaces.
Velvet Shadow
#2f2e2a
Modal & dropdown surface. Cart container and nav dropdown panel.
Smoked Charcoal
#1e1f17
Lifted surface. Checkout fields, block headers, and elevated panels just above the canvas.
Ink
Ghost Cream
#e6e0c680
Tertiary detail. Form borders, faint outlines, and dividers at 50% opacity.
Muted Cream
#e6e0c6cc
Secondary text. Nav links, captions, contact details, and supporting copy at 80% opacity.
Whisper Cream
#e6e0c64d
Hairlines & hover wash. Section dividers, menu separators, and the translucent fill on cta hover states.
Candlelit Cream
#e6e0c6
Primary text & accent. Headlines, body copy on dark, button fills, and the brand wordmark.
Typography
The quick brown fox jumps
Sole typeface — used for everything from the 102px wordmark to 13px index labels.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
70pxCard padding
40pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-44
44px--spacing-52
52px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
cards12pxsmall4pxfields50pxbuttons110pxhairline2pxtext-area12pxcheckout-fields70pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Obsidian Pour
Level 2Smoked Charcoal
Level 3Velvet Shadow
Level 4Candlelit Cream
Do's and don'ts
- Set the page on Obsidian Pour (#0f100a) and let Candlelit Cream do all the heavy lifting for type, lines, and primary buttons.
- Use the 110px pill radius on every primary CTA and the 50px radius on text inputs to keep the soft, lounge-friendly geometry.
- Open every section with a hairline divider plus an index label pair (e.g. '01//' + 'About') in 13px uppercase Muted Cream.
- Push display headings to 102px Inter Tight Medium with -0.02em tracking — confidence is the entire visual hook.
- Layer text on dark using the cream opacity ladder: 100% for primary, 80% for secondary, 50% for borders, 30% for hairlines.
- Reveal hero wordmarks and full-bleed images with a blur(8px)→0 fade so each section breathes in slowly.
- Anchor inverted moments (blockquotes, recipe cards, primary buttons) on Candlelit Cream with Obsidian Pour text for a hard tonal flip.
- Don't introduce additional saturated hues — the palette is strictly near-black + warm cream, with no brand color beyond imagery.
- Don't use pure white (#ffffff) anywhere on the dark canvas; cream at full opacity is the lightest value allowed.
- Don't apply rounded-rectangle radii (8–16px) to buttons — buttons are pills (110px) only.
- Don't bold headlines — every weight in this system sits at 500; 700 is reserved for inline emphasis.
- Don't crowd sections; respect the 70–120px vertical section padding and the 24px gutter inside the 1600px container.
- Don't decorate photography with overlays or duotones — let candlelit cocktail and architectural shots play their natural amber.
- Don't mix typefaces; Inter Tight carries 13px captions through 112px stat numbers without help.
Example prompts
Landing hero
Section opener
Primary CTA
Product card
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide