---
name: "Dribbble"
mode: "light"
---
# Dribbble
## Visual theme and atmosphere
Curated, image-first, compact, and brand-pink.
Gallery wall at design week — white room with one magenta spotlight.
## Color palette and roles
- **Dribbble Pink (#ea4c89)**: Brand accent — search, PRO badge, logo, active heart.
- **Midnight Ink (#0d0c22)**: Primary text, filled buttons.
- **Paper (#ffffff)**: Page canvas, card surfaces.
- **Smoke (#6e6d7a)**: Secondary muted body text.
- **Mist (#f3f3f6)**: Soft surface fill, input backgrounds.
- **Frost Border (#e2e8f2)**: Hairline borders and dividers.
## Typography rules
- **Display**: Mona Sans, 700, 48px. Hero headlines.
- **Body**: Mona Sans, 400, 14px. Body and UI labels.
- **Label**: Mona Sans, 600, 13px. Button and navigation labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 8px.
- Card padding: 12px.
- Section padding: 40px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 260ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #ea4c89 only for brand-anchored moments — never paint a large surface pink.
- Set filled primary buttons to #0d0c22 fill with white text.
- Keep 4-column thumbnail grid on pure white canvas with 8px image radius.
- Do not use #ea4c89 for body text, icons, or large fills.
---
name: "Dribbble"
mode: "light"
---
# Dribbble
## Visual theme and atmosphere
Curated, image-first, compact, and brand-pink.
Gallery wall at design week — white room with one magenta spotlight.
## Color palette and roles
- **Dribbble Pink (#ea4c89)**: Brand accent — search, PRO badge, logo, active heart.
- **Midnight Ink (#0d0c22)**: Primary text, filled buttons.
- **Paper (#ffffff)**: Page canvas, card surfaces.
- **Smoke (#6e6d7a)**: Secondary muted body text.
- **Mist (#f3f3f6)**: Soft surface fill, input backgrounds.
- **Frost Border (#e2e8f2)**: Hairline borders and dividers.
## Typography rules
- **Display**: Mona Sans, 700, 48px. Hero headlines.
- **Body**: Mona Sans, 400, 14px. Body and UI labels.
- **Label**: Mona Sans, 600, 13px. Button and navigation labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 8px.
- Card padding: 12px.
- Section padding: 40px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 260ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #ea4c89 only for brand-anchored moments — never paint a large surface pink.
- Set filled primary buttons to #0d0c22 fill with white text.
- Keep 4-column thumbnail grid on pure white canvas with 8px image radius.
- Do not use #ea4c89 for body text, icons, or large fills.
---
name: "Dribbble"
mode: "light"
---
# Dribbble
## Visual theme and atmosphere
Curated, image-first, compact, and brand-pink.
Gallery wall at design week — white room with one magenta spotlight.
## Color palette and roles
- **Dribbble Pink (#ea4c89)**: Brand accent — search, PRO badge, logo, active heart.
- **Midnight Ink (#0d0c22)**: Primary text, filled buttons.
- **Paper (#ffffff)**: Page canvas, card surfaces.
- **Smoke (#6e6d7a)**: Secondary muted body text.
- **Mist (#f3f3f6)**: Soft surface fill, input backgrounds.
- **Frost Border (#e2e8f2)**: Hairline borders and dividers.
## Typography rules
- **Display**: Mona Sans, 700, 48px. Hero headlines.
- **Body**: Mona Sans, 400, 14px. Body and UI labels.
- **Label**: Mona Sans, 600, 13px. Button and navigation labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 8px.
- Card padding: 12px.
- Section padding: 40px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 260ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #ea4c89 only for brand-anchored moments — never paint a large surface pink.
- Set filled primary buttons to #0d0c22 fill with white text.
- Keep 4-column thumbnail grid on pure white canvas with 8px image radius.
- Do not use #ea4c89 for body text, icons, or large fills.
---
name: "Dribbble"
mode: "light"
---
# Dribbble
## Visual theme and atmosphere
Curated, image-first, compact, and brand-pink.
Gallery wall at design week — white room with one magenta spotlight.
## Color palette and roles
- **Dribbble Pink (#ea4c89)**: Brand accent — search, PRO badge, logo, active heart.
- **Midnight Ink (#0d0c22)**: Primary text, filled buttons.
- **Paper (#ffffff)**: Page canvas, card surfaces.
- **Smoke (#6e6d7a)**: Secondary muted body text.
- **Mist (#f3f3f6)**: Soft surface fill, input backgrounds.
- **Frost Border (#e2e8f2)**: Hairline borders and dividers.
## Typography rules
- **Display**: Mona Sans, 700, 48px. Hero headlines.
- **Body**: Mona Sans, 400, 14px. Body and UI labels.
- **Label**: Mona Sans, 600, 13px. Button and navigation labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 8px.
- Card padding: 12px.
- Section padding: 40px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 260ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #ea4c89 only for brand-anchored moments — never paint a large surface pink.
- Set filled primary buttons to #0d0c22 fill with white text.
- Keep 4-column thumbnail grid on pure white canvas with 8px image radius.
- Do not use #ea4c89 for body text, icons, or large fills.
---
name: "Dribbble"
mode: "light"
---
# Dribbble
## Visual theme and atmosphere
Curated, image-first, compact, and brand-pink.
Gallery wall at design week — white room with one magenta spotlight.
## Color palette and roles
- **Dribbble Pink (#ea4c89)**: Brand accent — search, PRO badge, logo, active heart.
- **Midnight Ink (#0d0c22)**: Primary text, filled buttons.
- **Paper (#ffffff)**: Page canvas, card surfaces.
- **Smoke (#6e6d7a)**: Secondary muted body text.
- **Mist (#f3f3f6)**: Soft surface fill, input backgrounds.
- **Frost Border (#e2e8f2)**: Hairline borders and dividers.
## Typography rules
- **Display**: Mona Sans, 700, 48px. Hero headlines.
- **Body**: Mona Sans, 400, 14px. Body and UI labels.
- **Label**: Mona Sans, 600, 13px. Button and navigation labels.
## Spacing and shape
- Base unit: 4px.
- Default gap: 8px.
- Card padding: 12px.
- Section padding: 40px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 100ms; composed transitions last 260ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Use #ea4c89 only for brand-anchored moments — never paint a large surface pink.
- Set filled primary buttons to #0d0c22 fill with white text.
- Keep 4-column thumbnail grid on pure white canvas with 8px image radius.
- Do not use #ea4c89 for body text, icons, or large fills.
