# VCASS — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.vcass.vic.edu.au/
Captured: 2026-11-10
CSS measured: 2026-11-10T07:13:49.972Z at 1440×1000 — https://vcass.vic.edu.au/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website presents a bold, highly typographic aesthetic that relies on large, condensed uppercase fonts and high-contrast color blocking. The primary visual language is driven by a dark base theme (#1F1E1D) punctuated by vibrant orange and soft cream sections. Photography is used heavily across hero videos and square, sharply-cornered cards. Navigation and primary actions use distinct pill-shaped containers, contrasting with the otherwise sharp, rectilinear grid layout. Motion plays a significant role in revealing content as users scroll.

## Classification

- Industry: education
- Site type: Landing, Other
- Business model: Agency
- Styles: bold, typographic, photographic, geometric, high-contrast-color-blocking
- Platform: WordPress
- Technology: Next.js

## Typography

- Display: fontWaslsheimCondensed — weight 800; size 129.4px; line-height 103.5px; tracking -3.9px; uppercase (100% role confidence, computed values)
- Heading: fontWaslsheimCondensed — weight 800; size 92.6px; line-height 83.3px; tracking -2.8px; uppercase (95% role confidence, computed values)
- Body: fontWaslsheim — weight 400; size 15.3px; line-height 23px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #1F1E1D: color-1: computed rgb(31, 30, 29); AI role: #1F1E1D dark grey used as the primary background for the hero, 'Beyond the stage', and footer sections. (100% role confidence, computed values)
- Text — text #E6E5DD: color-6: computed rgb(230, 229, 221); AI role: #E6E5DD light cream used for primary text on dark backgrounds. (100% role confidence, computed values)
- Surface — surface #FFBC5E: color-3: computed rgb(255, 188, 94); AI role: #FFBC5E vibrant orange used as the background color for the 'WHATS ON' section. (95% role confidence, computed values)
- Surface — surface #FFF2E0: color-5: computed rgb(255, 242, 224); AI role: #FFF2E0 pale cream used as the background color for the 'LATEST NEWS' section. (95% role confidence, computed values)
- Text — text #854000: color-11: computed rgb(133, 64, 0); AI role: #854000 dark brown used for headings and text on the orange and cream surface backgrounds. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "800",
    "size": "50px",
    "lineHeight": "45px",
    "letterSpacing": "-1.5px",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "h3",
        "text": "2026 JUNIOR SOLOS",
        "top": 3573,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "LIFE IS A (HIGH SCHOOL) MUSICAL",
        "top": 3573,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "2026 YEAR 11 CREATIVE PROJECT",
        "top": 3573,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "800",
    "size": "92.6px",
    "lineHeight": "83.3px",
    "letterSpacing": "-2.8px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Beyond the stage",
        "top": 1189,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "and studio, our",
        "top": 1189,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "single campus fosters a vibrant community",
        "top": 1273,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "700",
    "size": "40.9px",
    "lineHeight": "36.8px",
    "letterSpacing": "-1.2px",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Music",
        "top": 2675,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Dance",
        "top": 2675,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Theatre arts",
        "top": 2675,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "700",
    "size": "15.3px",
    "lineHeight": "16.9px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 22,
    "contexts": [
      {
        "tag": "a",
        "text": "The School",
        "top": 74,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Programs",
        "top": 74,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "What's on",
        "top": 74,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "400",
    "size": "12.7px",
    "lineHeight": "19px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 14,
    "contexts": [
      {
        "tag": "p",
        "text": "15 Sep 2026",
        "top": 3718,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "08 Oct 2026",
        "top": 3718,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "17 Sep 2026",
        "top": 3718,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "fontWaslsheim",
    "fontStack": "fontWaslsheim, \"fontWaslsheim Fallback\"",
    "weight": "400",
    "size": "15.3px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "canvas",
        "text": "Scene",
        "top": 6207,
        "property": "font"
      },
      {
        "tag": "canvas",
        "text": "Scene",
        "top": 7329,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "57 Miles Street, Southbank 3006 03 8644 8644",
        "top": 6662,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "fontWaslsheim",
    "fontStack": "fontWaslsheim, \"fontWaslsheim Fallback\"",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "10.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Victorian College of the Arts Secondary School is accredited under the Department of Education’s CRI",
        "top": 6943,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "ABN: 88 360 552 534",
        "top": 7054,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "400",
    "size": "40.9px",
    "lineHeight": "44.9px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "We believe students should not have to choose between high-level arts training and academic excellen",
        "top": 1831,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "400",
    "size": "27.4px",
    "lineHeight": "30.2px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "VCA Secondary School nurtures the next generation of dancers, musicians, artists and thinkers.",
        "top": 592,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "800",
    "size": "129.4px",
    "lineHeight": "103.5px",
    "letterSpacing": "-3.9px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "EDUCATION",
        "top": 378,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "MEETS",
        "top": 378,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "THE",
        "top": 481,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "fontWaslsheim",
    "fontStack": "fontWaslsheim, \"fontWaslsheim Fallback\"",
    "weight": "400",
    "size": "0px",
    "lineHeight": "0px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "jtb",
        "top": 7222,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "fontWaslsheimCondensed",
    "fontStack": "fontWaslsheimCondensed, \"fontWaslsheimCondensed Fallback\"",
    "weight": "400",
    "size": "10.5px",
    "lineHeight": "15.8px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Privacy policy",
        "top": 7015,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Terms and Conditions",
        "top": 7015,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "fontWaslsheim",
    "fontStack": "fontWaslsheim, \"fontWaslsheim Fallback\"",
    "weight": "400",
    "size": "12.7px",
    "lineHeight": "19px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Web design Melbournejtb",
        "top": 7218,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#1F1E1D",
    "alpha": 1,
    "cssValue": "rgb(31, 30, 29)",
    "count": 19,
    "contexts": [
      {
        "tag": "body",
        "text": "menuThe SchoolAbout VCASS01Principal02Our Story03Wellbeing04Facilities05Leadership06PathwaysPrograms",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "nav",
        "text": "The SchoolAbout VCASSAbout VCASS01PrincipalPrincipal02Our StoryOur Story03WellbeingWellbeing04Facili",
        "top": 41,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 72,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F59D21",
    "alpha": 1,
    "cssValue": "rgb(245, 157, 33)",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Music2026 JUNIOR SOLOS15 Sep 2026",
        "top": 3115,
        "property": "::before-background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 552,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFBC5E",
    "alpha": 1,
    "cssValue": "rgb(255, 188, 94)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "EDUCATION MEETS THE ARTS VCA Secondary School nurtures the next generation of dancers, musicians, ar",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2076,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "Whats OnAll performances & eventsMusic2026 JUNIOR SOLOS15 Sep 2026Theatre ArtsLIFE IS A (HIGH SCHOOL",
        "top": 2865,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 2,
    "contexts": [
      {
        "tag": "canvas",
        "text": "Scene",
        "top": 6207,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFF2E0",
    "alpha": 1,
    "cssValue": "rgb(255, 242, 224)",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Our approach",
        "top": 2072,
        "property": "::before-background"
      },
      {
        "tag": "section",
        "text": "Latest newsAll NewsVICTORIAN YOUTH ARTS PRECINCT04 Nov 2026VCASS Mural16 Sep 2026MusicART MUSIC AWAR",
        "top": 5063,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#E6E5DD",
    "alpha": 1,
    "cssValue": "rgb(230, 229, 221)",
    "count": 91,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 74,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 76,
        "property": "svg-stroke"
      },
      {
        "tag": "a",
        "text": "The School",
        "top": 74,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EB8900",
    "alpha": 1,
    "cssValue": "rgb(235, 137, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "Music2026 JUNIOR SOLOS15 Sep 2026Theatre ArtsLIFE IS A (HIGH SCHOOL) MUSICAL08 Oct 2026Dance2026 YEA",
        "top": 3069,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "15 Sep 2026",
        "top": 3694,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3812,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFDEAD",
    "alpha": 1,
    "cssValue": "rgb(255, 222, 173)",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 2992,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "VICTORIAN YOUTH ARTS PRECINCT04 Nov 2026VCASS Mural16 Sep 2026MusicART MUSIC AWARDS 202627 Aug 20262",
        "top": 5268,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "04 Nov 2026",
        "top": 5937,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#A8A7A3",
    "alpha": 1,
    "cssValue": "rgb(168, 167, 163)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Music",
        "top": 2323,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#854000",
    "alpha": 1,
    "cssValue": "rgb(133, 64, 0)",
    "count": 21,
    "contexts": [
      {
        "tag": "h2",
        "text": "Whats On",
        "top": 2995,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "2026 JUNIOR SOLOS",
        "top": 3573,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "15 Sep 2026",
        "top": 3718,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#363633",
    "alpha": 1,
    "cssValue": "rgb(54, 54, 51)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 60,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Auditions & enrolment",
        "top": 58,
        "property": "::before-background"
      },
      {
        "tag": "nav",
        "text": "Policy PageContact us",
        "top": 6299,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#4D2C00",
    "alpha": 1,
    "cssValue": "rgb(77, 44, 0)",
    "count": 20,
    "contexts": [
      {
        "tag": "span",
        "text": "Our approach",
        "top": 2088,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2085,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 2085,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#DBDAD4",
    "alpha": 1,
    "cssValue": "rgb(219, 218, 212)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 62,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#00606B",
    "alpha": 1,
    "cssValue": "rgb(0, 96, 107)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Dance",
        "top": 3491,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#9DF5F5",
    "alpha": 1,
    "cssValue": "rgb(157, 245, 245)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Dance",
        "top": 3491,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#851200",
    "alpha": 1,
    "cssValue": "rgb(133, 18, 0)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Music",
        "top": 3491,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FF9966",
    "alpha": 1,
    "cssValue": "rgb(255, 153, 102)",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Music",
        "top": 3491,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#FAF9F2",
    "alpha": 1,
    "cssValue": "rgb(250, 249, 242)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 76,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 76,
        "property": "::after-background"
      },
      {
        "tag": "span",
        "text": "Auditions & enrolment",
        "top": 75,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#820032",
    "alpha": 1,
    "cssValue": "rgb(130, 0, 50)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Theatre Arts",
        "top": 3491,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FA8787",
    "alpha": 1,
    "cssValue": "rgb(250, 135, 135)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Theatre Arts",
        "top": 3491,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#123293",
    "alpha": 1,
    "cssValue": "rgb(18, 50, 147)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Visual Arts",
        "top": 5690,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#7AD4FF",
    "alpha": 1,
    "cssValue": "rgb(122, 212, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Visual Arts",
        "top": 5690,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous macro-spacing between distinct horizontal sections, contrasting with tightly packed typography and card grids.
- Corner style: Dual approach: severe sharp corners (0px radius) for media, cards, and text blocks, paired with fully rounded pill shapes for interactive elements.
- Radius: 0px for structural containers and images; maximum border-radius yielding perfect pill shapes for navigation, buttons, and category badges.
- Borders: Borders are largely absent in favor of color blocking; thin, colored border lines are used sparingly as dividers in the event listings.
- Buttons: Pill-shaped, solid fill, often featuring condensed uppercase typography and accompanied by a directional arrow icon.
- Content width: Wide, full-bleed backgrounds with content generally constrained to a wide central column, though text frequently spans the full available width.
- Density: Low overall density due to massive typographic scaling and large imagery, forcing users to scroll to consume discrete pieces of information.
- Evidence: Observations derived from the visual contrast of pill-shaped nav/buttons against square images, massive font sizes (up to 129px), and edge-to-edge color blocking.

## Sections

Gallery section count: 8. Each entry corresponds to one gallery capture.

1. **Navbar — VCASS Navbar** (Home)
   A slim dark bar keeps the logo, four key links and a rounded enrolment button in one row, so the next step is obvious.
   Capture: 1440×125px; page bounds 0–125px of 7329px; source section ID: `25666ab3-d8ce-485c-a82e-e4c208270c7b`; image: https://media.designdetails.io/library/af1a466caf907db72d88ec38d7a206b78d364807a2e738f282a661b293ef6dd7/25666ab3-d8ce-485c-a82e-e4c208270c7b.webp
   SECTION.md v3.2: `25666ab3-d8ce-485c-a82e-e4c208270c7b` (deterministic evidence; editorial review pending)
2. **Features — Four art disciplines photo tiles** (Home)
   Equal square photos with short bold labels let visitors scan the four programs quickly and recognise each art form by its image.
   Capture: 1440×541px; page bounds 2323–2864px of 7329px; source section ID: `a5a0a8d2-f62d-4806-8277-913593da887f`; image: https://media.designdetails.io/library/03c2672838aba76d072fe604c9ae2de93f44c6df80e27458db9453ea91aa343d/a5a0a8d2-f62d-4806-8277-913593da887f.webp
   SECTION.md v3.2: `a5a0a8d2-f62d-4806-8277-913593da887f` (deterministic evidence; editorial review pending)
3. **Editorial — Events carousel on orange** (Home)
   A bright orange band with poster cards, colour-coded category tags and dates makes upcoming performances easy to scan and browse sideways.
   Capture: 1440×1099px; page bounds 2864–3963px of 7329px; source section ID: `c611cb0a-7f0a-46b4-a75e-c0b8e94697a9`; image: https://media.designdetails.io/library/5f3bc610b3745d719e541b428b39c1062f099d850b55f32bc46631ad2ecb1c37/c611cb0a-7f0a-46b4-a75e-c0b8e94697a9.webp
   SECTION.md v3.2: `c611cb0a-7f0a-46b4-a75e-c0b8e94697a9` (deterministic evidence; editorial review pending)
4. **Editorial — Latest news card carousel** (Home)
   Large images, bold orange headlines and small dates on a cream background keep news easy to scan and consistent with the events band above.
   Capture: 1440×1143px; page bounds 5063–6206px of 7329px; source section ID: `72b098fc-4106-4c96-a87b-65926785347b`; image: https://media.designdetails.io/library/1bf28dcf75fe647170765347b9dd81c35e26c03fbbe4d0ba4c4a511c515e0a6b/72b098fc-4106-4c96-a87b-65926785347b.webp
   SECTION.md v3.2: `72b098fc-4106-4c96-a87b-65926785347b` (deterministic evidence; editorial review pending)
5. **Hero — Education Meets the Arts Hero** (Home)
   AI suggestion (98% confidence): Complete opening hero with full-width student imagery, prominent headline, supporting copy, and integrated primary navigation.
   Capture: 1440×963px; page bounds 42–1005px of 7329px; source section ID: `ae433ca3-17d3-4dc8-b223-53a7fa7576cf`; image: https://media.designdetails.io/library/24e31525d64de1678cf79d515706356d0f71d36f2cc6a01478f51d63cad8c379/ae433ca3-17d3-4dc8-b223-53a7fa7576cf.webp
   SECTION.md v3.2: `ae433ca3-17d3-4dc8-b223-53a7fa7576cf` (deterministic evidence; editorial review pending)
6. **Feature Grid — Campus Community and Arts Programs** (Home)
   AI suggestion (96% confidence): Self-contained dark section combining a distinctive community statement, supporting copy and CTA, followed by a complete four-item visual grid for Music, Dance, Theatre Arts, and Visual Arts.
   Capture: 1440×1869px; page bounds 1005–2874px of 7329px; source section ID: `4a87112f-6a7f-4cf8-800b-5f45b1d7d429`; image: https://media.designdetails.io/library/afe072b1e8b0ef34410008c183d743093c8b491907be8f1988378c3402c7df3b/4a87112f-6a7f-4cf8-800b-5f45b1d7d429.webp
   SECTION.md v3.2: `4a87112f-6a7f-4cf8-800b-5f45b1d7d429` (deterministic evidence; editorial review pending)
7. **Gallery — VCASS in Action Photo Collage** (Home)
   AI suggestion (97% confidence): Complete, self-contained gallery section combining an asymmetrical activity-photo collage, prominent title, and school CTA on a dark background.
   Capture: 1440×1104px; page bounds 3965–5069px of 7329px; source section ID: `3f53290e-15c8-4e8d-8d8a-00e171a25e4b`; image: https://media.designdetails.io/library/03f31a1804a30566223e63a34476cd98debee78d51ac4c2beb39e516a1860591/3f53290e-15c8-4e8d-8d8a-00e171a25e4b.webp
   SECTION.md v3.2: `3f53290e-15c8-4e8d-8d8a-00e171a25e4b` (deterministic evidence; editorial review pending)
8. **Footer — Victorian College of the Arts Secondary School Footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer with policy/contact links, school identity, address, social icons, login CTA, accreditation details, government mark, and a distinctive oversized multicolor emblem.
   Capture: 1440×1113px; page bounds 6216–7329px of 7329px; source section ID: `20d9c5b1-348e-44a1-982d-c26f83c9d969`; image: https://media.designdetails.io/library/d4a60ba7651f41101140395b4816966d6205e564f483517171c009bc18fe56a9/20d9c5b1-348e-44a1-982d-c26f83c9d969.webp
   SECTION.md v3.2: `20d9c5b1-348e-44a1-982d-c26f83c9d969` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/1e9968746ac41da999e175faa07a0116911a2017695d10188163d81432a4f3c5/desktop_full-1d7e81c9-2026-11-10T07-13-49-985Z.webp
- Mobile screenshot: https://media.designdetails.io/library/e8e570297d5ed2fab91ad0628f764a7982019bc676b3d487f1b1dbe48e019c59/mobile_full-1d7e81c9-2026-11-10T07-14-17-852Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/6c346d608def3fd9e2e424c5c5e562ca19ef36ed3c211fabfb42da2811bd0aa3/motion-1794298439620.mp4
- Video poster: https://media.designdetails.io/library/ee3a66ad74b0d8ba1cc069f46ebaf1ba13171dbfdaddad6621ade1f35f0ee737/motion-poster-1794298439620.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Feature Card
- Editorial Card
- Primary Button
- Badge
- Footer
- Floating Pill Navigation
- Inline Image Typography
- Masonry Media Grid

## Quality rubric

Overall: 55.95/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: VCASS's website is a well-crafted but conventionally structured institutional site. Its strongest asset is typographic confidence: oversized condensed display type anchors the hero and mid-page statements, and the inline-image-within-headline trick is a specific, memorable idea rather than a generic effect. Color is handled with purpose — alternating dark/orange/cream sections plus a small discipline-based color-coding system for event badges — though the palette itself stays within familiar warm-editorial territory. Layout is systematic and repeatable across sections, with a floating pill nav deliberately contrasting against sharp-cornered photography and cards, and the rotating geometric footer graphic is a nice bespoke flourish to close the page. However, the experience leans heavily on a single scroll-reveal motion pattern (fade-up-and-translate) applied uniformly to program cards, event cards, the media grid, and news cards, which reads as consistent rather than inventive, and the overall assembly of components — pill nav, video hero, card carousel, masonry gallery, three-up news grid, dark footer with socials and login — closely tracks a widely used contemporary institutional template. Content integration is a genuine strength: real event dates, discipline-specific photography, and functional footer/legal details give the page substance rather than placeholder feel. Taken together, this is solid, purposeful execution of a known idiom with a few original flourishes, landing it at competent rather than good or strong — it would need more varied motion choreography and a more consistently distinctive structural system to climb further.

- Typography (15%): 64 — The type system is built on a single condensed display face (fontWaslsheimCondensed) pushed to extreme sizes (129.4px, 92.6px) with tight negative tracking, giving the hero and mid-page statements real visual weight. Hierarchy from 129px display down to 12.7px date metadata is consistent and legible. The inline-image-in-headline technique ('Beyond the stage [img] and studio...') is a genuinely distinctive typographic device. However the system is narrow — essentially one family doing all the work, with body copy reduced to small, understated regular weights that read as an afterthought next to the oversized display type.
- Color (10%): 60 — The palette uses confident large-scale color blocking: dark charcoal (#1F1E1D), vibrant orange (#FFBC5E), and pale cream (#FFF2E0) sections alternate down the page, each paired with a legible on-surface text color (cream-on-dark, brown-on-light). A secondary coding system assigns distinct hue pairs to program categories (teal/cyan for Dance, red/coral for Music, pink for Theatre, blue for Visual Arts), which is a thoughtful organizational device. The overall approach is a competent, high-contrast editorial palette, but it stays within familiar 'warm earth tone plus dark neutral' territory common to arts-institution branding rather than demonstrating a more unexpected or tightly controlled chromatic idea.
- Layout (20%): 62 — The page is organized as a clear sequence of full-bleed, alternating-background sections (dark hero, dark statement block, orange events, dark masonry gallery, cream news, dark footer), each with its own internal grid — four-up program cards, horizontal event carousel, offset masonry gallery, three-up news cards. A floating pill navigation bar persists across the scroll and contrasts intentionally with the sharp-cornered imagery below it. This is a coherent, repeatable system rather than a one-off hero trick. The masonry gallery and card grids are competently built but rely on familiar card/carousel conventions, and density stays uniformly low throughout, giving a fairly one-note rhythm of 'big headline, row of cards, big headline, row of cards.'
- Motion (20%): 48 — Motion is limited to a single repeated idiom applied uniformly to every content section: blocks translate upward and fade from transparent to opaque as they enter the viewport (program cards, event cards, media grid, news cards). This is one of the most common scroll-reveal patterns on the web and is applied almost identically six times in a row, which reads as consistent but not inventive. The one differentiated moment is the footer's continuously rotating geometric graphic, which adds some visual interest, alongside a looping hero background video. No evidence of hover micro-interactions, cursor-driven effects, choreographed sequencing, or scroll-linked transformations beyond basic fade/translate was observed.
- Originality (25%): 47 — Individual details show some invention — the inline-image headline technique, the rotating footer mandala-like graphic, and category-coded badge colors are specific, hard-to-template ideas. But the overall assembly (floating pill nav, full-bleed video hero, square program cards, horizontal event carousel, masonry gallery, three-up news grid, dark footer with social icons and login CTA) closely follows a widely recognizable contemporary agency/institutional template formula seen across many comparable sites. The pill-vs-sharp-corner contrast is a nice but increasingly common device, not a novel system in itself. Nothing here reaches the level of a distinctive, site-specific structural or interactive idea that couldn't be substituted into another arts-school site with different assets.
- Content (10%): 66 — Content feels purpose-built rather than placeholder: real event titles and dates (2026 Junior Solos, Life is a High School Musical), real program names tied to real photography of students actually performing/practicing, genuine news items (Victorian Youth Arts Precinct, VCASS Mural, Art Music Awards), and functional footer details (address, phone, ABN, CRICOS accreditation, policy links). Imagery is specific and discipline-appropriate (violin player, dancer, masked theatre performer, student at easel) rather than generic stock. Copy tone matches an arts-secondary-school audience consistently across sections.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Oversized bold headlines with small emoji-like photo inserts tucked into the text give a school site real energy, while a dark band breaks into a warm orange whats-on section. Real student and performance photos throughout, and rounded program icons for music, dance, theatre and visual arts, make scanning what's offered quick and the place feel alive.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.