---
version: alpha
name: "Modeling agency template by 8B"
description: "A one-page modeling agency website in light grey, black and a single scout-yellow, with an open-call screen, a casting board and pill buttons that fill on hover. Free HTML template by 8B, MIT."
colors:
  primary: "#121212"
  secondary: "#575757"
  tertiary: "#f6cc48"
  neutral: "#ebebeb"
  surface: "#ffffff"
  on-surface: "#121212"
  accent-yellow-pale: "#fae49c"
  caption-on-dark: "#a6a6a6"
  photo-placeholder: "#d6d6d6"
typography:
  headline-display:
    fontFamily: Pliant
    fontSize: 190px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Pliant
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Pliant
    fontSize: 58px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Pliant
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: Pliant
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Pliant
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.06em
  button:
    fontFamily: Pliant
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.04em
  wordmark:
    fontFamily: Pliant
    fontSize: 19px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  sm: 8px
  md: 12px
  full: 999px
spacing:
  gutter: 34px
  section: 150px
  photo-gap: 8px
  row-gap: 24px
  split-gap: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 15px 18px 15px 22px
  button-accent:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 17px 20px 17px 24px
  nav-pill:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 14px
  nav-panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 9px 12px 9px 18px
  card-photo:
    backgroundColor: "{colors.photo-placeholder}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
  badge-tag:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 14px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    height: 50px
  form-panel:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 36px
---

# Spotted: modeling agency template

## Overview

Spotted is a one-page website for a modeling agency that scouts new faces in person and runs a weekly open call. The one idea is the scout's spot: a yellow dot and a yellow glow that mark who was found, where, and what happens next. The rest stays light grey and black, so the faces carry the page. It suits a young, direct agency that wants applicants to apply without a detour. The feeling is street casting, not a glossy catalogue. Names, prices and addresses are invented demo content.

## Colors

