Skip to main content

Arc

Browser rethought around sidebar-first navigation

Sidebar-first navigation

Extracted with Dembrandt. Showing a simplified version — the full output includes button states, logos, gradients, animations, and more. Try the CLI for complete results.

Colors

#fffcec
#000000
#696969
#2702c2
#170394

Typography

Marlin Soft SQ, -apple-system, system-ui
hero:45.51px / 700
body:17px / 700
button:14px / 600

Shadows

sm
md

Spacing

2px3px4px8px16px20px

Border Radius

8px
10px

Button States

PrimeReact
Default
#ffffff
Hover
#ffffff
Active
#ffffff
radius: 10pxpadding: 8px 0px
output.json
{
  "url": "arc.net",
  "colors": [
    "#fffcec",
    "#000000",
    "#696969",
    "#2702c2",
    "#170394"
  ],
  "typography": {
    "fontFamily": "Marlin Soft SQ, -apple-system, system-ui",
    "hero": "45.51px / 700",
    "body": "17px / 700",
    "button": "14px / 600"
  },
  "shadows": [
    "rgba(0, 0, 0, 0.1) 0px 5px 5px 0px",
    "rgba(0, 0, 0, 0.25) 0px 2px 8px 0px"
  ],
  "spacing": [
    "2px",
    "3px",
    "4px",
    "8px",
    "16px",
    "20px"
  ],
  "borderRadius": [
    "8px",
    "10px"
  ],
  "buttons": {
    "default": {
      "bg": "#ffffff",
      "text": "#2702c2"
    },
    "hover": {
      "bg": "#ffffff",
      "text": "#2702c2"
    },
    "active": {
      "bg": "#ffffff",
      "text": "#2702c2"
    },
    "radius": "10px",
    "padding": "8px 0px",
    "framework": "PrimeReact"
  }
}
$npx dembrandt arc.net