# SuperHi — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.superhi.com/
Captured: 2026-11-10
CSS measured: 2026-11-10T07:16:46.973Z at 1440×1000 — https://www.superhi.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

A highly playful and colorful website that leverages large, bold typography and geometric shapes to create a dynamic user experience. The design features a light blue canvas punctuated by vibrant, solid-colored feature cards with rounded corners. Distinctive elements include pill-shaped buttons, continuous marquees for logos and testimonials, and decorative floating shapes like circles and stars.

## Classification

- Industry: education
- Site type: Landing
- Business model: Software
- Styles: playful, colourful, bold, geometric, typographic, neo-brutalist
- Platform: Custom code
- Technology: Next.js

## Typography

- Display: __haasGrotDisp_332926 — weight 400; size 92px; line-height 92px; tracking -2.8px; Regular (95% role confidence, computed values)
- Heading: __haasGrotDisp_332926 — weight 400; size 42px; line-height 46.2px; tracking -0.2px; Regular (95% role confidence, computed values)
- Body: __haasGrotText_7ea857 — weight 400; size 20px; line-height 25px; tracking -0.2px; Regular (95% role confidence, computed values)
- Mono: __martianMono_eeab0a — weight 400; size 12px; line-height 16.2px; tracking normal; uppercase (95% role confidence, computed values)

## Functional palette

