W1 Design System

Universal Design System for Webflow Professionals.

Free for Fair Use. Not free for commercial use. Learn about how you can use this product here. For commercial use contact ben@w1.design.

© 2023 Bence Lőcsei

Basic Composition

HEADING / L

SPACER

PARAGRAPH - 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.

SPACER / XL
ARRAY / HORIZONTAL
CONTENT
CONTENT
IMAGE / WIDESCREEN
12 GRID
CONTAINER
SECTION
SECTION

Container

Basic Composition

/ S

Container (M)

/ L

/ NARROW

/ NO PADDING BOTTOM

/ Full

12 Grid

12 GRID

12 GRID / STRETCH

12 GRID / STRETCH / MAX WIDTH MOBILE

12 GRID / NO GAP

12 GRID / NO GAP / STRETCH

Content

CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CONTENT / CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CONTENT / BAR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

See All

CONTENT / CENTER / HEADLINE WIDTH

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CONTENT / FRAMED

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

CONTENT / FRAMED / CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

CONTENT / FRAMED / BAR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

CONTENT / FRAMED / L

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

CONTENT / FRAMED / L / CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

CONTENT / FRAMED / L / BAR

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

CONTENT / SPACE BETWEEN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

CONTENT / SPACE BETWEEN / CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button

Spacers

/ XS

/ S

SPACER

/ L

/ XL

/ XXL

Array

ARRAY

/ GAP L

/GAP S

/ HORIZONTAL

/ HORIZONTAL / GAP L

/ HORIZONTAL / GAP S

/ CENTER

/ CENTER / GAP L

/ CENTER / GAP S

Typography

Type Scale

/S - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

HEADING (M) - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/L - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/XL - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/XXL - Yeah, but your scientists.

/XS - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/S - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

HEADING (M) - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/L - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/XL - Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.

/XXL - Yeah, but your scientists.

PARAGRAPH - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

PARAGRAPH /S - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

PARAGRAPH / L - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

TEXT  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / BOLD / INV  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / FADED  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / L -  Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / S - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
Text / Label
Text / Form Field Label *
QUOTE - "Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist? You know what? It is beets. I've crashed into a beet truck. Did he just throw my cat out of the window?"
QUOTE / XL - "Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist? You know what? It is beets. I've crashed into a beet truck. Did he just throw my cat out of the window?"

PARAGRAPH / INV - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

PARAGRAPH /S / INV  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

PARAGRAPH / L / INV   - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.

TEXT / INV   - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / BOLD / INV  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / FADED / INV   - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / L / INV  -  Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
TEXT / S / INV  - Must go faster... go, go, go, go, go! What do they got in there? King Kong? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.
Text / Label / INV
Text / Form Field Label / INV  *
Quote / INV   - "Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist? You know what? It is beets. I've crashed into a beet truck. Did he just throw my cat out of the window?"
QUOTE / XL  / INV - "Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Yes, Yes, without the oops! Jaguar shark! So tell me - does it really exist? You know what? It is beets. I've crashed into a beet truck. Did he just throw my cat out of the window?"

RICH TEXT

Rich Text H1

Rich Text H2

Rich Text H3

Rich Text H4

Rich Text H5
Rich Text H6

Rich Text paragrpath. Bits of moving fluff courage of our questions cosmos rings of Uranus are creatures of the cosmos. A very small stage in a vast cosmic arena how far away tendrils of gossamer clouds trillion from which we spring two ghostly white figures in Rich Text Link and helmets are soflty dancing? Rich text Bold rich in heavy atoms from which we spring how far away from which we spring invent the universe.

Figure caption
  • Tingling of the spine permanence of the stars quasar Tunguska event Rig
  • Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  • Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  • Tingling of the spine permanence of the stars quasar Tunguska
  1. Tingling of the spine permanence of the stars quasar Tunguska event Rig
  2. Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  3. Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  4. Tingling of the spine permanence of the stars quasar Tunguska
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

RICH TEXT CUSTOM LIST

  • Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  • Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  • Tingling of the spine permanence of the stars quasar Tunguska

RICH TEXT INV

Rich Text H1

Rich Text H2

Rich Text H3

Rich Text H4

Rich Text H5
Rich Text H6

Rich Text paragrpath. Bits of moving fluff courage of our questions cosmos rings of Uranus are creatures of the cosmos. A very small stage in a vast cosmic arena how far away tendrils of gossamer clouds trillion from which we spring two ghostly white figures in Rich Text Link and helmets are soflty dancing? Rich text Bold rich in heavy atoms from which we spring how far away from which we spring invent the universe.

Figure caption
  • Tingling of the spine permanence of the stars quasar Tunguska event Rig
  • Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  • Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  • Tingling of the spine permanence of the stars quasar Tunguska
  1. Tingling of the spine permanence of the stars quasar Tunguska event Rig
  2. Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  3. Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  4. Tingling of the spine permanence of the stars quasar Tunguska
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

RICH TEXT CUSTOM LIST INV

  • Rich in heavy atoms something incredible is waiting to be known concept of the number one a still more glorious dawn awaits gathered by gravity corpus callosum?
  • Two ghostly white figures in coveralls and helmets are soflty dancing made in the interiors of collapsing stars a mote of dust suspended in a sunbeam the ash of stellar alchemy a still more glorious dawn awaits the carbon in our apple pies.
  • Tingling of the spine permanence of the stars quasar Tunguska
/S1
/S1

Image

IMAGE

/ WIDESCREEN

/ LANDSCAPE

/ SQUARE

/ CIRCLE

/ CIRCLE / XS

/ PORTRAIT

/ HALF SECTION

/ HALF SECTION / REVERSE

/BACKGROUND + IMAGE OVERLAY

Use in FILL class to add the overlay

Icon Box + Box Icon, Icon

Form Elements

Webflow Slider

Webflow Tabs - Horizontal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Webflow Tabs - Vertical

Feature Title

Learn more

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.

Feature Title

Learn more

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.

Feature Title

Learn more

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.

Feature Title

Learn more

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.

3 Layer Parallax

Accordion

Heading

Heading