Intro

As the first out of five issues this one will be a bit longer and will have some technical information besides screenshots themselves.

Figma Source

a. Vertical spacings. 60/50 on desktops, 40/30 on mobile. Higher values are meant for top and bottom, lower values for space between content. There are exceptions in places where textual, or where needed.
b. Starry theme. Ideally implemented as svg/vector, so it doesn't pixelate.
c. Frame of the website thumbnail. Ideally scales proportionally in its own container/column that can be aligned to any text below (with left and right edge). If you check its values on various sizes, you'll see it is resized proportionally (decimals). If discussion needed, just ping and we can huddle.
d. Screenshots. Taken in 4k, feel free to resize. These are raw, while those in Figma are positioned manually. Let me know if you want me to cut and trim these to precise size, or you can do so by following Figma examples. This is manually only for Landing page sites, all other sites could be processed automatically.
e. Hero section. Hero section's website should change with each visit. These sites aren't final, but we don't have better ones from the available list. I'll ask Jonathan Pantani to provide some alternatives if these cannot go.

Important — will be done in parallel.

• Filters aren't done, they are in progress.
• Hover states are yet to be made.
• Website tags aren't done, they are to be delivered by Stargate, with content.
• Website copy edits.
• Francisco is making all pages with variables and components, so you can have dev preview in Figma as well.
• Landing Hero sites selection.
• Site Thumbnails. Cut screenshots to exact ratio as variable made component.

Small screen	Medium	Large screen

Content max width: 1760 + padding 80: Monitor Extra Large