Name: Dembrandt
Author: Dembrandt

Apple

Consumer electronics and software company

Bento grid layouts

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

#000000

#f5f5f7

#272729

#262629

#252527

#28282b

Typography

SF Pro Display, SF Pro Icons, Helvetica Neue

hero:56px / 600

body:18px / 300

button:18px / 300

Shadows

Spacing

2px4px5px6px7px8px

Border Radius

5px

8px

980px

Button States

PrimeReact

Default

#fafafc

Hover

#fafafc

Active

#fafafc

radius: 11pxpadding: 0px 14px

output.json

{
  "url": "apple.com",
  "colors": [
    "#000000",
    "#f5f5f7",
    "#272729",
    "#262629",
    "#252527",
    "#28282b"
  ],
  "typography": {
    "fontFamily": "SF Pro Display, SF Pro Icons, Helvetica Neue",
    "hero": "56px / 600",
    "body": "18px / 300",
    "button": "18px / 300"
  },
  "shadows": [
    "rgba(0, 0, 0, 0.22) 3px 5px 30px 0px"
  ],
  "spacing": [
    "2px",
    "4px",
    "5px",
    "6px",
    "7px",
    "8px"
  ],
  "borderRadius": [
    "5px",
    "8px",
    "980px"
  ],
  "buttons": {
    "default": {
      "bg": "#fafafc",
      "text": "#000000"
    },
    "hover": {
      "bg": "#fafafc",
      "text": "#000000"
    },
    "active": {
      "bg": "#fafafc",
      "text": "#000000"
    },
    "radius": "11px",
    "padding": "0px 14px",
    "framework": "PrimeReact"
  }
}

$npx dembrandt apple.com