v.1 | 08.01.2024

Phantom Framework

Documentation
Typography

Body

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Global
Combo
Every section starts with a Section Tag
Every section starts with a Section Tag
Body (All Pages)
Body
Default Text
Default Background

Styles

Headings

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel. Optimized for blogs

Global Heading
Text Element
Every section starts with a Section Tag
Use this to apply a heading style to a text element.
All H1 Headings
H1

H1

H1
All H2 Headings
H2

H2

H2
All H3 Headings
H3

H3

H3
All H4 Headings
H4

H4

H4
All H5 Headings
H5
H5
H5
All H1 Headings
H6
H6
H6

Styles

Display Headings

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Base
Combo
Every section starts with a Section Tag
Uses H1 Size below Desktop
D [Number]
D1
D1
D2
D2
D3
D3
D4
D4

Styles

Custom Headings

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Base
Combo
Every section starts with a Section Tag
Every section starts with a Section Tag
D [Number]
Caps
W-700
Eyebrow
This is a eyebrow
Subhead
This is a subhead

Styles

Paragraphs

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Global Paragraphs
Text Element
Every section starts with a Section Tag
Every section starts with a Section Tag
All Paragraphs
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod est tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimego veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex each ab commodo divad consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Element
Use for dark or colored backgrounds.
Paragraph-Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod est tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimego veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex each ab commodo divad consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Styles

Text

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Global Paragraphs
Text Element
Every section starts with a Section Tag
Every section starts with a Section Tag
Text
Lorem ipsum dolor sit amet.
Text-Small
Lorem ipsum dolor sit amet.
Text-Large
Lorem ipsum dolor sit amet.
All-Caps
Lorem ipsum dolor sit amet.
Copyright
Blend-Difference
Lorem ipsum dolor sit amet.
fw-600
Lorem ipsum dolor sit amet.
fw-700
Lorem ipsum dolor sit amet.
muted
Lorem ipsum dolor sit amet.
Global Paragraphs
Text Element
Every section starts with a Section Tag
Every section starts with a Section Tag
FW + [ Size ]
Lorem ipsum dolor sit amet.
fw-600
Lorem ipsum dolor sit amet.
fw-600
Lorem ipsum dolor sit amet.
fw-700
Lorem ipsum dolor sit amet.
fw-900
Lorem ipsum dolor sit amet.

Styles

Quotes

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Global Element
Utility Element
Every section starts with a Section Tag
Every section starts with a Section Tag
All Block Quotes
Quotes
"Industry Studios did a great job at understanding our business in it's early stages and guiding us on what our website should look and feel like."

Styles

Lists

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Global Element
Every section starts with a Section Tag
All Ordered Lists
  1. This is list item number one.
  2. This is list item number two.
  3. This is list item number three
All Unordered Lists
  • This is list item number one.
  • This is list item number two.
  • This is list item number three

Styles

Rich Text

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Blog Example: Helps visualize your typography styles.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Architecto beatae vitae dicta sunt explicabo. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Duis aute irure dolor in reprehenderit in voluptate velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

Fugiat quo voluptas nulla pariatur?

Totam rem aperiam. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Et harum quidem rerum facilis est et expedita distinctio. Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque.

  1. Architecto beatae vitae dicta sunt explicabo.
  2. Qui officia deserunt mollit anim id est laborum.
  3. Non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Fugiat quo voluptas nulla pariatur?

Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Excepteur sint occaecat cupidatat non proident, sunt in culpa. Totam rem aperiam. Et harum quidem rerum facilis est et expedita distinctio.

  • Qui officia deserunt mollit anim id est laborum.
  • Qui officia deserunt mollit anim id est laborum.
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. At vero eos et accusamus. Esse cillum dolore eu fugiat nulla pariatur.

Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque. Fugiat quo voluptas nulla pariatur? Fugiat quo voluptas nulla pariatur? Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Duis aute irure dolor in reprehenderit in voluptate velit. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia.

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.

Et harum quidem rerum facilis est et expedita distinctio. Cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Nihil molestiae consequatur, vel illum qui dolorem eum.

Corrupti quos dolores et quas molestias excepturi sint occaecati.

Architecto beatae vitae dicta sunt explicabo. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.

Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Nihil molestiae consequatur, vel illum qui dolorem eum. Corrupti quos dolores et quas molestias excepturi sint occaecati. Fugiat quo voluptas nulla pariatur?

Et harum quidem rerum facilis est et expedita distinctio. Totam rem aperiam. Nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Brand Identity

Logo & Wordmark

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

SVG Logo
Every section starts with a Section Tag
Logo

Brand Identity

Colors

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Default
Used for primary backgrounds and texts.
text-co-black
#080808
text-co-white
Every section starts with a Section Tag
text-co-muted
Every section starts with a Section Tag
Primary Brand Colors
Used for buttons, links, and typography.
bg-co-primary
Every section starts with a Section Tag
bg-co-secondary
Every section starts with a Section Tag
co-accent
Every section starts with a Section Tag
Backgrounds
Used for body, section and card backgrounds.
bg-co-1
Every section starts with a Section Tag
bg-co-1
Every section starts with a Section Tag
co-accent
Every section starts with a Section Tag

