Tiny Startups — Homepage (Opening Viewport)

---
version: alpha
name: Tiny Startups — Homepage
colors:
  surface-1: rgb(233, 234, 236)
  surface-2: rgb(241, 243, 241)
  surface-3: rgb(255, 255, 255)
  surface-4: rgb(244, 245, 244)
  heading: rgb(24, 24, 27)
  body: rgb(110, 110, 116)
  primary: rgb(24, 24, 27)
typography:
  heading:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 54px
    fontWeight: 800
    lineHeight: 57.24px
  body:
    fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28.8px
---

## Overview
Compact startup discovery interface with a bold introduction, product rows and a sponsored sidebar. Captured October 6, 2026. Opening viewport only; promotional popup dismissed through Maybe later. Lower-page content not covered.

## 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 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 54px, weight 800, with 57.24px line height. Supporting text sample uses -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif at 18px with 28.8px 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
Use an expansive white desktop layout with primary listings at left and sponsored content at right. Keep small navigation and filter controls above the list. Narrow screens stack the primary content and collapse the navigation.

## 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 compact circular or rounded-square logos, small category chips, modest separators and strong black heading text. Keep colored sponsor artwork distinct from the core neutral interface.

## 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. Opening viewport only; promotional popup dismissed through Maybe later. Lower-page content not covered.