Welcome to Modula 👋

Thanks for purchasing the Modula template. In this brief guide we cover all the basics on how to edit basic elements - colors, fonts, CMS content, etc.

Get started

If you're new to Framer, we strongly encourage you to explore Framer Academy, where you can learn all the essentials to get started quickly and effectively.

This template offers a total of 20 unique pages, each containing over 40 varied sections. Crafted with modularity in mind, you have the freedom to personalize your website by effortlessly rearranging sections to suit your brand.

Design
Typography

Modula uses Instrument Sans, a versatile sans serif typeface as the main font. The font is from Google Fonts, freely available for use.

Aa

Instrument Sans

Type styles are defined based on two roles – Heading and Paragraph. Headings are used to divide content into sections and show the order of information clearly, while Paragraphs are for longer blocks of text.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

X-large paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Medium paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons

The chosen icon family is Phosphor, renowned for its flexibility and extensive variety. You can explore their entire library here, and easily replace icons on the website as needed.

Colors

Modula features 3 colors — primary, secondary, and tertiary which you can customize to match your brand's identity. Additionally, each color offers a variation with 10% opacity, which is utilized for specific highlights. Ensure to update the HEX codes accordingly!

Primary

Secondary

Tertiary

A grey palette is implemented for text and various elements to delineate between primary and secondary content. These tones are meticulously selected to infuse vibrancy into the design, so we don't recommend you to change them.

Black

Grey 1

Grey 2

Grey 3

Border

Off White

Animations

Micro-interactions, those small but impactful moments of user engagement, are vital for any interactive website.

Modula not only incorporates these micro-interactions seamlessly but also offers a plethora of other features to enhance the user experience.

Pages

Modula offers a total of 18 unique pages, containing over 40 different sections. Crafted with modularity in mind, you have the freedom to personalize according your brand needs.

CMS

Manage your blog posts with a user-friendly Content Management System that allows you to add, edit, and delete them without the hassle of navigating through the design canvas.

You have the freedom to fully customize: title, date, description, image, tag, minutes read, premium read (yes/no) and content.

Best practises

Editing content

The primary breakpoint corresponds to the desktop size, which is set at 1399 pixels. This implies that editing your content must be done primarily in the desktop view, with the changes cascading to other views accordingly. This is valid for text content, images, effects and specifications.

Learn more about breakpoints here.

Image size

When uploading your images, it's essential to prioritize optimal file specifications. Ideally, the file size should not exceed 500KB to ensure swift loading times and efficient webpage performance.

Furthermore, selecting the appropriate file format is crucial; for most images, JPG is recommended due to its efficient compression without compromising quality. However, if transparency is required, such as for logos or icons, PNG becomes essential.

By adhering to these guidelines, you can enhance the overall user experience and streamline website functionality.

Visual consistency

Maintain consistency in design elements such as colors, fonts, and spacing throughout the template to ensure a cohesive look and feel.

Responsive design

Ensure that your design is responsive and adapts well to various screen sizes and devices. Test your prototype on different devices to verify responsiveness.