Playful, warm marketing: a cream canvas framed by electric-blue scalloped bands, a serif hero over a pastel wash, rounded Marlin brand type, and a black CTA pill.
⚠ native app, site only
Browse Arc in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: arc.net (live DOM, full CSS token system), 2026-07-09 (desktop 1512px). Coverage: marketing home + nav + hero + product-window mockup. App: n/a — Arc/Dia is a native macOS/Windows app, no web product (site only). Responsive: token-based (--navbar-height,--page-padding) but mobile rendering not verified.
Playful, warm, hand-crafted marketing that feels like a friendly indie product rather than a corporate browser. The page sits on a warm cream #FFFCEC canvas washed with a soft pastel gradient (peach → lavender → cream) behind the hero, framed top and bottom by vivid electric-blue #3139FB bands with a signature scalloped / wavy torn-paper edge where blue meets cream. Type mixes personalities on purpose: a rounded square-grotesque (Marlin / Marlin Soft SQ) for confident brand headings and an editorial serif for large hero lines, with ABC Oracle carrying body copy — the combination reads warm and human. A single black rounded CTA pill and playful pastel accents (coral, salmon, light-green) keep it optimistic. Feels: playful, warm, crafted, optimistic.
| Token | Hex | Role / usage |
|---|---|---|
| brandBlue | #3139fb | Electric-blue header/footer bands, borders, links |
| brandDeepBlue | #2404aa | Deeper blue accents |
| brandDarkBlue | #000354 | Darkest blue text on blue |
| brandOffwhite | #fffcec | Warm cream page canvas |
| brandRed | #fb3a4d | Alert / playful red accent |
| focusOutline | #96c4ff | Focus ring (pale blue) |
| highContrast / lowContrast | #000 / #fff | Text / inverse |
| Token | Hex | Role |
|---|---|---|
| arc_blue | #0c50ff | Alt bright blue |
| pinkish | #f25e6b | Coral-pink accent |
| salmon | #f2c2ac | Warm fill |
| light_green | #d3e081 | Lime fill |
| off_white | #f5f4e2 | Warmer cream panel |
| light_grey | #e1e0ce | Neutral warm panel (hover #d7d6c4) |
| text_dark / text_light | #766e6a / #97928f | Warm-grey body / muted |
Primary ramp is a coral-red (primary6 #fa4531); secondary ramp is teal-green — used for illustration/data, not chrome.
Rule: cream canvas + electric-blue bands is the frame; black is reserved for the primary CTA and headings. Pastel accents decorate, blue signals interactive.
"Marlin Soft SQ" and Marlin (rounded square grotesque)"ABC Oracle", Helvetica, sans-serifInterVariable, Inter, sans-serif"ABC Favorit Mono", Menlo, monospace| Role | Size/Line | Weight | Tracking | Family |
|---|---|---|---|---|
| Hero (editorial) | ~44–48 | 400 | tight | Serif |
| Brand heading (h1) | 32 / 31.2 | 700 | -1.6px | Marlin Soft SQ |
| Body | 20 / 24 | 400 | 0 | ABC Oracle |
| Nav / UI | 16 | 400–500 | 0 | Marlin / Inter |
Pattern: rounded Marlin for brand voice + a serif for big editorial hero lines; ABC Oracle for readable body. Weight goes up to 700–800 for punchy headings (unlike the dev-tool captures).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.