---
version: alpha
name: Dribbble
description: Community platform for designers — deep navy canvas, signature pink accent, Mona Sans variable font, and pill-dominant geometry that softens a professional marketplace into an approachable creative feed.

colors:
  # Canvas
  background: "#ffffff"
  surface: "#ffffff"
  surface-warm: "#f8f7f4"  # off-white for nav tabs and secondary surfaces

  # Ink
  ink: "#0d0c22"            # deep indigo-black — primary text
  ink-secondary: "#3d3d4e"  # dark purple-gray — subheadings, secondary text
  ink-muted: "#6e6d7a"      # medium gray — captions, metadata
  ink-subtle: "#9e9ea7"     # light gray — placeholders, deselected states
  ink-inverted: "#ffffff"   # white — text on dark surfaces

  # Brand
  primary: "#ea4c89"        # Dribbble Pink — the signature accent
  on-primary: "#ffffff"     # white on pink
  primary-container: "#f3afe4"  # light pink — was rgb(243,175,228) — hover tint

  # Navigation & surfaces
  nav-dark: "#0d0c22"       # deep indigo-black nav button background
  surface-border: "#e7e7e9" # border and outline color for cards and badges
  surface-muted: "#ecebf0"  # PRO badge and muted surface
  surface-secondary: "#565564"  # dark mid-tone for hover states

  # Semantic
  error: "#9e0a0a"          # derived from Dribbble's form error pattern

  # Borders
  border: "#e7e7e9"         # subtle light gray for card edges

  # Shadows
  shadow-soft: "#000000"    # used at 14% opacity for card shadows — opaque base

typography:
  display-hero:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.75
    letterSpacing: 0px
  body:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0px
  body-medium:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.36
    letterSpacing: 0px
  nav-link:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: 0px
  button-ui:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  badge-label:
    fontFamily: "Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.nav-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
    border: "1px solid {colors.surface-border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
    border: "1px solid {colors.surface-border}"
  button-ghost:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 10px 16px
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    border: "1px solid {colors.border}"
    padding: 0px
  card-shot:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    overflow: hidden
  card-hover:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    boxShadow: "0px 3px 6px 0px rgba(0,0,0,0.14)"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink-secondary}"
    rounded: "{rounded.pill}"
    padding: 12px 16px
  badge-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 16px
    border: "1px solid {colors.surface-border}"
  badge-pink:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge-label}"
    rounded: "{rounded.pill}"
    padding: 4px 6px
  badge-pro:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.badge-label}"
    rounded: "{rounded.sm}"
    padding: 2px 5px
  badge-pro-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 2px 5px
  nav-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  nav-tab-active:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
---

# Dribbble Design System

## Overview

Dribbble's design system runs on a single radical conviction: the work should do the talking. The interface wraps a vast gallery of shots — portfolios, product designs, illustrations, animations — in a deliberately restrained shell so that creative work commands the eye. A white {colors.background} dominates every viewport. The interface chrome stays nearly colorless: the deep indigo-black {colors.ink} for text and primary actions, soft grays like {colors.ink-muted} and {colors.ink-subtle} for metadata and deselected states, and the softest possible borders ({colors.border}) to hint at card edges without competing with the work inside.

The one break in this restraint is {colors.primary} — Dribbble's unmistakable hot pink. Applied with extreme precision, it appears only on the most meaningful call-to-action (the "Log in" button's hover state, notification badges, and the PRO badge), which gives it genuine weight whenever it fires. The brand hierarchy is clear: the gallery is the product, the pink is the brand, and everything else steps back. This is a different approach from portfolio platforms that lean on dark modes or editorial color; Dribbble stays bright and white so that a neon illustration or an all-black typographic shot both land with equal impact.

Typography is set entirely in Mona Sans — GitHub's variable font, which Dribbble adopted as its own. The weight axis runs from 450 on body copy (a slightly-heavier-than-normal value that renders crisply at small sizes) through 600 on buttons and headings, reaching an unusually taut 1.08 line-height on the 48px hero. The font carries OpenType feature `ss01` throughout body and UI text, a subtle stylistic set that rounds certain characters. The result reads as quietly confident: not aggressive, not playful, just clean and professional in a way that matches the platform's positioning as the serious portfolio destination for working designers.

