--- version: alpha name: "arc.net" description: "Design system extracted from https://arc.net/ on 2026-10-25" colors: background: "#0b0b0b" surface: "#282828" surface-2: "#1a1a1a" surface-3: "#040404" foreground: "#000000" primary: "#3139fb" on-primary: "#ffffff" secondary: "#ff5f57" border: "#19191b" typography: headline-display: fontFamily: "Exposure VAR" fontSize: "76px" fontWeight: 600 lineHeight: "85.88px" letterSpacing: "-2.432px" headline-lg: fontFamily: "ABC Oracle" fontSize: "20px" fontWeight: 350 lineHeight: "28.4px" letterSpacing: "-0.4px" headline-md: fontFamily: "ABC Oracle" fontSize: "16px" fontWeight: 350 lineHeight: "1.4" body-md: fontFamily: "ABC Oracle" fontSize: "17px" fontWeight: 350 lineHeight: "26.18px" letterSpacing: "-0.255px" label-md: fontFamily: "ABC Oracle" fontSize: "13px" fontWeight: 350 lineHeight: "1.4" button: fontFamily: "ABC Oracle" fontSize: "22px" fontWeight: 350 lineHeight: "26.4px" letterSpacing: "-0.44px" code: fontFamily: "-apple-system" fontSize: "11px" fontWeight: 500 lineHeight: "11px" letterSpacing: "-0.44px" rounded: none: "0px" 2xl: "60px" lg: "12px" md: "8px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "20px" 6: "24px" 7: "28px" 8: "32px" 9: "184px" components: button-secondary: backgroundColor: "#ffffff1f" textColor: "#ffffff" typography: "{typography.button}" rounded: "60px" height: "50px" padding: "14px 24px" button-ghost: backgroundColor: "#ffffff" textColor: "#000000" typography: "{typography.button}" rounded: "0px" height: "74px" padding: "24px 0px" card: backgroundColor: "#f7f7f7" rounded: "12px" padding: "0px" --- # arc.net ## Overview A farewell to Arc: Arc is sunsetting on December 22, 2026. What happens next and the transition to Dia. Soft, well-rounded controls, layered shadows for depth, large display type at 76px / 600, a single blue accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 630 rendered elements at 1440px wide on 2026-10-25. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-icon-1-source-4x.png`: representative interface icon at 4x native resolution - `screenshots/media-icon-2-source-4x.png`: representative interface icon at 4x native resolution - `screenshots/media-icon-3-source-4x.png`: representative interface icon at 4x native resolution - `screenshots/media-icon-4-source-4x.png`: representative interface icon at 4x native resolution - `screenshots/brand-favicon-source.png`: Favicon source - `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png - `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp - `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png - `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png - `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png - `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png - `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png - `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico - `screenshots/c-button-1--rest.png`: Button 1 ("When will I no longer be"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("When will I no longer be"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("When will I no longer be"), focus - `screenshots/c-button-1--selected.png`: Button 1 ("When will I no longer be"), clicked - `screenshots/c-list-1--rest.png`: Styled list 1 ("Your passwords, bookmark"), rest - `screenshots/c-icon-1--rest.png`: Icon 1, rest - `screenshots/c-faq-1--rest.png`: FAQ block 1 ("When will I no longer be"), rest - `screenshots/c-faq-1--open.png`: FAQ block 1 ("When will I no longer be"), open - `screenshots/c-button-2--rest.png`: Button 2 ("Read more"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Read more"), hover - `screenshots/c-button-2--focus.png`: Button 2 ("Read more"), focus - `screenshots/c-link-2--rest.png`: Text link 2 ("Dia"), rest - `screenshots/c-link-2--focus.png`: Text link 2 ("Dia"), focus - `screenshots/c-icon-2--rest.png`: Icon 2, rest - `screenshots/c-heading-eyebrow-2--rest.png`: Eyebrow / kicker 2 ("For everyone at"), rest - `screenshots/c-button-3--rest.png`: Button 3 ("Download DiaSend Dia dow"), rest - `screenshots/c-button-3--focus.png`: Button 3 ("Download DiaSend Dia dow"), focus ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#0b0b0b` | Page background | | surface | `#282828` | Cards, panels, raised or recessed surfaces | | surface-2 | `#1a1a1a` | Secondary surface | | surface-3 | `#040404` | Secondary surface | | foreground | `#000000` | Primary text | | primary | `#3139fb` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | | secondary | `#ff5f57` | Secondary accent (orange) | | border | `#19191b` | Hairlines, dividers, input borders | Full painted palette by area (largest first): `#ffffff`, `#0b0b0b`, `#cecece`, `#282828`, `#1a1a1a`, `#ff5f57`, `#febc2e`, `#28c840`. Gradients in use: `linear-gradient(rgba(245, 245, 245, 0.84), rgba(245, 245, 245, 0.84)), linear-gradient(rgb(255, 255, 255) 80px, rgba(255, 255, 255, 0) 200px)`; `linear-gradient(color(srgb 0.0352941 0.788235 0.988235 / 0.16), color(srgb 0.0352941 0.788235 0.988235 / 0.16)), linear-gradient(rgba(43, 127, 174, 0.12), rgba(43, 127, 174, 0.12)), none`; `linear-gradient(color(srgb 0.552941 0.482353 1 / 0.16), color(srgb 0.552941 0.482353 1 / 0.16)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), none`. The accent `#3139fb` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **Exposure VAR** for h1: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **ABC Oracle** for h2, h3, body, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. - **-apple-system** for code: system font stack. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. Font link found on the page: `https://fonts.googleapis.com` | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Exposure VAR | 76px | 600 | 85.88px | -2.432px | | headline-lg | ABC Oracle | 20px | 350 | 28.4px | -0.4px | | headline-md | ABC Oracle | 16px | 350 | 1.4 | normal | | body-md | ABC Oracle | 17px | 350 | 26.18px | -0.255px | | label-md | ABC Oracle | 13px | 350 | 1.4 | normal | | button | ABC Oracle | 22px | 350 | 26.4px | -0.44px | | code | -apple-system | 11px | 500 | 11px | -0.44px | - headline-md: observed (source h3); inferred fields: lineHeight. - label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 11px, 13px, 16px, 17px, 18px, 20px, 21px, 22px, 38px, 64px, 76px. Base body size 17px. The hero heading (h1) renders at 76px / 600, center aligned, up to 567px wide, tracking -2.432px. Sample: "A farewell to Arc". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 28, 32, 184 (px). - Flex and grid gaps: 4, 8, 12, 16, 20, 24, 32 px. - Content max width: 615px, centred. - Breakpoints: 640px, 641px, 650px, 800px, 1100px. - Header: 104px tall, static, background `rgba(0, 0, 0, 0)`; 0 nav links at nullpx / null. ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(0, 0, 0, 0.05) 0.5px 1px 4px 0px inset` - shadow-2: `rgb(255, 255, 255) 0px 4px 4px 0px inset, rgb(210, 210, 210) 0px 3px 0px 0px` - shadow-3: `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0.35px 0.7px 2.8px 0px inset` - shadow-4: `rgba(0, 0, 0, 0.12) 0px 0.4px 19.3px 0px` ## Shapes - Buttons: 60px - Inputs: 60px - Cards and panels: 12px - Images and media: 0px - Radius scale: none 0px, 2xl 60px, lg 12px, md 8px, full 9999px ## Components ### Button, secondary Background `#ffffff1f`, text `#ffffff`, border none, radius 60px, height 50px, padding 14px 24px, 16px / 400. Sample label: "Read more". ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#000000`, border none, radius 0px, height 74px, padding 24px 0px, 22px / 350. Sample label: "When will I no longer be". ### Card Background `#f7f7f7`, border none, radius 12px, padding 0px, shadow `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0.35px 0.7px 2.8px 0px inset`. Typical size about 232ร—181px. ### Link Colour `#ffffff`, underline, weight 350. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (14 of 87 in the checklist, 28 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 8 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ghost-icon-right lg, ink sm, ghost-with-icon, ghost-icon-right, ink-with-icon | hover, focus, open | "When will I no longer be able " | | Text link | underlined, underlined | focus | "Dia" | | Footer | default | rest only | "Moving to Dia is easyDownload " | | Badge / pill / tag | neutral-square, neutral-square, inverse-pill | rest only | "Ctrl" | | Card | flat-with-media | rest only | "Spotify๐Ÿ“–Read Later๐Ÿš™Road Trip" | | Styled list | default, default | rest only | "Your passwords, bookmarks, ext" | | Keyboard key | default | rest only | "/Ctrl+S" | | Image / figure | aspect-1.62, aspect-1.62, aspect-1.59 | rest only | | | Icon | outline-10px, outline-15px, outline-16px | rest only | | | Eyebrow / kicker | default, default | rest only | "On macOS" | | FAQ block | aria | open | "When will I no longer be able " | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Navigation link, Menu / dropdown trigger, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer link, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Blockquote, Video / media embed, Carousel / slider, Logo strip, Call-to-action band, Newsletter / signup form, Search results / listing row, Content container, Sticky bar. ## Dark Mode The site is dark by default and no light mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 615px | 436px | 16px | 76px, 1 line, center | 104px, 0 links | media above text | 2โ†’1 col; 4โ†’1 col; 2โ†’2 col | content-width | | laptop 1024px | 615px | 228px | 16px | 76px, 1 line, center | 87px, 0 links | media above text | 4โ†’1 col; 2โ†’2 col; 4โ†’1 col | 8 full-width | | tablet 768px | 645px | 115px | 16px | 72px, 1 line, center | 87px, 0 links | media above text | 4โ†’1 col; 2โ†’1 col; 4โ†’1 col | 10 full-width | | phone 390px | 342px | 33px | 16px | 52px, 2 lines, center | 87px, 0 links | media above text | 4โ†’4 col; 2โ†’1 col; 4โ†’1 col | 10 full-width | - H1 goes 76px โ†’ 52px (68%), 1 โ†’ 2 lines. - No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified. - Body text is 16px at the sampled desktop and phone widths. - Phone side gutter 33px. - 10 buttons stretch full-width on phones. - Section top padding 158px โ†’ 72px. ## Interaction & Motion 87 elements carry transitions; typical 0.7s with ease, mostly on opacity, background-color, grid-template-rows. No running keyframe animations at rest. - Hover on button-primary ("Read more"): background #ffffff1f โ†’ #ffffff33; cursor pointer; transition background-color | 0.15s | ease. - Focus on button-primary: outline 2px solid rgb(255, 255, 255), offset 2px. - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - No dropdown menus found in the header. - 9 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe). Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#3139fb` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 17px in ABC Oracle and headings in Exposure VAR. - Do match corner radii per element class (buttons 60px, cards 12px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from body; large surface colors remain in the palette. - Note: Body text contrast is 1.1:1 against the page background (below 4.5:1).