Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Arc
Dev ToolsArc combines electric violet-blue gradients with warm coral accents to create a futuristic yet approachable browser experience. The typography mixes custom fonts (Marlin Soft SQ) with clean sans-serifs, suggesting premium craftsmanship for productivity-focused users. The design balances playful wave patterns with serious AI functionality.
Design Identity
Signature Color
Arc Deep Blue
#2404aa
Premium browser innovation - sophisticated enough for power users, bold enough to challenge Chrome's dominance
Visual Identity
The distinctive wavy border patterns that frame sections, creating organic boundaries between the vibrant gradient backgrounds and content areas - instantly recognizable as Arc's signature design language
Component Style
Soft rounded corners (12-16px radius) with subtle shadows and gradient backgrounds. The 'Try Dia' button features a dark pill shape with generous padding, while the chat interface uses clean cards with minimal borders. Everything feels tactile and approachable rather than clinical.
Spacing Philosophy
Generous 64px vertical spacing creates breathing room between major sections, while the interface maintains intimate 16-24px internal padding. The layout feels expansive yet focused, with plenty of whitespace to let the gradient backgrounds breathe.
Design Principles
- Border radius stays between 8-16px for friendly approachability
- Gradients always flow from deep blue (#2404aa) to lighter variants
- Typography hierarchy uses 3 main sizes: 16px body, 20px descriptions, 32px headlines
- Shadows are subtle (0.12 opacity) to maintain lightness
- Wave patterns serve as section dividers, never decorative clutter
Target Audience
Productivity-obsessed professionals and developers who want their browser to be an AI-powered workspace, not just a web viewer - people switching from Chrome seeking next-generation features
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | normal | |
| h1 | 32px | 700 | 31.2px | |
| p | 20px | 400 | 24px | |
| a | 16px | 400 | normal | |
| button | 13.3333px | 400 | normal | |
| nav | 16px | 400 | normal | |
| footer | 16px | 400 | normal | |
| main | 16px | 400 | normal |
Color Palette
#96c4ff#cf3828#fa4531#fffcec#008279#2404aa#00c9c3#ffffff#d3e081#fc8279#090201#000402