**Key Characteristics:**
- Pure white canvas ({colors.background}) with `{colors.ink}` deep-indigo text — no dark mode detected, contrast lives in the gallery thumbnails not the chrome
- {colors.primary} Dribbble Pink reserved exclusively for high-signal moments: key CTAs, notification dots, PRO badge highlights
- Mona Sans variable font at weight 450 for body, 600 for headings and buttons — a notch above normal weight for sharp screen rendering
- OpenType feature `ss01` active across all body and UI text — subtle character rounding that softens the otherwise tight tracking
- Pill-dominant geometry: `{rounded.pill}` (9999px) on all primary buttons, search inputs, category filters, and tag badges
- Dual radius system: pill for interactive affordances + `{rounded.md}` (8px) for content cards and media containers
- 8px base grid with spacing tokens from 4px to 64px, following a comfortable mid-density layout
- Shot cards use near-invisible borders ({colors.border} at 1px) — the card edge is implied, not drawn
- Shadow vocabulary is minimal: `rgba(0,0,0,0.14) 0px 3px 6px` as the single card-hover elevation
- Gradient-based scrim overlays (black-to-transparent) on shot thumbnails for hover copy revelation
- Navigation is flat with pill-shaped active-state tabs ({colors.surface-warm} fill, no underline, no border)
- PRO badge uses a `{rounded.sm}` 4px radius — the only non-pill badge, distinguishing tier from topic

## Colors

### Primary
- **White** (`{colors.background}`): The canvas. Every page, every panel, every modal opens to white. The gallery thumbnails are the color on this page.
- **Indigo Black** (`{colors.ink}`): Primary text, nav wordmark, and the default "Log in" button. Carries a faint purple undertone that nods to the platform's creative-community roots.

### Brand Accent
- **Dribbble Pink** (`{colors.primary}`): The brand's single reserved accent. Used on the "Get hired" CTA hover, notification badges, and PRO badge emphasis. Every instance carries weight because there are so few.
- **Pink Container** (`{colors.primary-container}`): A diluted tint derived from the primary — used on hover states for the PRO badge.

### Text States
- **Purple-Gray** (`{colors.ink-secondary}`): Secondary headlines and subheadings. Warmer than neutral gray, cooler than the near-black.
- **Muted** (`{colors.ink-muted}`): Metadata — follower counts, timestamps, category labels.
- **Subtle** (`{colors.ink-subtle}`): Deselected filter tabs, placeholder text, disabled states.
- **Off-White** (`{colors.surface-warm}`): Active nav tab and ghost button backgrounds. Barely distinguishable from white — a micro-lift, not a tone shift.
- **Light Border** (`{colors.border}`): 1px card and input outlines. Recessive enough to function as structure without drawing attention.
- **Surface Muted** (`{colors.surface-muted}`): PRO badge and muted backgrounds — pale purple-gray derived from the ink color family.

### Semantic
- **Error** (`{colors.error}`): Deep red for form validation. Not derived from the pink primary — error is its own lane.

## Typography

### Font Family
- **Primary**: `Mona Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial, sans-serif`
- GitHub's open-source variable font, adopted by Dribbble as a house font
- **OpenType Features**: `ss01` — stylistic set 1 active on body and UI text, adds subtle curvature to select glyphs

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference those tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Homepage headline — "Discover the World's Top Designers" |
| `heading-section` | Section titles, feature names |
| `heading-sub` | Card group headings, dropdown labels |
| `body-large` | Marketing paragraph copy below hero |
| `body` | Shot metadata, card descriptions, feed text |
| `body-medium` | Secondary interactive labels at medium emphasis |
| `nav-link` | Primary nav items, category filter text |
| `button-ui` | CTA labels, pill button text |
| `caption` | Tags, category chips, small UI labels |
| `badge-label` | PRO badge and notification counter — uppercase, 9px |

### Principles
- Variable weight axis used sparingly: two stops (450 body, 600 headings) — avoids the multi-weight complexity that fragment type hierarchies
- Tight 1.08 line-height on hero display text; 1.75 on body — the contrast between compressed headlines and airy body copy creates breathing room without extra whitespace
- Letter-spacing near zero throughout — Mona Sans draws optical rhythm from its weight axis, not tracking adjustments
- `ss01` feature subtly humanizes the letterforms without signaling "custom font" to most readers

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Dribbble's layout is gallery-first: the shot grid fills available width with minimal gutters, and surrounding chrome (navigation, filters, footer) uses generous vertical padding to breathe without competing. The 12px `{spacing.md}` token does the heavy lifting inside cards and list items; 24px `{spacing.xl}` separates sections.

### Grid & Container
- Max content width: approximately 1440px (full-bleed on large displays)
- Shot grid: CSS multi-column or flexible grid, ~4 columns on desktop, 2 on tablet, 1 on mobile
- Navigation: full-width bar with content inset ~40px left/right padding
- Category filter row: horizontally scrollable pill strip beneath the nav

