name Arc
colors background: "transparent" # Arc uses translucency foreground: "#ffffff" brand: "#ffffff" muted: "rgba(255, 255, 255, 0.6)" border: "rgba(255, 255, 255, 0.1)" card: "rgba(255, 255, 255, 0.05)" accent: "variable" # Based on Space theme dark: background: "rgba(0, 0, 0, 0.4)" foreground: "#ffffff" muted: "rgba(255, 255, 255, 0.5)" border: "rgba(255, 255, 255, 0.1)" card: "rgba(255, 255, 255, 0.05)"
typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "13px" lineHeight: "1.4" heading: fontWeight: "600"
rounded default: "10px" md: "12px" lg: "20px"
Design System: Arc
Overview
Arc's design system is "The Internet's Sidebar." It is a translucent, material-first environment that emphasizes customization, focus, and a "sampling" of the user's desktop context.
Design Philosophy
-
Translucency & Materials: The UI is not a solid color; it uses backdrop-filter: blur and transparency to feel integrated with the OS and the user's wallpaper.
-
Sidebar-Centric: All navigation is vertical and tucked away, maximizing the real estate for the web content itself.
-
Personal Spaces: Uses "Themes" where users can define a color temperature and gradient for each Space, making the UI feel personal.
-
Subtractive Chrome: Removes traditional browser elements (URL bar, tabs at top) to create a clean, "framed" window look.
Colors
-
Dynamic Accents: The UI hue is defined by the "Space" theme. It often uses rich, vibrant gradients (e.g., Sunset, Forest, Ocean).
-
Translucent Neutrals: Uses varying opacities of white and black to create layers without adding heavy solid colors.
-
Vibrancy: The primary "color" is the background wallpaper sampled through a high-blur filter.
Typography
-
Inter: Used for its neutrality and high legibility at small sizes (13px) required for a dense sidebar.
-
Lowercase Utility: Many labels in the sidebar use lowercase to feel more informal and tool-like.
Components
-
The Sidebar: A vertical, translucent container with 10px rounding and integrated tab management.
-
The "Command T" Bar: A center-focused, floating search bar with a high-blur background and zero-latency feedback.
-
Site Frames: Web content is "framed" within a rounded container (10px), separating the browser UI from the website.
Visual Effects
-
Backdrop Blur: Heavy use of blur(20px) to create a sense of glass and depth.
-
Glassmorphism: Relies on 1px translucent borders (rgba(255,255,255,0.1)) to define edges.
-
Fluid Layout: The sidebar slides and morphs smoothly based on user interaction (hover to expand).
