Name: Dembrandt
Author: Dembrandt

Vercel

Frontend cloud platform for deployment

Black and white precision UI

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

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

#171717

#4d4d4d

#ffffff

#808080

#f3f3f3

#e6e6e6

Typography

Geist, Arial, Apple Color Emoji

hero:48px / 600

body:16px / 400

button:14px / 500

Shadows

Spacing

1px2px3px4px5px6px

Border Radius

2px

4px

6px

8px

12px

Button States

Tailwind CSS

Default

#ffffff

Hover

#ffffff

Active

#ffffff

radius: 128pxpadding: 0px 12px

output.json

{
  "url": "vercel.com",
  "colors": [
    "#171717",
    "#4d4d4d",
    "#ffffff",
    "#808080",
    "#f3f3f3",
    "#e6e6e6"
  ],
  "typography": {
    "fontFamily": "Geist, Arial, Apple Color Emoji",
    "hero": "48px / 600",
    "body": "16px / 400",
    "button": "14px / 500"
  },
  "shadows": [
    "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px",
    "rgba(0, 0, 0, 0.04) 0px 2px 2px 0px"
  ],
  "spacing": [
    "1px",
    "2px",
    "3px",
    "4px",
    "5px",
    "6px"
  ],
  "borderRadius": [
    "2px",
    "4px",
    "6px",
    "8px",
    "12px"
  ],
  "buttons": {
    "default": {
      "bg": "#ffffff",
      "text": "#171717"
    },
    "hover": {
      "bg": "#ffffff",
      "text": "#171717"
    },
    "active": {
      "bg": "#ffffff",
      "text": "#171717"
    },
    "radius": "128px",
    "padding": "0px 12px",
    "framework": "Tailwind CSS"
  }
}

$npx dembrandt vercel.com