Brand guidelines `#2702c2`

May 15, 2026

# arc.net

A reading of the visual language at https://arc.net. Every token, every rule, every component — captured from the live site.

Page intent
  landing
System grade
  B 89/100
Tokens
  7 colours · 12 sizes
Generated
  designlang

Chapter 01

## About

Page intent
  landing 29% confidence
Material language
  flat
Imagery style
  photography
Component library
  unknown
Stack
  next
Voice tone
  friendly

Chapter 02

## Logo

arc.net

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 1 secondary · 1 accent · 4 neutrals · 7 total

Primary #2702C2

RGB
  `39, 2, 194`
HSL
  `252°, 98%, 38%`

Secondary #FFFADD

RGB
  `255, 250, 221`
HSL
  `51°, 100%, 93%`

Accent #3139FB

RGB
  `49, 57, 251`
HSL
  `238°, 96%, 59%`

### Neutrals

`#000000`
`#FFFCEC`
`#FFFFFF`
`#696969`

### Full palette

`#000000`
`#3139FB`
`#FFFCEC`
`#FFFFFF`
`#FFFADD`
`#2702C2`
`#696969`

WCAG 100% · 6 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

## Typography

7 families · 12 sizes · 5 weights

Display
  Marlin
Body
  Marlin Soft SQ
Weights
  400, 700, 600, 500, 800

### Specimen

Arc is the Chrome replacement I've been waiting for.
Arc is the Chrome replacement I've been waiting for.

### Scale

Step | Size | Sample
--- | --- | ---
`t00` | `45.51px` | Arc is the Chrome replaceme
`t01` | `40px` | Arc is the Chrome replaceme
`t02` | `36px` | Arc is the Chrome replaceme
`t03` | `32px` | Arc is the Chrome replaceme
`t04` | `28px` | Arc is the Chrome replaceme
`t05` | `24px` | Arc is the Chrome replaceme
`t06` | `20px` | Arc is the Chrome replaceme
`t07` | `17px` | Arc is the Chrome replaceme
`t08` | `16px` | Arc is the Chrome replaceme
`t09` | `14px` | Arc is the Chrome replaceme

Chapter 05

## Spacing

Base 2px · 11 steps captured

### Rhythm

`2px`
`32px`
`48px`
`64px`
`72px`
`80px`
`90px`
`100px`
`128px`
`150px`
Chapter 06

## Shape

4 radii · 2 elevation tiers

### Border radii

`4px`
`8px`
`18px`
`22px`

### Elevation

`xs`
`sm`
Chapter 07

## Iconography

unknown · 24 captured

Library
  unknown
Confidence
  0%
Stroke style
  —

`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
Chapter 08

## Motion

Feel: smooth · 2 durations · 1 easings

### Duration scale

`100ms`
`200ms`

### Easings

- `ease-in-out`

Chapter 09

## Components

unknown · 1 component patterns captured

### Mocks

Card

#### Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

### Detected patterns

#### button

Slots
  label, icon, badge
Variants
  —
Sizes
  large

Chapter 10

## Voice

friendly · — · —

### Headlines from the site

- Arc is the Chrome replacement I've been waiting for.
- Arc is the Chrome replacement I've been waiting for.
- Arc is the Chrome replacement I've been waiting for.
- Arc is the Chrome replacement I've been waiting for.

### CTA verbs

- ``×3

Chapter 11

## Accessibility

100% WCAG 2.1 contrast
6 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

## Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variables variables.css

    :root {
      --color-primary: #2702c2;
      --font-display: "Marlin";
      --space-base: 2px;
      --radius-md: 8px;
    }

Tailwind config tailwind.config.js

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: { brand: '#2702c2' },
          fontFamily: { display: ['Marlin', 'serif'] },
          spacing: { base: '2px' },
          borderRadius: { md: '8px' },
        },
      },
    };

Run `npx designlang pack arc.net` for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

## Usage

1. ### Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. ### Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. ### Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. ### Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.