accent#ff6b57
Primary download and action coral.
arc://spaces/work/design-system
A warm, product-led catalog of Arc's visual system: coral pill actions, soft browser chrome, spaces, sidebars, split views, and privacy-first editorial rhythm.
Arc keeps the page quiet and lets color live in action states and product UI themes.
Primary download and action coral.
Pressed CTA state.
Headlines and dark CTAs.
Warm marketing page stage.
Cards, panels, app panes.
Muted quote and inset panels.
Browser sidebar chrome.
Space and theme accents.
Personal theme accents.
Success and calm theme accents.
Inline learn-more links.
Dark closing sections.
Large Arc type is calm but confident: semibold, compact, and conversational.
The Chrome replacement
Display — 84px / 650 / .98 / -0.045em / InterA browser that anticipates.
Hero — 64px / 650 / 1.02 / -0.04em / InterClean and calm by default.
Headline lg — 48px / 650 / 1.08 / -0.035em / InterSpace for every side of you.
Title lg — 36px / 650 / 1.15 / -0.03em / InterSplit View and Themes
Title md — 26px / 650 / 1.22 / -0.02em / InterPinned Tabs
Title sm — 20px / 650 / 1.3 / -0.015em / InterArc shapes itself to how you use the internet, with quiet surfaces and product-led clarity.
Body — 18px / 400 / 1.58 / -0.005em / Inter“Arc looks like the future of browsers.”
Editorial quote — 40px / 650 / 1.12 / -0.035em / InterDownload Arc for Mac
Label — 13px / 650 / 1.3 / 0.01em / InterControls keep the interface friendly and touchable, with coral reserved for the main action.
Cards are roomy and rounded, but the product frame remains the strongest visual object.
A white rounded surface for a focused browser benefit and small product detail.
Warm inset quote surface for the human, conversational Arc voice.
Browser-like warm panels represent sidebars, tabs, and address areas.
Coral appears as a decisive action panel, never as generic decoration.
Dark footer surfaces close the page quietly and keep trust language grounded.
Support content uses cleaner white panels, practical borders, and standard forms.
The system is recognizable through sidebars, Spaces, theme colors, Split View, and command-first navigation.
Forms use practical white fields and clear focus rings rather than marketing decoration.
The rhythm avoids clutter: small internal gaps, large section pauses.
Large radii make browser frames, cards, and controls feel tactile and software-native.
Tiny chips and links.
Inputs and help cards.
Sidebar panels.
Feature cards and browser frames.
Buttons and announcement strips.
Arc uses wide, warm shadows on product frames and lighter depth on cards.
Hierarchy from color contrast and spacing.
box-shadow: noneSoft card elevation for supporting modules.
0 18px 48px rgba(...,.08)Large browser screenshots get the strongest depth.
0 34px 90px rgba(...,.16)Key tokens are ready to reuse in Arc-style prototypes.
:root {
--brand-primary: #25211f;
--brand-accent: #ff6b57;
--brand-accent-hover: #ef5c49;
--brand-accent-pressed: #d94f3e;
--brand-ink: #25211f;
--brand-body: #4d4642;
--brand-muted: #7c746f;
--brand-canvas: #faf4ed;
--brand-surface: #ffffff;
--brand-surface-alt: #f3eee8;
--brand-border: #e4ddd5;
--brand-link: #5b50d8;
--brand-purple: #7b61ff;
--brand-pink: #f174b7;
--brand-mint: #60cfa7;
--brand-sidebar: #eee8e1;
--brand-chrome: #f7f2ec;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 28px;
--radius-pill: 9999px;
--space-section: 112px;
--shadow-product: 0 34px 90px rgba(37,33,31,.16), 0 8px 28px rgba(37,33,31,.08);
--shadow-card: 0 18px 48px rgba(37,33,31,.08);
}