Arc. Scalloped editorial playground.
- Productivity
- Light theme
- 8 colors
- 7 typefaces
Arc's site reads like a warm editorial spread sliced with a craft-paper cutter: vanilla cream canvases, scalloped section edges that ripple between every band, and a single vivid violet that floods large blocks like a color-soaked page turn. Serif headlines (Marlin) pair with clean sans-serif UI (Inter) to create an editorial-meets-product tension, while the browser itself — not photography — is the hero, rendered as large interactive mockups with sidebar spaces, folders, and inline chat. The palette is mostly paper and ink; the violet is atmospheric punctuation rather than interactive color, and the wavy dividers do most of the personality work that shadows and gradients do on other sites.
Arc design system
Brand2
Full-bleed section backgrounds, brand atmosphere, sidebar chrome inside the browser mockup — a single high-saturation violet floods entire bands so the page reads as editorial color blocking, not UI state
Darker accent layer within violet sections, pressed or active states inside the brand color, secondary headings on violet — deepens the iris without shifting hue
Neutrals6
Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Subtle secondary text and warm-leaning gray for fine print — slightly olive-shifted to harmonize with the cream canvas instead of fighting it
Muted body copy, secondary descriptions, and helper text — mid-gray that recedes against Oat without disappearing
Primary page canvas and hero gradient base — warm cream that reads as paper rather than screen white, the default surface everything else sits on
Secondary warm surface for cards, nav backgrounds, and footer — a half-step warmer than Oat, used when a layer needs to lift off the canvas without going white
Pure white for browser-mockup card interiors, text on dark surfaces, and the scalloped divider ridges that separate colored bands
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper White on Electric Iris
6.75 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
