← Gallery

extracted · 40 artefacts

airbnb.com

Live extraction of https://airbnb.com — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Download brand book PDFOpen in browser ↗Agent promptAll 40 files
9colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 40 artefacts for airbnb.com and renders 12+ sections below.

See full comparison ↗
4,411 charsbrand book ↗
---
site: "Airbnb | Vacation rentals, cabins, beach houses, & more"
url: "https://airbnb.com"
generated_at: "2026-06-12T12:48:51.826Z"
generator: "designlang@12.16.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#ff385c"
    secondary: "#e00b41"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: Airbnb Cereal VF
    base: 14
  spacing:
    base: 2
    scale: "[2, 15, 20, 32, 35, 48, 80, 131]"
  radii:
    xs: 2
    md: 8
    xl: 20
    full: 100
  shadows:
    sm: "rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px"
    xs: "rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset"
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material.

> "Site Footer"

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `nav → nav → content → footer → content → pricing → content → content`.

Source: <https://airbnb.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#ff385c` | 14 |
| secondary | `#e00b41` | 1 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#222222` · `#6a6a6a` · `#000000` · `#ffffff` · `#dddddd`

**Total unique colors detected:** 8.

# Typography

**Families**
- `Airbnb Cereal VF` · 859 uses
- `Times` · 167 uses

**Body size:** `14px` / line-height `20.02px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `28px` | `700` | `40.04px` |
| h2 | `22px` | `500` | `26px` |
| h3 | `21px` | `700` | `30.03px` |
| h4 | `14px` | `400` | `20.02px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `2px` · `15px` · `20px` · `32px` · `35px` · `48px` · `80px` · `131px`

**Layout primitives:** 13 grid containers · 149 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px`
- `xs` — `rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset`

**Z-index layers:** 8

# Shapes

**Radius scale**
- `xs` — `2px`
- `md` — `8px`
- `xl` — `20px`
- `full` — `32px`
- `full` — `50px`
- `full` — `100px`

# Components

**Detected patterns:** `buttons` · `inputs` · `links` · `navigation` · `footer` · `tabs`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 14 |

# Do's and Don'ts

**Do's**
- Use `become`, `popular`, `arts` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **third-person**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 271 !important rules — prefer specificity over overrides.
- Don't 98% of css is unused — consider purging.
- Don't 21818 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.16.0 from <https://airbnb.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

Airbnb Cereal VF
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · friendly · third-person

top CTA verbs

become×1popular×1arts×1beach×1mountains×1outdoors×1things×1airbnb×1

motionlang

Motion Lab

Every easing curve and duration airbnb.com ships, drawn and replayed live. Export them as Framer Motion presets from the motion.framer.js tab above.

Open full Motion Lab ↗

easing curves · 3

easing-1
cubic-bezier(0.2, 0, 0, 1)
ease-in-out
cubic-bezier(0, 0, 1, 1)
linear
linear

durations · 4

xs100ms
sm175ms
md300ms
xxl451754000ms

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

475 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'default';
  size?: 'md';
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'default', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

10
total icons
4
stroke-only
6
fill-only
0.00
avg stroke
—
library

Agent prompt

One self-contained system prompt with every airbnb.com token, anatomy slot and voice rule. Drop it into any AI agent and it builds in this brand without hallucinating.

paste into Claude · GPT · Cursor · Windsurf · v0
# You are building UI in the airbnb.com design system.

Source: https://airbnb.com
Extracted by designlang on 2026-06-12.

## Brand at a glance

- title         Airbnb | Vacation rentals, cabins, beach houses, & more
- page intent   landing
- material      flat
- design grade  A

## Colour

- primary     #ff385c
- secondary   #e00b41
- neutrals    #222222 · #6a6a6a · #000000 · #ffffff · #dddddd · #ebebeb

## Typography

- families   Airbnb Cereal VF · Times
- weights    400 · 500 · 700
- base size  16px

## Spacing

- scale      2px · 15px · 20px · 32px · 35px · 48px · 80px · 131px

## Radii

- scale      2px · 8px · 20px · 32px · 50px · 100px

## Motion

- durations  100ms · 175ms · 300ms · 451754000ms

## Voice

- tone       friendly
- pronoun    third-person
- headings   Sentence case
- CTA verbs  become · popular · arts · beach · mountains · outdoors

## Component anatomy

- button     variants: [object Object]  ·  slots: true · true · false

## Accessibility

- WCAG score 100% · failing pairs: 0

## Build rules

1. Use the colours above. **Never invent a new hex.** If you need a
   shade between two existing colours, derive it via HSL adjustment
   from the closest extracted colour and call out the derivation.
2. Use the extracted typography families. If you need a missing weight,
   pick the nearest available weight from the list and note it.
3. Snap spacing values to the scale above. No off-scale paddings or
   margins.
4. Snap border radii to the scale above.
5. Match the voice: same tone, same pronoun stance, same heading
   style. Reuse the listed CTA verbs.
6. Aim for WCAG AA contrast minimum. When the brand colours fail,
   prefer the foreground colour on the background colour rather than
   mid-tone neutrals.
7. Reuse component anatomy when it exists — do not invent novel
   structures for things the site already has.

## Available context files

designlang wrote these alongside this prompt. Reach for them when
you need ground truth:

- `<host>-design-tokens.json` — DTCG primitive · semantic · composite tokens
- `<host>-tailwind.config.js`  — Tailwind v3 config
- `<host>-tailwind-v4.css`     — Tailwind v4 `@theme` block
- `<host>-tokens.d.ts`         — TypeScript literal-union types
- `<host>-variables.css`       — bare CSS custom properties
- `<host>-reset.css`           — brand-aware base styles
- `<host>-gradients.css`       — `.grad-N` utility classes
- `<host>-anatomy.tsx`         — typed React component scaffolds
- `<host>-shadcn-theme.css`    — shadcn/ui theme
- `<host>-theme.js`            — React / Vue / Svelte theme object
- `<host>-mcp.json`            — MCP server payload (load via stdio)
- `<host>.brand.pdf`           — print-ready 13-chapter brand book

When you reference the system in code, prefer importing from these
files over hard-coding values.

## Output expectations

When asked to "build a pricing page" or "make a card" or any UI:

- Produce a single self-contained component file in the appropriate
  framework (React / Vue / Svelte — match what the user is using).
- Use Tailwind utility classes wired to the v4 `@theme` if Tailwind
  is available; otherwise use the CSS custom properties from
  `variables.css`.
- Write the headline copy using the brand voice; do not invent
  generic Lorem.
- Annotate any choice where you had to bend the system, with a
  one-line `// note:` comment explaining what and why.

