Box DESIGN.md
Brands
Enterprise content management with white space, blue trust cues, and AI-era document workflows. Box's public site uses bright white canvases, navy-blue accents, structured product cards, and a calm enterprise tone.
At a glance
- Group
- Brands
- Main color
- #0061d5Blue design systems
- Fonts
- InterSF Mono
Colors in this file
- #dce6f2
Unnamed
- #0061d5
Unnamed
- #182230
Unnamed
- #0d2b45
Unnamed
- #ffffff
Unnamed
- #f7faff
Unnamed
- #5f6b7a
Unnamed
- #16825d
Unnamed
Enterprise content management with white space, blue trust cues, and AI-era document workflows. Box's public site uses bright white canvases, navy-blue accents, structured product cards, and a calm enterprise tone.
1. Visual Theme & Atmosphere
Overall Aesthetic
Box feels like document infrastructure for large organizations. It is clean, process-oriented, and quietly premium.
Mood & Feeling
- Secure
- Enterprise-ready
- Clean
- Content-centric
- AI-augmented
Design Density
Medium density. Many product options are grouped into clear cards and panels.
Visual Character
- White-first layout
- Deep blue trust accents
- Content and workflow cards
- Minimal decorative noise
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--box-blue | #0061D5 | Primary action |
--box-navy | #0D2B45 | Deep anchor color |
--box-white | #FFFFFF | Canvas and cards |
--box-surface | #F7FAFF | Soft support background |
--box-ink | #182230 | Primary text |
--box-muted | #5F6B7A | Secondary text |
--box-border | #DCE6F2 | Borders |
--box-success | #16825D | Positive state |
3. Typography Rules
Font Stack
css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;
Type Scale
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero | 56px | 700 | 1.05 |
| H1 | 40px | 700 | 1.1 |
| H2 | 30px | 700 | 1.14 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.5 |
Typography Philosophy
Favor highly readable enterprise typography with clear, process-friendly hierarchy.
4. Component Stylings
css.button-primary { background:#0061d5; color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:600; }
.button-secondary { background:#fff; color:#182230; border:1px solid #dce6f2; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #dce6f2; border-radius:22px; box-shadow:0 12px 24px rgba(13,43,69,.06); }
.input { background:#fff; border:1px solid #dce6f2; border-radius:14px; min-height:46px; padding:12px 14px; }
Component Notes
- Document and workflow cards should feel systematic
- Blue drives action, not page saturation
5. Layout Principles
Spacing Scale
4, 8, 12, 16, 24, 32, 48, 64px
Layout Behavior
- Group by product, department, and workflow
- Keep enterprise browsing highly scannable
- Pair AI capabilities with document context
6. Depth & Elevation
Box uses light enterprise elevation with crisp borders and soft shadows.
7. Do's and Don'ts
Do
- Keep it trustworthy and document-centric
- Use blue with discipline
- Preserve structure over decoration
Don't
- Don’t make it playful consumer storage UI
- Don’t clutter product option grids
8. Responsive Behavior
Breakpoints
- Mobile
<768px - Tablet
768px-1023px - Desktop
1024px+
Responsive Rules
- Stack content cards before shrinking
- Keep search, CTA, and category hierarchy obvious
9. Agent Prompt Guide
textDesign this like Box: white enterprise document-platform surfaces, deep blue trust accents, structured workflow cards, minimal chrome, and calm AI-enabled content management clarity.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
Qualcomm
Brands · Qualcomm Sans
Intelligent computing everywhere with enterprise-scale polish. Qualcomm's current public site blends bright white sections, deep navy framing, vivid blue-teal gradients, chip-platform product families, and clean…
Craft
Brands · New York
Modern document editor with a clean, minimal aesthetic — white canvas, soft brand blue, and content-first UI.
Carta
Brands · Inter
Equity management design with professional navy identity, legal-precision surfaces, clean table hierarchy, and ownership-clarity UX.
Studio
Brands · Inter
Studio is a no-code web design tool built for designers who refuse to compromise on craft. Its marketing site is the product's strongest argument: a near-monochrome, gallery-grade canvas where the work — beautiful…
Elastic
Brands · Inter
Elastic UI (EUI) is Elastic’s public React component framework: its documentation presents themed components, setup guidance, and implementation patterns for software interfaces. The captured EUI home, components…
Calendly
Brands · Inter
Scheduling product design with calm blue trust, clean booking flows, and precise availability selection.