mdshop
Back to designs
D

Design System inspired by Dribbble

Design showcase. Pink brand, shot-based grid, creative community focus.

Usage
npx getdesign@latest add dribbble

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

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

Design showcase. Pink brand, shot-based grid, creative community focus.

Preview
dribbble.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF DRIBBBLE

Design showcase. Pink brand, shot-based grid, creative community focus.

Explore the systemView tokens

Color Palette

Design showcase. Pink brand, shot-based grid, creative community focus.

Primary
Dribbble Pink
#ea4c89
Brand color
Dark Pink
#c32361
Brand color
Light Pink
#fff0f6
Brand color
White
#ffffff
Brand color
Black
#0d0c22
Brand color
Gray
#6e6d7a
Brand color
Light Gray
#f3f3f4
Brand color
Yellow
#ffda79
Brand color

Typography

A type system inspired by Dribbble.

Haas Grotesk
Haas Grotesk, Haas Grotesk
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 Dribbble.

Not detected on this URL

Components

Other component primitives mapped from the Dribbble spec.

Not detected on this URL