---
title: "Styleguide — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Jeremiah Elegba · Styles. Styleguide is your essential tool for creating a complete and cohesive style guide directly within Framer."
canonical: "https://framer.elliotli.dev/plugin/styleguide"
---

[Home](/)/[Plugins](/plugins)/[Styles](/plugins/category/styles)/Styleguide

# Styleguide

StyleGuide

[View on Framer](https://framer.com/marketplace/plugins/styleguide/?via=elliot-li)

![Styleguide preview image 1](https://framer.elliotli.dev/og/plugin/styleguide/1eb9d8d937fc5b4d/1600x1200.jpg)

## Summary

Styleguide is your essential tool for creating a complete and cohesive style guide directly within Framer.

## Description

**Styleguide** is your essential tool for creating a complete and cohesive style guide directly within Framer. Stop wasting time manually setting up colors and fonts for every new project. With Styleguide, a professional, ready-to-use design system is just a few clicks away.

**Features/Benefits (Use a bulleted list for readability):**

-   **Generate an entire style guide in seconds**: Simply choose a font pairing and color palette from a curated library and watch your styles come to life.
    
-   **Curated, Professional Palettes**: Our hand-picked selection of typography and color palettes ensures your designs look polished and harmonious every time.
    
-   **Semantic Tagging**: All generated text styles are correctly tagged (H1, H2, P, etc.), ensuring your designs are accessible and SEO-friendly from the start.
    
-   **Intuitive UI**: A clean, easy-to-use interface makes style generation a seamless part of your workflow.
    

**How it Works (Step-by-step instructions):**

1.  **Open the Plugin**: From the Framer Canvas, go to the Plugins menu and select "Styleguide."
    
2.  **Choose Your Fonts**: Navigate to the "Fonts" tab and select your preferred font combination.
    
3.  **Choose Your Colors**: Switch to the "Colors" tab and select a color palette.
    
4.  **Preview**: Use the "Preview" tab to see how your selected fonts and colors work together before generating.
    
5.  **Generate**: Click the "Generate Styles" button. All styles will be automatically created and organized under a "Styleguide" folder in your Styles tab.
    

**Why Choose Styleguide?** Styleguide is designed to save you hours of setup time on every project. Whether you're a beginner or a seasoned professional, this plugin provides a perfect foundation for building beautiful, accessible, and consistent designs.

## Rank history [How rankings work →](/terms#rankings)

-   All · #602

## Details

- **Author**: Jeremiah Elegba
- **Published**: 2025-09-20
- **Updated**: 2025-09-23
- **Added**: 2025-09-15
- **Categories**: Styles

## More like this

-   [Sealcraft](/plugin/sealcraft) — Cyedi Creative Studio · Free — Badges, stamps and spinning seals
-   [Divider Lab](/plugin/divider-lab) — ANASS TB · Free — Shape dividers for clean sections
-   [Tablecraft](/plugin/tablecraft) — ANASS TB · Free — Paste rows, get a designed table
-   [Cookiewall](/plugin/cookiewall) — ANASS TB · Free — Cookie banners, done in seconds