## One-line install

```bash
npx designlang airbnb.com
```

Run this against any other URL to extract its system in the same
shape as the one above.

---

Generated by designlang. Re-extract by running `npx designlang airbnb.com`.
Drop this in any AI agent. It will build UI in the airbnb.com brand without hallucinating colours, fonts or component shapes.

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://airbnb.com
{
  "colors": {
    "all": [
      {
        "hex": "#222222",
        "rgb": {
          "r": 34,
          "g": 34,
          "b": 34,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 13
        },
        "count": 1262,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#6a6a6a",
        "rgb": {
          "r": 106,
          "g": 106,
          "b": 106,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 42
        },
        "count": 416,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 335,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 26,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#ff385c",
        "rgb": {
          "r": 255,
          "g": 56,
          "b": 92,
          "a": 1
        },
        "hsl": {
          "h": 349,
          "s": 100,
          "l": 61
        },
        "count": 14,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#dddddd",
        "rgb": {
          "r": 221,
          "g": 221,
          "b": 221,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 87
        },
        "count": 6,
        "contexts": [
          "border",
          "background"
        ]
      },
      {
        "hex": "#ebebeb",
        "rgb": {
          "r": 235,
          "g": 235,
          "b": 235,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 92
        },
        "count": 4,
        "contexts": [
          "background",
          "border"
        ]
      },
      {
        "hex": "#e00b41",
        "rgb": {
          "r": 224,
          "g": 11,
          "b": 65,
          "a": 1
        },
        "hsl": {
          "h": 345,
          "s": 91,
          "l": 46
        },
        "count": 1,
        "contexts": [
          "background"
        ]
      }
    ]
  },
  "regions": [
    {
      "role": "nav",
      "tag": "header",
      "bounds": {
        "x": 0,
        "y": 0,
        "w": 1280,
        "h": 80
      },
      "heading": null,
      "buttonCount": 4,
      "cardCount": 0,
      "className": "c2zxfaj atm_9s_1txwivl atm_fc_1yb4nlp atm_h_1h6ojuz atm_gi_xjk4d9 atm_j3_1vvhni0 atm_lk_1tcgj5g atm_ll_1tcgj5g atm_e2_u29brm atm_lk_1vi7ecw__1v156lz atm_lk_fyhuej__jx8car atm_ll_1vi7ecw__1v156lz atm_ll_fyhuej__jx8car atm_e2_rw9lz9__jx8car dir dir-ltr"
    },
    {
      "role": "nav",
      "tag": "nav",
      "bounds": {
        "x": 1022.734375,
        "y": 0,
        "w": 225.265625,
        "h": 80
      },
      "heading": null,
      "buttonCount": 3,
      "cardCount": 0,
      "className": "cg7l307 atm_mk_h2mmj6 atm_9s_1txwivl atm_h_1h6ojuz atm_fc_esu3gu atm_e2_u29brm dir dir-ltr"
    },
    {
      "role": "content",
      "tag": "main",
      "bounds": {
        "x": 0,
        "y": 249,
        "w": 1280,
        "h": 0
      },
      "heading": null,
      "buttonCount": 0,
      "cardCount": 0,
      "className": "m1460ofs atm_gq_189ypq0 atm_gz_1fgafaw__2ygr2h atm_h0_i3vgjb__2ygr2h atm_lk_3ladnm__2ygr2h atm_ll_fk2qd9__2ygr2h dir dir-ltr"
    },
    {
      "role": "footer",
      "tag": "footer",
      "bounds": {
        "x": 0,
        "y": 618,
        "w": 1280,
        "h": 601.15625
      },
      "heading": "Site Footer",
      "buttonCount": 6,
      "cardCount": 37,
      "className": "f12ytkur atm_mk_h2mmj6 atm_26_1qgma6g atm_gz_1fgafaw atm_h0_i3vgjb atm_lk_3ladnm atm_ll_fk2qd9 atm_le_u29brm dir dir-ltr"
    },
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 32,
        "y": 650,
        "w": 394.65625,
        "h": 378.15625
      },
      "heading": "Support",
      "buttonCount": 0,
      "cardCount": 7,
      "className": "se5ui3x atm_67_iod1ro atm_lb_1tcgj5g atm_da_cbdd7d atm_67_idpfg4_13mkcot atm_67_idpfg4__oggzyc atm_lb_idpfg4__oggzyc atm_da_g31la2__oggzyc atm_da_x71zqm__1v156lz atm_da_1oo4mti__1z0u2lb dir dir-ltr"
    },
    {
      "role": "pricing",
      "tag": "section",
      "bounds": {
        "x": 442.65625,
        "y": 650,
        "w": 394.671875,
        "h": 378.15625
      },
      "heading": "Hosting",
      "buttonCount": 0,
      "cardCount": 10,
      "className": "se5ui3x atm_67_iod1ro atm_lb_1tcgj5g atm_da_cbdd7d atm_67_idpfg4_13mkcot atm_67_idpfg4__oggzyc atm_lb_idpfg4__oggzyc atm_da_g31la2__oggzyc atm_da_x71zqm__1v156lz atm_da_1oo4mti__1z0u2lb dir dir-ltr"
    },
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 853.328125,
        "y": 650,
        "w": 394.65625,
        "h": 378.15625
      },
      "heading": "Airbnb",
      "buttonCount": 0,
      "cardCount": 5,
      "className": "se5ui3x atm_67_iod1ro atm_lb_1tcgj5g atm_da_cbdd7d atm_67_idpfg4_13mkcot atm_67_idpfg4__oggzyc atm_lb_idpfg4__oggzyc atm_da_g31la2__oggzyc atm_da_x71zqm__1v156lz atm_da_1oo4mti__1z0u2lb dir dir-ltr"
    },
    {
      "role": "content",
      "tag": "section",
      "bounds": {
        "x": 32,
        "y": 1085.15625,
        "w": 1216,
        "h": 30
      },
      "heading": null,
      "buttonCount": 6,
      "cardCount": 15,
      "className": null
    }
  ],
  "componentClusters": [
    {
      "kind": "input",
      "structuralHash": "input",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(34, 34, 34)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "0px",
            "border": "0px none rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "500"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>div",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(34, 34, 34)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "50px",
            "border": "0px none rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "400"
          },
          "instanceCount": 1
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>span",
      "instanceCount": 5,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(34, 34, 34)",
            "padding": "11px 12px 11px 12px",
            "borderRadius": "20px",
            "border": "0px solid rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "500"
          },
          "instanceCount": 3
        },
        {
          "css": {
            "background": "rgb(242, 242, 242)",
            "color": "rgb(34, 34, 34)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "50%",
            "border": "0px none rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "400"
          },
          "instanceCount": 2
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button",
      "instanceCount": 7,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(34, 34, 34)",
            "padding": "10px 10px 10px 10px",
            "borderRadius": "8px",
            "border": "0px none rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "500"
          },
          "instanceCount": 7
        }
      ]
    },
    {
      "kind": "button",
      "structuralHash": "button>span>svg",
      "instanceCount": 1,
      "variants": [
        {
          "css": {
            "background": "rgba(0, 0, 0, 0)",
            "color": "rgb(34, 34, 34)",
            "padding": "0px 0px 0px 0px",
            "borderRadius": "8px",
            "border": "0px none rgb(34, 34, 34)",
            "fontSize": "14px",
            "fontWeight": "500"
          },
          "instanceCount": 1
        }
      ]
    }
  ],
  "accessibility": {
    "remediation": []
  },
  "cssHealth": {
    "sheets": [
      {
        "url": "https://www.airbnb.ae/?_set_bev_on_new_domain=1781268498_EANmNjNDExMzQ4Mz&set_everest_cookie_on_new_domain=1781268498.EAYmYxMmQ5ZmJiMzM3Yj.1QLHOR_f4uE3l2Fx6COptqJhz25eP8feuofNs_VdVS0",
        "totalBytes": 66620,
        "usedBytes": 0,
        "unusedBytes": 66620,
        "unusedPercent": 100
      },
      {
        "url": "https://www.airbnb.ae/?_set_bev_on_new_domain=1781268498_EANmNjNDExMzQ4Mz&set_everest_cookie_on_new_domain=1781268498.EAYmYxMmQ5ZmJiMzM3Yj.1QLHOR_f4uE3l2Fx6COptqJhz25eP8feuofNs_VdVS0",
        "totalBytes": 6820,
        "usedBytes": 1070,
        "unusedBytes": 5750,
        "unusedPercent": 84
      },
      {
        "url": "https://a0.muscache.com/airbnb/static/packages/web/common/frontend/core-guest-loop/apps/core-guest-spa/client.31464ce27d.css",
        "totalBytes": 1645271,
        "usedBytes": 0,
        "unusedBytes": 1645271,
        "unusedPercent": 100
      },
      {
        "url": "https://www.airbnb.ae/?_set_bev_on_new_domain=1781268498_EANmNjNDExMzQ4Mz&set_everest_cookie_on_new_domain=1781268498.EAYmYxMmQ5ZmJiMzM3Yj.1QLHOR_f4uE3l2Fx6COptqJhz25eP8feuofNs_VdVS0",
        "totalBytes": 38,
        "usedBytes": 0,
        "unusedBytes": 38,
        "unusedPercent": 100
      },
      {
        "url": "https://a0.muscache.com/airbnb/static/packages/web/common/frontend/core-guest-loop/apps/core-guest-spa/client.31464ce27d.css",
        "totalBytes": 1645271,
        "usedBytes": 62343,
        "unusedBytes": 1582928,
        "unusedPercent": 96
      },
      {
        "url": "https://www.airbnb.ae/?_set_bev_on_new_domain=1781268498_EANmNjNDExMzQ4Mz&set_everest_cookie_on_new_domain=1781268498.EAYmYxMmQ5ZmJiMzM3Yj.1QLHOR_f4uE3l2Fx6COptqJhz25eP8feuofNs_VdVS0",
        "totalBytes": 0,
        "usedBytes": 0,
        "unusedBytes": 0,
        "unusedPercent": 0
      }
    ],
    "totalBytes": 3364020,
    "usedBytes": 63413,
    "unusedBytes": 3300607,
    "unusedPercent": 98,
    "importantCount": 271,
    "duplicates": 21818,
    "vendorPrefixes": {
      "webkit": 517,
      "moz": 238,
      "ms": 8,
      "o": 0
    },
    "keyframes": [],
    "specificity": {
      "max": [
        1,
        13,
        5
      ],
      "average": [
        0,
        2.41,
        0.04
      ],
      "count": 39459
    },
    "issues": [
      "271 !important rules",
      "21818 duplicate declarations",
      "98% unused CSS"
    ]
  }
}

