# Style an app from a link or a screenshot
Source: https://sovaria.in/docs/style-from-a-link

Paste a site you like, or attach a screenshot, and Sovariq takes its style (colours, type, density, framing and motion) for your app's design directions. It reads only the link you typed, safely, and never copies the page's words or layout.

> **Beta:** Reading links for style is new. Tell us when a site you link comes out looking wrong.

Say what you like with your message: "an inventory app that looks like https://example.com" or "make the pricing page feel like this" with a screenshot. Sovariq takes the **style**, never the content: colours, the feel of the type, how dense the pages are, how they are framed, how much they move and which kind of site it is. Layout and words are its own, and nothing from the page is written into your app.

Example conversation: Taking the style from a linked site
- You: A booking site for my pottery studio. I love how https://example.com looks.
- Step (style_from_reference): Read the linked page: share image, 2 fonts, 6 colours, headings [done]
- Sovariq: Here is the plan. The first design direction follows your reference: warm off-white, a serif for headings, roomy sections and quiet motion. The other two are alternatives if you want to compare.

## What Sovariq reads

| From a link | Used for |
|---|---|
| The share image (`og:image` or `twitter:image`), often a designed shot of the first screen | What the site looks like, seen by a small vision model |
| Fonts named in Google Fonts or Fontshare links, `@font-face` rules and `font-family` in up to two stylesheets | The feel of the type (a heading face and a body face that match it) |
| `theme-color`, then the most used colours and CSS custom properties | The palette, built around the main colour |
| The title, description and first headings | Clues about the kind of site; never copied into the app |

A screenshot you attach (PNG, JPEG, WebP or GIF) goes to the same vision call; with both, the image and the page's facts are read together. On the plan card the first direction is marked **Style from your reference**, and the other two directions are still there to compare. Your own words always win: "but in blue" changes the reference's colour.

## Only your link, read safely

- Sovariq opens only links **you typed** in the conversation, never one it found on a page or made up. Sovaria has no web search; this is one fetch of one page.
- The fetch is the same one Sovariq uses for any web page: every redirect is checked, private network and cloud metadata addresses are refused, only standard ports, at most 3 redirects, and size and time caps (1.5 MB of HTML, 400 KB per stylesheet, 2.5 MB for the image, 8 seconds).
- What comes back is treated as data, fenced off from Sovariq's instructions: text on the page can't tell Sovariq to do anything.

## When it can't read much

Pages behind a sign-in, sites that draw everything with JavaScript, and pages without a share image give fewer facts, and Sovariq works from what it has (only the address, when nothing could be read). Attach a screenshot for a better match.