Blocks

One block,
every system.

Each block is written once, against a small contract every design system implements. Put it inside Cueit or Skita or Folio and it becomes a screen in that system, with nothing in the markup changed. Switch systems below and watch every block change.

01

Landing page

The sections of a landing page, from hero to footer, with Satori UI motion drawn in the system's own colours.

Hero

A landing hero: an announcement, a headline that blurs in, two actions and a line of proof, over a Kinetic Grid drawn in the system's own colours.

Logo cloud

A strip of four proof points, each a muted icon, a name and one line, split by hairline dividers: backs the page up without competing with it.

Features

Six features on tiles, each an icon, a name and one sentence, under a heading that slides up as it scrolls into view.

Testimonials

Customer quotes, one featured on the emphasised surface and the rest on tiles beside it, each signed with a name and role.

Call to action

The closing call to action on the emphasised surface, with a heading that blurs in as it scrolls into view.

Footer

A site footer: brand and tagline, a newsletter sign-up, three columns of links and a row of legal links.

02

Application

Screens that live inside a product: dashboards, tables, settings, forms.

Dashboard

An overview screen in an app shell: four KPIs with one emphasised, recent invoices with status tints, and plan usage.

Data table

A customers table with status filter tabs, search, row selection with select-all and paging. Works on any rows you pass.

Settings

An account settings page: a section list beside profile, notification switches, density radio cards and a danger zone.

Create form

A new-project form with a URL derived from the name, visibility as radio cards, and validation that replaces a hint with its error.

03

Pages

The pages around a product: sign in, pricing, and what to show when there is nothing yet.

Sign in

A split sign-in page: email, password and Google on one side, a customer quote on the emphasised surface on the other.

Pricing

Three plans with a monthly and yearly switch. The recommended plan takes the one emphasised surface a view gets.

Empty states

A reusable EmptyState and the three a product needs: first run, no search results and a failed load.