Meet Dia, the next evolution of Arc

Weekly security updates, SOC 2 certification, and the Arc DNA you know (and love).

Try Dia→
Work ▾
✉
▣
💬
📅
♪
♥
💬 New Chat • ⌘T
🔥 Slack • Figma
←→↻Dia / New Chat
The product renders as the hero.
Components

Warm panels, soft rounded shadows.

🎭

Spaces

Group tabs into colorful spaces for work, home and everything between.

□

Split View

Put two sites side by side without wrangling a single window.

✦

Boosts

Restyle any page with a splash of color, your fonts, or none at all.

Controls

Every button, side by side.

Try Dia→ Download→ Secondary Focus ring Read the release notes → New Live Beta
Primary · defaultTry Dia→
Primary · hover (lift 2px)Try Dia→
Primary · disabledTry Dia→
Secondary · defaultSecondary
Secondary · hoverSecondary
Secondary · disabledSecondary
Input · default
Input · focus ring (#96c4ff)

Primary CTA is a black rounded pill (rgba(0,0,0,.85), radius 22px) with app-icon avatar and arrow; secondary is a warm light-grey fill (hover #d7d6c4); disabled dims to 40%; blue #3139fb signals links; the input focus ring is pale blue #96c4ff.

Typography

Serif hero, Marlin brand, Oracle body.

Hero editorial · Serif 48/1.05 · 400Meet Dia
Brand h1 · Marlin 32/31.2 · 700 · -1.6pxThe browser is back.
Body · ABC Oracle 20/24 · 400Warm-grey body copy carries the reading, not pure black.
Nav / UI · Marlin / Inter 16 · 400-500Max · Mobile · Developers · Blog
Mono · ABC Favorit Mono 14--navbar-height: 64px;
Palette

Cream, electric blue, and pastels.

brandOffwhite #fffcec
brandBlue #3139fb
brandDeepBlue #2404aa
brandDarkBlue #000354
arc_blue #0c50ff
brandRed #fb3a4d
primary6 #fa4531
pinkish #f25e6b
salmon #f2c2ac
light_green #d3e081
focusOutline #96c4ff
off_white #f5f4e2
light_grey #e1e0ce
light_grey_h #d7d6c4
text_dark #766e6a
text_light #97928f
highContrast #000
Depth & motion

Soft rounded shadows, spring-y hover.

2 4 8 12 16 32 pill 22 · round 9999
shadow-small
0 5px 10px rgba(0,0,0,.12)
shadow-medium
0 8px 30px rgba(0,0,0,.12)
shadow-large
0 30px 60px rgba(0,0,0,.12)

Motion: playful, spring-y micro-interactions on hover (the CTA lifts 2px on a cubic-bezier(.36,1.3,.64,1) spring); content reveals on scroll; transitions stay short and bouncy, never scroll-jacked.