Arc
A browser-as-identity-statement with a vertically stacked sidebar in a custom gradient-tinted dark surface, user-theming that lets the chrome inherit personal color choices, and a minimal content window that disappears entirely when browsing. The Browser Company's visual language is self-aware and editorial — the marketing site uses a rich warm cream (#FAFAF8) with expressive variable-weight display type (Oh no! Type or Monument Grotesk), hand-drawn details, and genuine personality. In-app, Arc is whatever color its owner makes it: the system UI is purposely recessive, surfacing only when invoked.
Color Tokens
1. Visual Theme & Atmosphere
Arc is the browser for people who are bored by browsers. The Browser Company designed it as a personal operating system — the sidebar holds your identity (pinned tabs, spaces, profiles), and the content window is intentionally chrome-free. The marketing language is earnest and slightly irreverent, set in expressive display type with warm paper-toned backgrounds. In use, the app is invisible: it gets out of the way and lets the web be the UI.
2. Color System
Arc's in-app color system is user-defined — spaces can be themed to any gradient, turning purple one session and ocean-blue the next. The default shell uses:
- Sidebar: #1C1C1C dark surface with user's theme gradient as the active accent
- Default accent: #8E5FEB lavender-purple — the "Arc" color when user hasn't customized
- Marketing canvas: #FAFAF8 — warm cream, very approachable
- Gradient vocabulary: Purple (#C77DFF) to cyan (#4CC9F0) is the signature Arc palette
- Type: Dark near-black on cream, white on dark sidebar
3. Typography
Marketing uses Monument Grotesk or Neue Haas Grotesk at extreme weights (800) with very tight tracking — editorial, magazine-like. The in-app UI inherits macOS system fonts. The contrast between the expressive marketing voice and the functional app chrome is intentional: Arc the product is your canvas, not theirs.
4. Components & Patterns
- Vertical sidebar: Pinned tabs as favicons, folder groups, space switcher at bottom
- Command bar: Spotlight-style full-screen search (Cmd+T), launches tabs and actions
- Little Arc: Mini-window popup for quick browsing without leaving current context
- Easel: Split-panel scratch space for notes and media alongside web pages
- Boosts: User-customizable CSS/JS for any site — nerd feature surfaced prominently
5. Spacing & Layout
Sidebar width: 200–280px adjustable. Tab favicon size: 20px. Minimal title bar. Marketing site uses editorial-magazine columns, wide gutters, and asymmetric layouts. Dense and personality-driven rather than grid-rigid.
6. Motion & Interaction
Smooth, spring-based animations throughout. Panel expansion springs open. Tab switching has a subtle vertical slide. The command palette drops in with a quick ease-out. Hover on favicon tabs shows full title in a popout tooltip.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for