Styleguide
Styleguide is a set of guidelines and strategies created to help you build Webflow websites.
Headings
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
Derrick Pham
Derrick Pham
Text Sizes
Text sizes when typography style doesn't match the default HTML tag.
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.
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.
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.
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.
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.
Eyebrow
Text Weights
derrick-text-bold
Text Styles
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-link
text-style-link
Text Alignment
text-align-left
text-align-center
text-align-right
Background Colors
Manage recurring background colors.
Text Colors
Manage recurring text colors.
Icons
Unify icons sizes.
Structure
Defined and flexible core structure we can use on all or most pages.
sHADOWS
Utility shadows mostly used on different cards
Utility Classes
Utility classes we like to use in most of our projects to build faster.
Words ClassES
Utility classes to animate each word on scroll to view.
Margins
Unified spacer system for the project.