The P (L / M) System

Your streamlined start for complex Webflow projects, where the Navigator Panel tells the UI/UX story. Establish conventions, harness shortcuts, scale with symbols. Control every pixel of your design.

Welcome 👋
Watch the 2min Intro:
1. Watch the video
2. Check out the Notion Docs
3. Review the sections on this page
4. Build something on the Build Page
5. Clone and configure your own P (L/M) Base*

*Repeat for all your serious Webflow projects
Spacing
Open X-Ray Mode: SHIFT + CMD + X
Open the Navigator: Z, pin the navigator, then expand all.
‍
There's no magic or pixel sizes here. Just 4pt rem space classes.
Add, edit or remove use cases, modeling these conventions to scale spacing across your project.
Margin
PAdding
Spacers
Colors
Watch Instructions:
Quickly change the entire color scheme by editing adding or removing colors in the following pattern below.
Be mindful of contrast ratios.
Background
(Primary / Lighter)
Background
(Primary)
Background
(Primary / Darker)
Background
(Neutral / Lighter)
Background
(Neutral)
Background
(Neutral / Darker)
Background
(Text / Base)
Background
(Black)
Background
(White)
Typography

HTML Headings

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

All H5 Headings
All H6 Headings

Heading Classes

Text Style (Heading / H1)
Text Style (Heading / H2)
Text Style (Heading / H3)
Text Style (Heading)
Text Style (Subheading)
Paragraphs

Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh. Curabitur auctor leo et libero consectetur gravida. Morbi gravida et sem dictum varius.

Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh. Curabitur auctor leo et libero consectetur gravida. Morbi gravida et sem dictum varius.

Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh. Curabitur auctor leo et libero consectetur gravida. Morbi gravida et sem dictum varius.

List
  • This is a list item
Link
This is an inline text link
Blockquote
This is a quote worth quoting. -Author

Layouts

Wrappers
Elements for semantic cases to wrap around a group of elements. Typically used for naming and settings, not styles.

Examples: Wrapper (Page), Wrapper (Section), Wrapper (Header)
Containers
Elements used to contain content or a single object with set widths, specific to each project.

Examples: Container (Outer), Container (Content), Container (Animation)
Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh. Curabitur auctor leo et libero consectetur gravida. Morbi gravida et sem dictum varius.
Rows
There's no magic or pixel sizes here. Just flex as needed.
Model, modify or remove this convention and classes as you see fit.
Columns
Grids
There's no magic or pixel sizes to be seen here. Just use grids.

Grid child styles aren't saved to the Grid (Cell) class so you can alter the placement of other elements that share the class.
‍
Use existing spacing classes within grid to have complete control.
Model, modify or remove this convention and classes as you see fit.

Modifiers

Watch Instructions:
Global Combo Classes used as modifiers across different styles.
Edit and update use cases, using this convention, to scale modifiers.

Make sure to select the parent element. Examples: Is (...), Has (...)
Visibility
Hidden on Desktop and Above (Breakpoint)
Hidden on Mobile Tablet (Breakpoint)
Hidden on Mobile Portrait (Breakpoint)
Hidden on Mobile Landscape (Breakpoint)
Max Width
Use 8pt rem widths. Can also model this for Is (Width / ... ) classes.
Size
Sets widths to the sum of the Spacing increments.
Commonly used on icons and images.
Shapes
Position
Disabled
Button Text
Round Corners
Box Shadows

Components

The reusable core elements that you interact with.
Modify your states as needed.

Native Webflow component classes start with: W-Component (...) to acknowledge that they have might extended functionality and configuration in the Settings Panel.

Add, edit or remove use cases, modeling this convention to scale components across your project.
Links
Use to navigate to another place.
Here is an inline text link: view this section
My Profile
Buttons
Use to performing an action.
Button (Primary)
Button (Secondary)
Is (Small)
Is (Small)
Tabs
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
States
The special treatment for the elements with states.
Used for clarification and settings, no styles.
CMS
Easily search and understand states with special classes.
Examples: State(CMS / Conditional Visibility), State (CMS / Empty)
No items found.
Forms
Easily search and understand states with special classes.
Examples: State (Form / Error), State (Form / Success)
Organize, add and delete use cases, modeling these conventions as needed per project.

Icons

Edit and update your project's use cases, using this convention, to scale icons. Recommended source: The Noun Project
Asset
Embed
Set SVG styles: width="100%" height="100%" fill="currentColor"
Animations
Watch Instructions:
Animations or interactions are basically handled in one of two ways.
Each uses the class convention to flag a css class or interaction.
Class to Interaction
This class doesn't actually trigger anything. It's used to highlight the interaction in the Navigator and help with consistent hierarchy reuse.

This is a content section.

This is some super sweet information about this content section that you don't want to miss out on. By the way, have you heard about P (L / M)? You should check it out. You could probably use it on that next dream project to make something really cool.

Class to CSS animation
Sometimes you want use pure Css and avoid using Webflow interactions (Page loads, etc). This will not be triggered from an interaction.

You can create an <Animation> (Name) class the Webflow Styles Panel, then add the Css code .animation-name in your Global Styles embed symbol.

This method allows you to get a preview of the class working, when adding the class to an element in the Webflow Styles panel.
Symbols
The true power of this whole system.
Anything used on multiple pages, consider making it a symbol: SHIFT +CMD+A.
Easily search and add to pages: CMD+E
Determine if you want to use the Symbol (...) prefix naming convention or not. Keep it consistent.
Leverage overrides for reusability.
‍
Try it below: Click the symbol, press D , then change both titles, the button text, and link. Repeat across pages.
Do you understand the call to action?
Let us help you figure it out.
Get Started
Unique
The special treatment for the uncommon classes that won't be reused across your P (L / M) Base. Start classes with Unique (...)|
Organize, edit and delete these as needed per project.

Install

MAcro
Clone the latest version here: Presentation (Layer / Model)
Micro
Looking to add on to an existing Webflow project or just try something out? Try this workflow to add specific classes and symbols in the ▢ P (L / M) element below:
‍
  1. Add a ▢ Div Block: Press CMD+E , type div| , press Enter
  2. Add a Class: Press CMD+Enter ,  search out suggested classes as you type Desired (Class|, press ↑ and ↓ to desired class, press Enter
  3. Repeat for each Class needed.
    Note: Only nest Classes as intended.
  4. Add to Project: Select the ▢ P (L / M) element, copy & paste into project. Move or consolidate the global styles embed to head. Delete the P (L / M) class.