- Text — text #111118: color-2: computed rgb(17, 17, 24); AI role: Dark #111118 used for primary typography ensuring high contrast on light backgrounds. (95% role confidence, computed values)
- Primary Action — primary action #2727E6: color-8: computed rgb(39, 39, 230); AI role: Bright blue #2727E6 used for primary call-to-action buttons and announcement bars. (95% role confidence, computed values)
- Canvas — canvas #F0F6FF: color-3: computed rgb(240, 246, 255); AI role: Light blue #F0F6FF used as the primary background color across much of the site. (90% role confidence, computed values)
- Surface — surface #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: #FFFFFF used for testimonial cards and the footer container. (90% role confidence, computed values)
- Accent — accent #16AB59: color-4: computed rgb(22, 171, 89); AI role: Green #16AB59 used for specific feature cards and decorative elements. (90% role confidence, computed values)
- Accent — accent #FFDA00: color-5: computed rgb(255, 218, 0); AI role: Yellow #FFDA00 used prominently as the background for the testimonials section. (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": "__martianMono_eeab0a",
    "fontStack": "__martianMono_eeab0a, __martianMono_Fallback_eeab0a",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.2px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 42,
    "contexts": [
      {
        "tag": "h4",
        "text": "SuperHi FM",
        "top": 1020,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get 50% off all courses and workshops!",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Get 50% off all courses and workshops!",
        "top": 0,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 39,
    "contexts": [
      {
        "tag": "p",
        "text": "Discover some of the fantastic work our students create",
        "top": 1277,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Join 120,000120,000+ other creatives and get our newsletter, filled with lots of fresh jobs, design ",
        "top": 2882,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "120,000",
        "top": 2882,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "24px",
    "lineHeight": "30px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 29,
    "contexts": [
      {
        "tag": "span",
        "text": "Join",
        "top": 562,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "SuperHi",
        "top": 562,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "with",
        "top": 562,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "35px",
    "lineHeight": "40.3px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "p",
        "text": "just started the Foundation HTML, CSS + Javascript course w/ @superhi_ and loving it so far",
        "top": 4436,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "just started the Foundation HTML, CSS + Javascript course w/ @superhi_ and loving it so far",
        "top": 4436,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "When can I start my course or workshop?",
        "top": 5265,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "72px",
    "lineHeight": "72px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Student",
        "top": 1197,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "work",
        "top": 1197,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Don’t",
        "top": 2545,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "42px",
    "lineHeight": "46.2px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "h2",
        "text": "Our students work at the best",
        "top": 943,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Most popular",
        "top": 1691,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "What do our students say?",
        "top": 4165,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "62.7px",
    "lineHeight": "69px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Design + code your first website",
        "top": 1770,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Learn to code from scratch",
        "top": 1767,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Become a digital designer",
        "top": 1772,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "raini",
        "top": 4376,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Kiks",
        "top": 4376,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Paul",
        "top": 4376,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "52px",
    "lineHeight": "57.2px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "Subscribe",
        "top": 2817,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "to",
        "top": 2817,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "our",
        "top": 2817,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "28px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Try our free course: Plan, Design + Code Your First Website. Get from idea to up-and-running, plus l",
        "top": 1993,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Everything you need to know to create websites from scratch. By the end, you'll be comfortable in ma",
        "top": 1990,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Learn responsive web design, from layouts and visual hierarchy to branding, color, type, and so much",
        "top": 1995,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 21,
    "contexts": [
      {
        "tag": "span",
        "text": "View",
        "top": 4797,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "View",
        "top": 4797,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "View",
        "top": 4797,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 16,
    "contexts": [
      {
        "tag": "span",
        "text": "E-mail:",
        "top": 2974,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "All courses",
        "top": 978,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Code",
        "top": 1008,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "__haasGrotText_7ea857",
    "fontStack": "__haasGrotText_7ea857, __haasGrotText_Fallback_7ea857",
    "weight": "400",
    "size": "24px",
    "lineHeight": "32.4px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 11,
    "contexts": [
      {
        "tag": "span",
        "text": "Skip to main content",
        "top": 4,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "See our catalog",
        "top": 665,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Try our free course",
        "top": 665,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "92px",
    "lineHeight": "92px",
    "letterSpacing": "-2.8px",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Curate",
        "top": 362,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "your",
        "top": 362,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "own",
        "top": 362,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "__haasGrotDisp_332926",
    "fontStack": "__haasGrotDisp_332926, __haasGrotDisp_Fallback_332926",
    "weight": "400",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Catalog",
        "top": 49,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 49,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cart",
        "top": 60,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "__martianMono_eeab0a",
    "fontStack": "__martianMono_eeab0a, __martianMono_Fallback_eeab0a",
    "weight": "400",
    "size": "17px",
    "lineHeight": "23px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Free",
        "top": 1787,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "__martianMono_eeab0a",
    "fontStack": "__martianMono_eeab0a, __martianMono_Fallback_eeab0a",
    "weight": "400",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "-0.2px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Chapter 03",
        "top": 7099,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "__martianMono_eeab0a",
    "fontStack": "__martianMono_eeab0a, __martianMono_Fallback_eeab0a",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "NEW",
        "top": 1037,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 180,
    "contexts": [
      {
        "tag": "body",
        "text": "Skip to main contentSuperHi FM(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Skip to main content",
        "top": 4,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 8,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#111118",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 24)",
    "count": 397,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1027,
        "property": "svg-stroke"
      },
      {
        "tag": "h4",
        "text": "SuperHi FM",
        "top": 1020,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Catalog",
        "top": 49,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F0F6FF",
    "alpha": 1,
    "cssValue": "rgb(240, 246, 255)",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "Get 50% off all courses and workshops!Get 50% off all courses and workshops!Get 50% off all courses ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "li",
        "text": "",
        "top": 1037,
        "property": "background"
      },
      {
        "tag": "input",
        "text": "",
        "top": 2973,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#16AB59",
    "alpha": 1,
    "cssValue": "rgb(22, 171, 89)",
    "count": 5,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 333,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "Learn to code from scratchEverything you need to know to create websites from scratch. By the end, y",
        "top": 1742,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Start learning",
        "top": 2649,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFDA00",
    "alpha": 1,
    "cssValue": "rgb(255, 218, 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "What do our students say?raini@httprainijust started the Foundation HTML, CSS + Javascript course w/",
        "top": 4141,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FF7715",
    "alpha": 1,
    "cssValue": "rgb(255, 119, 21)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Become a digital designerLearn responsive web design, from layouts and visual hierarchy to branding,",
        "top": 1747,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#E1EDFF",
    "alpha": 1,
    "cssValue": "rgb(225, 237, 255)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1027,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "FreeDesign + code your first websiteTry our free course: Plan, Design + Code Your First Website. Get",
        "top": 1745,
        "property": "background"
      },
      {
        "tag": "footer",
        "text": "© 2026 SuperHi, Inc.LearnAll coursesCodeDesignProject managementSuperHi EditorCompanyAboutStudent wo",
        "top": 7870,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#2727E6",
    "alpha": 1,
    "cssValue": "rgb(39, 39, 230)",
    "count": 109,
    "contexts": [
      {
        "tag": "button",
        "text": "Skip to main content",
        "top": 0,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "Get 50% off all courses and workshops!Get 50% off all courses and workshops!Get 50% off all courses ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 13,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFCFD6",
    "alpha": 1,
    "cssValue": "rgb(255, 207, 214)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Most popularSee all contentFreeDesign + code your first websiteTry our free course: Plan, Design + C",
        "top": 1667,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#91D8EC",
    "alpha": 1,
    "cssValue": "rgb(145, 216, 236)",
    "count": 5,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": -4,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Subscribe",
        "top": 2649,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Subscribe to our newsletterJoin 120,000120,000+ other creatives and get our newsletter, filled with ",
        "top": 2727,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FF8E3D",
    "alpha": 1,
    "cssValue": "rgb(255, 142, 61)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Say hi",
        "top": 2649,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "Join our online communityIt’s a great way to get feedback on your work, meet likeminded creatives, a",
        "top": 3142,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFBAC4",
    "alpha": 1,
    "cssValue": "rgb(255, 186, 196)",
    "count": 3,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 712,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "“SuperHi have been so supportive, I never thought I’d be able to code and their Visual Design and Br",
        "top": 6382,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFE54D",
    "alpha": 1,
    "cssValue": "rgb(255, 229, 77)",
    "count": 2,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": -5,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 257,
    "contexts": [
      {
        "tag": "g",
        "text": "",
        "top": 1027,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1027,
        "property": "svg-fill"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 56,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.9019607843137255,
    "cssValue": "color(srgb 1 1 1 / 0.9)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Search:SubmitCatalogCart AboutSign inCatalogAboutSearchCart Sign in",
        "top": 48,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FF4141",
    "alpha": 1,
    "cssValue": "rgb(255, 65, 65)",
    "count": 21,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 688,
        "property": "svg-fill"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4791,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#121297",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 151)",
    "count": 10,
    "contexts": [
      {
        "tag": "span",
        "text": "Get 50% off all courses and workshops!",
        "top": 0,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#9393F3",
    "alpha": 1,
    "cssValue": "rgb(147, 147, 243)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1773,
        "property": "svg-fill"
      }
    ]
  }
]
```

### 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, with tighter internal padding inside cards and close proximity for related typography elements.
- Corner style: Consistent use of fully rounded (pill-shaped) corners for buttons and prominent rounded corners on larger cards.
- Radius: Large radii (approx 16px-24px) for feature cards and testimonial cards; 50% (pill) for action buttons and badges.
- Borders: Virtually borderless approach, relying on strong solid color blocks against contrasting backgrounds to define component boundaries.
- Buttons: Pill-shaped, solid-fill with contrasting text color, frequently incorporating a directional arrow icon.
- Content width: Wide max-width container that centralizes main text content, while allowing background elements, cards, and marquees to bleed towards or off the edges.
- Density: Loose density in overall page composition allowing shapes to float, but moderate-to-high density within specific cards and text blocks.
- Evidence: Observed from the pill-shaped CTA buttons, borderless colored cards with noticeable corner radii, and the generous padding around large typographic headings.

## Sections

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

1. **Navbar — SuperHi Navbar** (Home)
   A full-width scrolling discount strip sits over a sparse menu, so the offer is seen first while search and sign-in stay reachable.
   Capture: 1440×96px; page bounds 0–96px of 8620px; source section ID: `1cc7b86b-f5fa-4bff-b6e0-ac9f61958e9f`; image: https://media.designdetails.io/library/f13ad272e4e4d3e434c17667e6bb4329cef02be6e25c20dd9edd5485580f2532/1cc7b86b-f5fa-4bff-b6e0-ac9f61958e9f.webp
   SECTION.md v3.2: `1cc7b86b-f5fa-4bff-b6e0-ac9f61958e9f` (deterministic evidence; editorial review pending)
2. **FAQ — Accordion questions with quote collage** (Home)
   Collapsed one-line questions with a single open answer keep a long list compact, while the overlapping quote cards below add social proof.
   Capture: 1440×2860px; page bounds 5010–7870px of 8620px; source section ID: `2ecc024e-33c9-4fc0-b05f-1c66d7ff618b`; image: https://media.designdetails.io/library/e5f5bb7eed906b6c2e0743e597b0726c11f4ed99da06dbc9c9d1187a977f3ba5/2ecc024e-33c9-4fc0-b05f-1c66d7ff618b.webp
   SECTION.md v3.2: `2ecc024e-33c9-4fc0-b05f-1c66d7ff618b` (deterministic evidence; editorial review pending)
3. **Other — Falling smiley balls animation** (Home)
   Colorful smiley balls piling up at the bottom bring the brand mascot to life and reward scrolling with a playful moment.
   Capture: 1440×750px; page bounds 7870–8620px of 8620px; source section ID: `fa3f7de3-2543-4e04-8986-9025f80cf74d`; image: https://media.designdetails.io/library/6ff4fd96f220c1cb49ecf820163d3cd7dd1daa4a176e44a453eb986b907c4892/fa3f7de3-2543-4e04-8986-9025f80cf74d.webp
   SECTION.md v3.2: `fa3f7de3-2543-4e04-8986-9025f80cf74d` (deterministic evidence; editorial review pending)
4. **Hero — Creative Career Hero** (Home)
   AI suggestion (96% confidence): Complete, high-impact hero with a bold career-focused headline, supporting copy, dual CTAs, and distinctive geometric artwork.
   Capture: 1440×852px; page bounds 93–945px of 8620px; source section ID: `2d04d1f3-d98e-498c-83cc-7e4cb9de8a7e`; image: https://media.designdetails.io/library/9a7387f07d3f138cb468d1635a3f14cc67f75d123e20819d8578089ae424ba66/2d04d1f3-d98e-498c-83cc-7e4cb9de8a7e.webp
   SECTION.md v3.2: `2d04d1f3-d98e-498c-83cc-7e4cb9de8a7e` (deterministic evidence; editorial review pending)
5. **Feature Grid — Most Popular Courses** (Home)
   AI suggestion (97% confidence): Complete three-card course grid with a section heading, browse-all CTA, vivid differentiated cards, descriptions, and individual action links.
   Capture: 1440×804px; page bounds 1668–2472px of 8620px; source section ID: `1b5b9692-b4ac-4d63-a98f-4b37d80a6680`; image: https://media.designdetails.io/library/3ba8bef76405f59cce252046e7570def064f7ed24dc6fb4d1eb3dd94f9ee935a/1b5b9692-b4ac-4d63-a98f-4b37d80a6680.webp
   SECTION.md v3.2: `1b5b9692-b4ac-4d63-a98f-4b37d80a6680` (deterministic evidence; editorial review pending)
6. **CTA — Newsletter, Community and Course CTAs** (Home)
   AI suggestion (93% confidence): Complete three-card conversion section pairing bold geometric artwork with distinct signup, community, and course calls to action.
   Capture: 1440×1230px; page bounds 2726–3956px of 8620px; source section ID: `3bdfd5fb-2688-4dc5-8937-c973a0929d41`; image: https://media.designdetails.io/library/cbc8b4ca5bbcd7e41c303a8b240871191c2a70011be59e708cb93d0f5b737fe0/3bdfd5fb-2688-4dc5-8937-c973a0929d41.webp
   SECTION.md v3.2: `3bdfd5fb-2688-4dc5-8937-c973a0929d41` (deterministic evidence; editorial review pending)
7. **Testimonials — Student Social Testimonials** (Home)
   AI suggestion (96% confidence): Complete yellow testimonial section with its heading and a cohesive row of student quote cards styled like social posts.
   Capture: 1440×882px; page bounds 4142–5024px of 8620px; source section ID: `45c87395-d84a-4f89-9b1d-61e4cab68a06`; image: https://media.designdetails.io/library/2b6f9e0d77c95832bd9b8f8d294e256921e610ddddd8c7433dd0b3484f704b4a/45c87395-d84a-4f89-9b1d-61e4cab68a06.webp
   SECTION.md v3.2: `45c87395-d84a-4f89-9b1d-61e4cab68a06` (deterministic evidence; editorial review pending)
8. **Testimonials — Trusted by 50,000+ Creatives** (Home)
   AI suggestion (98% confidence): Complete, self-contained social-proof section with a clear heading and a distinctive layered collage of colorful customer quote cards.
   Capture: 1440×783px; page bounds 6136–6919px of 8620px; source section ID: `9deec17b-6433-41a6-a069-c94303d021d9`; image: https://media.designdetails.io/library/793c421838e2a6e05b7472e67df889cc41d32dd9b88f44c018e4e1c28a871e2e/9deec17b-6433-41a6-a069-c94303d021d9.webp
   SECTION.md v3.2: `9deec17b-6433-41a6-a069-c94303d021d9` (deterministic evidence; editorial review pending)
9. **Product Demo — Shaders for the Web Interactive Preview** (Home)
   AI suggestion (94% confidence): Complete interactive course preview panel with explanatory copy, a large shader demonstration canvas, and a focused course CTA.
   Capture: 1440×789px; page bounds 6967–7756px of 8620px; source section ID: `5ca4946f-7c5f-4ae9-b484-f299f242a220`; image: https://media.designdetails.io/library/0d12218f5c4f5440186015de432333fcd965a95944251769dbaff071fbb61194/5ca4946f-7c5f-4ae9-b484-f299f242a220.webp
   SECTION.md v3.2: `5ca4946f-7c5f-4ae9-b484-f299f242a220` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/bacdfb242ab03bbc61aeb01b337199149ec6186d3c1484703dc9ca3b60d7c13c/desktop_full-251390b7-2026-11-10T07-16-46-994Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1dda50a4d2c68ce02968371642bfd6d69c6ff3e619cf7965ec5b4af7b31fbedd/mobile_full-251390b7-2026-11-10T07-17-27-269Z.webp
- Open Graph image: https://media.designdetails.io/library/4b83486e1ba89eb0c285a05f710071c7f21afdbc96ba40a79f7c622d4a20141e/og_image-251390b7-2026-11-10T07-16-55-182Z.webp
- Full-page video: https://media.designdetails.io/library/e4fa695bee2104d0dc113118f4eeff1f39b0fdecad43f221a665742263fc807a/motion-1794298713381.mp4
- Video poster: https://media.designdetails.io/library/56f4cc89ed35fab931a44c237e64664ad94e9ad9f92e4653677eb9f00a49fcdb/motion-poster-1794298713381.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
- Logo Strip
- FAQ Accordion
- Primary Button
- Badge
- Footer
- Continuous Marquee
- Floating Shape Background
- Announcement Bar
- Feature Collection
- Testimonial Card

## Quality rubric

Overall: 56.2/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: SuperHi presents a cheerful, well-organized marketing site built from bright color-coded cards, pill buttons, and a consistent grotesque/mono typographic system. Content is thoughtfully matched to purpose—course cards map to curriculum categories, and a shader-background section cleverly demonstrates content from the brand's own Shaders for the Web course—showing genuine care in connecting design choices to the educational product. However, the overall execution leans on conventions that are now common across edtech and SaaS marketing: three separate marquee animations, a stacked-card layout punctuated only by floating hero shapes, and a bright-primaries-on-pastel-canvas palette that closely resembles a widely used contemporary template. The bouncing footer smileys and the self-aware shader callout are the most original touches, but they are isolated flourishes rather than a system of hard-to-substitute ideas running through the whole page. The site is professionally executed, internally consistent, and readable, landing it as a solid, competent example of its chosen playful-geometric idiom without achieving the structural or motion ambition needed for a 'good' or 'strong' rating.

- Typography (15%): 62 — A consistent two-family system (Haas Grotesk Display for headlines, Haas Grotesk Text for body, Martian Mono uppercase for labels/badges) gives clear hierarchy, with a huge 92px/-2.8px tracked hero down to 42px section heads and 16-20px body copy. Scale steps are logical and the mono accent reads as a nice contrast for small UI labels. However the pairing (grotesque display + grotesque text + mono label) is a very common SaaS/edtech formula and execution stays safely conventional rather than demonstrating any distinctive typographic voice.
- Color (10%): 60 — A light blue canvas (#F0F6FF) hosts saturated card colors (blue #2727E6, green #16AB59, orange #FF7715, yellow #FFDA00, pink tones) that create clear content blocks with good text contrast (#111118 on light, white on saturated fills). The palette is vibrant and coherent with the playful brand, but this 'bright primaries on pastel canvas' combination is now a widespread convention in edtech/creative-course marketing sites, limiting any sense of a bespoke color identity.
- Layout (20%): 58 — The page follows a conventional vertical stack of card-based sections (hero, logo strip, student-work grid, colored feature cards, newsletter/community/free-course blocks, testimonial marquee, FAQ accordion, trust-quote wall, shader demo, footer) with generous spacing and floating decorative shapes bleeding toward the hero edges. Internal card density and whitespace use is competent and readable, but the structural approach—stacked rounded-card sections with the hero shapes as the only unconventional move—is a standard contemporary marketing-page template rather than a considered compositional system with real structural ideas.
- Motion (20%): 54 — Motion is present throughout (top banner marquee, logo marquee, testimonial marquee, waving hero icon, animated shader background, bouncing footer circles) which gives the site a lively feel, but three of six described moments are the same marquee pattern—one of the most generic, low-effort motion idioms in contemporary web design—repeated for announcements, logos, and testimonials. The shader distortion and bouncing footer balls are the more distinctive moments, but overall the motion vocabulary leans heavily on passive looping rather than interaction-driven or narratively purposeful movement, and no hover/scroll-triggered choreography is evidenced.
- Originality (25%): 48 — The 'big friendly geometric shapes + bright primary colors + smiley mascots + pill buttons + marquees' aesthetic is now a widely recognized convention across edtech, SaaS, and creative-course marketing sites (comparable to many Mailchimp/Notion/Duolingo-adjacent brands). The self-aware 'Love or hate this effect?' shader callout that references the platform's own Shaders for the Web course is a clever, brand-specific touch tying content to craft, and the bouncing-footer-smiley gag has some personality, but these are isolated flourishes within an otherwise highly familiar visual template rather than a cohesive set of hard-to-substitute original ideas.
- Content (10%): 65 — Content sections are well matched to purpose: course cards speak directly to curriculum offerings, the student-work gallery and testimonial wall support credibility, the FAQ addresses real purchase concerns, and the shader demo doubles as a live example of a course topic, directly reinforcing the brand's 'learn by building' promise. This purposeful alignment between visual treatment and subject matter is the site's strongest axis.

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

Bold scattered shapes in primary colours and a huge black headline give the page a playful, creative energy that fits a design school. Each section down the page gets its own flat colour block (pink, green, orange, yellow) which breaks up a long scroll and makes it easy to tell course topics apart at a glance.

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