CURATED · OPEN · FREE

Arc Browser

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

ConsumerWarmFriendlyProduct

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://arc.net

📦 Browse pack contents →

Identity DNA

playfulwarmexpressivemodernapproachable

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

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.

Typography

transitional-serif · humanist-sans · monospace

display56px · 700
heading28px · 700
body16px · 400
caption12px · 500

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px base with generous padding around interactive elements.

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

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.

Components

button Dark filled buttons with pill shape and playful icon integration.
card Light cards with subtle noise texture and soft shadows.
chip Small rounded labels with accent colors.
input Clean text inputs with minimal styling.
hero Large expressive headline with warm gradient background and noise overlay.

Voice & Don'ts

Tone Playful, friendly, and conversational.
Headlines Expressive serif headlines with personality.
CTAs Direct and inviting with playful icons.

Don't use cold grays — screenshot shows warm off-white (#FFFCF7) as primary background.
Don't use sharp corners everywhere — screenshot shows generous pill shapes and rounded corners.
Don't use stark white backgrounds — screenshot shows warm, slightly yellowed whites.
Don't use thin, lightweight typography — screenshot shows bold, expressive serif headlines.
Don't use aggressive shadows — screenshot shows soft, subtle shadows for depth.
Don't use rigid, corporate layout — screenshot shows playful, expressive compositions with noise textures.
Avoid: Corporate jargon
Avoid: Overly technical language
Avoid: Cold or sterile tone

Inside the pack — real screenshots

Arc Browser — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Captured from the live site · real computed styles

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