JevFinder — Homepage Opening Section

---
version: alpha
name: JevFinder — Homepage
colors:
  surface-1: rgb(34, 33, 29)
  surface-2: rgb(163, 161, 153)
  surface-3: rgb(23, 23, 20)
  surface-4: rgb(246, 246, 244)
  heading: rgb(163, 161, 153)
  body: rgb(163, 161, 153)
  primary: rgb(163, 161, 153)
typography:
  heading:
    fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      monospace'
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
  body:
    fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
    fontSize: 11px
    fontWeight: 400
    lineHeight: 15.125px
---

## Overview
Opening-section crop from an authentic browser screenshot; downstream directory imagery is excluded. Dark developer directory with a pink Jev accent, persistent navigation rail and a source-quote panel. Captured October 6, 2026. Opening viewport reference only; the entire large directory is not represented.

## 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 Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace at 12px, weight 500, with 16px line height. Supporting text sample uses Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif at 11px with 15.125px 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 full-width dark workspace frame. A narrow left navigation rail leads into a bordered introduction panel with a title on the left and a quotation on the right. Mobile hides the rail and stacks the quote beneath the intro.

## 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 muted olive-black panels, thin low-contrast borders, rounded tab pills, a white submit button and small pink brand accents. This reference stops before the project-thumbnail grid.

## 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 reference only; the entire large directory is not represented.