One system.

Every new page.

Every colour, text style and component Sidewise is built from, in one place. Build new pages from these parts and they will match the rest of the site in light and dark mode.

01
Colours

Colours

Every colour is a variable with a light and a dark value. Change one in the Theme Colors collection and it updates everywhere.

Light #EFEDE8
Dark #0A0A0A
Background
Base
Light #E7E4DE
Dark #141414
Shell
Base
Light #ECE9E4
Dark #181818
Shell Hover
Base
Light #FAF9F6
Dark #1A1A1A
Surface
Base
Light #F4F2EE
Dark #0C0C0C
Frame
Base
Light #281E0F 8%
Dark #FFFFFF 6%
Border
Base
Light #E2DFD8
Dark #242424
Placeholder
Base
Light #F0EEE9
Dark #242424
Raised
Base
Light #1A1815
Dark #FAFAFA
Text Primary
Text
Light #57534C
Dark #A1A1A1
Text Secondary
Text
Light #67635B
Dark #8A8A8A
Text Tertiary
Text
Light #868178
Dark same
Heading Muted
Text
Light #1A1815
Dark #FFFFFF
Primary
Button
Light #FAF9F6
Dark #0A0A0A
Primary Text
Button
Light #9A5222
Dark #DC9058
Accent
Accent
Light #FBEDE3
Dark #3D2A24
Accent Subtle
Accent
Light #DC7828 25%
Dark #FF943D 20%
Accent Border
Accent
Light #22C55E
Dark same
Success
State
Light #EF4444
Dark same
Error
State
02
Typography

Typography

Inter for everything. Sizes are shown as Desktop / Tablet / Phone and come from the Typography variables.

56 / 48 / 40 px · 1.02em
Ag
H1
Heading · h1
36 / 36 / 32 px · 1.05em
Ag
H1 Compact
Heading · h1
32 / 32 / 26 px · 1.1em
Ag
H2
Heading · h2
20 / 20 / 20 px · 1.25em
Ag
H3
Heading · h3
17 px · 1.3em
Brands and websites that win clients.
Title
Title · p
15 px · 1.3em
Brands and websites that win clients.
Title Small
Title · p
13 px · 1.3em
Brands and websites that win clients.
Title XS
Title · p
17 px · 1.5em
Brands and websites that win clients.
Body Large
Body · p
15 px · 1.55em
Brands and websites that win clients.
Body
Body · p
13 px · 1.45em
Brands and websites that win clients.
Caption
Body · p
12 px · 1.3em
Available for work
Label
Label · p
32 / 32 / 26 px · 1em
50+
Metric
Display · p
18 / 18 / 17 px · 1.45em
Clients buy the moment the problem goes away.
Quote
Display · p
56 / 48 / 40 px · 1.02em
Ag
H1 Muted
Heading · p
36 / 36 / 32 px · 1.05em
Ag
H1 Compact Muted
Heading · p
20 px · 1.25em
Ag
Prose H2
Rich text · h2
17 px · 1.3em
Ag
Prose H3
Rich text · h3
03
Tags

Rich text

How headings, paragraphs, links, lists and quotes look inside article and legal content.

A heading for a new part

Body text sits at a comfortable size with generous line height, so long articles stay easy to read. This is a text link inside a paragraph.

A smaller heading

  • Unordered list item one
  • Unordered list item two
  1. Ordered list item one
  2. Ordered list item two
Clients buy the moment the problem goes away.

A closing paragraph after the quote.

Compact list

  • Used for the What’s included list on products
  • Add is-compact to the list in the CMS field
  • 15px text with tight rows
04
Components

Components

Every reusable piece is a native Webflow component with props. Drag one in from the Components panel and edit its props.

Controls
13
Start a project
Button
Component
View work
Button Secondary
Component
Read more
Button Ghost
Component
Work
Back Link
Component
Design
Pill
Component
New
Pill Accent
Component
Available for work
Status Badge
Component
New
Agency Starter is out
Announcement
Component
Home
Nav Item
Component
All
Filter Tab
Component
By sending, you agree to the
Privacy Policy
Consent Note
Component
Cards
14
Projects
50+
Brands and sites shipped
Metric Card
Component
Maya LindqvistDaniel OkoroEthan BrooksSofia MarchettiHannah Weiss
4.9 / 5
from 40+ clients
Rating Summary
Component
Northbeam brand identity on stationery
+48%
more enquiries
Northbeam
·
Brand Design
A calm, confident identity for a boutique energy consultancy.
2026
Project Card
Component
Studio Folio template on a tablet
Webflow
Studio Folio
Template
·
Portfolio site
$69
View
Product Card
Component

Alex took a messy brief and turned it into a brand our whole team finally agrees on.

Portrait of Maya Lindqvist
Maya Lindqvist
Founder
·
Northbeam
Testimonial Card
Component
Fanned brand colour cards
Design
Sep 8, 2026
8 min read

A brand system you can actually maintain

Article Card
Component

Brand Design

A complete identity built from your positioning.

Brand Design
From $4,000
From $4,000
View service
Service Card
Component
Client Logo
Component

Figma

Design and prototyping

Tool Card
Component

Strategy and positioning

A workshop and a one-page brief that every decision is tested against.

Sub-service Card
Component
01

Workshop

We agree on who you serve and what you stand for.

Process Step
Component
Alex Morgan
Alex Morgan
Brand & web designer

I write about the business side of design and help founders launch brands that bring in work.

Start a project
About me
Author Card
Component
Studio Folio template previewStudio Folio template previewStudio Folio template previewStudio Folio template preview
Product Gallery
Component
Sections
8

Selected work

Recent identities and websites, each built around one clear business goal.

All work
Section Head
Component
Hourglass on a dark stone surface
Price the outcome, not the hours
Business
Sep 22, 2026
6 min read
Article Row
Component

How long does a project take?

Brand identities take three to four weeks and websites four to six.

FAQ Item
Component
2026

Site of the Day

Awwwards

Fieldnote
Info Row
Component
Email
hello@example.com

hello@example.com

Detail Row
Component
2018 — Now

Independent Designer

Alex Morgan Studio

Remote
Timeline Row
Component
Trusted by teams at
Northbeam logoFieldnote logoHalcyon Supply logoAtelier Nove logoBrightwell logoOrbitly logoKestrel Labs logoLumen & Co logo
Logo Row
Component