Components

Images

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

6000px X 4000px

Image
Every section starts with a Section Tag
Image
Image with Text
Every section starts with a Section Tag
Image with Text

Brand Identity

Buttons

Default sizes for all headings. Adjust all breakpoint sizes and styles in the variables a panel.

Primary
Every section starts with a Section Tag
Button-Primary
Backgrounds
Every section starts with a Section Tag
Button-Light
Backgrounds
Every section starts with a Section Tag
Button-Colored
Backgrounds
Every section starts with a Section Tag
button-underline

05 - Spacing

space-sm
space-md
space-lg
Space-xl

05 - Badges

Badge-Light
Badge-Dark

05 - Lines

Line
Size
0.1 REM

Layout

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.

Layout

Containers

Responsive columns automatically adjust to 100% width.

Base
Combo
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Container
Full

Layout

Sections

Responsive columns automatically adjust to 100% width.

Base
Combo - Color
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Section
co-dark
co-light
co-primary
Combo - Content Padding
Only affecs desktop, all other breakpoint padding is 10rem

Small: 10 REM
Medium: 20REM
Large: 40REM
cp-sm
cp-md
cp-lg

Layout

Grid System / Responsive

Responsive columns automatically adjust to 100% width.

Base
Use Col when starting a grid system.
Col
Col
Col
Col
Col
Col
Col
Col
Col

Layout

Grid System - Desktop

Responsive columns automatically adjust to 100% width.

Base
Combo
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Col
Col-lg-[ 1-12 Column Size ]
Col-lg-1
Col-lg-11
Col-lg-2
Col-lg-10
Col-lg-3
Col-lg-9
Col-lg-4
Col-lg-8
Col-lg-5
Col-lg-7
Col-lg-6
Col-lg-6
Col-lg-12

Layout

Grid System - Tablet

Responsive columns automatically adjust to 100% width.

Base
Combo
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Col
Col-md-[ 1-12 Column Size ]
Col-md-1
Col-md-11
Col-md-2
Col-md-10
Col-md-3
Col-lg-9
Col-md-4
Col-lg-8
Col-md-5
Col-md-7
Col-md-6
Col-md-6
Col-md-12

Layout

Grid System - Mobile Landscape

Responsive columns automatically adjust to 100% width.

Base
Combo
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Col
Col-sm-[ 1-12 Column Size ]
Col-sm-1
Col-sm-11
Col-sm-2
Col-sm-10
Col-sm-3
Col-sm-9
Col-sm-4
Col-sm-8
Col-sm-5
Col-sm-7
Col-sm-6
Col-sm-6
Col-sm-6

Layout

Grid System - Mobile Portrait

Responsive columns automatically adjust to 100% width.

Base
Combo
Every section starts with a Section Tag
Use this to control the background color of each section. Use C- tags for custom colors or images.
Col
Col-xs-[ 1-12 Column Size ]
Col-xs-1
Col-xs-11
Col-xs-2
Col-xs-10
Col-xs-3
Col-xs-9
Col-xs-4
Col-xs-8
Col-xs-5
Col-xs-7
Col-xs-6
Col-xs-6
Col-xs-12

Layout

Row

Responsive columns automatically adjust to 100% width.

Default
V-Center
Align-Right
H-Center

Layout

Padding

Responsive columns automatically adjust to 100% width.

p-sm
pl-sm
pl-sm
pl-sm
pl-sm

Introduction

Custom Code

Phantom is a framework to help you built faster websites on Webflow. We built this out of necessity for a simpler way to build websites for our clients. No more complicated naming conventions, everything is named using the most obvious option.
Changes the highlight color when selecting text.

<style>
::selection {
color: #ffffff; background: #000000;
}
</style>

Removes the blue highlight when clicking a link on a mobile device.

<style type="text/css">
html {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>

Anti-asaling

<style type="text/css">body {
 -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}      
</style>

Contact Forms: Changes color of autocomplete text so i matches your forms text.


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
 transition: background-color 5000s;
 -webkit-text-fill-color: #fff !important;
}
</style>

Stops mobile menu scrolling. Add "menu-trigger" ID to menu element.

<script>
 // Number of clicks on the trigger element initially set on 0
let numOfClicks = 0;
// Get trigger element
const trigger = document.getElementById("menu-trigger");
// Get body element
const bodyEl = document.getElementsByTagName("body")[0];// Set onclick function to trigger element
trigger.onclick = () => {
   numOfClicks += 1;
   // Check if number of clicks is an even value:
   // odd value - first click, even value - second click
   const isNumOfClicksEven = numOfClicks % 2 === 0;
   // On first click set body's overflow property to "auto",
   // On second click set body's overflow property to "hidden"
   isNumOfClicksEven ? bodyEl.style.overflow = "auto" : bodyEl.style.overflow = "hidden";
};
</script>