Statamic

Item: Statamic
Rating: 7.6

Laravel-based flat-file and database CMS with a friendly control panel.

statamic.com Save page

7.6/10MABTU rating

FAQ

DESKTOP · 1440 × 12,253/ ↗

MOBILE · 390

Section outline · Home

01heroPaper-cut jungle illustration, serif headline, two buttons, screenshot80
02logosLogo row with captions1,638
03newsThree post cards411
04features3x2 feature cards on pastel gradient819
05architectureToggle, folder tree and YAML code1,696
06ecosystemSix cards: addons, kits, Laravel, partners, community, docs1,080
07showcaseGrid of client site screenshots2,958
08testimonialCut-out portrait with quote1,236
09ctaTorn-paper edge, two buttons, dark footer800

Rating · Home

Visual design8.2

UX & clarity7.4

Originality8.4

Craft & consistency7.6

Motion5.5

Performance & a11y7.7

This page scores 7.7; the site score weights the home page double.

Main colours

Light·white background·vivid

Typography

P22 Mackinac Proheading · font · adobe Lexendbody · sans · google

Stack & style

Alpine.js Google Fonts Statamic Adobe Fonts Tailwind CSS Splide

Minimal Editorial Playful Gradient-heavy Illustration-led Bento grid Live chat Logo cloud Parallax Pricing table Tabs Testimonial slider

Also: reCAPTCHA, Stripe, Cloudflare, Fathom

Design DNA

Hero is a warm paper-cut jungle scene (waterfall, mountains, toucan, hibiscus) with a light serif headline and an italic 'actually'. The product screenshot overlaps the illustration, with tropical flowers framing its lower corners. Below, the page washes through pale lilac, peach and mint gradients; headings mix light serif with bold serif keywords. Feature cards in a 3x2 grid hold cropped UI and type specimens, a flat-file/database toggle shows YAML beside a folder tree, an ecosystem grid covers addons, starter kits, partners, community and docs, a showcase of client sites, and a 'Take it for a spin' CTA with a rough torn-paper edge.

Worth borrowing

Commission a paper-craft illustration scene for a developer product's hero instead of abstract gradients.
Mix a light serif with bold serif keywords in the same headline for emphasis.
Frame a hero screenshot with illustrated foliage peeking in from the corners.