# Design Style Guide: Dribbble - Discover the World’s Top Designers & Creative Professionals



> Source: https://dribbble.com

> Extracted: 2026-05-15 22:28

> Viewport: 1280x720 | Full page: 6697px



## Design Philosophy



- **Mixed theme** — uses both light and dark surfaces

- **Single typeface** (Mona Sans) — unified, cohesive feel

- **Pill-shaped elements** — fully rounded buttons/badges

- **Generous whitespace** — large section gaps for breathing room

- **Accent color** — `#fe0b00` used for interactive elements



---



## Color Palette



### Backgrounds



**Dark / Base**

- `#3a3546` (used 12x)

- `#0d0c22`

- `#3d3d4e`

- `#060904`

- `#fe0b00`

- `#020206`



**Light / Surface**

- `#ffffff` (used 86x)

- `#fdfcfb` (used 14x)

- `#ecebf0` (used 12x)

- `#f3f3f6`

- `#f8f8fc`

- `#f8f7f4`



**Vibrant / Accent**

- `#ea4c89`



**Semi-transparent**

- `rgba(0, 0, 0, 0.2)`



### Text



**Dark / Base**

- `#0d0c22` (used 750x)

- `#3d3d4e` (used 47x)

- `#060318` (used 26x)

- `#524b63` (used 12x)

- `#262627`

- `#3a3546`



**Light / Surface**

- `#9e9ea7` (used 243x)

- `#ffffff` (used 96x)



**Vibrant / Accent**

- `#956bcd`



### Borders



**Dark / Base**

- `#0d0c22`

- `#3a3546`



**Light / Surface**

- `#ffffff` (used 71x)

- `#e7e7e9` (used 7x)

- `#ecebf0`



**Vibrant / Accent**

- `#ea4c89`



**Semi-transparent**

- `rgba(231, 231, 233, 0.9)`



**Primary accent**: `#fe0b00`





## Typography



**Font stack**: Mona Sans



| Role | Font | Size | Weight | Line Height | Tracking |

|------|------|------|--------|-------------|----------|

| Display / H1 | Mona Sans | 48px | 600 | 51.84px | normal |

| Body | Mona Sans | 16px | 400 | 28px | normal |

| Body | Mona Sans | 16px | 500 | 28px | normal |

| Body | Mona Sans | 16px | 450 | 28px | normal |

| Body Small | Mona Sans | 14px | 600 | 30px | normal |

| Body Small | Mona Sans | 14px | 700 | 17px | normal |

| Body Small | Mona Sans | 14px | 400 | 28px | normal |

| Body Small | Mona Sans | 14px | 500 | 19px | normal |

| Body Small | Mona Sans | 13px | 600 | 13px | normal |

| Body Small | Mona Sans | 13px | 700 | 28px | normal |

| Body Small | Mona Sans | 13px | 400 | 16px | normal |

| Caption | Mona Sans | 12px | 500 | 12px | normal |

| Caption | Mona Sans | 12px | 400 | 12px | normal |

| Caption | Mona Sans | 12px | 600 | normal | normal |

| Caption | Mona Sans | 12px | 700 | 20px | normal |

| Caption | Mona Sans | 9px | 800 | 20px | normal |





## Spacing Scale



`2px` · `4px` · `5px` · `6px` · `8px` · `10px` · `12px` · `14px` · `16px` · `18px` · `19px` · `20px` · `24px` · `26px` · `32px` · `35px` · `36px` · `40px` · `72px` · `102px`



*Based on a **4px grid** system.*





## Borders, Radii & Effects



**Border radius**: `50%`, `4px`, `8px`, `12px`, `16px`, `24px`, `9999px`



**Shadows**:

- `rgba(0, 0, 0, 0.06) 0px -6px 40px 0px`

- `rgba(0, 0, 0, 0.14) 0px 3px 6px 0px`

- `rgba(0, 0, 0, 0.01) 0px 2px 2px 0px`





## Component Patterns



### Buttons



- **"Get Started"** (filled)

  - `background: #ffffff` · `color: #0d0c22`

  - `font: 12px / 500`

  - `padding: 0px 16px` · `radius: 9999px`



- **"Log in"** (filled)

  - `background: #0d0c22` · `color: #ffffff`

  - `font: 14px / 600`

  - `padding: 0px 24px` · `radius: 9999px`



### Inputs



- **search**: bg `transparent`, radius `12px`, padding `0px 0px 0px 24px`



### Navigation



- **37 links**: Explore, Popular, New and Noteworthy, Product Design, Web Design, Animation

  - Layout: `block`, gap: `normal`





## Layout Patterns



### Grid

- `<div>` — 2 columns, gap `14px`

- `<ol>` — 3 columns, gap `36px`



### Flexbox

- `<div>`, row, justify: center, align: center, gap: 16px 24px, (2 children)

- `<div>`, row, (2 children)

- `<div>`, row, justify: space-between, align: center, gap: 102.4px, (2 children)

- `<section>`, column, gap: 12px, (3 children)

- `<aside>`, row, (2 children)

- `<a>`, row, align: center, gap: 24px, (2 children)

- `<div>`, column, gap: 4px, (2 children)





## Assets



49 images, 24 SVG icons detected.



- `32px × 32px` negi design — `https://cdn.dribbble.com/users/2954749/avatars/normal/75c46a36aa3d8...`

- `32px × 32px` Phenomenon Studio — `https://cdn.dribbble.com/users/4053754/avatars/normal/55dd34a2285fa...`

- `32px × 32px` Sasha — `https://cdn.dribbble.com/users/1617600/avatars/normal/64dd87cbee0b4...`

- `32px × 32px` Fivecube — `https://cdn.dribbble.com/users/4675593/avatars/normal/0ccd17207b527...`

- `32px × 32px` Nadya Chunikhina — `https://cdn.dribbble.com/users/2203197/avatars/normal/41c750ab032e2...`

- `32px × 32px` Dmazing — `https://cdn.dribbble.com/users/16100846/avatars/normal/4f9478f9f990...`

- `32px × 32px` Xin Yan — `https://cdn.dribbble.com/users/3562886/avatars/normal/fa16bfe21929c...`

- `32px × 32px` QClay — `https://cdn.dribbble.com/users/7142728/avatars/normal/1947d79d3d704...`

- `32px × 32px` ThreeDee — `https://cdn.dribbble.com/users/6848313/avatars/normal/0fc82952cfd3b...`

- `32px × 32px` Leandro Sosa — `https://cdn.dribbble.com/users/5049071/avatars/normal/58237f63651e4...`

- `32px × 32px` Malvah Studio — `https://cdn.dribbble.com/users/2339830/avatars/normal/32c2b428bed01...`

- `32px × 32px` Lea Konaševská — `https://cdn.dribbble.com/users/10429876/avatars/normal/366d4276fd03...`

- ... and 37 more

