superhi-plus

High-contrast electric cobalt paired with stippled 3D smiley spheres creates an energetic, modernist creator platform. Clean neo-grotesque typography grounds the playful, tactile 3D elements.

playful editorial bold

Visit site

Rated

6.1/ 10

From 4 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged: 9.1
Systemmeasured: 4.7
Distinctionmeasured: 0.9

on the grid: 10%
vertical rhythm: 70%
type on a scale: 57%
contrast passing AA: 50%
unlike the library: 0.16
model craft: 7.8/10
model deviation: 6.5/10

Colour

Background#0033e5

Text#f0f7ff

Accent#0033e5

Surface#f0f7ff

Muted#527ceb

Typefaces

Display: Haas Grot Disp Web
Body: Haas Grot Disp Web
Mono: —
Source: self_hosted
Scale: 16 · 18 · 24 · 32 · 42 · 56

Layout

Grid: —
Container: —
Spacing base: 4px
Radius: 0px

Capture

Category: education
Sections: 4
Captured: 2026-08-30
Rhythm: split blue/white → saturated blue → split blue/white → split white/blue

Type rules

Haas Grot Disp Web used universally across headlines and body
body text constrained to roughly 58 characters per line

Colour rules

strict two-tone palette of electric cobalt #0033e5 and pale ice #f0f7ff
inversion used to divide split-screen panels

Voice rules

clear proposition in display type
plain creator-focused language

Holds it together

alternate split-screen views with stark background inversions
use dithered 3D graphics in strict monochrome blue tones
render display headings in sentence case with tight leading

Contrast

text on background7.5:1 AAA

muted text on background2.1:1 fail

Type, measured

Body: 18px / 1.33
Measure: 58 characters
Display: 85px / 1.13
Tracking: 0em display
Scale ratio: 1.47

Voice

Tone: empowering, direct
Sentences: medium
Person: second
Vocabulary: accessible
Calls to action: sign up, view, apply

Built with

Builder: —
Framework: next
Motion: —
WebGL: yes
Nav: sticky_top_bar, 0 items, sticky
Length: 13.5 screens

Sections in page order

3 marked strong · 4

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
High-contrast cobalt blue split layout combining tactile dithered 3D smiley spheres with crisp modernist typography.
Mood
playful + bold
Layout
2 col · split · balanced
Open section →
01
comparison
A vibrant cobalt blue expanse featuring minimal interconnected nodes and dithered smiley icons in an airy, playful diagram.
Mood
playful + bold
Layout
1 col · asymmetric · airy
Open section →
02
feature
Strong
An asymmetrical split layout pairing a saturated electric blue anchor sidebar with a comprehensive, editorial breakdown of program features and tools.
Mood
editorial + bold
Layout
2 col · split · airy
Open section →
03
statement
Strong
A striking cobalt-blue split composition pairing a playful stippled sphere cluster with clean, high-contrast Swiss typography and structured editorial copy.
Mood
bold + playful
Layout
2 col · split · balanced
Open section →