Arc

---
version: alpha
name: Arc landing-page reference
description: A browser landing page with saturated grainy blue sections, scalloped
  dividers, warm cream testimonial panels and large colorful browser-window demonstrations.
  A prominent opening banner introduces Dia before the Arc product story.
colors:
  primary: '#3139FB'
  secondary: '#2702C2'
  surface: '#FFFFFF'
  warm-surface: '#FFFCEC'
  on-surface: '#000000'
typography:
  headline-display:
    fontFamily: Marlin Soft SQ
    fontSize: 45.51px
    fontWeight: 700
    lineHeight: 42.25px
    letterSpacing: -1.8204px
  headline-md:
    fontFamily: Marlin Soft SQ
    fontSize: 45.51px
    fontWeight: 700
    lineHeight: 42.25px
    letterSpacing: -1.8204px
  headline-mobile:
    fontFamily: Marlin Soft SQ
    fontSize: 32px
    fontWeight: 700
    lineHeight: 31.2px
    letterSpacing: -1.6px
  body-md:
    fontFamily: ABC Oracle
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
---

# Arc landing-page reference

## Overview

Observed at https://arc.net/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A browser landing page with saturated grainy blue sections, scalloped dividers, warm cream testimonial panels and large colorful browser-window demonstrations. A prominent opening banner introduces Dia before the Arc product story. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Preserve the contrast of grainy blue, warm cream and crisp interface captures.

## Typography

The visible display sample uses "Marlin Soft SQ", 45.51px size, 42.25px line height and weight 700. Tracking is -1.8204px. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Begin with the Dia transition banner, followed by a blue testimonial-led Arc hero and browser download actions. Present one spacious product demonstration per chapter: a visual collage, different browsing spaces, split-view personalization and privacy. End with four small testimonials, a blue download section and compact footer. Keep large product imagery wider than the accompanying centered text.

At 390px the blue header reduces to a centered mark and menu. The Dia banner stacks its serif message, explanation, large button and cropped product screenshot. The Arc hero quote below becomes 32px/31.2px, and the scalloped transition remains visible. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

A grain texture enriches the saturated blue without adding more colors. Browser windows cast clear soft shadows and overlap small floating interface panels. Exact texture parameters, blur and elevation scale were not measured.

## Shapes

Use scalloped edges between blue and light sections, rounded browser windows and compact rounded download buttons. Product mockups have colored sidebars, layered tabs and floating panels; these detailed frames carry the visual identity. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

The opening Dia banner uses a serif heading and dark app-icon button, contrasting with Arc’s rounded sans-serif product headings. Arc chapters pair bold blue labels with screenshots of tabs, spaces and split view. Download controls distinguish platforms. The current transition messaging is part of the observed page, not an inferred roadmap.

## Do's and Don'ts

Preserve the contrast of grainy blue, warm cream and crisp interface captures. Give browser demonstrations generous breathing room. Do not conflate Dia’s banner with the Arc UI or imply that the older Arc page demonstrates new unobserved functionality.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.