jev.directory — Homepage

---
version: alpha
name: jev.directory — Homepage
colors:
  surface-1: rgb(255, 255, 255)
  surface-2: oklab(0 0 0 / 0.04)
  surface-3: oklab(0.769006 0.0640422 0.176756 / 0.08)
  surface-4: oklab(0.622989 -0.0378532 -0.210606 / 0.08)
  heading: lab(15.204 0 -0.00000596046)
  body: rgb(104, 104, 104)
  primary: lab(15.204 0 -0.00000596046)
typography:
  heading:
    fontFamily: Inter, "Inter Fallback"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
  body:
    fontFamily: Inter, "Inter Fallback"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
---

## Overview
Minimal white developer directory with a left-aligned introduction, magenta submission action and two-column code-preview cards. Captured October 6, 2026. Code snippets and counts are captured content. Copy, voting and signed-in submission behavior were not tested.

## 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 Inter, "Inter Fallback" at 36px, weight 600, with 40px line height. Supporting text sample uses Inter, "Inter Fallback" at 16px with 24px 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
Keep the content constrained and centered, with a left-aligned hero above a two-column system grid. Use a short sorting row between hero and grid. On narrow screens, stack cards and keep the introduction left aligned.

## 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 lightly outlined rectangular cards with concise titles, muted descriptions, code previews, owner metadata, tiny colored tags and subdued engagement counters. Magenta is reserved for the main submission action.

## 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. Code snippets and counts are captured content. Copy, voting and signed-in submission behavior were not tested.