### Whitespace Philosophy
- Breathing room comes from generous top/bottom padding between sections (48–64px), not from increasing gutters within the grid
- The shot grid itself is tight — small gaps — because the work should feel like an abundant stream, not a curated gallery with lots of negative space between pieces
- Form elements and sidebar navigation use 16px `{spacing.lg}` internal padding — compact enough for scan-heavy browsing

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state for all cards and inputs |
| Card Hover (Level 1) | `0px 3px 6px 0px rgba(0,0,0,0.14)` | Shot card on hover — lifts the thumbnail |
| Floating (Level 2) | `0px 15px 50px 0px rgba(27,32,50,0.1)` | Dropdowns and modal-adjacent panels |
| Scrim | Linear gradient black-to-transparent at 62–91% | Thumbnail overlay for hover copy |
| Focus Ring | `1px solid {colors.ink-secondary}` on inputs | Keyboard and focus state on search/form fields |

**Shadow Philosophy**: Dribbble uses shadow as a single gesture, not a vocabulary. The card-hover lift is the only shadow that appears in routine browsing — `rgba(0,0,0,0.14)` at a small radius keeps it airy and unobtrusive. The floating shadow (used for dropdown menus) goes wider and softer. The overall effect is that depth is a behavior (hovering triggers it) rather than a persistent texture — reinforcing the flat, gallery-wall quality of the default state.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed hero imagery, video embeds |
| `sm` | 4px | PRO badge — the tier marker that is NOT a pill |
| `md` | 8px | Shot thumbnails, content cards, video containers |
| `lg` | 12px | Dropdown menus, modal panels |
| `xl` | 16px | Larger panels, featured blocks |
| `pill` | 9999px | All buttons, search input, filter chips, tag badges |

The system's defining characteristic is the pill-or-card split: interactive affordances (anything you click to trigger an action) are pills; content containers (anything holding a visual asset) are rectangular with 8px softening. This creates instant visual grammar — pill = do something, rounded-rect = look at something.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Deep indigo-black pill with white label. Used for "Log in" in the nav. Firm and authoritative against the white canvas.
- **`button-secondary`** — White pill with thin `{colors.border}` outline and `{colors.ink}` text. Used for "Sign up", "Get Started" CTAs and secondary actions.
- **`button-ghost`** — `{colors.surface-warm}` fill, no border, pill shape. Used for nav active states and softly-selected filter tabs.

### Cards

- **`card-shot`** — Borderless image container with `{rounded.md}` radius. No padding. Shot artwork fills edge-to-edge, with a gradient scrim overlay that fades in on hover to reveal the designer's name and like/comment counts.
- **`card`** — Thin-bordered card with `{rounded.lg}` radius for profile panels and sidebar list items.

### Inputs

- **`input`** — Full pill shape, white background, `{colors.border}` outline. Search bar takes the full pill form. Focus state tightens the border to `{colors.ink-secondary}`.

### Badges / Tags

Three badge types serve distinct roles:
- **`badge-pill`** — White pill with border, used for category filters and topic tags throughout the feed
- **`badge-pink`** — Hot {colors.primary} fill with white text at 9px uppercase — notification counts, new-item indicators, PRO signup prompts
- **`badge-pro`** — Square-cornered `{rounded.sm}` with `{colors.surface-muted}` fill — the only non-pill badge, making PRO tier immediately legible as different from topic tags

### Navigation

Full-width sticky nav bar with white background, `{colors.ink}` wordmark, pill-shaped ghost tabs for category browsing, and two pill buttons (secondary "Sign up", primary "Log in") at the far right. Below the main nav, a horizontally-scrollable row of pill filter chips (Discover, Animation, Branding, etc.) sets the gallery context.

## Do's and Don'ts

### Do
- Use `{colors.primary}` only for the highest-signal moments: primary CTA hover, notification badges, PRO upsell emphasis — every instance must earn its stamp
- Apply `{rounded.pill}` to all interactive affordances (buttons, inputs, filter chips) and `{rounded.md}` to all content containers (shot cards, media embeds)
- Set body copy in Mona Sans weight 450 — the slightly-heavier-than-normal value reads sharper at small sizes on retina screens
- Use `{colors.border}` at 1px for card edges — imply structure without drawing a visible line
- Keep the card hover shadow (`0px 3px 6px rgba(0,0,0,0.14)`) as the only persistent depth signal; don't add persistent shadows to default card states
- Use `{colors.surface-warm}` for active ghost-button and nav-tab states — barely perceptible off-white lift, no color shift
- Set `ss01` OpenType feature on all body and UI text to match the platform's typographic character
- Maintain the gallery-first layout: let shot thumbnails fill aggressively; keep chrome padding generous but frame-like

