Marketing landing & design system

One page, built to convert

A long-form marketing landing that sells restaurant owners on running their own online shop, paired with the design system it is built from: the Satoshi type family, a documented colour system, and a component library the whole page is assembled from.

Landing pageWeb designDesign system
Eatmaniak product screen

Category

  • Marketing landing
  • Product website

Deliverable

  • Long-form landing
  • Design system

What we did

  • UX & UI design
  • Web design

Foundations

  • Satoshi type system
  • Component library
The product

A landing page is a sales argument, laid out

This page has one job: turn a restaurant owner who is tired of paying delivery-portal commission into someone who books a call. Every section is a step in that argument, and every section is built from the same underlying design system.

The page and the system it is made of

The page and the system it is made of

The visible deliverable is a single, long marketing page. The invisible one is the design system beneath it: a typeface, a colour language and a set of components, documented so the page stays consistent and the next page inherits the same rules.

Structured as a funnelHero, proof, a without-versus-with comparison, a savings breakdown, a three-step process, an FAQ and a consultation call-to-action, in the order that moves a reader forward.
One typeface, four weightsThe Satoshi family in Black, Bold, Medium and Regular carries the whole hierarchy, from a 48px display headline down to 14px body.
Reusable componentsButtons, chips, toasts and cards are defined once in the system and reused across the page, so nothing is drawn twice.
Down the page

How does the page make its case?

Read top to bottom, the landing walks a restaurant owner from the pitch to the point of booking a call. Each section below is a real part of the delivered page.

Transferable

What does a landing page that actually converts need?

These held true here and hold for any product landing whose job is a booked call, not just a nice scroll.

  1. One argument, in order. A landing is not a brochure; every section is the next line of a single case, and anything that does not move the reader is cut.
  2. Feeling, then figures. An emotional comparison earns attention; a concrete breakdown earns belief. A good page does both, in that order.
  3. A small next step. Nobody buys a platform from a page. The call-to-action asks for a free call, not a commitment, so the yes is easy.
  4. Objections answered before they are voiced. The FAQ exists to clear the doubts that would otherwise stall the decision.
  5. A system underneath. A documented type scale, colour language and component set are what keep a long page consistent and the next one fast to build.
Visual language

What is the page built from?

These values are read from the project's own design system, not sampled off a screenshot. The delivered landing wears one action colour, a crimson pink, over deep navy and a neutral scale, and sets everything in the Satoshi family.

Aa

Primary typeface

Satoshi

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 & ? ! £ $ €

Satoshi BlackDisplay headlines
Satoshi BoldSection headings
Satoshi MediumButtons & UI
Satoshi RegularBody copy
48pxRestaurant online shopH1
36pxSection headingH2
24pxSub-headingH3
20pxCard headingH4
16pxLead copy and buttonsH5
14pxBody textBody

Read from the project's documented design system: the Satoshi family in four weights across an eight-step scale, alongside a colour system with brand, semantic and neutral roles and a component library of buttons, chips and toasts. Satoshi is an open-licence typeface; the specimen above falls back to the nearest available face if it is not installed on your device.

FAQ

Building a marketing landing and a design system

The questions we hear first about landing pages and design systems.

Ask us yours
What makes a landing page convert?

Structure more than decoration. A page that converts is a single argument laid out in order: a clear promise, proof, a concrete comparison, a small next step and answers to the obvious objections. Eatmaniak follows exactly that sequence, which is why the design work is as much about what each section has to achieve as about how it looks.

Why build a design system for a single page?

Because a system is what keeps a long page consistent and makes the next page cheap. Defining the Satoshi type scale, the colour roles and the components once means every section is assembled from the same parts rather than redrawn, and a second or third page inherits the rules instead of reinventing them.

What typeface and colours does it use?

The type is the Satoshi family in four weights, Black, Bold, Medium and Regular, across an eight-step scale. The colour system pairs one crimson-pink action colour with a deep navy for dark sections, a neutral grey scale, and documented semantic colours for success, warning and error states.

How long does a landing page like this take?

A single long-form landing with a supporting design system is a matter of weeks rather than months, and most of the effort is upfront: agreeing the argument the page has to make and defining the system it is built from. Once those exist, the page itself comes together quickly and the next one faster.

How much does a marketing landing page cost?

It depends on scope, and no honest figure comes from a screenshot. The biggest drivers are whether a reusable design system is in scope, how many sections the page carries, and how much custom illustration or motion is involved. Shanti Infosoft scopes it on a short call and returns a fixed quote.

Need a page that turns visitors into calls?

Tell us how your business actually works and we will tell you honestly what it takes to build. See more of our work or what we do.

Book a 15-minute call