Graft Beta

Turn any website into your design system

Inspect CSS, pick colors and fonts, check contrast, and export design tokens, Tailwind classes and React code from any page, right in Chrome.

Add to Chrome, it's free Try it on this page

Free during the beta · No account · Nothing leaves your browser

Everything a page is made of

Graft reads the styles the browser actually applies, then hands them to you as values, tokens, code and files.

CSS inspector

Hover any element for its box model, spacing, fonts and colors. Hold Alt to measure the distance to another element.

Color palette

Every color the page uses, merged and grouped. Export to CSS, SCSS, Tailwind or Adobe swatches.

Font finder

Text styles from H1 to caption, which font actually renders, and where it comes from.

Design tokens

Named tokens for colors, type, spacing, radius, shadows and breakpoints, as W3C Design Tokens, Figma variables, Tailwind or CSS.

Design to code

Copy a component as HTML and CSS, Tailwind or React, with only the styles that matter.

Contrast checker

WCAG 2.2 checks against the real background, with the closest color that passes.

Assets

Images, SVGs, icons and backgrounds. Download one, or all of them as a ZIP.

Design QA

Lay your mockup over the live page and spot every pixel that moved, with a difference blend.

How it works

Three steps, no setup.

  1. Open Graft on any website Click the Graft icon, or press Alt+Shift+G (Option+Shift+G on a Mac).
  2. Pick what you need Hover and click an element, or open Colors, Type, Tokens and more.
  3. Copy or export Values, CSS, tokens, Tailwind, React, images: one click each.

Try it here

These cards are built on design tokens. Open Graft on this page, click a card, then look at the Tokens and Code tabs.

Starter

Sketch

$0 / month

  • Inspect any element
  • Copy values and CSS
  • Color palette
Popular

Studio

$12 / month

  • Everything in Sketch
  • Design tokens and Figma export
  • Copy as Tailwind or React
Teams

Agency

$29 / month

  • Everything in Studio
  • Design QA overlays
  • Shared token sets

A sample component: these plans are not for sale.

Your pages stay yours

Graft runs on your device, only on the tab where you open it. No account, no analytics, no tracking. It sends nothing about the pages you inspect to us or anyone else.

Read the privacy policy

Questions

Is Graft free?

Yes. Every feature is free during the beta.

Which browsers does it support?

Chrome, and Chromium browsers that install from the Chrome Web Store, such as Edge and Brave. Firefox and Safari versions are planned.

Does it work on every website?

On regular websites, yes. Browsers do not let extensions run on their own pages (settings, new tab, the extension store). Some files a page loads from another site need your permission once; Graft asks only when a feature needs them.

Can I export to Figma?

Yes. The Tokens tab exports a file you import in Figma's Variables panel, with colors, sizes and type styles.

Does Graft see what I type in forms?

No. The inspector shows a field's type and state, never its value, and copied code leaves out hidden fields and passwords.