Velvet Evening

by Elena Vasquez·Generated from prompt

luxurious dark opulent dramatic intimate

split-complementarywarm

3.4(5)

Design Direction

Evening wear collection — deep burgundy, gold highlights, opulent and sensual

Colour Strategy

split-complementary harmony from hue 345 with warm temperature

Typography Strategy

Anton headings paired with Work Sans body text

Colour Palette

primary

#c7526f

secondary

#5dbb75

accent

#4caccd

neutral

#91888a

success

#4ace91

warning

#daa13e

error

#ce4a4a

info

#4a7dce

Typography

Heading

Anton, sans-serif

View on Google Fonts ↗

Body

Work Sans, sans-serif

View on Google Fonts ↗

Design is intelligence made visible

Great typography is the foundation of great design. The pairing of heading and body typefaces creates a visual hierarchy that guides the reader through content with clarity and purpose, while expressing personality at every level.

Selection colour · highlighted text looks like this · try selecting any text on this page

Spacing

7px base unit · generous density

7px

14px

29px

43px

58px

2xl

86px

3xl

115px

4xl

173px

Border radius

none

0px

4px

10px

18px

28px

full

9999px

Elevation

sunken

base

raised

floating

overlay

Shadows

low

0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(199, 82, 111, 0.1)

mid

0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(199, 82, 111, 0.15)

high

0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(199, 82, 111, 0.2)

glow

Texture

grain · opacity 0.07 · overlay blend

grain · overlay · 0.07

Grid

editorial · 8 columns · 32px gutter · 80px margin · 1200px max

Columns8

Gutter32px

Margin80px

Max width1200px

Motion

Hover, click, and interact to see the motion tokens in action.

micro

100ms

Button press feedback

fast

200ms

Hover me

Colour & border transitions

normal

400ms

Toggles & state changes

slow

600ms

Panel content slides in at the slow duration - used for modals, drawers, and accordions.

glacial

800ms

Page transitions & loading states

Easings

General

Hover states, colour changes, most transitions

cubic-bezier(0.65, 0, 0.35, 1)

Enter

Elements appearing - modals, dropdowns, toasts

cubic-bezier(0.33, 0, 0, 1)

Exit

Elements leaving - dismissals, close animations

cubic-bezier(0.67, 0, 1, 0.67)

Bounce

Playful feedback - toggles, badges, confirmations

cubic-bezier(0.22, 1.6, 0.36, 1)

Spring

Physics-based - drag, gestures, elastic effects

cubic-bezier(0.16, 1.3, 0.3, 1)

Iconography

Icon style derived from the system's personality, mood, and visual tokens.

Recommended library

Remix Icon

Expressive icons bridging outlined and filled styles

Browse Remix Icon ↗

Also consider Material Symbols — Comprehensive icon system with variable weight and fill

Stroke weight

1.75px

Matches border width (1.5px)

Corner rounding

4px

Use for icon containers

Icon set preview (luxury) — 1.75px stroke

Size scale

12px

16px

20px

24px

32px

On colour

primary

secondary

accent

muted

error

success

ComponentsPro

Component showcase is a Pro feature

Upgrade to see fully themed buttons, inputs, cards, badges, and more - all wired to this system's tokens.

Upgrade to Pro

PatternsPro

Patterns are a Pro feature

Upgrade to see fully themed form layouts, empty states, loading skeletons, and error handling - all built with this system's tokens.

Upgrade to Pro

Export

Code Tokens

