Creative Crimson

Creative Crimson mockup preview
Click to expand

Creative Crimson is a professional creative-tools design system inspired by the company that defined digital creativity. It pairs a confident red accent with sophisticated dark panels and precise, tool-centric layouts designed for people who make things for a living. The aesthetic is refined and productive — an interface that respects its users' expertise with dense, customizable panels, precise controls, and a neutral dark chrome that lets creative work take center stage. Every pixel serves the professional workflow.

Primary#EB1000
Secondary#4B9CF5
Neutral#B3B3B3
Background#1D1D1D
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Panel headerSource Sans 3 · 11px · SemiBold

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

Body textSource Sans 3 · 14px · Regular

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

Property labelSource Sans 3 · 12px · Regular

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

Code snippetSource Code Pro · 13px · Regular

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

Section titleSource Sans 3 · 16px · SemiBold

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

Dialog titleSource Sans 3 · 20px · Bold

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

Page titleSource Sans 3 · 24px · Bold

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

Marketing headlineSource Sans 3 · 32px · Regular

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

Spacing

Base: 4px

Creative Crimson is a professional creative-tools design system inspired by the company that defined digital creativity. It pairs a confident red accent with sophisticated dark panels and precise, tool-centric layouts designed for people who make things for a living. The aesthetic is refined and productive — an interface that respects its users' expertise with dense, customizable panels, precise controls, and a neutral dark chrome that lets creative work take center stage. Every pixel serves the professional workflow.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

Default

Elevation & Depth

Dropdown
Modal
ContextMenu

Do's & Don'ts

Do

Use #EB1000 red sparingly — it is a brand accent for CTAs and alerts, not a dominant color
Use 11px uppercase letter-spaced labels for panel headers — this is the signature professional pattern

Don't

Don't use white or light backgrounds in the main workspace — the dark chrome lets creative work shine
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 8.3 KB
Downloads 100
Copies 19
dark dense devtools professional

Use with MCP

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

Don't have the MCP? Install it here