---
version: alpha
name: "Streetwear brand template by 8B"
description: "One-page streetwear label site in marker doodles on grid paper, with cobalt, yellow and orange splashes. Free HTML template by 8B, MIT."
colors:
  primary: "#121212"
  neutral: "#e6e6e2"
  surface: "#ffffff"
  on-surface: "#121212"
  secondary: "#4a4a46"
  tertiary: "#2b48e0"
  accent-yellow: "#f8cc2e"
  accent-orange: "#f25c1f"
  frame-grey: "#d2d2cc"
  unused-periwinkle: "#b9c3f3"
typography:
  headline-display:
    fontFamily: Playpen Sans
    fontSize: 88px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Playpen Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.02
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.4
  body-md:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  title-sm:
    fontFamily: Host Grotesk
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.3
  label-md:
    fontFamily: Host Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  button:
    fontFamily: Host Grotesk
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
  script-note:
    fontFamily: Playwrite US Modern
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  pill: 999px
  md: 16px
  lg: 26px
  full: 9999px
spacing:
  gutter: 48px
  section: 132px
  grid-cell: 64px
  nav-height: 72px
  button-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 22px 0 24px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 22px 0 10px
  tape-label:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    padding: 7px 14px 8px
  question-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.title-sm}"
    rounded: "{rounded.md}"
    height: 68px
  drop-row-next:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.title-sm}"
    height: 92px
  hoodie-item-active:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
  menu-sheet:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
    typography: "{typography.headline-display}"
---

# Scrawl: streetwear brand template

## Overview

Scrawl is a one-page site for a small clothing label that sells limited drops and credits the artists behind each print. The idea is paper and marker: an off-white page with a faint drawn grid, stickers with ragged edges, taped captions, and hand-drawn underlines, arrows and rings. It should feel like a sketchbook pinned to a studio wall, loud but friendly. It suits screen-print studios, artist collectives and skate or music labels, and the demo brand, dates and artists are invented.

## Colors

One near-black ink, one paper ground and three bright marker colours, each with a fixed job.

