# Campus — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://campus.edu/
Captured: 2026-11-10
CSS measured: 2026-11-10T06:57:56.332Z at 1440×1000 — https://campus.edu/
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

Campus employs a bold, typographic design language that balances editorial scale with corporate professionalism. The interface utilizes a stark black-and-white foundation punctuated by vibrant 'Campus Blue' (#4F50FF) for key actions and accents. A robust hierarchy is established through a wide spectrum of the sfProText font, from large display headings down to clear body text, supported by occasional monospace accents (Lekton). The layout is characterized by ample whitespace, large imagery, and well-defined sections, particularly notable in the sticky 'How Campus works' sequence and the prominent professor profiles.

## Classification

- Industry: education
- Site type: Blog, Store
- Business model: Shopping
- Styles: typographic, corporate, bold, minimal
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: sfProText — weight 600; size 115.2px; line-height 103.7px; tracking -7.5px; Regular (95% role confidence, computed values)
- Heading: sfProText — weight 600; size 80px; line-height 76.8px; tracking -3.6px; Regular (90% role confidence, computed values)
- Body: sfProText — weight 400; size 17px; line-height 26.4px; tracking normal; Regular (85% role confidence, computed values)
- Mono: Lekton — weight 700; size 10px; line-height 15px; tracking 0.6px; uppercase (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is the dominant background color for most of the page. (95% role confidence, computed values)
- Text — text #080808: color-4: computed rgb(8, 8, 8); AI role: Near black (#080808) is used extensively for primary text, headings, and navigation links. (95% role confidence, computed values)
- Primary Action — primary action #4F50FF: color-7: computed rgb(79, 80, 255); AI role: The distinctive blue (#4F50FF) used for primary buttons ('Apply now') and active states in the sticky list. (95% role confidence, computed values)
- Muted Text — muted text #575757: color-8: computed rgb(87, 87, 87); AI role: Dark gray (#575757) is used for secondary text and footer headings. (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": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "28px",
    "lineHeight": "29.4px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "h3",
        "text": "Submit the application.",
        "top": 2432,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Get what you need to succeed.",
        "top": 3115,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Personal success coaching.",
        "top": 3798,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "76px",
    "lineHeight": "73px",
    "letterSpacing": "-3.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h3",
        "text": "2 yrs",
        "top": 1562,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "> 80%",
        "top": 1562,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Live",
        "top": 1562,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Lekton",
    "fontStack": "Lekton, \"Lekton Fallback\", monospace",
    "weight": "700",
    "size": "11px",
    "lineHeight": "16px",
    "letterSpacing": "0.7px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "General",
        "top": 8270,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Admissions",
        "top": 8270,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Programs",
        "top": 8270,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "115.2px",
    "lineHeight": "103.7px",
    "letterSpacing": "-7.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Higher education, rebuilt for the new economy.",
        "top": 1019,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "80px",
    "lineHeight": "76.8px",
    "letterSpacing": "-3.6px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Online, yet not remote.",
        "top": 6608,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "42px",
    "lineHeight": "40.3px",
    "letterSpacing": "-1.7px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Elite education for all.",
        "top": 730,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\"",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Submit the application.",
        "top": 2081,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Submit the application.",
        "top": 2081,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get what you need to succeed.",
        "top": 2128,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "23.3px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Also teaches at",
        "top": 6114,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Also teaches at",
        "top": 6114,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Also teaches at",
        "top": 6114,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "25.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Earn an associate degree in Business, Healthcare, or IT in as little as 2 years.",
        "top": 1659,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "of our online degree students haven't had to pay out-of-pocket tuition costs. Financial Aid is avail",
        "top": 1659,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Meet live with professors and classmates every week.",
        "top": 1659,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Lekton",
    "fontStack": "Lekton, \"Lekton Fallback\", monospace",
    "weight": "700",
    "size": "10px",
    "lineHeight": "15px",
    "letterSpacing": "0.6px",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "p",
        "text": "Program length",
        "top": 1523,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tuition",
        "top": 1523,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Class format",
        "top": 1523,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\"",
    "weight": "400",
    "size": "24px",
    "lineHeight": "36px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Join live, interactive classes where you can ask questions, debate ideas, and connect with professor",
        "top": 6778,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Many of our currently enrolled Campus Scholars have been able to pay their tuition with no out-of-po",
        "top": 7423,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "17px",
    "lineHeight": "26.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "An associate degree in Business, Healthcare, or IT. Live classes taught by professors from top-ranke",
        "top": 1246,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "If you’re savvy, ambitious, and looking to knock out the first two years of college while learning f",
        "top": 7913,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "18px",
    "lineHeight": "27.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Professors who also teach at top-ranked colleges. Live classes. A new take on education.",
        "top": 786,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 CampusGroup, Inc.",
        "top": 9117,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "700",
    "size": "12px",
    "lineHeight": "40px",
    "letterSpacing": "0.8px",
    "traits": "uppercase",
    "count": 32,
    "contexts": [
      {
        "tag": "em",
        "text": "Apply now",
        "top": 13,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "November 13th priority deadline",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "Apply now",
        "top": 13,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "a",
        "text": "Professors",
        "top": 8300,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Teach in the program",
        "top": 8330,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Join our team",
        "top": 8360,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "700",
    "size": "15px",
    "lineHeight": "18px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "UC Berkeley",
        "top": 6148,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Stanford",
        "top": 6148,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Vanderbilt",
        "top": 6148,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "22px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Apply now",
        "top": 748,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Explore programs",
        "top": 1363,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Meet your professors",
        "top": 5461,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Campus",
        "top": 80,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "18.6px",
    "letterSpacing": "1.3px",
    "traits": "uppercase",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "Admissions",
        "top": 58,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Professors",
        "top": 58,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Programs",
        "top": 58,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\", system-ui, -apple-system, sans-serif",
    "weight": "500",
    "size": "19px",
    "lineHeight": "29.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Learn more",
        "top": 391,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Learn more",
        "top": 391,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Watch video",
        "top": 391,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "sfProText",
    "fontStack": "sfProText, \"sfProText Fallback\"",
    "weight": "600",
    "size": "14px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 8,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 72,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to main contentApply nowNovember 13th priority deadlineApply nowEnroll for Winter 2027Apply now",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 8,
        "property": "text"
      },
      {
        "tag": "em",
        "text": "Apply now",
        "top": 13,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4F4F4",
    "alpha": 1,
    "cssValue": "rgb(244, 244, 244)",
    "count": 11,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1905,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Watch introductionWatch introduction",
        "top": 150,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#080808",
    "alpha": 1,
    "cssValue": "rgb(8, 8, 8)",
    "count": 88,
    "contexts": [
      {
        "tag": "span",
        "text": "Campus",
        "top": 80,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Admissions",
        "top": 58,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 895,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 7,
    "contexts": [
      {
        "tag": "div",
        "text": "Apply nowNovember 13th priority deadlineApply nowEnroll for Winter 2027Apply nowNovember 13th priori",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 69,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Vanderbilt",
        "top": 6148,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FF8850",
    "alpha": 1,
    "cssValue": "rgb(255, 136, 80)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Online, yet not remote.Join live, interactive classes where you can ask questions, debate ideas, and",
        "top": 6343,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#4F50FF",
    "alpha": 1,
    "cssValue": "rgb(79, 80, 255)",
    "count": 26,
    "contexts": [
      {
        "tag": "a",
        "text": "Skip to main content",
        "top": 8,
        "property": "control-background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 69,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Enduring support.",
        "top": 2269,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#575757",
    "alpha": 1,
    "cssValue": "rgb(87, 87, 87)",
    "count": 18,
    "contexts": [
      {
        "tag": "p",
        "text": "Professors who also teach at top-ranked colleges. Live classes. A new take on education.",
        "top": 786,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "General",
        "top": 8270,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#787F85",
    "alpha": 1,
    "cssValue": "rgb(120, 127, 133)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Submit the application.",
        "top": 2081,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 0.47843137254901963,
    "cssValue": "rgba(0, 0, 0, 0.48)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Learn more",
        "top": 391,
        "property": "control-background"
      },
      {
        "tag": "button",
        "text": "Watch video",
        "top": 391,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#003262",
    "alpha": 1,
    "cssValue": "rgb(0, 50, 98)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "UC Berkeley",
        "top": 6148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#CFAE70",
    "alpha": 1,
    "cssValue": "rgb(207, 174, 112)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Vanderbilt",
        "top": 6148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#8C1515",
    "alpha": 1,
    "cssValue": "rgb(140, 21, 21)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Stanford",
        "top": 6148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#2774AE",
    "alpha": 1,
    "cssValue": "rgb(39, 116, 174)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "UCLA",
        "top": 6148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#57068C",
    "alpha": 1,
    "cssValue": "rgb(87, 6, 140)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "NYU",
        "top": 6148,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#949494",
    "alpha": 1,
    "cssValue": "rgb(148, 148, 148)",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 895,
        "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 vertical spacing between major sections, often using large padding to isolate content blocks. Horizontal spacing relies on a structured grid with significant gutters.
- Corner style: Primarily rounded corners for interactive elements, imagery, and cards.
- Radius: Buttons appear pill-shaped (fully rounded). Professor cards and feature images feature prominent, consistent border radii (likely around 16-24px).
- Borders: Borders are largely absent in favor of using negative space or distinct background colors (like the light gray #F4F4F4) to separate elements.
- Buttons: Pill-shaped buttons. Primary buttons use the brand blue (#4F50FF) with white text. Secondary/explore buttons use black backgrounds with white text.
- Content width: Content is constrained to a central max-width column, with some elements like the announcement bar and specific section backgrounds breaking out to full bleed.
- Density: Low density. The design prioritizes legibility and impact through large typography and ample whitespace over packing information tightly.
- Evidence: Visual inspection of the full-page crops showing large margins, pill buttons ('Apply now'), rounded image cards (professors), and stark background transitions.

## Sections

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

1. **Navbar — Campus Navbar** (Home)
   A deadline ticker sits above a clean nav with centered logo, so visitors see urgency first and routes second.
   Capture: 1440×120px; page bounds 0–120px of 9180px; source section ID: `467b325d-0628-46fb-8603-691b288146ed`; image: https://media.designdetails.io/library/56b348392be0f19384c381582129f8382deaeef7cbb13231fd0d232988050e06/467b325d-0628-46fb-8603-691b288146ed.webp
   SECTION.md v3.2: `467b325d-0628-46fb-8603-691b288146ed` (deterministic evidence; editorial review pending)
2. **Other — Large statement headline with button** (Home)
   Oversized tight type states the mission plainly, and a single dark button gives one clear next step.
   Capture: 1440×480px; page bounds 923–1403px of 9180px; source section ID: `82a1253f-c957-4fcf-b121-3bf1c8c44cbd`; image: https://media.designdetails.io/library/bac7d6bed527c1b4d0584eebe6ca5b1566eaa87c259a2b93c8c09cfc936c72ff/82a1253f-c957-4fcf-b121-3bf1c8c44cbd.webp
   SECTION.md v3.2: `82a1253f-c957-4fcf-b121-3bf1c8c44cbd` (deterministic evidence; editorial review pending)
3. **Stats — Four key numbers in columns** (Home)
   Big numerals over small labels and short captions let visitors scan program facts quickly.
   Capture: 1440×406px; page bounds 1403–1809px of 9180px; source section ID: `851bda52-a8ea-4e10-83e4-6fa468a1f3db`; image: https://media.designdetails.io/library/eadb34d5b89d747e32ae3972854c6b13d65c286df02ec8de92c7ba64c8a6c7e6/851bda52-a8ea-4e10-83e4-6fa468a1f3db.webp
   SECTION.md v3.2: `851bda52-a8ea-4e10-83e4-6fa468a1f3db` (deterministic evidence; editorial review pending)
4. **Process — Sticky step list beside phone mockup** (Home)
   A numbered-style step list next to a product screen ties each step to something visitors can picture.
   Capture: 1440×591px; page bounds 1809–2400px of 9180px; source section ID: `078d784f-bba2-47b1-8bef-63189d37eceb`; image: https://media.designdetails.io/library/0d2a8327e9139f68bc46d52db17a11542e4b6d3eec1c66fdf9947d7c8c2a1970/078d784f-bba2-47b1-8bef-63189d37eceb.webp
   SECTION.md v3.2: `078d784f-bba2-47b1-8bef-63189d37eceb` (deterministic evidence; editorial review pending)
5. **Process — Step one caption with description** (Home)
   A bold step title with a short paragraph keeps the explanation tight and readable beside the visual.
   Capture: 1440×180px; page bounds 2400–2580px of 9180px; source section ID: `9fb3680e-a846-4ed2-bbdb-ba91357a0a03`; image: https://media.designdetails.io/library/2d20e2b616111f619408cb194372132ce564bac19269e7cd0aadeb0ef6d2870e/9fb3680e-a846-4ed2-bbdb-ba91357a0a03.webp
   SECTION.md v3.2: `9fb3680e-a846-4ed2-bbdb-ba91357a0a03` (deterministic evidence; editorial review pending)
6. **Process — Welcome kit photo with caption** (Home)
   A real photo of branded items makes the free-equipment benefit tangible, with a brief caption beneath.
   Capture: 1440×684px; page bounds 2580–3264px of 9180px; source section ID: `d5740565-f031-4a37-98af-c2c11885bd4f`; image: https://media.designdetails.io/library/951570666801c4be05f9a7657941d7df7c56726baba1d2b5d906bad26d8d7458/d5740565-f031-4a37-98af-c2c11885bd4f.webp
   SECTION.md v3.2: `d5740565-f031-4a37-98af-c2c11885bd4f` (deterministic evidence; editorial review pending)
7. **Process — Video call coaching screenshot** (Home)
   Two smiling faces in a call window show the human side of coaching on a dark frame.
   Capture: 1440×504px; page bounds 3264–3768px of 9180px; source section ID: `1dfdac0d-2c35-4cf3-9306-7c5a29a5c54f`; image: https://media.designdetails.io/library/508636ca3acc5e513c558344d3aa947104bfbe98fdf9832ddfbd162cb53242af/1dfdac0d-2c35-4cf3-9306-7c5a29a5c54f.webp
   SECTION.md v3.2: `1dfdac0d-2c35-4cf3-9306-7c5a29a5c54f` (deterministic evidence; editorial review pending)
8. **Process — Coaching step caption** (Home)
   A bold title and two-line description spell out the support offered without clutter.
   Capture: 1440×174px; page bounds 3768–3942px of 9180px; source section ID: `939fa6e4-16e4-4eaa-a0fd-c6af44f047c0`; image: https://media.designdetails.io/library/c8774a00a905b1c77391b5ca3dd0c970bd30ccb1b1d5e33787f62a6489e0e419/939fa6e4-16e4-4eaa-a0fd-c6af44f047c0.webp
   SECTION.md v3.2: `939fa6e4-16e4-4eaa-a0fd-c6af44f047c0` (deterministic evidence; editorial review pending)
9. **Process — Live class interface screenshot** (Home)
   A class screen with chat and slides shows the real learning experience on a dark frame.
   Capture: 1440×510px; page bounds 3942–4452px of 9180px; source section ID: `35018bae-27b7-4856-b185-372b051fa4c6`; image: https://media.designdetails.io/library/d7f55fe65723995557efdc59eadf4d863e892c7efa786630248c677a9439b354/35018bae-27b7-4856-b185-372b051fa4c6.webp
   SECTION.md v3.2: `35018bae-27b7-4856-b185-372b051fa4c6` (deterministic evidence; editorial review pending)
10. **Process — Educator step caption** (Home)
   A short title and paragraph explain live classes and office hours in a scannable block.
   Capture: 1440×174px; page bounds 4452–4626px of 9180px; source section ID: `86ff1895-ff55-4fc9-9231-5d01bcdf9bfa`; image: https://media.designdetails.io/library/1f6bcb05ab8119aec5bdc7d4109bc52829257ddef80c62c0c492ed608ffdd03a/86ff1895-ff55-4fc9-9231-5d01bcdf9bfa.webp
   SECTION.md v3.2: `86ff1895-ff55-4fc9-9231-5d01bcdf9bfa` (deterministic evidence; editorial review pending)
11. **Process — Community video session screenshot** (Home)
   A participant list and smiling face show a friendly, social online room.
   Capture: 1440×504px; page bounds 4626–5130px of 9180px; source section ID: `1b3985fd-9dde-48eb-8ee7-048677faa786`; image: https://media.designdetails.io/library/2d6fc55f61e316e6a98e617b6968ad21294508ff7459bea839abbcd87180ffb1/1b3985fd-9dde-48eb-8ee7-048677faa786.webp
   SECTION.md v3.2: `1b3985fd-9dde-48eb-8ee7-048677faa786` (deterministic evidence; editorial review pending)
12. **Process — Support step caption** (Home)
   A concise title and sentence close the step sequence with a clear long-term promise.
   Capture: 1440×225px; page bounds 5130–5355px of 9180px; source section ID: `5e1d2402-1ff2-4129-a612-4bb745edcd0b`; image: https://media.designdetails.io/library/c7a231dce599a4b308d92eacb4fbc3f86150f1b1550a2cf2d1c08701921d02c3/5e1d2402-1ff2-4129-a612-4bb745edcd0b.webp
   SECTION.md v3.2: `5e1d2402-1ff2-4129-a612-4bb745edcd0b` (deterministic evidence; editorial review pending)
13. **CTA — Debt-free message with underline accent** (Home)
   A two-line headline with a blue underline and short explanation makes the affordability claim memorable, with a soft button.
   Capture: 1440×432px; page bounds 7151–7583px of 9180px; source section ID: `a6d04c96-e027-4cd6-8c41-967b3731cc19`; image: https://media.designdetails.io/library/3ca75897dbbef40d04b27a0cc920354f3bec3ec81a5e8ee83afa76ba1494d090/a6d04c96-e027-4cd6-8c41-967b3731cc19.webp
   SECTION.md v3.2: `a6d04c96-e027-4cd6-8c41-967b3731cc19` (deterministic evidence; editorial review pending)
14. **CTA — Full-width blue application banner** (Home)
   Saturated blue with white type and a white pill button makes the deadline and action impossible to miss.
   Capture: 1440×591px; page bounds 7583–8174px of 9180px; source section ID: `34cd692b-fe43-473a-89d0-d7b761d43e81`; image: https://media.designdetails.io/library/d932f742043dab1e2cd56376577cabd26b9bbde843dee1be6f549a2202b0d9d3/34cd692b-fe43-473a-89d0-d7b761d43e81.webp
   SECTION.md v3.2: `34cd692b-fe43-473a-89d0-d7b761d43e81` (deterministic evidence; editorial review pending)
15. **Hero — Elite education for all** (Home)
   AI suggestion (95% confidence): Complete image-led carousel hero with a clear value proposition, supporting copy, CTA, pagination, and navigation controls.
   Capture: 1440×801px; page bounds 147–948px of 9180px; source section ID: `06eaaec5-0cca-4c83-a2df-f0b90cf1c428`; image: https://media.designdetails.io/library/6ced9cec7b942bc8b91a3011b0038196307b7f2d80c5984affb5bab09fb05513/06eaaec5-0cca-4c83-a2df-f0b90cf1c428.webp
   SECTION.md v3.2: `06eaaec5-0cca-4c83-a2df-f0b90cf1c428` (deterministic evidence; editorial review pending)
16. **Stats — Higher education, rebuilt** (Home)
   AI suggestion (94% confidence): Self-contained value proposition section combining a bold headline, program CTA, and four complete proof-point columns covering length, tuition, format, and coaching.
   Capture: 1440×816px; page bounds 1014–1830px of 9180px; source section ID: `2886baab-204b-4c54-93c4-fab053428402`; image: https://media.designdetails.io/library/9a5db9495375da205bbc79f107f2eda67af9a892472b0695a24f134d8e91ea6f/2886baab-204b-4c54-93c4-fab053428402.webp
   SECTION.md v3.2: `2886baab-204b-4c54-93c4-fab053428402` (deterministic evidence; editorial review pending)
17. **Team — Unrivaled Professors Carousel** (Home)
   AI suggestion (98% confidence): Complete professor showcase with a strong headline, CTA, three labeled portraits, institutional affiliations, and visible carousel controls.
   Capture: 1440×951px; page bounds 5344–6295px of 9180px; source section ID: `de70bbf2-fb8d-4122-9535-ebb19a191da9`; image: https://media.designdetails.io/library/aea2dfef913db6d8c15cc0794f0b9b185744e724e1fb6eb28aee294e8c9a3eeb/de70bbf2-fb8d-4122-9535-ebb19a191da9.webp
   SECTION.md v3.2: `de70bbf2-fb8d-4122-9535-ebb19a191da9` (deterministic evidence; editorial review pending)
18. **Other — Online, Yet Not Remote** (Home)
   AI suggestion (96% confidence): Self-contained live-class demonstration pairing a concise value proposition with a distinctive collage of video participants, chat, and interest-club labels.
   Capture: 1440×810px; page bounds 6346–7156px of 9180px; source section ID: `8200cb17-dbea-44d5-ae9b-d3da221e0dba`; image: https://media.designdetails.io/library/4e59e9d65a442fb7e2827e5498d77ad5ddfc468e8a7819292187484fbfcb5558/8200cb17-dbea-44d5-ae9b-d3da221e0dba.webp
   SECTION.md v3.2: `8200cb17-dbea-44d5-ae9b-d3da221e0dba` (deterministic evidence; editorial review pending)
19. **Footer — Campus multi-column footer** (Home)
   AI suggestion (99% confidence): Complete, substantial footer with grouped navigation links, oversized Campus wordmark, copyright details, contact information, and social icons.
   Capture: 1440×1001px; page bounds 8178–9179px of 9180px; source section ID: `2bd6e804-94cb-4a2e-9822-f4db2d3fd1e0`; image: https://media.designdetails.io/library/4b43ded97db51e1365d45ff1fde6bc16e3c0a398141ee734d47acff784d53ed6/2bd6e804-94cb-4a2e-9822-f4db2d3fd1e0.webp
   SECTION.md v3.2: `2bd6e804-94cb-4a2e-9822-f4db2d3fd1e0` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/e290c3478880a22b4d0bf3cbd9baeb2e1ea3b15c735fb6a765a546951461fd05/desktop_full-ed0166f4-2026-11-10T06-57-56-347Z.webp
- Mobile screenshot: https://media.designdetails.io/library/3168d4d8bbaf79bf9a6d93ffd61c2fbe605449b020bae4ba3055cebf0df291be/mobile_full-ed0166f4-2026-11-10T06-58-27-948Z.webp
- Open Graph image: Not captured
- Full-page video: https://media.designdetails.io/library/4a48c8ae57a3967943810856e2d0a317d554a4b86c861be36f81e0c921af0a30/motion-1794297023576.mp4
- Video poster: https://media.designdetails.io/library/2766cb3297182d01d7931f2292963c3cbb8cc38645ecf2a7669c9a5d33d6eba4/motion-poster-1794297023576.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

- Announcement Bar
- Navigation Bar
- Hero
- Stat Block
- Tag
- Primary Button
- Outline Button
- Footer
- Sticky List Menu
- University Affiliation Badge
- Feature Collection
- Editorial Card

## Quality rubric

Overall: 54.1/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: Campus delivers a clean, professionally executed marketing site built from a familiar modern-SaaS template: a bold tight-tracked display headline, a monochrome-plus-blue palette, a sticky-scroll 'how it works' sequence, editorial professor cards with university-coded badges, and a full-bleed CTA band ahead of a watermark footer. Execution within that template is competent — spacing is generous, the type hierarchy is legible, and product screenshots are integrated directly with their supporting copy rather than used as decoration. The sticky-list scroll-sync section is handled well and keeps context visible during a multi-step narrative. However, nearly every structural and motion idea here is drawn from the standard contemporary startup-site playbook; nothing observed would be hard to substitute into a different company's site with a palette and copy swap. The palette stays safely within black/white/blue with only one underused accent color, and typography relies on a single sans-serif family throughout. The result is a well-built, legible, on-brand site that executes a common idiom competently but does not assemble enough distinctive, hard-to-substitute ideas across sections to justify a higher tier.

- Typography (15%): 62 — A clear, confident hierarchy runs from a 115.2px tight-tracked display headline down through 80px/76px section heads, 28px stat numbers, 17-18px body copy, and a Lekton monospace label treatment for data tags. The negative letter-spacing on large sizes gives the display type some presence, and weight/size pairing is consistent across sections. However the system is a single sans-serif workhorse font doing nearly all the work; there is no typographic surprise or secondary voice beyond the monospace labels, and the overall approach (huge tight-tracked headline + system body) is a very common SaaS/startup convention.
- Color (10%): 57 — The palette is a disciplined black/white/blue system (#080808 text, #FFFFFF canvas, #4F50FF accent) with #F4F4F4 used for section separation, which reads clean and professional. University badge colors (Berkeley blue, Stanford red, Vanderbilt gold, UCLA blue, NYU purple) add welcome variety and function as information coding. But the core palette itself—black, white, one saturated brand blue—is an extremely common startup formula, and the one truly unusual accent (#FF8850 orange backdrop) appears to be used only once, limiting its system-wide impact.
- Layout (20%): 63 — The page is organized into well-defined, generously spaced sections: hero carousel, stat block with vertical dividers, a sticky-list 'How Campus works' sequence, professor card carousel, a full-bleed black/orange community section, and a footer with a large watermark logotype. Content width is consistently constrained with clear grid alignment, and the stat block's divider lines and label system show attention to structure. The sticky-left/scroll-right pattern is handled cleanly. That said, this exact section-by-section anatomy (hero, stats, sticky-scroll feature list, people grid, CTA band, footer with giant wordmark) is now a near-universal template for funded-startup marketing sites, so while the execution is tidy, the structural thinking is not distinctive.
- Motion (20%): 56 — Observed motion includes a sticky list that updates active state as the user scrolls through five synchronized feature cards, staggered hashtag pills sliding up over an image, and a blue block expanding to fill its container ahead of the CTA. These are coherent, purposeful scroll-driven techniques that support the narrative (progress-indicator sticky nav, attention-directing reveals, emphasis via scale). However these are now standard patterns in this genre of scroll-told product site, the capture shows no hover/interaction states, and there's no evidence of anything beyond fairly conventional scroll-linked reveals.
- Originality (25%): 38 — Every component cataloged—announcement bar, sticky nav with pill Apply button, stat block with vertical dividers, sticky-list feature sequence, rounded editorial cards for people, pill buttons in black/blue, full-bleed CTA band, oversized watermark logo footer—is a stock pattern from the contemporary funded-startup marketing-site playbook (seen across countless Framer/Webflow/custom-built SaaS sites). The one semi-distinctive device, university-colored badges under professor photos, is a modest touch rather than a structural innovation. Nothing here is hard to substitute into a different company's site with a palette swap.
- Content (10%): 58 — Content (professor headshots, university badges, product screenshots of chat/video-class UI, merch box photography) is woven directly into the section narrative rather than floating as generic stock imagery, and the 'How Campus works' sequence pairs each UI mockup with its corresponding explanatory text. The community/hashtag section layers real product UI under a conceptual headline. This is solid, purposeful content integration, though it stays within expected bounds for a product marketing page rather than demonstrating any unusual synthesis of content and form.

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 black headlines and plain stat numbers like 2 yrs and >80% cut through the usual college marketing fog, making costs and format easy to scan in seconds. Real video stills of students and professors, plus a vertical step-by-step list with photos, build trust by showing actual people instead of stock campus shots.

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