---
version: alpha
name: "Running race template by 8B"
description: "One-page site for a yearly mountain trail race: black ground, pastel sky tiles, greyscale photos crossed by orange light, lime sticker buttons with hard shadows and a stretched display face. Free HTML template by 8B, MIT."
colors:
  primary: "#c2f47c"
  secondary: "#ff4a14"
  tertiary: "#8e6cf5"
  neutral: "#ececea"
  surface: "#111111"
  on-surface: "#ececea"
  card-dark: "#1d1d1d"
  caption: "#a3a3a3"
  sky-mint: "#c9f2e3"
  sky-peach: "#ffc58c"
  sky-pink: "#f6b5e3"
  night: "#241a4a"
  white: "#ffffff"
typography:
  headline-display:
    fontFamily: TikTok Sans
    fontSize: 136px
    fontWeight: 800
    lineHeight: 0.86
    letterSpacing: -0.012em
    fontVariation: "'wdth' 150"
  headline-lg:
    fontFamily: TikTok Sans
    fontSize: 60px
    fontWeight: 800
    lineHeight: 0.94
    letterSpacing: -0.006em
    fontVariation: "'wdth' 125"
  title-sm:
    fontFamily: TikTok Sans
    fontSize: 22px
    fontWeight: 800
    lineHeight: 1.08
    letterSpacing: 0.004em
    fontVariation: "'wdth' 125"
  label-md:
    fontFamily: TikTok Sans
    fontSize: 15px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: 0.04em
  lead:
    fontFamily: Google Sans
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.003em
  body-md:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  button:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.1
rounded:
  sm: 5px
  md: 14px
  full: 999px
spacing:
  gutter: 18px
  section-padding: 140px
  nav-height: 64px
  control-height: 48px
  section-head-max: 46rem
  stack-gap: 18px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "12px 22px"
    height: 48px
  nav-link:
    textColor: "{colors.on-surface}"
    padding: "0 0.12em 0.06em"
  badge-sticker:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: "7px 12px 8px"
  badge-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    padding: "7px 16px 8px"
  card-sky:
    backgroundColor: "{colors.sky-mint}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "28px"
  card-dark:
    backgroundColor: "{colors.card-dark}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
  card-light:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "60px"
  input-field:
    backgroundColor: "{colors.white}"
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: "12px 14px"
    height: 48px
---

# Solsta

## Overview

Solsta is a one-page site for a yearly mountain trail race with three distances, a ballot and a village finish. Its one idea is that the day is measured by light: pastel sky tiles change colour with an hour value, the headline is "First light to last light", and orange light drifts across black and white photos. The page is loud and friendly, built like stickers on a dark board, for trail runners who also enter, volunteer and read the small print. The race, village, people, fees and times in the demo are invented.

## Colors

All twelve colours are `--color-1` to `--color-12` in `:root`.

- **Surface (#111111):** page ground, top bar, course and footer grounds, the 2px borders and hard shadows, and the text on lime, mint and light tiles.
- **On-surface and neutral (#ececea):** text on black, the light cards (entry board, trail day card, contact cards) and the fog sky.
- **Primary (#c2f47c):** lime for buttons, badges, link underlines, course part numbers, kit boxes, the question plus signs, the focus outline and hover colour.
- **Secondary (#ff4a14):** orange, the "light": the glow over photos, the sweep across a button on hover, the heat sky and the glow behind the contact cards.
- **Tertiary (#8e6cf5):** violet at the ends of the sky gradient and in the snow, wind and storm skies.
- **Sky mint, peach, pink, white (#c9f2e3, #ffc58c, #f6b5e3, #ffffff):** the middle of the sky gradient and the weather skies (mint in clear, snow and wind, peach in clear and heat, pink in wind and storm, white in clear, fog and snow); mint is the base of every sky tile and white is also the field background.
- **Night (#241a4a):** the gradient's last stop and the dark that closes over the contact tile.
- **Card dark (#1d1d1d):** course cards, questions, the quote, photo backing, the current table row and table rules.
- **Caption (#a3a3a3):** labels, course facts, table heads, rules and the quote credit.

## Typography

- **TikTok Sans**, weights 700 to 800 with a width axis from 75% to 150%: every headline, race name, small title, numbered label and table year. Display lines use the widest setting (150%), section headings and small titles 125%, the 15px numbers 100%. All of it is uppercase.
- **Google Sans**, weights 400 to 700: body, buttons, badges, fields and table cells, sentence case.

`headline-display` is the largest size, up to 136px (48px at the small end); each first screen line and each race name is then fitted to its tile from its `--len` character count, so the first screen lines reach 150px. `headline-lg` runs 30px to 60px. `title-sm` runs 15px to 22px for race stats, kit items and dates. `label-md` is the 15px numbering. `lead` is 18px to 22px. Body is 17px, `body-sm` 14px.

## Layout

There is no centred column. Sections run edge to edge inside a gutter of 10px to 18px (1.25vw), with vertical padding of 56px to 140px (9vw). Intro blocks stop at 46rem.

- First screen: one full-height sky tile, a two line headline with the second line pushed right, then a row of times and a paragraph with a button.
- The course is a sideways row of five tiles; races are a three card grid; the crew is a four column grid with lead text, portraits and a quote.
- Kit and editions pair a sticky tile on the left (photo, or sky) with a long list or table.
- Trail day is three columns: photo, text card, photo. Questions are two columns beside a heading.
- At 900px everything stacks to one or two columns and tables become blocks. At 1080px the links give way to a menu button and a full screen black overlay; the top bar is 64px high, 58px below 900px.

## Elevation & Depth

Depth is made by the hard shadow and by layers. `4px 4px 0 #111111` sits under buttons, badges and the menu button; it shows on sky tiles, light cards and photos, and disappears where a control sits on the black ground of the nav and page. On hover a control moves 3px down and right and its shadow drops to 1px. Sticky photo and sky tiles let the list slide past; the race cards overlap during their deal. Sky tiles carry a fine noise grain at 32% multiply. Focus draws a 3px lime outline with a 6px #111111 ring (dark outline and lime ring on light tiles).

## Shapes

- Surfaces and photos use 14px corners; badges, fields and the menu button 5px; buttons and pill badges 999px.
- The logo mark is a three step staircase made by a clip path.
- Photos are greyscale with extra contrast, and a `mix-blend-mode: color` orange glow lies over them.
- The night photo is cut into six equal slices (three columns by two rows, two by three on phones) that grow together.
- Rules are 2px #111111 on light cards, 1px grey or #1d1d1d on black.

## Components

- **button-primary:** lime pill, 2px dark border, 48px high, hard shadow; the gradient behind it holds a thin orange band that sweeps across on hover and leaves the lime.
- **nav-link:** light text, no underline at rest; on hover a lime block fills the link and the text turns dark.
- **badge-sticker and badge-pill:** lime tags, 16px medium, dark border and shadow.
- **card-sky:** a mint tile with a sky gradient and grain; race cards use it.
- **card-dark and card-light:** quiet containers; the dark ones carry questions and course parts, the light ones the ballot, trail day and contact.
- **input-field:** white, 2px dark border, 5px corners, labels in 14px medium above.

## Motion

GSAP 3.13.0, ScrollTrigger and Lenis (lerp 0.08) from jsDelivr. The one idea: light crosses the page and the sky follows the hour.

- **Navigation:** the bar slides up on scroll down and returns on scroll up (0.45s), and stays visible near the top and on focus.
- **Opening:** the two headline lines slide in from opposite sides over 0.95s, the text row lifts, and the sky gradient drifts in a 7s loop.
- **Course:** the section pins while the row slides sideways; each tile sits higher the higher its altitude value, up to 30vh (15vh on phones).
- **Races:** the cards start stacked and slightly turned, then spread into their row.
- **Kit:** the photo pulls back from a 2.1 scale as the ten boxes tick in turn.
- **Night photo:** six slices grow from 0.86 scale, losing their rounded corners, while orange light moves across.
- **Editions:** the row near the middle sets the sky layer (seven kinds), the weather word and the year.
- **Trail day:** both words widen from 75% to 150%.
- **Contact:** the sky hour moves from 0.6 to 0.78 and the glow sinks.
- **Photos and tags:** orange light crosses the crew portraits and trail day photos on scroll; tags land with a small spin; headings lift out of a clip, once.

Reduced motion switches off Lenis, the entrance, the loop and every scene: the course is a plain grid, races, kit boxes and slices sit in their final state. The nav slide and the hover and focus transitions (button 0.18s, link 0.3s, question plus 0.3s) are not switched off.

## Do's and Don'ts

- Do keep lime, orange and black as the only strong colours; pastels appear only inside sky tiles.
- Do keep every photo greyscale, with orange light as the only colour.
- Do keep stickers with a 2px dark border and a hard shadow, never soft shadows.
- Do size display words from their character count, and update `--len` on edits.
- Don't add a third typeface or lowercase headlines.
- Don't use large radii beyond 14px, except pills for buttons.
- Don't bolt on extra scroll effects; the light and the sky are the motion.
- Don't put body text on pastel gradients without #111111.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.