CURATED · OPEN · FREE

Dribbble

A curated marketplace connecting designers and clients through visual storytelling.

01

Identity DNA

A clean, gallery-style exhibition hall for digital design portfolios.

02

Color

A high-contrast, neutral foundation designed to let colorful user-generated work take center stage.

03

Typography

grotesque-sans

• display52px · 600
• headline32px · 600
• body-lg16px · 400
• body14px · 400
• caption12px · 400

Use -1px letter spacing for large display headlines to create a tight, premium feel. · Maintain a consistent 600 weight for primary headlines and a 400 weight for body text.

04

Spacing

Strict 4px-based grid with generous whitespace to maintain a clean, airy layout.

05

Surfaces

1px solid rgba(13, 12, 34, 0.08)

0px 3px 6px rgba(0, 0, 0, 0.14) · 0px 15px 50px rgba(27, 32, 50, 0.1) · 0px 2px 4px rgba(6, 3, 24, 0.1)

06

Layout

A responsive 12-column grid that collapses to 4 columns on mobile.

07

Motion & Interaction

Micro-interactions on hover for buttons and cards. · Smooth 0.5s ease-in-out transitions for background color changes.

Subtle shadow elevation on cards and background color shifts on buttons. · Immediate visual feedback with color transitions over 0.05s.

08

Components

• button Pill-shaped primary buttons with dark backgrounds and white text; secondary buttons with light gray borders.
• card Image-heavy cards with minimal metadata, utilizing 12px rounded corners and subtle hover shadows.
• chip Small, rounded tags with light backgrounds used for navigation and filtering.
• input Large, rounded search bars with integrated action buttons and placeholder text.
• hero Split-layout hero featuring a bold left-aligned headline and a right-aligned contextual image.

09

Voice & Don'ts

• Tone Confident, professional, and empowering.
• Headlines Direct and benefit-oriented, often using bold typography to highlight key features.
• CTAs Action-driven and clear, utilizing pill-shaped buttons for prominent calls to action.

• Don't use serif fonts — screenshot shows a consistent use of grotesque-sans throughout.
• Don't use rounded corner radii larger than 12px for cards — screenshot shows 12px as the standard.
• Don't use high-chroma background colors — screenshot shows a strictly white and light gray palette.
• Don't use left-aligned text in the hero — screenshot shows a centered or right-aligned layout depending on the section.
• Don't use thin, low-contrast borders — screenshot shows a distinct 1px border with rgba(13, 12, 34, 0.08).
• Don't use dark mode themes — screenshot shows a purely light-mode interface.
• Avoid: Overly casual or slang-heavy language.
• Avoid: Passive voice in instructions.
• Avoid: Jargon without context.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko