Behance Design System Deep Dive

1. Brand Overview

Behance is Adobe’s flagship community platform for creative professionals — designers, illustrators, photographers, typographers, motion artists — to showcase and discover work. Unlike a portfolio tool that sits in isolation, Behance is an active network with a very deliberate visual language: it needs to be neutral enough to let diverse creative work shine, but still recognisably "Behance."

The vibe? Clean, contemporary, and slightly corporate — but softened for a creative audience. You see it immediately in the use of pure white backgrounds and deep neutral grays (#191919) as framing devices, with the electric primary blue (#0057ff) used sparingly for key actions. That blue is not subtle — it’s a saturated, high-contrast hue designed to pop against both light and dark contexts. It’s Adobe telling you "this is the click zone."

Typography is all about clarity and modularity. They lean on Adobe’s own Acumin Pro and Acumin Pro Wide, with occasional Adobe Clean for certain headings. This gives them control over licensing and rendering, but also ensures consistency with other Adobe products. The wide variant creates presence in large headings; the regular variant is more utilitarian.

Spacing is disciplined: an 8px base grid with micro-adjustments (1px, 2px, 3px) where pixel-perfect alignment matters. This scale is consistent across buttons, cards, navigation — you can tell a lot of components are built from shared Vuetify primitives.

Corners are mostly rounded — 100px pill shapes for buttons, small 3–6px radii for form elements, occasional 4–6px on cards and badges. Shadows are minimal — mostly subtle rgba black at low opacity — because the focus is on content, not skeuomorphic depth.

Behance’s design system is utilitarian with controlled injections of brand personality. It’s not playful like Dribbble’s pinks and rounded blobs; it’s a gallery wall in a modern museum, with blue accents for wayfinding.

2. Color System

2.1 Primary Colors

The main brand color is rgb(0, 87, 255), normalized #0057ff. This is pure saturated blue, leaning slightly toward the cooler end. It’s used for CTAs, links, and active states. Compared to competitors:

• Dribbble’s pink (#ea4c89) is warmer, playful.
• DeviantArt’s green (#05cc47) is niche and edgy.
• Behance’s blue is corporate, trustworthy, and high-visibility.

Psychologically, this blue signals reliability and focus — common in tech and social platforms — but the saturation gives it energy. It works equally well on white and dark backgrounds.

Secondary color is pure white #ffffff, which serves as the main canvas.

2.2 Complete Palette

2.3 Color Relationships

The primary blue (#0057ff) on white background passes WCAG AA for normal text and AAA for large text — high contrast. On dark #191919, white text passes. Blue on dark neutral is still high contrast. Danger red (#eb1000) is vivid enough to stand out on both white and dark.

They use desaturated grays (#707070, #474747) for secondary text — readable but not screaming for attention. Disabled states use very light grays (#e8e8e8) — low-contrast intentionally.

Dark mode is partial — the primary nav and some panels use #191919 and #303030 as surfaces.

2.4 Usage Guide

• Primary blue + white: For action buttons, links, focus states.
• White bg + dark neutral text: For content-heavy areas.
• Gray for secondary: Use #707070 for inactive tabs, #474747 for secondary body text.
• Error: Use #eb1000 for icons, #d00d00 for text.
• Avoid mixing the saturated blue with saturated red in adjacent elements — both fight for attention.
• Use badge colors sparingly — badges are part of a tagging system, not decoration.

3. Typography

3.1 Font Families

Behance uses Acumin Pro and Acumin Pro Wide extensively, with Adobe Clean appearing in some heading contexts. All fonts have fallbacks to system sans-serifs:

• "Acumin Pro", "Helvetica Neue", Helvetica, Arial
• "Acumin Pro Wide", "Helvetica Neue", Helvetica, Arial
• "Adobe Clean"

Source is Adobe Fonts — no Google Fonts, no variable fonts.

3.2 Type Scale

…and many more micro-sizes for buttons, links, captions down to 9px uppercase for very small labels.

3.3 Hierarchy

H1 at 80px with tight line-height (0.85) is for hero headlines. Subheadings drop sharply to 22px and 20px — deliberate contrast to keep focus on the main headline. Body text sits around 15–16px, with captions at 12–14px. The wide variants give titles more horizontal presence.

Uppercase small sizes (11px, 10px) are used for meta labels and badge text — keeps them distinct from body copy.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid, but they use micro-values for fine-tuning:

4.2 Layout

Breakpoints are granular — from 128px (!) up to 3001px. This is Vuetify’s responsive system with fine control for different devices. Expect fluid layouts with specific tweaks at unusual widths (e.g., 921px, 1180px). Behance optimises for a wide range — from tiny viewports to ultrawide.

5. Visual Elements

Border Radius

Shadows

Mostly subtle:

• rgba(0, 0, 0, 0.2) 0px 1px 3px 0px — small drop shadow
• rgba(0, 0, 0, 0.15) 0px 0px 5px 0px — light blur
• rgba(0, 87, 255, 0.1) 0px 1px 15px 0px — brand-colored glow

Shadows are rare — borders do most of the separation.

Borders

Common: 1px solid #e8e8e8 for neutral dividers. Light blues (#e0eaff) for blue buttons.

6. Components

6.1 Buttons

Primary CTA (blue)

Default:

• bg: #0057ff
• text: white
• padding: 0px 28px 1px
• radius: 100px
• border: none (transparent)
• font-size: 16px, weight 600

Hover:

• bg: rgba(255,255,255,0.24)
• border: 1px solid #0057ff
• outline: 2px solid #0057ff
• box-shadow: rgba(0,0,0,0.1) 0px 1px 10px

Active:

• bg: rgba(255,255,255,0.32)
• box-shadow: inset rgba(25,25,25,0.3) 0 0 4px

Focus:

• outline: 1px solid white

Secondary (light blue outline)

Default:

• bg: #f5f8ff
• text: #0057ff
• border: 1px solid #e0eaff
• radius: 100px

Hover/Focus: change bg/border via CSS vars.

Tertiary (neutral)

Default:

• bg: transparent
• text: #191919
• border: 1px solid #e8e8e8
• radius: 100px

6.2 Links

Variants:

• White text, no underline, bold 700 — for nav on dark.
• Dark text (#191919) — hover to white.
• Primary blue (#0057ff) — hover to white.
• Gray (#707070) — hover to white.

No default underline — hover states change color.

6.3 Forms

Search input:

• bg: transparent
• text: #191919
• border: none
• focus: outline 1px solid brand color

Checkboxes/radios: not detailed in data.

7. Design Tokens

:root {
  /* Colors */
  --be-primary: #0057ff;
  --be-secondary: #ffffff;
  --be-dark-neutral: #191919;
  --be-black: #000000;
  --be-mid-gray: #707070;
  --be-blue-200: #e0eaff;
  --be-text-secondary-contrast: #474747;
  --be-bg-project-cover: #f0f0f0;
  --be-disabled-checkbox-bg: #ececec;
  --be-analytics-placeholder-bg-primary: #dce7ff;
  --be-text-error: #d00d00;
  --be-badge-text-celadon-blue: #0a7494;
  --be-color-red-400: #eb1000;
  --be-confirmation-color: #028901;
  --be-color-blue-400: #6292ff;
  --be-disabled-color: #e8e8e8;
  --be-bg-inverted: #303030;
  --be-warning-bg: #fae7e5;
  --be-color-blue-900: #0f214d;
  --be-warning-hover: #aa0000;
  --be-badge-text-transparent-purple: #b125c0;
  --be-badge-bg-orange: rgba(249,124,0,0.1);
  --be-button-reject-bg-active: #910000;
  --be-badge-text-green: #046700;
  --be-color-blue-700: #003ecb;
  --be-button-contrast-bg-active: #909090;
  --be-color-purple-100: #f7e9f9;
  --be-badge-bg-green: #e8f3e8;
  --be-color-green-300: #02cb00;
  --be-button-tertiary-border-hover: #bfd2ff;
  --be-color-green-500: #1a8316;
  --be-action-color-active: #002f9a;
  --be-badge-bg-celadon-blue: #e6f1f4;
  --be-color-blue-450: #146aff;
  --be-color-grey-400: #cdcdcd;
  --be-color-blue-150: #ebf1ff;

  /* Spacing */
  --be-space-1: 1px;
  --be-space-2: 2px;
  --be-space-3: 3px;
  --be-space-4: 4px;
  --be-space-5: 5px;
  --be-space-6: 6px;
  --be-space-7-5: 7.5px;
  --be-space-8: 8px;
  --be-space-10: 10px;
  --be-space-12: 12px;
  --be-space-15: 15px;
  --be-space-19: 19px;
  --be-space-20: 20px;
  --be-space-24: 24px;
  --be-space-25: 25px;
  --be-space-30: 30px;
  --be-space-32: 32px;
  --be-space-40: 40px;

  /* Radius */
  --be-radius-3: 3px;
  --be-radius-4: 4px;
  --be-radius-5: 5px;
  --be-radius-6: 6px;
  --be-radius-8: 8px;
  --be-radius-15: 15px;
  --be-radius-50: 50px;
  --be-radius-100: 100px;

  /* Shadows */
  --be-shadow-sm: rgba(0,0,0,0.2) 0px 1px 3px;
  --be-shadow-md: rgba(0,0,0,0.15) 0px 0px 5px;
  --be-shadow-brand: rgba(0,87,255,0.1) 0px 1px 15px;
}

8. AI Coding Assistant Prompt

# Behance Design System Specification

You are a Behance design expert. Build UIs matching their visual language exactly.

## Brand Context
Behance is Adobe’s creative portfolio and networking platform. The design is clean, neutral, and content-first, with saturated blue accents for actions. Typography is clear and sans-serif, spacing is strict 8px grid, corners are rounded.

## Color Palette
- Primary Blue: #0057ff — CTAs, primary buttons, active links
- Secondary White: #ffffff — page backgrounds
- Dark Neutral: #191919 — nav bars, footers
- Black: #000000 — icons, text
- Mid Gray: #707070 — inactive tabs
- Blue 200: #e0eaff — light blue backgrounds
- Text Secondary Contrast: #474747 — secondary text
- Project Cover BG: #f0f0f0 — placeholders
- Disabled Checkbox BG: #ececec — disabled inputs
- Analytics Placeholder: #dce7ff — placeholder modules
- Text Error: #d00d00 — error text
- Celadon Blue Text: #0a7494 — badge text
- Red 400: #eb1000 — destructive actions
- Confirmation Green: #028901 — success states
- Blue 400: #6292ff — secondary buttons
- Disabled Color: #e8e8e8 — disabled UI
- BG Inverted: #303030 — dark panels
- Warning BG: #fae7e5 — alerts
- Blue 900: #0f214d — deep blue text
- Warning Hover: #aa0000 — alert hover
- Transparent Purple Text: #b125c0 — badge text
- Badge BG Orange: rgba(249,124,0,0.1) — orange tag bg
- Reject Active: #910000 — destructive active
- Badge Text Green: #046700 — positive tag
- Blue 700: #003ecb — hover blue
- Contrast Active: #909090 — contrast button active
- Purple 100: #f7e9f9 — badge bg
- Badge BG Green: #e8f3e8 — positive badge bg
- Green 300: #02cb00 — success badge
- Tertiary Hover Border: #bfd2ff — tertiary button hover
- Green 500: #1a8316 — success text
- Action Active: #002f9a — nav active
- Badge BG Celadon Blue: #e6f1f4 — badge bg
- Blue 450: #146aff — active blue
- Grey 400: #cdcdcd — dividers
- Blue 150: #ebf1ff — light blue surfaces

## Typography
Font Families:
- "Acumin Pro", Helvetica Neue, Helvetica, Arial — body, UI labels
- "Acumin Pro Wide", Helvetica Neue, Helvetica, Arial — headings
- "Adobe Clean" — certain headings

Type Scale:
| Level | Size | Weight | Line Height | Use |
| H1 Wide | 80px | 600 | 0.85 | Hero titles |
| Subhead | 22px | 700 | 1.27 | Section headings |
| Body | 16px | 400–600 | 1.30 | Paragraph text |
| Caption | 14px | 600 | 1.00 | Meta text |
| Label Uppercase | 11px | 700 | 1.30 | Badges |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7.5px, 8px, 10px, 12px, 15px, 19px, 20px, 24px, 25px, 30px, 32px, 40px
Use multiples for all padding/margins.

## Border Radius
- sm: 3px — inputs
- md: 4px — cards
- button: 5px — small buttons
- badge: 6px — badges
- pill: 100px — primary buttons

## Shadows & Depth
- Small: rgba(0,0,0,0.2) 0 1px 3px
- Medium: rgba(0,0,0,0.15) 0 0 5px
- Brand Glow: rgba(0,87,255,0.1) 0 1px 15px

## Component Specifications

### Primary Button
Default:
- bg: #0057ff
- text: #ffffff
- padding: 0 28px 1px
- radius: 100px
- font: Acumin Pro, 16px, 600
Hover:
- bg: rgba(255,255,255,0.24)
- border: 1px solid #0057ff
- outline: 2px solid #0057ff
Active:
- bg: rgba(255,255,255,0.32)
- inset shadow: rgba(25,25,25,0.3) 0 0 4px

### Secondary Button
Default:
- bg: #f5f8ff
- text: #0057ff
- border: 1px solid #e0eaff
- radius: 100px

### Input Field
Default:
- bg: transparent
- text: #191919
- border: none
Focus:
- outline: 1px solid #0057ff

## Layout & Responsive Rules
Breakpoints: 128px, 380px, 488px, ..., 3001px
Max content width: fluid
Page padding: multiples of 8px

## Interaction Rules
- Transition: 150ms ease
- Focus: outline brand blue or white depending on bg

## DO
- Use only palette colors
- Maintain 8px grid
- Use Acumin Pro Wide for headings
- Keep buttons pill-shaped
- Use subtle shadows

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Add heavy shadows
- Underline links unless specified

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0057ff;
  color: #fff;
  padding: 0 28px 1px;
  border-radius: 100px;
  font-family: "Acumin Pro";
  font-size: 16px;
  font-weight: 600;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.24);
  border: 1px solid #0057ff;
  outline: 2px solid #0057ff;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #f5f8ff;
  color: #0057ff;
  border: 1px solid #e0eaff;
  border-radius: 100px;
  padding: 0 20px;
}
```

### Input
```css
.input {
  background: transparent;
  color: #191919;
  border: none;
}
.input:focus {
  outline: 1px solid #0057ff;
}
```

9. Summary

TL;DR — Behance’s design system is a neutral frame for creative work: strict grid, Acumin Pro typography, high-contrast saturated blue for actions, minimal shadows. It’s content-first but unmistakably Adobe.

Brand Keywords:

• content-first-neutral
• saturated-action-blue
• strict-8px-grid
• adobe-sans-serif
• minimal-shadows