Screenshot to Lovable: getting exact colors, fonts, and spacing

Colors: sample, then name them

Use any color picker on the screenshot and sample the background, the main text, the muted text, borders, and the accent. Then write them as a small token list. Named tokens keep the builder consistent across every component:

• --bg #05060A page background
• --accent #2F6BFF buttons and links

Sample flat areas, not gradients or anti-aliased edges, and zoom in to avoid compression artefacts.

Fonts: find the closest match

If you can’t identify the exact font, name the closest free one (usually a Google Font) and describe what matters: geometric or humanist, weight, how tight the letter spacing is, and whether headings are uppercase. Sizes matter as much as the family: give each text style a pixel size and line height.

Spacing: measure a few, derive the rest

Measure the key distances (page margin, gap between sections, gap between cards, button padding) and round them to a scale such as 4 or 8px. Stating “8px spacing scale; sections 120px apart” fixes the “too loose” look better than any adjective.

Put it together, then iterate precisely

Lead the prompt with the token list and type scale, then the layout. When something is still off, correct it with a value (“card radius 16px, not 8px”), not a feeling.

Or skip the measuring

Recast samples the colors and measures the type and spacing from the pixels, then writes them into the prompt as tokens. Here’s a real excerpt from a dark SaaS hero.