- **Primary (#121212):** text, the dark buttons, outlines, table rules and the grid lines (drawn at 6 percent).
- **Neutral (#e6e6e2):** the paper behind everything and the nav bar once you scroll (92 percent opaque).
- **Surface (#ffffff):** taped strips, question cards, sticker borders, and text on dark buttons and on cobalt.
- **Secondary (#4a4a46):** quiet text: drop details, answers, contact labels, the copyright line.
- **Tertiary, cobalt (#2b48e0):** the phone menu sheet, the questions splash, the fourth step number and the focus outline.
- **Accent yellow (#f8cc2e):** button hover blobs, the next drop row and its highlighter, the active hoodie item, step two.
- **Accent orange (#f25c1f):** marker underlines, hoodie pins and rings, the fund splash, step three.
- **Frame grey (#d2d2cc):** the hoodie photo ground and the paper note in the fund section.
- **#b9c3f3:** declared as a variable but no rule uses it. Do not rely on it.

## Typography

Playpen Sans is the voice: heavy, uppercase, rounded and slightly wobbly, used for the wordmark, section headings (weight 800, tight 0.9 line height, minus 0.01em tracking) and for step and item numbers (weight 700). The first headline and the crew and hoodie headings use `clamp()` from 44px to 88px; the fund, drops and questions headings are capped smaller, at 72px, 62px and 58px. Host Grotesk carries everything functional at weights 400 to 600: body at 16px, lead text 18 to 21px, buttons at 15px semibold, small labels at 13px. Playwrite US Modern, a handwritten script, appears only once, for the short tilted line under the first headline. Display lines are tilted a few degrees. Never set body text in the display face or add a fourth family.

## Layout

The page is full width with no centred container: sections use a fluid gutter of 16px to 48px (`3.2vw`) and vertical padding of 72px to 132px. A fixed 64px grid is drawn behind the page. The first screen puts the headline and two buttons beside the start of a four-step strip. The crew wall is an absolutely placed collage on desktop; the drop calendar is a five-column ruled list; the questions and fund sections are two-column splits. Below 900px every multi-column layout becomes one column, the crew wall becomes a two-column grid with every second item dropped 28px, drop rows regroup into date, name and action, and the nav links collapse into a menu button that opens a full-screen cobalt sheet.

## Elevation & Depth

Depth comes from layering and tilt, not from shadows. Stickers overlap, rotate and sit above tape captions; colour splashes sit behind headings; the hoodie photo is clipped inside a rounded frame. The only soft shadow is a long, low one under the taped crew captions. A 4px yellow ring doubles as a focus highlight on the cobalt splash.

## Shapes

Pills (999px) for buttons, badges, the nav CTA and the skip link; circles for numbers, icon buttons and pins. Cards are softly rounded: 16px for question cards and hoodie list items, 26px for the hoodie photo frame. Photos in stickers and notes are clipped to irregular polygons so edges look torn, and tape strips are clipped to slightly uneven rectangles. Underlines, arrows, rings and the hover blobs are SVG or CSS shapes, not images.

## Components

- **button-primary:** black pill, white text, 48px high; on hover a yellow blob grows from the right and the text turns black.
- **button-secondary:** outlined pill with a small circled icon on the left; the blob grows from the left.
- **tape-label:** white strip with torn edges holding crew names, contact lines and drop details, tilted a couple of degrees.
- **question-card:** white details element with a circular plus button that turns into a cross when open.
- **drop-row-next:** the coming drop is the only yellow row; the others are ruled with 1.5px black lines.
- **hoodie-item-active:** the numbered list beside the hoodie photo; the current item fills yellow and tilts.
- **menu-sheet:** the phone navigation, a cobalt sheet with 48px links.

## Motion

The page loads GSAP and ScrollTrigger (3.13.0) and Lenis for smooth scrolling. The one idea is things being slapped, drawn and dealt onto paper while you scroll.

- Navigation: hides when you scroll down past about 140px and returns on scroll up; the menu sheet slides down on phones.
- Process: on load the intro lines and the steps rise and fade in (CSS keyframes); then the stage pins and the strip slides sideways through four steps while a dotted line is revealed and each photo straightens as it arrives.
- Crew wall: six stickers start pulled toward the middle at odd angles and scale up from 0.8 as they are dealt out; the underline under the heading draws itself.
- Hoodie: the stage pins for several screens while the photo zooms and pans to each numbered detail, a ring draws around it and the list item lights up.
- Fund: photos land over-scaled and settle with a back ease; the paper note swings to its resting tilt.
- Drops: a yellow highlighter wipes out and back in on the row that matches the scroll position.
- Questions: the splash lands with a slap and its arrow draws; the questions are native `details` and work without JavaScript.
- Contact: the oversized "Say hi" shrinks into place while tape strips swing in from both sides and the photo slides up.

Hover effects use springy cubic-bezier easing for blobs and icons. With reduced motion, Lenis, the load-in, the pinned scenes and the scroll animations are switched off and the page reads in full; the nav bar still hides on scroll down, and the hover transitions stay. Keep the scene hooks listed in AGENTS.md, and set `--len` on the contact heading to its character count.

## Do's and Don'ts

- Do keep the page in three inks: black, paper and the marker colours, one job each.
- Do tilt headings, stickers and tape by a few degrees.
- Do keep headings uppercase in Playpen Sans and everything else in Host Grotesk.
- Do keep pills and circles for controls and torn edges for images.
- Do draw new underlines and arrows as simple round-capped strokes.
- Don't add drop shadows, gradients or glass effects.
- Don't put straight, perfectly square photos on the page; clip or tilt them.
- Don't use the script face for more than a short note.
- Don't use stock icon sets; keep icons as plain 2px rounded strokes.
- Don't add motion that bolts onto sections without their own idea.