:root {
  /* ─── Colors: Primary ─── */
  --color-primary-50: #f9f6f7;
  --color-primary-100: #f0eaec;
  --color-primary-200: #e8d4d9;
  --color-primary-300: #e4aab9;
  --color-primary-400: #d78499;
  --color-primary-500: #c7526f;
  --color-primary-600: #ad3855;
  --color-primary-700: #8e2e46;
  --color-primary-800: #61333f;
  --color-primary-900: #3e2d31;
  --color-primary-950: #291e21;

  /* ─── Colors: Secondary ─── */
  --color-secondary-50: #f6f8f7;
  --color-secondary-100: #ebefec;
  --color-secondary-200: #d6e6da;
  --color-secondary-300: #b0debb;
  --color-secondary-400: #8ccf9d;
  --color-secondary-500: #5dbb75;
  --color-secondary-600: #44a25b;
  --color-secondary-700: #38854b;
  --color-secondary-800: #385c41;
  --color-secondary-900: #2f3c32;
  --color-secondary-950: #1f2822;

  /* ─── Colors: Accent ─── */
  --color-accent-50: #f6f8f9;
  --color-accent-100: #eaeff0;
  --color-accent-200: #d3e3e9;
  --color-accent-300: #a7d7e6;
  --color-accent-400: #80c4db;
  --color-accent-500: #4caccd;
  --color-accent-600: #3293b3;
  --color-accent-700: #297993;
  --color-accent-800: #315663;
  --color-accent-900: #2d3a3f;
  --color-accent-950: #1e272a;

  /* ─── Colors: Neutral ─── */
  --color-neutral-50: #f8f7f7;
  --color-neutral-100: #eeeced;
  --color-neutral-200: #dfdddd;
  --color-neutral-300: #c9c5c6;
  --color-neutral-400: #b1aaac;
  --color-neutral-500: #91888a;
  --color-neutral-600: #776e70;
  --color-neutral-700: #625b5c;
  --color-neutral-800: #4d4748;
  --color-neutral-900: #383334;
  --color-neutral-950: #252223;

  /* ─── Colors: Semantic ─── */
  --color-success: #4ace91;
  --color-success-light: #202d27;
  --color-warning: #daa13e;
  --color-warning-light: #2e281e;
  --color-error: #ce4a4a;
  --color-error-light: #2d2020;
  --color-info: #4a7dce;
  --color-info-light: #20252d;

  /* ─── Colors: Surface ─── */
  --color-background: #110e0e;
  --color-foreground: #e7e4e5;
  --color-card: #1e1a1b;
  --color-card-foreground: #e7e4e5;
  --color-muted: #282425;
  --color-muted-foreground: #989092;
  --color-border: #302c2c;
  --color-input: #252223;
  --color-ring: #d1476a;

  /* ─── Typography ─── */
  --font-heading: Anton, sans-serif;
  --font-body: Work Sans, sans-serif;
  --font-mono: JetBrains Mono, monospace;

  /* ─── Spacing ─── */
  --space-lg: 43px;
  --space-md: 29px;
  --space-sm: 14px;
  --space-xl: 58px;
  --space-xs: 7px;
  --space-2xl: 86px;
  --space-3xl: 115px;
  --space-4xl: 173px;

  /* ─── Border Radius ─── */
  --radius-lg: 18px;
  --radius-md: 10px;
  --radius-sm: 4px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --radius-none: 0px;

  /* ─── Shadows ─── */
  --shadow-low: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 4px rgba(199, 82, 111, 0.1);
  --shadow-mid: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(199, 82, 111, 0.15);
  --shadow-high: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(199, 82, 111, 0.2);
  --shadow-glow: 0 0 40px rgba(199, 82, 111, 0.3), 0 0 80px rgba(199, 82, 111, 0.15);

  /* ─── Motion ─── */
  --duration-micro: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;
  --duration-glacial: 800ms;
  --easing-default: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-entrance: cubic-bezier(0.33, 0, 0, 1);
  --easing-exit: cubic-bezier(0.67, 0, 1, 0.67);
  --easing-bounce: cubic-bezier(0.22, 1.6, 0.36, 1);
  --easing-spring: cubic-bezier(0.16, 1.3, 0.3, 1);

  /* ─── Elevation ─── */
  --elevation-sunken: #060505;
  --elevation-base: #0e0c0c;
  --elevation-raised: #211c1d;
  --elevation-floating: #322a2c;
  --elevation-overlay: #483d40;

  /* ─── Component Scale (generous) ─── */
  --comp-padding-x: 1.5rem;
  --comp-padding-y: 0.75rem;
  --comp-gap: 1.25rem;
  --comp-border-width: 1.5px;
  --comp-font-size: 0.875rem;
  --comp-input-height: 3rem;
  --comp-button-height: 3rem;
  --comp-icon-size: 1.25rem;

  /* ─── Grid (editorial) ─── */
  --grid-columns: 8;
  --grid-gutter: 32px;
  --grid-margin: 80px;
  --grid-max-width: 1200px;

  /* ─── Selection ─── */
  --selection-bg: #ad3855;
  --selection-fg: #FFFFFF;
}

Brand DocumentsPro

Brand Guidelines

Standalone HTML, print to PDF. Colours, typography, spacing, all in one page.

Presentation Deck

PPTX template with palette, typography, and blank slides in your brand.

Figma Tokens

JSON for Tokens Studio plugin. Import colours, type, spacing straight into Figma.

PDF Brand Guide

Full brand guidelines as a real PDF file. Colours and typography rendered exactly.

AI Skill

System prompt you can paste into Cursor or any AI tool to generate on-brand UI instantly.

Upgrade to Pro for all exports