CreateSpace Design System

CreateSpace Design System mockup preview
Click to expand

CreateSpace is a colorful, expressive, and grid-heavy design system designed for multi-disciplinary creative agency websites. It combines bold color blocks with asymmetric layouts and glassmorphism-inspired panels to create a dynamic, portfolio-first experience. The system embraces contrast, layering, and confident typography to showcase creative work across disciplines -- from branding and illustration to motion and product design.

Color Primary#E11D48
Color Secondary#2563EB
Color Tertiary#FACC15
Surface Base#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

text-heroPoppins · 72px · Extra Bold

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

text-h1Poppins · 48px · Bold

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

text-h2Poppins · 32px · SemiBold

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

text-h3Poppins · 24px · SemiBold

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

text-body-lgDM Sans · 18px · Regular

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

text-bodyDM Sans · 16px · Regular

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

text-captionDM Sans · 13px · Medium

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

text-monoFira Code · 14px · Regular

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

Spacing

Base: 8px

CreateSpace is a colorful, expressive, and grid-heavy design system designed for multi-disciplinary creative agency websites. It combines bold color blocks with asymmetric layouts and glassmorphism-inspired panels to create a dynamic, portfolio-first experience. The system embraces contrast, layering, and confident typography to showcase creative work across disciplines -- from branding and illustration to motion and product design.

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 DefaultFilter SelectedStatus ActiveStatus CompleteStatus In ReviewStatus Archived

Elevation & Depth

shadow-glass
shadow-md
shadow-lg
shadow-color
shadow-focus

Do's & Don'ts

Do

Use bold, full-bleed color blocks to create energy and visual rhythm across sections.
Embrace asymmetric grid layouts to showcase creative work in unexpected, dynamic ways.
Use expressive, large-scale typography for section headers and project titles.
Adopt a portfolio-first layout where project imagery dominates above-the-fold content.
Maintain consistent gutter widths (16px or 24px) even in asymmetric layouts for underlying structural coherence.
Test glassmorphism panels across browsers; provide an opaque fallback for unsupported environments.

Don't

Use more than two brand colors in a single component -- reserve tertiary yellow for accents only.
Let glassmorphism panels obscure important content -- ensure sufficient contrast behind frosted layers.
Over-animate. Transitions should be smooth (150-300ms) but not theatrical.
Default to safe, symmetrical layouts -- the system's identity is rooted in confident visual tension.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.2 KB
Downloads 0
bold creative landing-page light portfolio

Use with MCP

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

Don't have the MCP? Install it here