Prompt pack

Paste-ready prompts pre-loaded with the airbnb.com system. Generators (v0, Lovable, Cursor, Claude Artifacts) and per-component recipes (button, card).

v0877 chars
Build a landing page with this exact visual language.
COLORS:
  #222222
  #6a6a6a
  #000000
  #ffffff
  #ff385c
  #dddddd
  #ebebeb
  #e00b41
FONTS: [object Object], [object Object]
SPACING: 2, 15, 20, 32, 35, 48, 80, 131
RADIUS: 2, 8, 20, 32, 50, 100
SHADOWS: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px | rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset
MATERIAL LANGUAGE: flat
VOICE: Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
SECTIONS (in order):
- footer — heading: "Site Footer"
- pricing — heading: "Hosting"
Use Tailwind. Match these tokens exactly. Keep the material language consistent.
Lovable772 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: flat. Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #222222, #6a6a6a, #000000, #ffffff, #ff385c.
Typography: [object Object], [object Object].
Corner radius vocabulary: 2, 8, 20, 32, 50, 100.
Shadow vocabulary: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px | rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset.
Page structure:
- footer — heading: "Site Footer"
- pricing — heading: "Hosting"
Cursor830 chars
# Design brief
Page type: **landing**.
Material language: **flat**.
Voice: Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#222222', '#6a6a6a', '#000000', '#ffffff', '#ff385c', '#dddddd', '#ebebeb', '#e00b41'],
  fonts: ['[object Object]', '[object Object]'],
  radii: ['2', '8', '20', '32', '50', '100'],
  shadows: ['rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px', 'rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset'],
};
```
## Sections
- footer — heading: "Site Footer"
- pricing — heading: "Hosting"
Claude Artifacts691 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: flat.
Voice: Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #222222, #6a6a6a, #000000, #ffffff, #ff385c, #dddddd, #ebebeb, #e00b41.
Fonts: [object Object], [object Object].
Radius vocabulary: 2, 8, 20, 32, 50, 100.
Sections:
- footer — heading: "Site Footer"
- pricing — heading: "Hosting"
Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.
Recipe · Button953 chars
# Recipe: button
Build one button component that matches this brand.
Palette: #222222, #6a6a6a, #000000, #ffffff, #ff385c, #dddddd
Typography: [object Object], [object Object]
Material: flat
Signals: Radius: 2, 8, 20, 32, 50, 100 · Shadows: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 8px 24px 0px | rgba(60, 77, 107, 0.25) 0px 0.953955px 1.90791px 0px, rgba(60, 77, 107, 0.25) 0px 3.81582px 5.72373px 0px, rgb(0, 28, 64) 0px 0px 2px 0.5px inset, rgb(215, 235, 255) 0px -1px 3px 0px inset
## Anatomy (detected)
```json
{
  "kind": "button",
  "structuralHash": "button>span>svg",
  "instanceCount": 1,
  "variants": [
    {
      "css": {
        "background": "rgba(0, 0, 0, 0)",
        "color": "rgb(34, 34, 34)",
        "padding": "0px 0px 0px 0px",
        "borderRadius": "8px",
        "border": "0px none rgb(34, 34, 34)",
        "fontSize": "14px",
        "fontWeight": "500"
      },
      "instanceCount": 1
    }
  ]
}
```

All artefacts

Every file designlang produced for airbnb.com — 40 in total. Download anything.

Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack6 files
Other13 files

Run designlang on your own URL.

Same 40-artefact depth as the airbnb.com extraction above. No signup, no API key.

npx designlang yoursite.comTry it live