# Arc Design System

> High-contrast typography and vibrant brand blues set against a warm, papery off-white canvas with playful geometric accents.

**Source:** https://arc.net | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Arc utilizes a high-contrast foundation where deep blacks (`#000000`) and a signature brand blue (`#3139fb`) anchor a warm, off-white (`#fffcec`) surface. The system is characterized by a sophisticated typographic pairing of the rounded, friendly **Marlin Soft SQ** for display and the utilitarian **InterVariable** for functional body text. Layouts are airy, using 24px and 32px spacing increments to separate dense product UI screenshots from minimalist marketing copy. The visual language is punctuated by specific geometric "squircle" buttons and a recurring wavy divider motif that breaks standard horizontal sectioning.

## Signature DNA
1. **The Marlin Display Stack** (Marlin Soft SQ at weight 700, often at 40px or 100px, provides a soft but authoritative voice that distinguishes Arc from standard SaaS sans-serifs. Observed on `arc.net` and `arc.net/about`.)
2. **Brand Blue on Off-White** (The pairing of `--colors-brandBlue` (#3139fb) against `--colors-brandOffwhite` (#fffcec) creates a high-vibrancy, non-standard "light mode" that feels more like print media than a browser. Observed across all analyzed pages.)
3. **The 10px Control Radius** (A consistent 10px corner radius applied to primary buttons and UI controls, creating a "squircle" aesthetic that matches the browser's own UI. Observed on `arc.net/pricing` and `arc.net/about`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--colors-highContrast` | `#000000` | Primary text, high-contrast backgrounds | 8 | 1.0 | computed_style |
| `--colors-lowContrast` | `#ffffff` | Pure white for button text and specific surfaces | 6 | 1.0 | computed_style |
| `--colors-brandOffwhite` | `#fffcec` | Primary page background / canvas | 12 | 1.0 | css_variable |
| `--colors-students-text_dark` | `#766e6a` | Muted secondary text | 8 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--colors-brandBlue` | `#3139fb` | Primary brand accent, hero backgrounds | 23 | 1.0 | css_variable |
| `--colors-brandRed` | `#fb3a4d` | Error states, secondary accents | 1 | 1.0 | css_variable |
| `--colors-students-dark_blue` | `#2702c2` | Decorative deep blue (students) | 2 | 1.0 | decorative_only |
| `--colors-students-arc_blue` | `#0c50ff` | Alternative product blue | 1 | 1.0 | css_variable |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `--colors-primary7` | `#cf3828` | Error / Alert (Primary Red) |
| `--colors-focusOutline` | `#96c4ff` | Interactive focus state |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Marlin Soft SQ | 400, 700 | Display, Headings | Quicksand | Proprietary |
| Marlin | 400, 700 | Secondary Display | Nunito | Proprietary |
| InterVariable | 500, 700 | Functional Body | Inter | SIL OFL |
| ABC Oracle | 400 | Sub-headings | Public Sans | Proprietary |
| ABC Favorit Mono | 400 | Technical/Mono | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 100px | normal | normal | 700 | Hero Display | `div.PJLV-ikqvIiU-css` |
| `{type.display.xl}` | 46px | 42.25px | -1.82px | 700 | Section Header | `span.c-gzjVCE` |
| `{type.display.lg}` | 40px | 39px | -1.6px | 700 | Feature Title | `p.c-dvLKJr` |
| `{type.heading.md}` | 28px | normal | normal | 700 | Sub-section | `div.PJLV-iIwnGa-css` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 400 | Card Title | `a.c-koCplY` |
| `{type.body.bold}` | 17px | 25.5px | normal | 700 | Strong Body | `strong` |
| `{type.body.md}` | 17px | 25.5px | normal | 500 | Default Body | `div.c-ecFNtn` |
| `{type.body.sm}` | 14px | 29px | -0.14px | 600 | Button Label | `button.c-bCeQxv` |

### Principles
1. **Display weight is always 700.** Marlin Soft SQ is never used at light weights for headings; it must feel "plump" and friendly.
2. **Negative tracking on display.** As size increases from 40px to 46px, letter spacing tightens from -1.6px to -1.82px to maintain visual density.
3. **Body text uses InterVariable.** All functional UI and long-form descriptions switch to Inter for maximum legibility.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 7 |
| `{space.md}` | 20px | 5 |
| `{space.lg}` | 24px | 20 |
| `{space.xl}` | 32px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 52 occurrences |
| `{radius.control}` | 10px | Buttons, inputs, small cards | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` | Floating UI screenshots | 2 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** `arc.net/pricing`, `arc.net/about`
**Spec:** Background: `#ff3333` (Red) or `#ffffff` (White) | Text: `#ffffff` or `#000000` | Radius: `10px` | Padding: `8px 16px` | Typography: `14px/600`
**States observed:** Default | Hover: Captured (color shift) | Focus: Not captured | Active: Not captured | Disabled: Not captured

### Tier 2: Patterns

#### Product Feature Card
**Role:** Showcasing browser functionality
**Pages observed:** `arc.net`
**Spec:** Background: `#ffffff` | Radius: `0px` (container) | Shadow: `0px 5px 5px rgba(0,0,0,0.1)` (on internal image) | Padding: `24px`
**States observed:** Default

### Tier 3: Surface-specific

#### Wavy Section Divider
**Role:** Visual transition between brand sections
**Pages observed:** `arc.net`
**Spec:** Stroke: `--colors-brandBlue` (#3139fb) | Height: ~12px | Pattern: Sinusoidal wave
**States observed:** Static

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Default Section Gap | 32px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, center-aligned display type |
| Desktop | 1440px | Multi-column layouts, 100px display type enabled |

## Imagery & decoration
Arc relies heavily on **high-fidelity product screenshots** framed within the browser's own UI. These screenshots are often given a subtle `0px 5px 5px` shadow to lift them from the canvas. The brand avoids generic stock photography, opting instead for "Mood Board" style imagery (flowers, architecture) to demonstrate the browser's aesthetic capabilities.

## Do's
- Use `#fffcec` as the default background for marketing surfaces.
- Set all major headlines in **Marlin Soft SQ** at weight 700.
- Apply a **10px border radius** to all interactive button elements.
- Use the wavy divider motif when transitioning between high-contrast blue and off-white sections.
- Maintain a minimum of 24px padding between text blocks and product imagery.

## Don'ts
- **Wrong:** Using `#3139fb` (Brand Blue) for body text. **Right:** Use `#000000` or `#766e6a`. **Reason:** Legibility and hierarchy.
- **Wrong:** Using a sub-brand color like `#2702c2` (Student Blue) as the primary site-wide accent. **Right:** Use `#3139fb`. **Reason:** Brand consistency.
- **Wrong:** Applying sharp 0px corners to CTA buttons. **Right:** Use 10px. **Reason:** Arc's "squircle" identity.
- Do not use Marlin Soft SQ for long-form body text; switch to InterVariable.
- Do not use pure `#ffffff` for page backgrounds unless it is a specific card surface.

## Similar brands
- Linear (High-contrast typography, specific radius)
- Amie (Playful, rounded display type, soft colors)
- Raycast (Utility-focused, strong monochrome foundation)

## Quick start

### CSS Custom Properties
```css
:root {
  --colors-brand-blue: #3139fb;
  --colors-brand-offwhite: #fffcec;
  --colors-high-contrast: #000000;
  --radius-control: 10px;
  --font-display: "Marlin Soft SQ", sans-serif;
  --font-body: "InterVariable", sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-blue: #3139fb;
  --color-brand-offwhite: #fffcec;
  --font-display: "Marlin Soft SQ";
  --radius-control: 10px;
}
```

## Agent prompt examples
- "Create a hero section with a `#fffcec` background, a 100px bold headline using Marlin Soft SQ, and a primary button with a 10px radius and `#3139fb` background."
- "Generate a feature grid where each item is a white card on an off-white canvas, using 24px spacing and InterVariable for the description text."
- "Design a section transition using a blue wavy divider line and a high-contrast black text block."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the source evidence.
- The specific mobile breakpoint transition for the 100px display type was inferred from the 390px viewport but exact fluid scaling tokens were not present.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://arc.net | 1440px | 2026-06-06 |
| Pricing | https://arc.net/pricing | 1440px | 2026-06-06 |
| About | https://arc.net/about | 1440px | 2026-06-06 |