topseos.lol — Homepage

---
version: alpha
name: topseos.lol — Homepage
colors:
  surface-1: rgb(255, 253, 250)
  surface-2: rgb(229, 114, 85)
  surface-3: rgb(246, 243, 239)
  surface-4: rgba(229, 114, 85, 0.1)
  heading: rgb(40, 38, 36)
  body: rgb(40, 38, 36)
  primary: rgb(40, 38, 36)
typography:
  heading:
    fontFamily: '"DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    fontSize: 46px
    fontWeight: 700
    lineHeight: 50.6px
  body:
    fontFamily: '"DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    fontSize: 19px
    fontWeight: 400
    lineHeight: 28.5px
---

## Overview
Warm off-white pay-to-rank SEO directory with coral bidding controls, thin outlined rows and a prominent first-place card. Captured October 6, 2026. The source reports slight mobile horizontal overflow; preserve the visual hierarchy, not that defect. Bidding and chat were not exercised.

## Colors
Use the measured surface and text tokens above as the base palette. Dominant background samples describe interface surfaces, not colors inside logos or photographs. Preserve the restrained relationship between the canvas, supporting text and the focal accent.

## Typography
The inspected headline uses "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 46px, weight 700, with 50.6px line height. Supporting text sample uses "DM Sans", "DM Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 19px with 28.5px leading. These are computed styles at 1440px, not an inferred global type scale. Keep headings visually distinct from metadata and allow natural narrow-screen wrapping.

## Layout
Center a narrow bid form and long ranked list under a compact navigation row. Keep the leading row tinted and outlined. Mobile stacks the form and lets copy wrap within each listing.

## Elevation & Depth
Use the screenshot as the depth reference: keep text and content surfaces visually quiet, reserving emphasis for primary actions and highlighted content. Avoid adding heavy shadows that compete with the directory. Exact shadow values were not measured.

## Shapes
The sampled heading radius is 0px; this is not a card-radius token. Follow the visible component shapes described below. Keep consistent alignment, adequate touch targets, and content-driven heights.

## Components
Use pill-shaped inputs and buttons, small circular logos, muted rank labels and fine coral outlines around highlighted sponsorship. Keep the green chat affordance secondary.

## Do’s and Don’ts
Preserve the reference-specific hierarchy and spacing rhythm. Use original content and properly licensed imagery when adapting. Do not copy live counts as product claims, imitate broken assets, or infer filtering, hover, payment, authentication or keyboard behavior from a still image. Mobile evidence covers the opening viewport at 390px; intermediate breakpoints and accessibility were not audited. The source reports slight mobile horizontal overflow; preserve the visual hierarchy, not that defect. Bidding and chat were not exercised.