Style Guide

Guidelines and strategies to help you creating a consistency with the serverless product.

What is a styleguide

Clients, marketers, Webflow developers, and anyone who work on our project should be able to read a class and understand what that class is responsible for doing.

Recommended global classes

Section

Body
Section

Section class will take up the full available width.

Container

Body
Section
Container

Container class max width is set to 1200px. If screen is larger than 1200px, then will appear responsive spacings on the left and on the right side.

Columns

Body
Section
Container
Columns

Columns can be 100% width of a container or div parent. If a column is placed outside a section, it will become 100% full-width of the screen.

Grid

Body
Section
Container
Grid

Grids are used very often especially for tables, pricing options, faqs and any other type of content that requires a detailed layout structure. If a grid is placed outside a section, it will become 100% full-width of the screen.

Colors

Red

Call to actions
#FD5750

Black Dark

Backgrounds
#000000

Black Medium

Shade of grey
#121212

Black Light

Shade of grey
#282828

Grey Dark

Shade of grey
#7C7C7C

Grey Medium

Shade of grey
#C7C7C7

Grey Light

Shade of grey
#F7F7F7

Headings

Left aligned

h1
white

H1 Heading

h2
white

H2 Heading

h3
white

H3 Heading

h4
white

H4 Heading

CENTER aligned

h1
center
white

H1 Heading

h2
center
white

H2 Heading

h3
center
white

H3 Heading

h4
center
white

H4 Heading

RIGHT aligned

h1
right
white

H1 Heading

h2
right
white

H2 Heading

h3
right
white

H3 Heading

h4
right
white

H4 Heading

Headings

Left aligned

h1
black

H1 Heading

h2
black

H2 Heading

h3
black

H3 Heading

h4
black

H4 Heading

CENTER aligned

h1
center
black

H1 Heading

h2
center
black

H2 Heading

h3
center
black

H3 Heading

h4
center
black

H4 Heading

RIGHT aligned

h1
right
black

H1 Heading

h2
right
black

H2 Heading

h3
right
black

H3 Heading

h4
right
black

H4 Heading

Paragraphs

Left aligned

p1
white

Lorem ipsum dolor emet si lorem

p2
white

Lorem ipsum dolor emet si lorem

p3
white

Lorem ipsum dolor emet si lorem

p4
white

Lorem ipsum dolor emet si lorem

CENTER aligned

p1
center
white

Lorem ipsum dolor emet si lorem

p2
center
white

Lorem ipsum dolor emet si lorem

p3
center
white

Lorem ipsum dolor emet si lorem

p4
center
white

Lorem ipsum dolor emet si lorem

RIGHT aligned

p1
right
white

Lorem ipsum dolor emet si lorem

p2
right
white

Lorem ipsum dolor emet si lorem

p3
right
white

Lorem ipsum dolor emet si lorem

p4
right
white

Lorem ipsum dolor emet si lorem

Paragraphs

Left aligned

p1

Lorem ipsum dolor emet si lorem

black
p2
black

Lorem ipsum dolor emet si lorem

p3
black

Lorem ipsum dolor emet si lorem

p4
black

Lorem ipsum dolor emet si lorem

CENTER aligned

p1
center
black

Lorem ipsum dolor emet si lorem

p2
center
black

Lorem ipsum dolor emet si lorem

p3
center
black

Lorem ipsum dolor emet si lorem

p4
center
black

Lorem ipsum dolor emet si lorem

RIGHT aligned

p1
right
black

Lorem ipsum dolor emet si lorem

p2
right
black

Lorem ipsum dolor emet si lorem

p3
right
black

Lorem ipsum dolor emet si lorem

p4
right
black

Lorem ipsum dolor emet si lorem

Buttons

FiLLED

btn
filled
Sign Up

WHITE

btn
white
Sign Up

OUTLINE

btn
outline
Sign Up

LINK

Main Hero Section

Do more with less.
Serverless

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Secondary Pages Hero Section

Do more with less.
Serverless

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Use Cases

Here we describe some core use cases for serverless, though we encourage you to think beyond them. Serverless is incredibly flexible and can be used to address a wide variety of application problems. It is also extensible, making it easy to build in use cases that are not currently supported.

3 Columns

Heading

Fast Deployments

Serverless Cloud is hyper-optimized to offer sub-5-second code synchronization and deployment. Now, you can work on the same environment you'll use in production, at the speed of your local environment.

Fast Feedback

Logs stream in real-time to your console and the Serverless Cloud dashboard, enabling you to discover and debug errors from your cloud environment instantly.

Fast Performance

Backed by bleeding-edge services running on the world's largest and most reliable cloud providers, your applications run at lightning speed—whether your in San Fran, Stockholm, or Shenzhen.

Call to action sections

New to serverless?

To get started, pop open your terminal & run: npm install serverless -g

Nevertheless. Serverless.
Zero-friction serverless application development for all.

Nordstrom
CocaCola
Expedia
Reuters

Reduce overhead, liberate innovation.

GitHub
41,471
Github Stars
Downloads
15,907,086
Downloads
AWS
Technology
Partner
Serverless Cloud logo

Be faster than everyone else.

Exclusive Launch – Limited Access Available

Start Now

Footer section