---
title: "The Browser Company — Arc design system"
variant: extended
source: https://arc.net/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/arc-net)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# The Browser Company — Arc · Design System

> A vivid blue frame for a calmer internet.

**Theme:** light · **Industry:** productivity · **Source:** https://arc.net/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Arc pairs vivid blue section bands with warm ivory and white to make a browser homepage feel expressive yet uncluttered. Large, tightly set headlines and expansive product screenshots carry the story from launch announcement to features, testimonials, and download.

## North star

Use vivid blue as a confident structural anchor, then let generous white space and real interface screenshots explain the product.

## Overview

Arc’s visual strategy is built around a sharp contrast between saturated electric blue, warm ivory, and open white space. The blue fills the navigation, testimonial/download bands, and key review section, while the ivory announcement and testimonial areas soften the strong color. White feature sections give the browser screenshots room to read as the main content. Headlines use Marlin Soft SQ in a heavy, compact style with tight tracking; supporting copy is smaller and quieter, while mono uppercase labels add a technical accent. The long page alternates broad color fields and spacious product showcases rather than relying on dense cards. Screenshots show Arc’s interface in varied, colorful contexts, but remain framed as product demonstrations, not as the site’s core palette. Scalloped horizontal transitions add a playful signature. CTA buttons are rounded and lightly elevated; most content remains flat, with blue links and restrained borders keeping attention on the product.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Arc Electric Blue | `#3139fb` | `--color-arc-electric-blue` | brand | Dominant navigation and full-width review/footer bands; also headline, link, and hairline color. |
| Browser White | `#ffffff` | `--color-browser-white` | surface | Main feature-section canvas, navigation text, and contrasting download button surface. |
| Warm Ivory | `#fffcec` | `--color-warm-ivory` | surface | Announcement and testimonial backgrounds; softens the otherwise high-contrast blue-and-white page. |
| Deep Violet | `#2702c2` | `--color-deep-violet` | accent | Primary download button fill and selected CTA text against white. |
| Quiet Gray | `#696969` | `--color-quiet-gray` | neutral | Muted explanatory copy and secondary text, especially on pale backgrounds. |
| Lemon Tint | `#fffadd` | `--color-lemon-tint` | semantic | Secondary link text captured by measurement; use only where the page places links on dark blue. |
| Warm Charcoal | `#595852` | `--color-warm-charcoal` | neutral | Low-frequency text color in measured content; keep to subdued supporting copy. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Small set of dark navigation and content text, rather than the main headline color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Browser White) · `--color-surface` → `#fffcec` (Warm Ivory) · `--color-text` → `#3139fb` (Arc Electric Blue) · `--color-text-muted` → `#696969` (Quiet Gray) · `--color-text-subtle` → `#fffcec` (Warm Ivory) · `--color-border` → `#3139fb` (Arc Electric Blue) · `--color-accent` → `#3139fb` (Arc Electric Blue) · `--color-accent-2` → `#2702c2` (Deep Violet) · `--color-on-accent` → `#ffffff` (Browser White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3139fb` | `#ffffff` | 6.75:1 | AA |
| `#3139fb` | `#fffcec` | 6.56:1 | AA |
| `#696969` | `#ffffff` | 5.49:1 | AA |
| `#696969` | `#fffcec` | 5.33:1 | AA |
| `#fffcec` | `#ffffff` | 1.03:1 | fail |
| `#3139fb` | `#ffffff` | 6.75:1 | AA |
| `#3139fb` | `#fffcec` | 6.56:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Marlin Soft SQ | `--font-body` | webfont | 700, 500 | Primary display, section headings, body copy, navigation, and links. | Nunito Sans |
| InterVariable | `--font-intervariable` | webfont | 500, 600, 700 | Small captions and secondary interface labels. | Inter |
| Marlin | `--font-marlin` | webfont | 400 | Selected regular-weight navigation and secondary link text. | Nunito Sans |
| ABC Oracle | `--font-abc-oracle` | webfont | 400 | Minor supporting text where the page uses its secondary text face. | DM Sans |
| ABC Favorit Mono | `--font-mono` | webfont | 700, 400 | Uppercase eyebrow labels, badges, and compact technical annotations. | IBM Plex Mono |
| -apple-system | `--font-apple-system` | system | 600 | Download button labels. | Inter |

- **Marlin Soft SQ:** Use measured 700 for compact headlines and bold body/link emphasis; headings use tight negative tracking.
- **InterVariable:** Measured 600; small labels use slightly open tracking.
- **Marlin:** Regular weight provides contrast with the heavier Marlin Soft SQ display voice.
- **ABC Oracle:** Measured regular; keep understated and subordinate to the display face.
- **ABC Favorit Mono:** Bold mono with uppercase treatment and visibly tracked lettering.
- **-apple-system:** Measured 600; concise, readable labels with slightly tight tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.299, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45.5px | 700 | 0.93 | -0.04em | — | Marlin Soft SQ | Main page or hero statement in compact, bold display type. |
| h2 | 40px | 700 | 0.98 | -0.04em | — | Marlin Soft SQ | Section titles above feature screenshots and review content. |
| h3 | 36px | 700 | 1 | -0.02em | — | Exposure VAR | Occasional expressive feature heading. |
| h4 | 28px | 700 | 1.07 | -0.05em | — | Marlin Soft SQ | Smaller subheadings within content sections. |
| body | 16px | 700 | normal | 0 | — | Marlin Soft SQ | Short explanatory copy and testimonial statements. |
| caption | 12px | 600 | normal | 0.033em | — | InterVariable | Supporting labels and small interface annotations. |
| button | 14px | 600 | 2.07 | -0.01em | — | -apple-system | Download and product-action labels. |
| nav | 14px | 500 | normal | -0.02em | — | Marlin Soft SQ | Top-level site navigation. |
| link | 16px | 700 | normal | 0 | — | Marlin Soft SQ | Inline links and prominent editorial quotations. |
| eyebrow | 12px | 700 | normal | 0.05em | uppercase | ABC Favorit Mono | Uppercase mono category or attribution label. |
| code | 12px | 700 | normal | 0.05em | uppercase | ABC Favorit Mono | Compact uppercase mono technical marker. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width 1200px.

The page is a long, single-column marketing sequence with broad full-bleed color bands and centered feature sections. The measured maximum content width is 1200px, with screenshots centered and sized as the visual focus. The feature showcases use generous vertical separation and minimal surrounding chrome; the announcement and CTA sections center their content. A four-column testimonial band is the main denser region. The comfortable density and measured 48px section rhythm create clear pauses between product stories.

## Shape & elevation

- Radius: button `8px` · badge `8px` · link `4px` · xs `8px` · sm `10px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`
- Shadow `sm-2` (button): `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px`
- Motion: standard transition `0.15s ease` on interactive elements.

The overall treatment is mostly flat: strong color bands and white space define sections instead of card shadows. Product screenshots sit clearly against white, with subtle separation that keeps interface details legible. Download buttons use a small measured shadow; rounded CTA corners and scalloped section boundaries provide depth and character without adding heavy borders.

## Imagery

Large browser-interface screenshots are the primary imagery, showing varied workspaces, tabs, and colorful web content inside Arc. They are centered, wide, and presented as product evidence rather than decorative thumbnails. The announcement includes a browser/video demonstration. Colorful content within screenshots can introduce pinks, greens, and blues, but the surrounding page stays anchored in the measured blue, white, and ivory palette.

## Components

### Top navigation

Compact brand mark and links sit on the saturated blue band; use light navigation text and keep the row visually quiet.

### Announcement hero

Warm ivory field with centered product announcement, supporting line, prominent Try Dia action, and a wide browser demonstration.

### Blue review hero

Full-width electric-blue section centers a large review headline, attribution, download actions, and a large Arc screenshot.

### Feature showcase

White, spacious section with a centered blue headline, muted supporting copy, and a wide browser screenshot.

### Download CTA

Electric-blue band with a centered invitation and rounded white download button using violet text.

### Testimonial strip

Warm ivory band arranged in four columns, with bold blue quotes and compact outlined attribution badges.

### Footer

Blue two-column link area with compact product and resource lists, brand mark, social icons, and company signature.

### Measured component styles

- **Primary button** (“Download Arc for Mac”): background #2702c2 · text #ffffff · radius 10px · padding 8px 0px · 600 14px -apple-system · shadow rgba(0, 0, 0, 0.1) 0px 5px 5px 0px
- **Secondary button** (“Max”): transparent background · text #ffffff · border 1px solid · radius 8px · padding 8px 10px · 500 14px Marlin Soft SQ
- **Link** (““Rethinking the fundamentals of how we u”): transparent background · text #3139fb · radius 0px · padding 24px · 700 16px Marlin Soft SQ
- **Badge** (“@BEEBOMCO”): background #ffffff · text #3139fb · border 2px solid #3139fb · radius 8px · padding 4px 16px · 700 12px ABC Favorit Mono · uppercase
- **Navigation item** (“Max Mobile Developers Students Blog”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Marlin

## Do

- Use Arc Electric Blue (#3139fb) for major structural bands and link emphasis.
- Place feature screenshots on clean white space.
- Keep headings bold, compact, and closely tracked.
- Use Warm Ivory (#fffcec) to soften announcement or testimonial areas.
- Make download actions concise, rounded, and high contrast.
- Separate major stories with generous vertical breathing room.

## Don't

- Do not turn every section into a card grid.
- Do not use screenshot colors as the site-wide brand palette.
- Do not crowd product demonstrations with explanatory text.
- Do not replace the strong blue bands with subtle gradients.
- Do not use heavy shadows on ordinary content.
- Do not make every heading the same scale or weight.

## Agent prompt

Build a new Arc-style product page using a clear alternation of full-width bands and spacious white feature sections. Anchor the layout with Arc Electric Blue (#3139fb); use Browser White (#ffffff) for the main canvas and Warm Ivory (#fffcec) for occasional softer sections. Keep Deep Violet (#2702c2) for download-action emphasis, with Quiet Gray (#696969) supporting copy. Set major headings in a bold, compact rounded sans similar to Marlin Soft SQ, with tighter tracking than body text; use uppercase mono for small labels. Center large, realistic browser-interface screenshots within a measured 1200px maximum content width. Favor long vertical pauses, uncluttered composition, and scalloped section transitions where appropriate. Use rounded, lightly shadowed CTAs, but keep most content flat. Treat colorful interface content as product imagery, not as a replacement brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Centered announcement on warm ivory, with a wide browser demonstration beneath the CTA. | Product announcement, Try-product action | Warm ivory field, Scalloped blue boundary, Centered headline |
| 2 | hero | Full-width blue band with centered quote and download actions above a large product screenshot. | Social proof, Download for platform | Electric-blue canvas, White display text, Scalloped edge |
| 3 | product-showcase | White full-bleed feature section with centered copy and a wide interface image. | Feature explanation, Visual product proof | Blue heading, Muted supporting line, Centered screenshot |
| 4 | product-showcase | Single-column white section with a centered feature statement and large browser screenshot. | Feature explanation, Workspace visualization | Bold blue heading, Wide interface image, Generous whitespace |
| 5 | product-showcase | Centered title and support copy above a large product screenshot on white. | Feature discovery, Product demonstration | Blue title, Screenshot-led layout, Open spacing |
| 6 | other | Short centered text block with one inline privacy link on white. | Trust reassurance, Learn-more link | Compact heading, Muted explanation, Blue link |
| 7 | testimonials | Warm ivory band arranged as four review columns with compact attribution badges. | Social proof, Review attribution | Blue quote text, Outlined mono badges, Decorative icons |
| 8 | cta | Centered invitation and download button in a full-width blue band. | Download conversion | Electric-blue canvas, White rounded button, Scalloped divider |
| 9 | footer | Blue footer with two compact link columns, brand and social marks, and company signature. | Product navigation, Resource discovery | Small uppercase labels, Compact link lists, Brand and social icons |

## Source CSS custom properties (selected)

```css
--colors-primary1: rgb(255, 234, 231);
--colors-primary2: rgb(255, 201, 195);
--colors-primary3: rgb(252, 163, 159);
--colors-primary4: rgb(252, 130, 121);
--colors-primary5: rgb(253, 105, 88);
--colors-primary6: rgb(250, 69, 49);
--colors-primary7: rgb(207, 56, 40);
--colors-primary8: rgb(162, 43, 31);
--colors-primary9: rgb(116, 30, 21);
--colors-primary10: rgb(71, 17, 12);
--colors-primary11: rgb(26, 4, 2);
--colors-primary12: rgb(9, 2, 1);
--colors-secondary1: rgb(0, 234, 231);
--colors-secondary2: rgb(0, 201, 195);
--colors-secondary3: rgb(0, 163, 159);
--colors-secondary4: rgb(0, 130, 121);
--colors-secondary5: rgb(0, 105, 88);
--colors-secondary6: rgb(0, 69, 49);
--colors-secondary7: rgb(0, 56, 40);
--colors-secondary8: rgb(0, 43, 31);
--colors-secondary9: rgb(0, 30, 21);
--colors-secondary10: rgb(0, 17, 12);
--colors-secondary11: rgb(0, 4, 2);
--colors-secondary12: rgb(0, 2, 1);
--colors-students-arc_blue: rgb(12, 80, 255);
--colors-students-arc_blue_pale: rgb(69, 138, 255);
--colors-students-deep_blue: rgb(36, 4, 170);
--colors-students-arc_pinkish: rgb(242, 94, 107);
--colors-students-off_white: rgb(245, 244, 226);
--colors-students-dark_grey: rgb(60, 59, 58);
--colors-students-light_grey: rgb(225, 224, 206);
--colors-students-light_grey-hover: rgb(215, 214, 196);
--colors-students-text_light: rgb(151, 146, 143);
--colors-students-text_dark: rgb(118, 110, 106);
--colors-students-dark_blue: rgb(39, 2, 194);
--colors-students-light_blue: rgb(205, 204, 223);
--colors-students-light_green: rgb(211, 224, 129);
--colors-students-salmon: rgb(242, 194, 172);
--colors-lowContrast: #FFF;
--colors-highContrast: #000;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/arc-net