Ship sites with style.
Go from design to site with Framer, the web builder for creative pros.
Get Started
Learn More
Introduction
Start with a brief introduction explaining the purpose and context of the style guide.
Mention the game or project for which the style guide was created.
Highlight the key objectives and challenges you faced during the design process.
overview:
Provide an overview of the style guide's contents and sections.
Summarize the design principles and key visual elements covered in the guide.
Visual Samples:
Showcase visual samples of the style guide's components, such as the logo, color palette, typography, iconography, and UI elements.
Include clear and high-quality images or screenshots that illustrate the design elements and their variations.
Layout
Use positioning to fix topbars, sidebars, and backgrounds.
Effects
Use effects like Transforms and Parallax scrolling.
Plugins
Connect your site to the most popular apps out there.
CMS
Run a blog, list job openings, or manage your event schedule.
Navigation
Visually structure your pages and link to them easily.
SEO
Build lightning-fast, globally optimized sites.
Double Click to Update Anything
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Get Started
Learn More
documentation
Describe how you structured and organized the style guide to make it easy to navigate and understand.
Highlight any annotations, explanations, or usage guidelines that you included to provide clarity for developers or other designers.
considerations
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Double click the image placeholders to add images. Do the same for any text, then tweak styles and publish.
Get Started
Learn More