What is Arc's primary brand color?

Arc's brand voltage is a high-saturation royal blue at "#3139fb" (the CSS variable is `--colors-brandBlue`). On the marketing page it shows up 124 times across text and border, but only once as a full-bleed background — a single mid-page band that quotes a press review. The deeper variants live in the same blue family: a brand-deep "#2404aa" and a brand-dark "#000354" for hover and pressed states. The unexpected pairing is the canvas: Arc lays this blue on a cream Arc Offwhite "#fffcec" rather than the white most browsers default to.

Why does Arc use a cream canvas instead of white?

Arc Offwhite "#fffcec" is the canvas voltage — it carries hero, body, footer, and most cards, and shows up 142 times across the inspected page. The yellow cast (about 2% chroma in OKLCH) makes the page read as paper rather than screen, which contrasts the cool blue voltage band and the photographic browser captures. The CSS variable name is `--colors-brandOffwhite`, and it shares the role with "#f5f4e2" (`--colors-students-off_white`) on the students section. There is no pure white surface anywhere on the core chrome.

What typography does Arc use, and what fallbacks does it ship?

Arc runs five typefaces in parallel. The display family is Marlin Soft SQ at weight 700 with tight negative tracking — "-1.8204px" on the 45.5px hero, "-1.6px" on a 40px sub-head, "-1.4px" on the 28px feature heads. Inter Variable carries 17px body and 12px tab labels. ABC Oracle handles the 20px / 24px dek paragraphs. ABC Favorit Mono in uppercase with positive tracking (+0.4 to +1.8px) marks every eyebrow tag. Exposure VAR appears once on a 36px feature head. Fallbacks documented in the CSS variables go to system-ui and sans-serif; the InterVariable family ships from rsms.me as a free open-source substitute for the rest.

Why is the Try Dia CTA 76px tall?

The Try Dia card is not a conventional pill button — it is a 76px-tall black card at corner radius "22px" and padding "8px 22px 8px 8px", roughly double the height of a standard CTA. The asymmetric padding (8px on the right, 22px-ish on the left) reserves space for an inline product icon. The visual move is deliberate: Dia is the AI browser successor to Arc, so its CTA earns oversized prominence at the top of every page. Standard nav links and secondary buttons stay at conventional sizes — only the Dia card breaks scale.

Why does Arc have a separate students color palette?

Arc ships a sub-palette scoped exclusively to its students section: arc pinkish "#f25e6b", salmon "#f2c2ac", light green "#d3e081", light blue "#cdccdf", arc blue "#0c50ff", arc blue pale "#458aff", and students off-white "#f5f4e2". The CSS variable names all start with `--colors-students-`. The core marketing chrome never uses these — they only render when a visitor scrolls into the for-students band, where the palette signals a warmer, photo-collage mood distinct from the cool blue voltage of the main page.

How do I use this DESIGN.md in a React project?

Feed the file to Claude, Cursor, GitHub Copilot, or any agent that reads structured design tokens. The agent will reproduce Arc's discipline — cream canvas over true white, one blue voltage band per page, oversized 22px-radius CTA cards, uppercase mono eyebrows — rather than a generic browser landing template. You can also reference the tokens directly: every color, type style, radius and spacing value is a quoted string ready to paste into Tailwind config or CSS variables. Critically, keep the canvas on "#fffcec" rather than "#ffffff" — switching to white removes the brand's warmth and the page reads as generic SaaS chrome.

Arc Design System

Arc Browser's design system as a DESIGN.md file.

About Arc DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source arc.net

AI & LLM Platforms
Productivity & SaaS

Arc's marketing canvas inverts the category default. Where most browser landing pages default to true-white "#ffffff" or a dark gradient mesh, Arc lays everything on Arc Offwhite ("#fffcec") — a warm cream with a hint of yellow that reads as paper rather than screen. On top sits Marlin Soft SQ at weight 700, pulled to "-1.8204px" tracking on the 45.5px hero, and a primary CTA that is not a pill button but a 76px-tall black card at radius "22px" advertising Dia, the AI browser successor. One blue band ("#3139fb") flashes across mid-page as a full-bleed quote section, then the page returns to cream. The voltage is rare on purpose — it never appears as a button fill on the core chrome and never repeats inside the same section.

This page packages the whole system into a single DESIGN.md file written to the Google Labs spec. Inside: 19 color tokens grouped into brand voltage, neutral canvas, hairline, and a separate students sub-palette ("#f25e6b" arc pinkish, "#f2c2ac" salmon, "#d3e081" light green, "#0c50ff" arc blue, plus a "#f5f4e2" off-white); 11 type tokens across five families — Marlin Soft SQ display, InterVariable body, ABC Oracle dek, ABC Favorit Mono eyebrows, Exposure VAR for the rare feature head; 5 corner radii from "2px" up to "32px" plus the signature 22px CTA radius; an 8-point spacing scale from "4px" through "72px"; and 22 components covering the oversized Try Dia card, nav links, hero heading, body paragraphs, eyebrow tags, and the students section variants.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Arc's discipline — cream canvas over true white, one blue voltage band per page, the 76px-tall CTA card, the uppercase mono eyebrows — rather than a generic browser landing template. Or reference the tokens directly: every hex, font name, radius and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. Arc is worth studying because it proves a software product can use paper-warm cream as its primary surface and still read as a 2026 AI-browser brand, with the high-voltage blue earning its presence by appearing only once per page.

What makes it distinct

Cream canvasArc Offwhite #fffcec carries hero, body and footer where most browser sites default to true white #ffffff
High-voltage blue band#3139fb appears once as a full-bleed section ground, then never as a button fill on the core chrome
Oversized CTA cardthe Try Dia button stands 76px tall at corner radius 22px, double the height of a conventional pill
Five-family type stackMarlin Soft SQ display, Inter body, ABC Oracle dek, ABC Favorit Mono eyebrows, Exposure VAR feature heads
Separate students sub-palette#f25e6b arc pinkish, #f2c2ac salmon and #0c50ff arc blue surface only inside the for-students section

Live at arc.net

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

arc.net

Explore Arc

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Arc design system FAQ

Common questions about Arc's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Arc — official site

The live arc.net marketing page this spec was extracted from — see the cream canvas, the blue band, and the oversized Try Dia card in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Arc in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→