Using the Browser Extension

Extract and export design tokens directly from any webpage.

Quick Start

1. Navigate to the page you want to extract from
2. Click the StyleGrab icon in your toolbar
3. Click Extract Tokens
4. View results in the side panel

Features

Extract Full Page

Extracts all design tokens from the current page:

• Colors (backgrounds, text, borders)
• Typography (fonts, sizes, weights)
• Spacing (margins, paddings, gaps)
• Assets (images, icons)

Element Picker

Target specific elements:

1. Click Pick Element in the toolbar
2. Hover over elements on the page (they’ll highlight)
3. Click to select an element
4. Only tokens from that element tree are extracted

Compare Mode

Compare tokens from different pages:

1. Extract from Page A
2. Click Save as Baseline
3. Navigate to Page B
4. Extract and click Compare
5. View the diff

Export Options

Copy to Clipboard

Click any token to copy its value.

Export Formats

Click Export to download tokens as:

• CSS Variables

  :root {
    --color-primary: #3b82f6;
    --color-text: #1f2937;
  }
  

• Tailwind Config

  module.exports = {
    theme: {
      colors: {
        primary: '#3b82f6',
        text: '#1f2937'
      }
    }
  }
  

• Design Tokens JSON

  {
    "color": {
      "primary": { "value": "#3b82f6" }
    }
  }
  

• SCSS Variables

  $color-primary: #3b82f6;
  $color-text: #1f2937;
  

Save to Account

Click Save to StyleGrab to:

• Store the extraction in your account
• Enable snapshot comparison over time
• Share with team members

Keyboard Shortcuts

Customize shortcuts at chrome://extensions/shortcuts.

Side Panel

The side panel shows:

Colors

Grouped by usage:

• Backgrounds — Background colors
• Text — Text colors
• Borders — Border colors
• Other — Shadows, accents, etc.

Each color shows:

• Hex/RGB value
• Usage count (how many times it appears)
• Visual swatch

Typography

• Font families
• Font weights
• Font sizes
• Line heights

Spacing

Common spacing values found in margins, paddings, and gaps, sorted by frequency.

Settings

Access via the gear icon:

• Theme — Light/dark mode
• Auto-extract — Extract automatically when navigating
• Default format — Preferred export format
• API key — For saving to your account

Tips

Extracting from SPAs

Single-page apps may load content dynamically. Wait for the page to fully load before extracting.

Dealing with iframes

The extension extracts from the main frame by default. To extract from an iframe:

1. Right-click the iframe
2. Select “Open frame in new tab”
3. Extract from there

Ignoring elements

Some elements (ads, tracking pixels) pollute results. Use the element picker to target only the relevant parts of the page.