Behance DESIGN.md
Brands
Creative portfolio discovery with Adobe-adjacent polish, white gallery surfaces, and strong project framing. Behance's public site uses a white and light-gray base, dark text, blue Adobe-style action accents, and…
At a glance
- Group
- Brands
- Main color
- #1769ffBlue design systems
- Fonts
- Adobe CleanSF Mono
Colors in this file
- #e5e5e5
Unnamed
- #1769ff
Unnamed
- #111111
Unnamed
- #ffffff
Unnamed
- #f5f5f5
Unnamed
- #6b6b6b
Unnamed
Creative portfolio discovery with Adobe-adjacent polish, white gallery surfaces, and strong project framing. Behance's public site uses a white and light-gray base, dark text, blue Adobe-style action accents, and dense creative-grid browsing.
1. Visual Theme & Atmosphere
Overall Aesthetic
Behance feels like creative discovery at marketplace scale. The product is gallery-first, but still polished and structured.
Mood & Feeling
- Creative
- Gallery-driven
- Professional
- Broad
- Discoverable
Design Density
High density. Project grids are visually dense, but filtering and whitespace keep them usable.
Visual Character
- White gallery background
- Dense portfolio tiles
- Simple utility chrome
- Adobe-style blue action accents
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--behance-blue | #1769FF | Primary action |
--behance-black | #111111 | Text |
--behance-white | #FFFFFF | Main surface |
--behance-surface | #F5F5F5 | Background |
--behance-muted | #6B6B6B | Secondary text |
--behance-border | #E5E5E5 | Borders |
3. Typography Rules
Font Stack
css--font-display: "Adobe Clean", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Adobe Clean", "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;
Type Scale
Hero 54/700, H1 38/700, H2 28/700, Body 16/400, Small 14/400
Typography Philosophy
Use neutral creative-platform typography that supports portfolios and filters rather than dominating them.
4. Component Stylings
css.button-primary { background:#1769ff; color:#fff; border:none; border-radius:999px; min-height:42px; padding:0 18px; font-weight:600; }
.button-secondary { background:#fff; color:#111; border:1px solid #e5e5e5; border-radius:999px; min-height:42px; padding:0 18px; }
.tile { background:#fff; border-radius:16px; overflow:hidden; }
.filter-chip { background:#fff; border:1px solid #e5e5e5; border-radius:999px; padding:8px 12px; }
5. Layout Principles
Spacing Scale
4, 8, 12, 16, 24, 32, 48px
Layout Behavior
- Let project imagery dominate
- Keep discovery, filters, and categories easy to scan
- Avoid heavy chrome around portfolio content
6. Depth & Elevation
Behance uses gallery-style minimal elevation, relying more on image tiles and spacing than shadow.
7. Do's and Don'ts
Do
- Keep portfolios and creative imagery central
- Use blue for actions and navigation cues
- Preserve dense but clean discovery grids
Don't
- Don’t overdecorate the frame around projects
- Don’t make Behance feel like generic SaaS admin UI
8. Responsive Behavior
Breakpoints
- Mobile
<768px - Tablet
768px-1023px - Desktop
1024px+
Responsive Rules
- Preserve grid legibility
- Keep filter chips usable and scrollable
9. Agent Prompt Guide
textDesign this like Behance: white creative-gallery UI with Adobe-style blue actions, dense project discovery grids, light filter chips, and portfolio-first visual hierarchy.Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
ASUS
Brands · TT Norms Pro
Personal computing with broad innovation energy. ASUS's current public site blends bright white merchandising surfaces, deep blue and black contrast areas, crisp product-family storytelling, and premium device…
Zen Browser
Brands · Inter
Calm privacy-first browser design with customizable chrome, quiet gradients, compact productivity features, and a focus on a less distracting web.
Best Buy
Brands · Human BBY
Electronics retail with strong blue-yellow branding and high-visibility merchandising. Best Buy's public site uses a vivid cobalt blue foundation, bright yellow branding, white content surfaces, and dense retail…
Nokia
Brands · Inter
Connectivity-for-the-AI-era branding with cool gradients, dark technological depth, and clean industrial structure. Nokia’s current site uses bright blues and teals, dark network surfaces, and modular enterprise…
Sonar
Brands · Inter
Code quality and security design with clean developer dashboards, orange-blue brand energy, and issue remediation clarity.
Fly.io
Brands · Inter
Edge compute design with terse developer confidence, dark machine surfaces, and globally distributed deployment clarity.