StartupBase — Homepage

---
version: alpha
name: StartupBase — Homepage
colors:
  surface-1: rgb(255, 255, 255)
  surface-2: rgba(20, 184, 166, 0.1)
  surface-3: rgb(248, 249, 250)
  surface-4: rgba(34, 197, 94, 0.1)
  heading: rgb(0, 0, 0)
  body: rgb(108, 117, 125)
  primary: rgb(0, 0, 0)
typography:
  heading:
    fontFamily: Geist
    fontSize: 21px
    fontWeight: 600
    lineHeight: 31.5px
  body:
    fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica
      Neue", Ubuntu, Arial, "Noto Sans", sans-serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22.5px
---

## Overview
White product-launch directory with compact icon-led rows, blue launch controls and a secondary sponsor sidebar. Captured October 6, 2026. Counts and listings are a dated snapshot, not verified product claims.

## 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 Geist at 21px, weight 600, with 31.5px line height. Supporting text sample uses Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Arial, "Noto Sans", sans-serif at 15px with 22.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
Use a broad central listing column with a slim sponsor/trending rail on desktop. Stack dated groups beneath a small welcome panel and a lightweight navigation row. On mobile, expose the list as the primary column and collapse navigation to a menu.

## 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
Pair square rounded product logos with bold names, smaller descriptions and tiny category tags. Align votes at the far edge; use rounded blue launch controls and very restrained separators.

## 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. Counts and listings are a dated snapshot, not verified product claims.