W1 Design System
© 2023 Ben Lőcsei.
With questions contact ben@w1.design.
Composition
Heading
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.
Container
/ S
Container (M)
/ L
/ Full
12 Grid
12 Grid
/ Gap Zero
Box
Box (M)
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.
Box (M)
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.
Spacer
/ XS
/ S
Spacer (M)
/ L
/ XL
/ XXL
Array
Array - (Gap M)
/ Gap L
/ Gap S
/ Horizontal
/ Horizontal / Gap L
/ Horizontal / Gap S
/ Center
/ Center / Gap L
/ Center / Gap S
Typography
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.
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.
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?"
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.
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.
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?"
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.
- 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
- 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
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
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.
- 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
- 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
"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Icons
Form Elements
Webflow Slider
Horizontal Tabs
Vertical Tabs
Deploy to production
Wheelhouse baseline, yet paddle
Exposing new ways
Fire up your browser per my previous
Feature Title
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
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
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
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.
Bar
Parallax
Accordion
Accordion Item
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Accordion Item
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Accordion Item
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Accordion Item
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Accordion Item
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Image Frames & Fits
