# Shillington — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.shillingtoneducation.com/
Captured: 2026-11-10
CSS measured: 2026-11-10T07:04:05.922Z at 1440×1000 — https://www.shillingtoneducation.com/
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 design exhibits a bold, typographic, and highly editorial visual language characterized by oversized sans-serif typography, stark monochromatic foundations, and vibrant pastel color blocking. The layout relies on a generous, airy spatial rhythm that emphasizes content, utilizing a continuous scrolling marquee to inject movement. Components feature distinct pill-shaped UI elements for actions and badges, juxtaposed against sharp-cornered media, creating an energetic yet structured structure.

## Classification

- Industry: education
- Site type: Portfolio
- Business model: Software, Portfolio, Agency
- Styles: typographic, bold, minimal, editorial, colourful, swiss-modernism
- Platform: WordPress
- Technology: Tailwind CSS

## Typography

- Display: Universal Sans Display — weight 400; size 150px; line-height 142.5px; tracking 0%; Regular (100% role confidence, computed values)
- Heading: Universal Sans Display — weight 400; size 28px; line-height 37.8px; tracking 0.7px; Regular (95% role confidence, computed values)
- Body: Universal Sans Display — weight 400; size 16px; line-height 24px; tracking 0.7px; Regular (100% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) providing the expansive negative space throughout the majority of the page. (100% role confidence, computed values)
- Text — text #000000: color-2: computed rgb(0, 0, 0); AI role: Solid black (#000000) applied consistently across all primary typography for high contrast. (100% role confidence, computed values)
- Primary Action — primary action #CD9FF5: color-4: computed rgb(205, 159, 245); AI role: Lilac purple (#CD9FF5) utilized for the main 'Enrol' call-to-action button and specific section backgrounds. (95% role confidence, computed values)
- Surface — surface #FF97AF: color-5: computed rgb(255, 151, 175); AI role: Bright pink (#FF97AF) heavily used as the backing surface for the 'Motion' course section. (90% role confidence, computed values)
- Surface — surface #09224E: color-3: computed rgb(9, 34, 78); AI role: Deep navy blue (#09224E) used to anchor the 'New Graduates' section, creating structural separation. (90% role confidence, computed values)
- Border — border #DBDBDB: color-10: computed rgb(219, 219, 219); AI role: Light gray (#DBDBDB) serving as borders for outline buttons and input fields. (90% 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": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "0.7px",
    "traits": "Regular",
    "count": 100,
    "contexts": [
      {
        "tag": "a",
        "text": "Enrol",
        "top": 65,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "YOUR FIRST CREATIVE COMMUNITY",
        "top": 1428,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "ENROL NOW",
        "top": 1428,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "28px",
    "lineHeight": "37.8px",
    "letterSpacing": "0.7px",
    "traits": "Regular",
    "count": 36,
    "contexts": [
      {
        "tag": "p",
        "text": "You'll learn to think and work like a graphic designer, not just use the software. You'll graduate w",
        "top": 2112,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Built for Designers. Elevate your existing portfolio with in-demand motion skills. Graduate with a m",
        "top": 2804,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Motion & Audio",
        "top": 3629,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "130px",
    "lineHeight": "117px",
    "letterSpacing": "0%",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Make better.",
        "top": 1493,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Graphic Design",
        "top": 1940,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Motion",
        "top": 2632,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "60px",
    "lineHeight": "60px",
    "letterSpacing": "0%",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "New Graduates",
        "top": 5784,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": null,
    "fontStack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Design Education That Works.",
        "top": 64,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "150px",
    "lineHeight": "142.5px",
    "letterSpacing": "0%",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Design",
        "top": 65,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Education That Works.",
        "top": 208,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Universal Sans Display",
    "fontStack": "\"Universal Sans Display\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "weight": "400",
    "size": "13px",
    "lineHeight": "19.5px",
    "letterSpacing": "0.7px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Skip to primary navigation",
        "top": 0,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 45,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 0,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "",
        "top": 65,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 548,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 201,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 0,
        "property": "border"
      },
      {
        "tag": "path",
        "text": "",
        "top": 83,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#09224E",
    "alpha": 1,
    "cssValue": "rgb(9, 34, 78)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "New GraduatesThese designers have just graduated Shillington and are stepping into the next stage of",
        "top": 5714,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#CD9FF5",
    "alpha": 1,
    "cssValue": "rgb(205, 159, 245)",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Enrol",
        "top": 65,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "For BeginnersGraphic DesignYou'll learn to think and work like a graphic designer, not just use the ",
        "top": 1846,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FF97AF",
    "alpha": 1,
    "cssValue": "rgb(255, 151, 175)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "For DesignersMotionBuilt for Designers. Elevate your existing portfolio with in-demand motion skills",
        "top": 2538,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#360B67",
    "alpha": 1,
    "cssValue": "rgb(54, 11, 103)",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "For Beginners",
        "top": 1916,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#560418",
    "alpha": 1,
    "cssValue": "rgb(86, 4, 24)",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "For Designers",
        "top": 2608,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EAEAEA",
    "alpha": 1,
    "cssValue": "rgb(234, 234, 234)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "YOUR FIRST CREATIVE COMMUNITYENROL NOWYOUR FIRST CREATIVE COMMUNITYENROL NOWYOUR FIRST CREATIVE COMM",
        "top": 1418,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 25,
    "contexts": [
      {
        "tag": "time",
        "text": "Motion Studio",
        "top": 3625,
        "property": "background"
      },
      {
        "tag": "time",
        "text": "Motion Studio",
        "top": 3625,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#DBDBDB",
    "alpha": 1,
    "cssValue": "rgb(219, 219, 219)",
    "count": 116,
    "contexts": [
      {
        "tag": "a",
        "text": "Enrol",
        "top": 65,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "",
        "top": 65,
        "property": "border"
      },
      {
        "tag": "input",
        "text": "",
        "top": 9626,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFFAF5",
    "alpha": 1,
    "cssValue": "rgb(255, 250, 245)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Explore Their Work →",
        "top": 6037,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#8C8C8C",
    "alpha": 1,
    "cssValue": "rgb(140, 140, 140)",
    "count": 6,
    "contexts": [
      {
        "tag": "a",
        "text": "ENROL NOW",
        "top": 1428,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#000000",
    "alpha": 0.03529411764705882,
    "cssValue": "rgba(0, 0, 0, 0.035)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 1629,
        "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 and airy spacing defined by large vertical margins separating major thematic sections, allowing typography to breathe.
- Corner style: Stark contrast between fully rounded pill-shaped UI controls and completely sharp, square-cornered media elements and structural blocks.
- Radius: Buttons and tags prominently use a pill-shape radius (likely 999px), while images and color blocks retain a 0px border radius.
- Borders: Subtle, 1-pixel solid borders (#DBDBDB) are used exclusively for defining input fields and ghost buttons.
- Buttons: Buttons are consistently pill-shaped, featuring either solid high-contrast fills (lilac, black) or transparent bodies with thin silver borders.
- Content width: Wide, fluid container layouts that maximize screen real estate, often splitting content into 50/50 visual blocks.
- Density: Very low density, utilizing negative space heavily to pace reading and highlight isolated pieces of content.
- Evidence: Visual inspection of button radii vs container corners; DOM color data indicating borders; obvious padding variations visible in document crops.

## Sections

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

1. **Hero — Design Education That Works** (Home)
   AI suggestion (98% confidence): Complete opening hero with oversized positioning statement, Shillington branding, enrollment control, and a distinctive portfolio-work gallery, ending at the slim enrollment strip.
   Capture: 1440×1470px; page bounds 0–1470px of 10117px; source section ID: `bbbede02-8206-4c43-af09-31998e387589`; image: https://media.designdetails.io/library/90093e6f7f1ae0c6d49a395cadf785a4972e2e389855b307fa307cb0ed082df8/bbbede02-8206-4c43-af09-31998e387589.webp
   SECTION.md v3.2: `bbbede02-8206-4c43-af09-31998e387589` (deterministic evidence; editorial review pending)
2. **Navbar — Shillington Navbar** (Home)
   A small pill button and menu icon sit beside a large logo, keeping navigation light while the main action stays visible.
   Capture: 1440×132px; page bounds 0–132px of 10117px; source section ID: `56aef6ee-3491-4d6b-85ca-363b7382e9b5`; image: https://media.designdetails.io/library/9775b65a5fdbd0c9eb5068a5e5fb68653303a42a83edc5a0997edfd8885b1c8f/56aef6ee-3491-4d6b-85ca-363b7382e9b5.webp
   SECTION.md v3.2: `56aef6ee-3491-4d6b-85ca-363b7382e9b5` (deterministic evidence; editorial review pending)
3. **Features — Stacked colour-block course panels** (Home)
   Each course gets its own bold colour block with text on the left and work on the right, so options are easy to tell apart.
   Capture: 1440×1819px; page bounds 1462–3281px of 10117px; source section ID: `85689683-04a2-4327-b559-fa00d169d18d`; image: https://media.designdetails.io/library/4d969ceeff15e78f6c5cd1db8c9e32ad5568788272323a722b9f188999da43ed/85689683-04a2-4327-b559-fa00d169d18d.webp
   SECTION.md v3.2: `85689683-04a2-4327-b559-fa00d169d18d` (deterministic evidence; editorial review pending)
4. **Other — Employability statement with supporting text** (Home)
   A short bold claim followed by smaller explanation makes the argument clear, with generous white space helping it stand out.
   Capture: 1440×1155px; page bounds 4070–5225px of 10117px; source section ID: `e2682541-7275-430b-985d-8abecfda7ab8`; image: https://media.designdetails.io/library/78b44b798e071e1ccc8ec10eff0c5c279094e35878425c5f7298dc1c5a0ffaa9/e2682541-7275-430b-985d-8abecfda7ab8.webp
   SECTION.md v3.2: `e2682541-7275-430b-985d-8abecfda7ab8` (deterministic evidence; editorial review pending)
5. **Stats — Three large outcome numbers** (Home)
   Very large figures with small captions let visitors absorb graduate results at a glance, and the arrows suggest more to see.
   Capture: 1440×315px; page bounds 5225–5540px of 10117px; source section ID: `23dd38b9-ec38-42b2-bbec-59a67cb1d7d8`; image: https://media.designdetails.io/library/3e043065b011497be1445241fff7ff126fd79899e6aa2fbcede1915a9cbcaaf2/23dd38b9-ec38-42b2-bbec-59a67cb1d7d8.webp
   SECTION.md v3.2: `23dd38b9-ec38-42b2-bbec-59a67cb1d7d8` (deterministic evidence; editorial review pending)
6. **Editorial — Article card carousel with tags** (Home)
   Image-led cards with clear headlines and category pills let visitors scan topics quickly and swipe for more.
   Capture: 1440×1232px; page bounds 7277–8509px of 10117px; source section ID: `e36c72bd-7f24-4e4a-b10e-4c1c2c1e83b9`; image: https://media.designdetails.io/library/93d86c5af6aadce0ae6c789ae36bec5a657c99716b1839b348ca1028fd4ff9b7/e36c72bd-7f24-4e4a-b10e-4c1c2c1e83b9.webp
   SECTION.md v3.2: `e36c72bd-7f24-4e4a-b10e-4c1c2c1e83b9` (deterministic evidence; editorial review pending)
7. **Other — 02:03 — In The Studio Schedule** (Home)
   AI-proposed category: schedule
AI suggestion (91% confidence): A complete, self-contained timetable component with a prominent time-based heading and clearly paired course labels and studio activities.
   Capture: 1440×810px; page bounds 3260–4070px of 10117px; source section ID: `ba2692f6-fe28-4569-ab22-97466bc530f0`; image: https://media.designdetails.io/library/234725ac76a5749bfcdf8811f64e68305359c9955bc849b4aa22f37fc8145bb1/ba2692f6-fe28-4569-ab22-97466bc530f0.webp
   SECTION.md v3.2: `ba2692f6-fe28-4569-ab22-97466bc530f0` (deterministic evidence; editorial review pending)
8. **CTA — New Graduates** (Home)
   AI suggestion (97% confidence): Complete promotional banner with a clear headline, supporting copy, action button, and distinctive high-contrast artwork.
   Capture: 1440×594px; page bounds 5716–6310px of 10117px; source section ID: `f1649b67-debc-4677-a7fc-5d8edeb51fbd`; image: https://media.designdetails.io/library/bcdcf9654d1208c1f5bce84eb7c2c4629b71082ddaf137d4628a336e2b26c8b1/f1649b67-debc-4677-a7fc-5d8edeb51fbd.webp
   SECTION.md v3.2: `f1649b67-debc-4677-a7fc-5d8edeb51fbd` (deterministic evidence; editorial review pending)
9. **Testimonials — Graduate Stories** (Home)
   AI suggestion (91% confidence): Self-contained alumni outcomes section combining a strong heading, navigation controls, CTA, portraits, former roles, and current career results.
   Capture: 1440×867px; page bounds 6385–7252px of 10117px; source section ID: `062388f2-1c12-49bb-bb98-faa592fcc2f4`; image: https://media.designdetails.io/library/5aa6139140656e92269e3d3dae5c5f36e289e9e067a4fc9de748c712c553d3ca/062388f2-1c12-49bb-bb98-faa592fcc2f4.webp
   SECTION.md v3.2: `062388f2-1c12-49bb-bb98-faa592fcc2f4` (deterministic evidence; editorial review pending)
10. **CTA — Want to Chat?** (Home)
   AI suggestion (96% confidence): Complete consultation CTA with a bold headline, supporting copy, and a clear “Find A Time” action, separated by generous whitespace.
   Capture: 1440×549px; page bounds 8583–9132px of 10117px; source section ID: `b0c9482d-7541-4d4c-bff6-832dcd7d16b6`; image: https://media.designdetails.io/library/18fb23f5eae46651eb0280a4c9ff0ed379338e1168ecdd8d8d4f4a78d7c37a33/b0c9482d-7541-4d4c-bff6-832dcd7d16b6.webp
   SECTION.md v3.2: `b0c9482d-7541-4d4c-bff6-832dcd7d16b6` (deterministic evidence; editorial review pending)
11. **Footer — Get Inspired Newsletter Footer** (Home)
   AI suggestion (98% confidence): Complete, substantial page footer combining a newsletter signup form, navigation and social link columns, policy links, and copyright information.
   Capture: 1440×890px; page bounds 9225–10115px of 10117px; source section ID: `ff4be26c-e14e-4120-8c59-d251871f595c`; image: https://media.designdetails.io/library/ddc70b5c3b4d4a6258341964103e108f49ea589d0b0aceda9c8331200f5120bd/ff4be26c-e14e-4120-8c59-d251871f595c.webp
   SECTION.md v3.2: `ff4be26c-e14e-4120-8c59-d251871f595c` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/8db2c286573ea51c5fa4d09d8fb6cfe8fca0238f7da7d6a178b6465793297bbd/desktop_full-89a5995a-2026-11-10T07-04-05-939Z.webp
- Mobile screenshot: https://media.designdetails.io/library/03e5a5a433069626aa908e6fc18765f7458f2fed44d38a27b30bebd5ca4d406c/mobile_full-89a5995a-2026-11-10T07-04-40-173Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/d466fe92e0e38d8d9f6df517b49c660a3ed46d607205ed584be9cfd59562cccb/motion-1794297524651.mp4
- Video poster: https://media.designdetails.io/library/da1a741184f44ee81c5ab5dc4a1761c95ac91e4caca212be944e706bc360bf91/motion-poster-1794297524651.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
- Feature Card
- Stat Block
- Editorial Card
- Primary Button
- Newsletter Form
- Footer
- Course Timetable List
- Continuous Scrolling Marquee

## Quality rubric

Overall: 54/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Shillington's site presents a confident, well-organized editorial system: an oversized single-typeface hierarchy, alternating pastel color-blocked course sections, a numbered content index, and content (graduate outcomes, program-specific diagrams) that is genuinely tailored rather than generic filler. Execution within this chosen idiom is solid and the information architecture reads clearly from hero through footer. However, the visual and motion vocabulary—oversized Swiss-modernist type, pill buttons against sharp media, a continuous horizontal marquee—is now a widely recognized template approach across design schools and creative agencies, and the only concretely observed motion device (the marquee) is common and unaccompanied by other evidenced interaction design. A fallback-font bug on the primary H1 further detracts from an otherwise clean typographic system. The result is a competently assembled, purposeful site rather than one demonstrating several hard-to-substitute design ideas, which keeps it in the competent tier rather than good or higher.

- Typography (15%): 62 — A single typeface, 'Universal Sans Display,' is deployed across an aggressive size scale (150px hero, 130px section titles, 60px/28px/16px support copy), producing a legible, consistent editorial hierarchy. However, the system is not fully buttoned-up: the actual H1 ('Design Education That Works.') falls back to a generic system sans-serif rather than the intended display font (font-5), indicating a loading/CSS specificity bug on the single most important text element on the page. Letter-spacing is inconsistent (0.7px on body/small text, 0% on large display type) without an evident rationale beyond default framework behavior.
- Color (10%): 58 — The palette (white canvas, black text, lilac #CD9FF5, pink #FF97AF, navy #09224E) is used in a conventional 'one flat pastel per section' pattern typical of modern design-school and creative-agency sites. Darker on-color text variants (#360B67, #560418) show attention to contrast within color blocks, which is a genuine craft detail. But the palette itself is a familiar millennial-adjacent pastel-plus-black combination without a distinct chromatic idea or restraint principle beyond alternating blocks.
- Layout (20%): 65 — The page demonstrates a coherent, repeated system: alternating full-bleed color-block course cards, a numbered section index ('02:03 — In The Studio'), a stat block, a navy testimonial band, a graduate-story grid, and a blog grid, all separated by generous vertical whitespace. The 50/50 text-image split is used consistently and legibly. This is a well-executed, multi-section editorial layout, though the underlying structure (hero + alternating color blocks + stat strip + card grids + footer CTA) is a common template pattern rather than a bespoke spatial invention.
- Motion (20%): 45 — The only concretely observed motion is a continuous right-to-left horizontal marquee containing posters, UI screenshots, and autoplaying video clips beneath the hero, which repeats when scrolling back up. This is a widely-used, low-effort motion pattern (marquees are extremely common on template-based sites) rather than a bespoke interaction system. No scroll-triggered reveals, hover micro-interactions, cursor-follow effects, or transition choreography between sections are evidenced; the observation notes explicitly that interaction behavior (buttons, forms) was not captured and mobile behavior is unknown.
- Originality (25%): 42 — The overall idiom—oversized Swiss-modernist-influenced display type, flat pastel color-blocked sections, pill-shaped buttons against sharp-cornered imagery, and a horizontal marquee—is a highly recognizable, widely adopted template style across contemporary design schools, bootcamps, and creative agencies. None of the identified components (nav, hero, feature cards, stat block, editorial cards, newsletter footer) or patterns (marquee, pill tags) represent a distinctive, hard-to-substitute idea; they are competently assembled from a common contemporary toolkit rather than demonstrating a novel structural or interactive concept.
- Content (10%): 64 — Content is reasonably well integrated with the design system: real student/graduate photography and names populate the 'Graduate Stories' grid, concrete stats (82%, 12k+, 30) are given typographic prominence, and blog teasers ('Shillo Post') use thumbnail imagery consistent with the card pattern. The course-specific imagery (packaging mockups, motion design principle diagrams) is tailored to each program rather than generic stock, showing some care in sourcing. The copy remains direct and on-brand throughout.

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
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Oversized black headlines sit above a scrolling strip of real student posters and packaging, so the school's own output becomes the hero imagery. Bold purple, pink and red blocks separate each course and stat section, giving a long page clear visual chapters that are easy to scan.

## 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.