- **Primary (#121212):** text, the dark buttons, and the full black bands: the open-call screen, the contact-sheet section, the cities section, the phone menu and the footer.
- **Secondary (#575757):** the paragraph beside each section heading, meta lines under names, step numbers, answers in the questions list and the form status line. Board names also use it until their portrait is reached.
- **Tertiary (#f6cc48):** the scout yellow. Dots, the halo behind the open-call photo, yellow buttons and pills, city tags, the checker flag, the plus icon on the questions and the whole "No fees" panel.
- **Neutral (#ebebeb):** the page ground, and the ground of the board, found places, shows, questions and contact sections.
- **Surface (#ffffff):** the nav panel, the method section, the contact sheet, the form panel and the text on dark buttons.
- **Accent yellow pale (#fae49c):** the lighter squares of the checker flag above the form.
- **Caption on dark (#a6a6a6):** muted labels and hairlines on black: open-call labels, contact sheet text, city rules, footer headings.
- **Photo placeholder (#d6d6d6):** fill behind photos while they load.

## Typography

One typeface does everything: **Pliant**, a variable font loaded from Google Fonts with weights 400 to 600 and widths 100% to 125%. Headings sit at regular weight in 125% extended width, a wide poster look without a second display face. The question summaries and the crossed-out charges run at 112%. Body text and labels stay at normal width.

- **Display and headings:** weight 400, line height about 1.05, tracking -0.01em. Section headings use `headline-md` (32px to 58px), the "No fees" title scales up to 190px (`headline-display`), built on `headline-lg` (40px to 72px). City names scale from 48px to 150px.
- **Body:** 16px, weight 400, line height 1.55.
- **Labels:** 12px, weight 500, uppercase, 0.06em tracking, used for metadata, form labels and step numbers.
- **Buttons:** weight 500, uppercase, 0.04em tracking, 13px to 14px.
- **Wordmark:** weight 600, 125% width in the footer, sized so the whole word fills the page width.

## Layout

Full-width bands sit one under another, each with a gutter of 16px to 34px and vertical padding of 80px to 150px. The section header pattern repeats: a large heading on the left, a short paragraph in a 260px to 380px column on the right, bottom aligned. The board is two columns, names left and portraits right (a sticky frame when motion is on). Photo grids use an 8px gap.

At 900px and below, two-column headers stack, the board portrait frame moves above the names when motion is on, rows become a dot, a text column and a 96px thumbnail, the nav collapses to a wordmark and a Menu pill, and the phone menu opens as a black overlay with large 125% width links.

## Elevation & Depth

Depth comes from colour bands (grey, white, black, yellow), a large soft yellow radial glow, photos stacked over one another with growing circular reveals, and sticky or pinned frames. The only shadow is a pale yellow ring (a 7px spread at 35% yellow) around the travelling spot in the method section.

## Shapes

Buttons, pills, tags and badges are fully rounded (999px). Photos, cards and the form panel use 12px corners, except the square frames on the contact sheet; the nav panel and input fields use 8px; the contact sheet frame uses 4px. The open-call photo and the dots are circles; board portraits and found-place photos are cropped 4:5. Lines are 1px hairlines. The checker flag is CSS squares in yellow and pale yellow. The strike through each crossed-out charge is a 2px line.

## Components

- **button-primary:** black pill with white uppercase text and an arrow. On hover a yellow circle grows from the right and the text turns black.
- **button-accent:** the main call to action, a larger yellow pill with black text; on hover a black circle fills it and the text turns white.
- **nav-pill:** small yellow pill for Menu, Close and the social links, which fill black on hover.
- **nav-panel:** white rounded panel with the wordmark and links, a hairline to the social pills.
- **card-photo:** photo with a dark shade and white captions.
- **badge-tag:** yellow city tag in the cities section.
- **input-field:** white, 1px black border, at least 50px high, uppercase label above.
- **form-panel:** white application panel, two columns on wide screens.

## Motion

The page loads GSAP, ScrollTrigger and SplitText from jsDelivr, and Lenis for smooth scrolling. The one idea: the spot develops, dots pop in and grey photos turn to colour.

- **Opening:** the copy blocks fade up in turn; the round photo opens from about half scale and the glow grows, then breathes in a loop.
- **Board (wide screens):** the six portraits stack in a sticky frame. As each name is reached it turns black, a yellow dot pops in and the name slides right by 0.72em, while its portrait opens over the last through a growing circle.
- **Where we found them:** each hairline draws from the left, its dot pops in with an overshoot, and the photo goes from grey and dim to colour across the lower half of the screen.
- **Method:** a diagonal line draws down with scroll while a yellow spot travels along it; each of four steps goes from 20% to full opacity as the spot reaches it.
- **Test shoots:** the section pins. Nine frames start as a loose pile and are dealt into a 3 by 3 sheet, then a yellow square draws round frame seven and its note fades in.
- **Shows:** the section pins and the five cards slide sideways with scroll, each photo developing to colour near the middle.
- **No fees:** the heading rises line by line, the hairlines draw and each strike draws across its crossed-out charge.
- **Cities:** each city name drifts left or right in alternating directions, while its yellow tag slides in from the far left.
- **Contact:** the checker flag squares unfurl in a diagonal wave.
- **Headings:** section headings, except the cities one, rise line by line from a mask.

With reduced motion on, the entrance animations, scroll scenes and smooth scrolling are off and the page reads in full; the nav still hides on scroll down and the hover fills still run. Keep the scene class names and attributes listed in AGENTS.md.

## Do's and Don'ts

- Do keep yellow as the only accent, and use it for the scout marks: dots, glow, tags, the flag.
- Do set headings in extended width at regular weight, and labels in small uppercase.
- Do keep pill buttons that fill with a growing circle on hover.
- Do keep body text at 4.5:1 contrast; use #575757, not lighter greys, on light grounds.
- Don't add a second typeface, stock icons, gradients other than the soft yellow glow and the dark shade on photo cards, or purple.
- Don't add drop shadows or rounded cards beyond the 12px photo radius.
- Don't invent fees, bookings, shows or contacts.
- Don't remove the Design: 8B footer link unless the site owner asks.
- Don't hard-code new colours in sections; change the variables in `:root` instead.