designlang
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 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

StepSizeSample
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

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

CTA verbs

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 variablesvariables.css
:root {
  --color-primary: #2702c2;
  --font-display: "Marlin";
  --space-base: 2px;
  --radius-md: 8px;
}
Tailwind configtailwind.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.