Genie Studio

Item: Genie Studio
Rating: 7

AI content tool that finds trends and drafts on-brand posts.

geniestudio.io Save page

7.0/10MABTU rating

Home

DESKTOP · 1440 × 12,849/ ↗

MOBILE · 390

Section outline · Home

01heroSplit: copy, tick list, CTA left; trend card feed right1,020
02processFive-step vertical timeline with timing chips844
03featureBlack band, sources to outputs pipeline diagram
04featureBrand kit upload mockup and style-learning card
05featureChat mockup, then three use-case cards924
06featureSplit card with pastel agent network graph722
07faqPlain list accordion703
08ctaBlack band with email waitlist field586

Rating · Home

Visual design7.3

UX & clarity7.0

Originality6.4

Craft & consistency7.2

Motion6.0

Performance & a11y7.7

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

Main colours

Light·cream background·vivid

Typography

DM Serif Displayheading · serif · google DM Sansbody · sans · google

Stack & style

Next.js React Google Fonts

Minimal Editorial Product-UI-led Sticky header Bento grid FAQ accordion Process steps

Also: Vercel

Design DNA

Off-white paper canvas with a black serif display where the second line of every headline switches to grey italic ('Content that trends. Identity that stays.'). Split hero: small copy, tick list and black pill CTA on the left, a stacked feed of trend cards with green score bars on the right. A vertical five-step timeline, a black band with a source-to-output pipeline diagram, a brand-kit upload mockup, three use-case cards, a pink-tinted agent network graph, an FAQ list and a black waitlist CTA with a yellow note pill follow.

Worth borrowing

Pair each roman serif headline with a grey italic second line to give a product page a consistent editorial voice.
Show AI output as a feed of cards with two thin progress bars (viral potential, brand alignment) and a black 'Use' pill.
Explain the pipeline as three dark columns: sources, an intelligence layer and output formats, joined by thin connector lines.