Design

Design analyzes the visual system of a page or of one element. Use the Page / Element scope switch at the top. Four tools are available.

Colors#

• Page palette — every color used, with the number of elements using it, grouped by category: Text, Background, Border, SVG.
• Click a swatch to highlight the elements using it on the page (8 seconds, Esc to stop).
• Copy a color as HEX, RGB, OKLCH or a CSS variable. Matching root CSS variables are shown when found.
• Eyedropper — pick any pixel on the page (when the browser supports it), or add a color manually.
• Contrast — check a text/background pair against WCAG thresholds: AA Large (3:1), AA Normal (4.5:1), AAA Normal (7:1). The pair can be swapped and edited with the keyboard.
• Tokens — export the palette as CSS variables, SCSS, Tailwind or JSON.

Uses count elements per category, not pixels. Gradients, images and frames are excluded.

Figma appears in the token format menu as Coming soon. It is not available yet.

Typography#

• Font stacks used on the page, with the primary font and fallbacks separated, sizes × usage and weights.
• Font sources, only when confirmed: Google Fonts, @font-face, Local, System — or Unknown, with no guess.
• What font is this? — point at any text to read its typography; hover for temporary details or click to keep and copy them.
• Copy variables or observed text styles, built from the atomic tokens.

No font is downloaded or tested: previews use fonts available on your device.

Measure#

1. Click Measure on the page, then click an element: it becomes the reference.
2. Hold Alt and hover another element to see the gap. Inside a container, you get the distances to its edges.
3. Alt + click records that gap in the panel.

Shows rendered size, padding, border, margin, position relative to the parent and the displayed scale of images. Units: px or rem. Press Esc to stop measuring.

Capture#

Four modes:

Mode	What it captures
Element	One precise element
Free region	A region you frame with the mouse (Shift keeps proportions, arrows move by 1 px)
Visible screen	What you see
Full page	Header to footer, scrolled and stitched

Formats: PNG, JPEG, WebP or PDF. Options include a delay (to open a menu or a hover state), scale, crop, a max height and lazy-image loading for full pages.

Form fields, editable areas and iframes are masked before encoding. Other pixels are not analyzed: check the image before sharing it. Captures stay on your device; you save or copy them explicitly.