### Don't
- Don't introduce new accent colors — the system's power comes from {colors.primary} pink's rarity; adding a second accent dilutes every instance of it
- Don't use `{rounded.sm}` or `{rounded.lg}` on buttons or interactive pills — the pill-or-card split is the system's core grammar
- Don't add persistent box-shadows to cards in default state — flat until hover is the rhythm that makes the hover feel rewarding
- Don't increase font weight beyond 600 — Mona Sans's weight axis supports heavier stops but the system intentionally caps at SemiBold for a measured, non-aggressive tone
- Don't place `{colors.primary}` on large surface areas (backgrounds, illustrations, section fills) — it only functions at badge/button scale
- Don't use letter-spacing adjustments to create hierarchy — the system achieves differentiation through weight and size alone
- Don't shrink type below 12px for user-facing labels (`{typography.caption}` at 12px is the floor) even for metadata-dense grid views
- Don't break the pill-to-card visual contract by applying `{rounded.xl}` or `{rounded.lg}` to buttons — the pill shape is a non-negotiable brand marker

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column shot grid, hamburger nav |
| Mobile | 375–767px | Single-column, sticky nav collapses, filter row scrollable |
| Tablet | 768–1023px | 2-column shot grid, abbreviated nav |
| Desktop | 1024–1439px | 4-column grid, full nav with category filters |
| Large Desktop | ≥1440px | Full grid, max-width container centered |

### Touch Targets
- Pill buttons maintain minimum 36px height on mobile; primary nav CTAs at 40px
- Category filter chips remain pill-shaped but increase horizontal padding to 20px at mobile for thumb comfort
- Shot cards rely on tap-to-navigate rather than hover overlays on touch — overlay copy is suppressed on mobile

### Collapsing Strategy
- Navigation collapses to hamburger menu below 768px; the search bar drops into the menu
- Category filter row persists below nav on all breakpoints as a horizontally-scrollable strip
- Hero headline reduces from 48px to ~28px on mobile; line-height stays at 1.08 for consistent tightness
- Spacing tokens scale down one step on mobile: `{spacing.xl}` (24px) sections collapse to `{spacing.lg}` (16px)

### Image Behavior
- Shot thumbnails are aspect-ratio locked (typically 4:3 or 1:1) and scale down proportionally within grid columns
- Hero feature images are full-bleed within their container with `object-fit: cover`
- Hover gradients are suppressed on touch devices; designer attribution is always shown in a persistent overlay instead

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Border: `{colors.border}`
- CTA surface: `{colors.nav-dark}`
- Active/hover surface: `{colors.surface-warm}`

### Example Component Prompts

- "Build a Dribbble-style shot card using `background-color: {colors.surface}`, `border-radius: {rounded.md}`, a full-bleed 4:3 thumbnail, and a gradient scrim (`linear-gradient(transparent 62%, rgba(0,0,0,0.4))`) that fades in on hover to reveal a white designer name in `{typography.caption}` and a like-count in `{typography.badge-label}`."
- "Create a Dribbble primary nav button with `background-color: {colors.nav-dark}`, `color: {colors.ink-inverted}`, `border-radius: {rounded.pill}`, `padding: 10px 24px`, font set to `{typography.button-ui}`, and a hover state that shifts to `{colors.ink-secondary}`."
- "Build a category filter chip strip using pill badges: `background-color: {colors.surface}`, `border: 1px solid {colors.border}`, `border-radius: {rounded.pill}`, `padding: 8px 16px`, text in `{typography.caption}`. Active state: swap background to `{colors.surface-warm}` and increase font-weight to 600."
- "Create a search input: `width: 100%`, `background: {colors.background}`, `border: 1px solid {colors.border}`, `border-radius: {rounded.pill}`, `padding: 12px 16px`, font `{typography.body}`, placeholder color `{colors.ink-subtle}`. Focus state: border becomes `1px solid {colors.ink-secondary}` with no box-shadow."
- "Design a PRO tier badge: `background-color: {colors.surface-muted}`, `color: {colors.ink-secondary}`, `border-radius: {rounded.sm}`, `padding: 2px 5px`, font `{typography.badge-label}`, text uppercase. Hover state: swap background to `{colors.primary-container}`. This badge must NOT use `{rounded.pill}` — the square corners signal tier, not topic."

### Iteration Guide

1. Start with `{colors.background}` white canvas and `{colors.ink}` text — the entire system builds off this clean neutral foundation before introducing any accent
2. Use `{colors.primary}` sparingly and last — place it only after all neutral chrome is composed, then add the pink at the single most important action point
3. Shape all interactive affordances with `{rounded.pill}` and all content containers with `{rounded.md}` — this split is the fastest way to achieve the Dribbble visual grammar
4. Set typography weight to 600 for headings and labels, 450 for body, 400 for metadata — don't add intermediate weights or the hierarchy collapses
5. Suppress all card shadows in default state; add `0px 3px 6px rgba(0,0,0,0.14)` only on hover — flat default makes the hover feel like the card is responding to you
6. Keep borders at 1px `{colors.border}` — visible enough to define edges on a white canvas, invisible enough to not compete with the content
7. For any gallery or grid layout, pack the shot thumbnails tightly (4–8px gap) — Dribbble's energy comes from density, not from negative space between pieces

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Dribbble. Brand names and trademarks belong to their respective owners.