What is Arc on explainx.ai?

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. Listed under category “Design System”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.

DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

explainx.ainewsletter3.5k

workshops ↗

Arc — DESIGN.md | explainx.ai | explainx.ai

DESIGN.md (markdown body)

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).

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Arc on explainx.ai?: 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. Listed under category “Design System”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?: Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

Get started →