Heads up: This style guide works best with v2 components. v1 components may look off due to updated classes. You can adjust styles manually or wait for the v2 release.

Welcome to the RiseVerse style guide v2.0

This style guide is your starting point for building fast, accessible, and easy-to-maintain Webflow websites using RiseVerse components.

It includes:

  • A complete style guide page
  • Pre-configured variables
  • Pre-built classes based on the Client-First 2.1 system

You can clone the entire project for free and start building right away.

Why use this style guide?

✅ Built for Speed
All variables and classes are pre-set. Clone the project, and when you copy components from the RiseVerse Library, styles sync automatically.

🎨 Unstyled Components
Our components come unstyled, giving you full control over your design system.

🌓 Light & Dark Modes
Easily switch between light and dark themes without extra setup.

♿ Accessibility First
Components follow WAI-ARIA patterns to support a more inclusive user experience.

How to get started

Follow these steps to set up your project:

  1. Clone the Project
    Add the RiseVerse Style Guide to your Webflow account.
  2. Set as Homepage
    Rename this page to Home and mark it as your default homepage.
  3. Save the Style Guide as Draft
    Once you’re set up, save the style guide page as a draft to keep your live site clean.
  4. Remove the Intro Section
    Delete this page section with the class: section_rv-style-guide-intro.
  5. Start Building
    Go to the RiseVerse Library and begin copying components into your project's main-wrapper.

Avoid class duplication with our chrome extension

When pasting components into your Webflow project, class duplication can break consistency and bloat your style panel.

To fix this, we created a RiseVerse Chrome Extension that automatically prevents class duplication.

Get Started:

  1. Install the Chrome Extension
  2. Start copying components from the RiseVerse Library — class syncing happens automatically!

This tool is especially useful when pasting RiseVerse components into projects that already use this style guide.

The RiseVerse Chrome extension is built on top of great work by Virat from xAtom — huge thanks for the foundation that made this possible.

Need help?

Email us at gregoire@riseverse.com or reach out via our Support Page.

Happy designing!
— Greg & Max

P.S. This system reflects 5+ years of experience building in Webflow. Inspired by creators like Shadcn, AlignUI, and Client-First by Finsweet.

Icons used in our components are from Huge Icons — a modern icon library we highly recommend.