CURATED · OPEN · FREE

Arc Browser

A warm, expressive browser experience that blends playful personality with modern productivity.

ConsumerWarmFriendlyProduct
Arc Browser screenshot
↓ Download design system (27 MB)Open in OpenDesign

Visit: https://arc.net

📦 Browse pack contents →

01

Identity DNA

playfulwarmexpressivemodernapproachable

A friendly, creative studio workspace that feels personal and inviting.

02

Color

#3139FBAccent
#000000Ink
#FFFCF7BG
#696969Muted
rgba(0, 0, 0, 0.1)Line

Warm off-white base with vibrant blue accent, using subtle noise textures for depth.

03

Typography

transitional-serif · humanist-sans · monospace

Use transitional-serif for large display headlines to create warmth. · Use humanist-sans for body copy to maintain readability. · Apply generous negative tracking to display sizes.

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Consistent 4px base with generous padding around interactive elements.

05

Surfaces

sm · 4px
md · 8px
lg · 22px
pill · 999px

Subtle 1px solid borders, often using the accent blue for emphasis.

0px 5px 5px 0px rgba(0, 0, 0, 0.1) · 0px 2px 8px 0px rgba(0, 0, 0, 0.25)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Standard 12-column grid with responsive behavior, generous whitespace.

07

Motion & Interaction

100msmicro
150mssmall
200msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Subtle transform on hover for interactive elements. · Smooth background color transitions.

Subtle transform and box-shadow elevation on interactive elements. · Slight scale down or opacity change.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

This is a warm, friendly browser product website that uses playful serif typography and expressive color to feel approachable. Key colors include warm off-white (#FFFCF7), vibrant blue (#3139FB), and black text. Font categories are transitional-serif for display and humanist-sans for body. Critical donts: don't use cold gray backgrounds, don't use sharp corners everywhere, don't use stark white (#FFFFFF), don't use thin typography, don't use aggressive shadows, don't use corporate layouts. The design balances modern productivity with playful personality through noise textures and warm tones.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko