Style Application Hierarchy

Bullet.so comes with default Notion-inspired styles that define the foundational appearance of elements, including typography, spacing, and color schemes.

Applies to: All pages and blocks by default.

Can be overridden by: Theme styles, global code, page-level styles, and block editor styles.

2. Theme Styles (Predefined Design System)

Themes provide a structured way to customize global styles, primarily affecting colors, fonts, and layout settings.

Applies to: All pages and elements.

Can override: Default styles.

3. Global Code (Site-Wide Custom Styles)

Global styles are applied across the entire workspace, allowing you to define a custom look beyond what themes provide.

Applies to: All pages and elements.

Can override: Default styles and theme styles.

4. Page-Level Code (Page-Specific Styles)

Page-level styles allow you to customize the appearance of a specific page without affecting others.

Applies to: Only the specific page where the code is added.

Can override: Default, theme, and global styles.

5. Block Editor Styles (Element-Level Styling) – Highest Priority

The block editor allows users to apply styles to individual elements by selecting and customizing them directly. This has the highest priority and will override all other styles.

Applies to: Specific blocks or elements within a page.

Can override: Default styles, theme styles, global styles, and page-level styles.

Cannot be overridden by any other style.

Style Priority (Highest to Lowest)

1️⃣ Block Editor Styles (Element-Level Overrides – Highest Priority)

2️⃣ Page-Level Styles (Overrides Theme & Global Styles)

3️⃣ Global Styles (Overrides Theme Styles, Can Be Overridden by Page-Level Code)

4️⃣ Theme Styles (Overrides Default Styles, Can Be Overridden by Page-Level & Global Styles)

5️⃣ Default Notion Styles (Base Styling Applied Initially)

By following this hierarchy, you can manage styles efficiently while ensuring customizations behave as expected. 🚀

Style Application Hierarchy in Bullet.so Hierarchy of Style Application 1. Default Notion Styles (Base Styles)2. Theme Styles (Predefined Design System)3. Global Code (Site-Wide Custom Styles)4. Page-Level Code (Page-Specific Styles)5. Block Editor Styles (Element-Level Styling) – Highest Priority Style Priority (Highest to Lowest)