Rated
6.0/ 10
From 10 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
- 8.9
- Systemmeasured
- 3.8
- Distinctionmeasured
- 2.9
- on the grid
- 30%
- vertical rhythm
- 50%
- type on a scale
- 33%
- contrast passing AA
- 40%
- unlike the library
- 0.20
- model craft
- 7.7/10
- model deviation
- 5.4/10
Colour
Background#ffffff
Text#000000
Accent#a6fe5a
Surface#a6fe5a
Muted#919191
Typefaces
- Display
- ABC Arizona Mix
- Body
- ABC Diatype
- Mono
- —
- Source
- self_hosted
- Scale
- 12 · 14 · 16 · 18 · 26 · 36
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 24px · 999px
Capture
- Category
- tools
- Sections
- 10
- Captured
- 2026-08-30
- Rhythm
- light x10
Type rules
- display serif set tight with -0.04em letter spacing
- body text restricted to a tight 46 character measure
Colour rules
- white base with saturated neon color block cards
- pure black text for primary readability
Voice rules
- short imperative statements
- clean technical product terminology
Holds it together
- display interactive typography controls above large serif headers
- delimit process grids with subtle dashed vertical borders
- use oversized full-width pill buttons for primary conversion actions
Contrast
text on background21.0:1 AAA
muted text on background3.1:1 AA Large
text on surface16.9:1 AAA
accent on background1.2:1 fail
background on accent1.2:1 fail
Type, measured
- Body
- 16px / 1.3
- Measure
- 46 characters
- Display
- 150px / 0.9
- Tracking
- -0.04em display
- Scale ratio
- 1.75
Voice
- Tone
- authoritative, direct
- Sentences
- short
- Person
- second
- Vocabulary
- technical
- Calls to action
- build, try, buy, get
Built with
- Builder
- —
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- sticky_top_bar, 2 items, sticky
- Length
- 8.2 screens
Sections in page order
3 marked strong · 10- 00
hero
Interactive typographic hero presenting massive serif display type alongside functional type-tester controls over a crisp white layout.
- Mood
- editorial + clinical
- Layout
- 1 col · stacked · balanced
- 01
statement
StrongA precise, editorial typography specimen featuring interactive typesetting controls positioned directly above an expansive serif statement.
- Mood
- editorial + clinical
- Layout
- 1 col · stacked · airy
- 02
video
An energetic, chromatic checkerboard animation filling the frame with vibrant, playful pop-art geometric patterns.
- Mood
- playful + bold
- Layout
- 1 col · full bleed · dense
- 03
feature
Quiet, refined split-screen feature presentation with high-contrast editorial typography and a disciplined media container.
- Mood
- editorial + quiet
- Layout
- 12 col · split · balanced
- 04
feature grid
StrongMinimalist four-step process grid delineated by fine dashed borders and clean typographic hierarchy.
- Mood
- clinical + editorial
- Layout
- 4 col · grid · airy
- 05
showcase
A crisp, conceptual integration showcase using vibrant pixel-like checkered color tiles and understated editorial typography.
- Mood
- playful + editorial
- Layout
- 1 col · grid · airy
- 06
pricing
StrongVibrant and punchy pricing cards pairing saturated neon blocks with split pill action bars.
- Mood
- playful + bold
- Layout
- 2 col · grid · balanced
- 07
showcase
Clean editorial portfolio grid framing digital toolkit case studies within dark media cards across an airy white canvas.
- Mood
- editorial + quiet
- Layout
- 2 col · grid · balanced
- 08
cta
An electric neon-green pill banner functioning as an oversized, hyper-confident call to action.
- Mood
- bold + playful
- Layout
- 16 col · centered · airy
- 09
cta
A stark, minimalist newsletter strip with clean grotesk typography and generous white space framing an understated email input.
- Mood
- quiet + clinical
- Layout
- 8 col · split · airy
