AI Testing Tools — Homepage Opening Section

---
version: alpha
name: AI Testing Tools — Opening Section
colors:
  canvas: '#FFFFFF'
  heading: rgb(148, 60, 220)
  supporting: rgb(61, 61, 61)
  primary: rgb(148, 60, 220)
typography:
  heading:
    fontFamily: '"Work Sans", Helvetica, serif'
    fontSize: 65.6px
    fontWeight: 700
    lineHeight: 72.16px
  body:
    fontFamily: '"Work Sans", Helvetica, sans-serif'
    fontSize: 17.6px
    lineHeight: 28.16px
---

## Overview
White and purple directory introduction with a centered heading, compact navigation and pill-like category tabs. Opening section only: broken downstream tool thumbnails and a lower cookie notice are outside this crop. The cookie control was not accepted. No claim is made that the directory loaded fully.

## Colors
Keep the canvas white and the principal accent confined to branding, heading emphasis and actions. Use the computed text tokens above; image colors are not interface tokens.

## Typography
The measured desktop heading uses "Work Sans", Helvetica, serif at 65.6px with 72.16px leading. Supporting sample is 17.6px. Preserve the strong headline-to-description contrast and allow natural wrapping.

## Layout
Center the heading and supporting sentence below a spacious navigation row. A wide horizontal category group sits below on desktop; mobile turns it into a tall stacked group. The submitted image covers only this introduction, not the tool results.

## Elevation & Depth
Use subtle depth only where shown in the reference; avoid heavy card shadows. Exact shadow values were not measured.

## Shapes
Use softly rounded controls against simple rectangular content regions. Keep hit targets comfortably sized and allow text-driven heights.

## Components
Use a purple filled primary button, outlined secondary action, purple category labels and a softly outlined tab container. Keep the white canvas spacious.

## Do’s and Don’ts
Keep the intro concise, with one primary next step. Do not reproduce broken downstream content or assume search and payment behavior from this still image. Mobile evidence covers only the opening region; no accessibility audit or breakpoint sweep was performed. Opening section only: broken downstream tool thumbnails and a lower cookie notice are outside this crop. The cookie control was not accepted. No claim is made that the directory loaded fully.