Tokens Studio

Item: Tokens Studio
Rating: 7.2

Platform that automates design token workflows between design and code.

tokens.studio Save page

7.2/10MABTU rating

/book-your-onboarding

DESKTOP · 1440 × 9,467/ ↗

MOBILE · 390

Section outline · Home

01heroCaps headline, two buttons, floating 3D UI pieces
02videoLarge embedded video
03featuresTabs left, lavender panel with UI right938
04aboutYellow card with mascot1,630
05featuresLavender card with UI
06logosTwo-row logo cloud
07testimonialsMasonry of tinted stat and quote tiles840
08blogArticle cards600
09videoStacked video thumbnails1,176
10ctaDark teal band with cyan button and footer links

Rating · Home

Visual design7.2

UX & clarity7.2

Originality7.0

Craft & consistency7.0

Motion6.0

Performance & a11y9.0

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

Main colours

Light·white background·vivid

Typography

Almarena Neue Displayheading · sans · self-hosted Almarena Neuebody · sans · self-hosted

Stack & style

Framer Lenis Google Fonts React

Bold typography Playful 3D Product-UI-led Live chat Logo cloud Smooth scroll Sticky header Tabs

Also: Google Analytics, Google Tag Manager

Design DNA

White page with heavy condensed caps headlines and a cyan primary button. The hero surrounds a product dashboard with floating 3D UI pieces (sliders, toggles, cards) in pink, green, orange and yellow. A video block, a tabbed How the studio works section with a lavender rounded panel, a yellow mission card with a robot mascot, a lavender open-source card, a logo cloud, a masonry of coloured stat and quote tiles, article cards, a video band and a dark teal CTA footer.