mdshop
Back to designs
C

Design System inspired by Canva

Design tool. Purple-teal brand, template-driven, democratized design.

Usage
npx getdesign@latest add canva

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
15
Bookmarked
0
Not an official Canva design system. A curated starting point for building Canva-like UIs with your AI coding agent.

Design tool. Purple-teal brand, template-driven, democratized design.

Preview
canva.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF CANVA

Design tool. Purple-teal brand, template-driven, democratized design.

Explore the systemView tokens

Color Palette

Design tool. Purple-teal brand, template-driven, democratized design.

Primary
Canva Purple
#7d2ae8
Brand color
Canva Teal
#00c4cc
Brand color
White
#ffffff
Brand color
Dark
#0d1216
Brand color
Light BG
#f5f5f5
Brand color
Gray
#6b7280
Brand color
Blue
#3b82f6
Brand color
Pink
#ff3366
Brand color

Typography

A type system inspired by Canva.

Canva Sans
Canva Sans, Canva Sans
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Canva.

Not detected on this URL

Components

Other component primitives mapped from the Canva spec.

Not detected on this URL