Skip to main content
Back to Gallery

Arc · Full Page

Arc

A consumer-tech landing that lets one saturated blue do the heavy lifting and still reads premium, not loud — cream canvas, electric-blue accent, Marlin Soft. Post-Chrome browser renaissance.

arc.net/Added
Arc Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Arc is the rare consumer-tech landing that lets a single saturated blue do the heavy lifting and still reads as premium rather than loud. We catalogued it because it solves a problem most playful brands never crack: how to feel joyful and opinionated without a single gradient or animation flourish to hide behind. If you are shipping a product that wants warmth and personality but cannot afford to look unserious, this is the page to keep open in the next tab.

Design decisions observed

  • One electric accent, used like a flag — Arc commits to a single ultra-saturated blue (#3139fb) as its entire personality, no gradient mesh, no secondary brand hue competing for attention. The confidence is in the restraint of the palette, not the size of it.
  • A warm cream canvas instead of clinical white — the background is #fffcec, a soft buttery off-white that makes the blue feel friendlier and the whole page feel hand-made rather than generated. This is the quiet move that separates Arc from every cold SaaS clone.
  • Display type carries the brand voice — Marlin Soft SQ at heading weight 700 with aggressive negative tracking (down to -1.82px) gives headlines a rounded-yet-confident character; the squared-soft terminals are the typographic fingerprint, not any illustration.
  • Motion you feel but never notice — every interaction sits on a 0.15s ease transition of transform + background, nothing longer in the interactive layer. The page feels alive and responsive without a single attention-grabbing reveal.
  • Product shots do the selling, chrome gets out of the way — large hero and feature screenshots (Dia, Arc on Windows) are the visual payload; the surrounding UI is deliberately quiet so the software is the spectacle.
  • Soft, shallow elevation — shadows stay at 5px blow and 10-25% black, radii top out at 10px. Nothing floats dramatically; cards sit gently, matching the friendly-but-grounded tone.

What to study

  • How a single saturated accent reads as a whole brand — Arc proves you don't need a palette of six to feel colorful. Study how one decisive blue against a warm neutral does more brand work than most gradient systems.
  • The warm-neutral background trick — swapping clinical #ffffff for a buttery #fffcec is a two-character change that completely shifts the emotional register from corporate to crafted. Steal this before you steal anything else.
  • Rounded-square display typography as identity — Marlin Soft SQ's softened-but-squared character does what a logo usually does. Learn how a single distinctive display family at heavy weight with tight negative tracking becomes recognizable on its own.
  • Disciplined motion in a playful brand — Arc wants for joy yet ships only 0.15s ease micro-transitions. Study how personality can live entirely in color and type so motion can stay invisible and fast.

What to avoid

  • Don't reach for a gradient to 'make it pop' — Arc explicitly doesn't, and that's the lesson. A flat saturated fill on a warm neutral is the move; a mesh gradient would cheapen exactly the premium feel you came here for.
  • Don't let the electric blue spread past accents into large surfaces — at #3139fb it's a punctuation color for CTAs, links, and key marks, not a section background. Flood the page with it and the warmth collapses into a harsh corporate slab.
  • Don't pile on motion to match the playful tone — the playfulness is in the palette and the type, not in choreography. Add scroll parallax or spring reveals and you break the calm, fast feel Arc deliberately protects.

Taste notes

Arc feels like a well-made object you'd actually want to hold — the cream paper warms everything it touches, the one electric blue lands like a maker's mark, and the squared-soft headlines give it a personality that's confident without trying too hard. There are no gradients to dazzle you and no animations to distract you; the page trusts that a great color decision and a great typeface are enough. It's the consumer-tech equivalent of a quiet flex: playful on the surface, ruthlessly disciplined underneath.

Lineage & references

  • The flagship of The Browser Company's design-led bet — Arc didn't just redraw the browser, it argued that a browser could have taste, warmth, and an opinion, the same way Linear argued an issue tracker could.
  • Sits in the playful-premium consumer-tech cohort with Raycast and Warp — tools for power users that refuse to look utilitarian, pairing developer-grade rigor with a friendly, colorful surface that earns delight without sacrificing polish.
  • Part of the 2024+ post-Chrome browser renaissance (Arc, Dia, and the wave that followed) — products that treat the browser chrome itself as a designed brand surface rather than neutral plumbing.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Playful-premium consumer tech built from exactly two decisions: one electric saturated blue (#3139fb) as the whole brand voice, on a warm buttery cream canvas (#fffcec) that replaces clinical white. Personality lives in color and in Marlin Soft SQ display type — rounded-square terminals, heavy 700 weight, aggressive negative px tracking (down to -1.82px) — NOT in gradients (there are none) and NOT in motion (only 0.15s ease micro-transitions). Elevation is soft and shallow: 5px-blur shadows at low opacity, radii capped at 10px. Warmth and confidence through restraint; joy without spectacle.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (one decisive electric blue #3139fb used only as accent on a warm cream #fffcec canvas with near-black #000000 text — NO gradients, flat fills only), the typographic voice (Marlin Soft SQ for display/headings at weight 700 with negative px tracking, Marlin for body, InterVariable for small UI labels, ABC Favorit Mono for eyebrow/mono marks), the soft-shallow elevation (5px-blur shadows ≤25% black, radii 8-10px), and the subtle motion vocabulary (transform + background transitions at 0.15s ease, nothing theatrical) across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. Critically: never introduce a gradient and never add spring or scroll-choreography motion — Arc's character comes from color and type alone. When I ask you to build a page or component, enforce these rules by default and flag any deviation.

Overview

Layout
Editorial
Content width
Bounded
Framing
Textured
Grid strength
Soft

Color philosophy

One electric saturated blue (#3139fb — the single brand-tier accent, 304 measured occurrences) on a warm buttery cream canvas (#fffcec). Text is near-black #000000 with a #696969 gray descender for de-emphasis; #ffffff is reserved for text/marks sitting on the blue. The signature emotional move is the cream background replacing clinical white — it makes the saturated blue read friendly rather than harsh. Two low-frequency support tints exist (deep navy #210784, soft pink #ff9999) but appear only as rare backgrounds, never as a second brand voice.

Mode strategylight-first
  • Electric blue #3139fb used strictly as accent — CTAs, links, key marks, focus rings. Never a large section fill; flooding it collapses the warmth.
  • Warm cream #fffcec is the dominant canvas (173 occurrences) — the deliberate replacement for #ffffff that sets the crafted, friendly register.
  • Near-black #000000 for primary text (196 occurrences); #696969 gray for captions, metadata, de-emphasized labels.
  • Pure white #ffffff reserved for text and marks rendered on top of the #3139fb blue — the only place it appears as foreground.
  • Support tints #210784 (deep navy) and #ff9999 (soft pink) are rare-background only (≤3 occurrences each) — never promote them to a second accent.

Typography rules

  • Display + headings: Marlin Soft SQ, weight 700. The rounded-square terminals at heavy weight are the brand's typographic fingerprint — this family carries identity, no logo or illustration required.
  • Body copy: Marlin (weight 400) at 16px / line-height normal. Marlin Soft SQ weight 700 at 16px is the bold-emphasis pair within body.
  • Small UI labels: InterVariable — 12px weight 600 with +0.4px letter-spacing for eyebrows, 17px weight 500 for secondary UI copy. Inter handles dense interface text where Marlin would feel too characterful.
  • Mono / eyebrow marks: ABC Favorit Mono at 12px (weight 400-700) with wide positive tracking (0.6-1.8px) — reserved for labels, tags, technical eyebrows.
  • Display tracking is negative and in px, scaling with size: -1.4px at 28px, -1.6px at 40px, -1.82px at 45.51px headings. Larger type pulls tighter — a constant optical correction.
  • Heading line-height runs tight and near-unitary: 30px on 28px display, 39px on 40px, 42.25px on 45.51px hero — display sits compact, never airy.
  • Body paragraphs sit at 16-17px with normal line-height; keep measure to roughly 45-65ch. No italic for emphasis — shift to Marlin Soft SQ 700 instead.

Spacing rules

  • 4px base unit. Dominant scale: 4 / 6 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 48 px — with 24px (82 occurrences) and 8/12px (38 each) as the workhorse values.
  • Section-scale rhythm uses the larger captured steps: 58px and 128px for major vertical gaps between page sections.
  • Global page padding is driven by `--padding: 32px`, wrapped safe-area-aware: `max(env(safe-area-inset-left), 32px)`. Honor this on left/right page gutters.
  • Container max-width is 1280px (`--max-width`); bounded content rails also appear at 340 / 900 / 1344 / 1400 / 1440 px for narrower clusters and edge-to-edge bands.
  • Flex/grid gutters draw from 6 / 8 / 10 / 12 / 16 / 24 / 32 px — 12px is the default gap (19 occurrences). No magic numbers; pick from the ladder.
  • Fixed chrome heights: navbar 64px (`--navbar-height`), mobile CTA bar 56px (`--mobile-cta-height`).

Design tokens

Palette, type, and space — all agent-readable.

7 colors · hex / rgb / hsl / oklch

Save PNG
  • brand
    40%
    • HEX#3139FB
    • RGBrgb(49, 57, 251)
    • HSLhsl(238, 96%, 59%)
    • OKLCHoklch(49.89% 0.2745 269.33)
  • foreground
    26%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • background
    23%
    • HEX#FFFCEC
    • RGBrgb(255, 252, 236)
    • HSLhsl(51, 100%, 96%)
    • OKLCHoklch(98.91% 0.0212 98.11)
  • background
    8%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • foreground
    3%
    • HEX#696969
    • RGBrgb(105, 105, 105)
    • HSLhsl(0, 0%, 41%)
    • OKLCHoklch(52.08% 0.0000 89.76)
  • accent
    0%
    • HEX#210784
    • RGBrgb(33, 7, 132)
    • HSLhsl(252, 90%, 27%)
    • OKLCHoklch(29.94% 0.1794 275.88)
  • accent
    0%
    • HEX#FF9999
    • RGBrgb(255, 153, 153)
    • HSLhsl(0, 100%, 80%)
    • OKLCHoklch(78.84% 0.1226 20.19)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 13 nodes captured; depth capped at 6 for readability.

  • body
  • └─ div
  • ├─ div
  • │ └─ div
  • │ └─ div
  • │ └─ Nav
  • ├─ Main
  • │ ├─ Section
  • │ ├─ Aside
  • │ └─ div
  • │ └─ Section (×4)
  • └─ Footer
  • └─ Aside

Accessibility

WCAG contrast matrix.

36 combinations · 20 pass AA · 12 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FFFCEC20.39AAAAAA+104foreground on background
Aa
#FFFCEC#00000020.39AAAAAA-106background on foreground
Aa
#FFFFFF#21078414.70AAAAAA-103background on accent
Aa
#210784#FFFFFF14.70AAAAAA+100accent on background
Aa
#FFFCEC#21078414.27AAAAAA-101background on accent
Aa
#210784#FFFCEC14.27AAAAAA+98accent on background
Aa
#000000#FF999910.27AAAAAA+64foreground on accent
Aa
#FF9999#00000010.27AAAAAA-63accent on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total6Lazy loaded0%unknown4png2

Hero image

https://arc.net/images/dia-hero-image.png
Format
PNG
Dimensions
2400×1386
Loading
auto
srcset
no
Page type
  • Full Page
Industry
  • developer-tools
  • productivity
Theme
  • light
Added
  • 2026-06-24

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.