Themes

Theme settings

You can easily customize the design of your website with just a few clicks under the Theme section.

Color

After creating your site, navigate to your Theme Section from the site dashboard to access a variety of color themes for your website.
notion image
notion image
By default, the color mode will be Light Mode. You can choose and can toggle between the light and dark mode.

Brand Colors

You can customize the color of your brand text, Background, and so on in the color section.
notion image

Navbar Colors

You can customize the colour of your website header under the Navbar colors section, applicable to Navbar text, background, and CTA text.
notion image

Footer Colors

You can configure the color of your website footer under Footer Colors which is applicable to Footer text and background.
notion image

Typography

Navigate to the Typography section to change the font style and font size of the titles, headings, and quotes.

Font Family

Customize the font style for your titles, headings, and quotes using Google Fonts under the "Primary Fonts" section. In the "Secondary Font" section, you can choose a font style for the text throughout your website.
notion image

Font Size

Here, you can modify the font size of your content, including headings, quotes, and text, according to your preferences.
notion image

Layout

Navigate to Layout section to customize your site's layout. The site layout comes with three different sections.
  1. Spacing: This section enables you to personalize your container width, adjust padding, and set a custom column gap.
  1. Notion Hero Section: Customize your Notion hero section by adjusting the icon position, title position, and more.
  1. Border Radius: This feature allows you to define the border radius for your entire site, such as for cards, callouts, and similar elements.
notion image

Database Views

The Database Views section allows you to control how Notion database pages are displayed and how users can search within them on your Bullet site.
In the 'Database Views' section of theme settings, you can tailor the configuration of the database, including the customization of individual cards within the database.
This includes customizing gallery views, cards, and search functionality in databases.
notion image

Callout

A customizable callout can be added to your site from the "Callout" page, where you can customize your callout, like shadow size and opacity of the callout.
notion image

Navbar and Footer

A customizable navbar and footer can be added to your site from the "Navbar and Footer" page. The footer page will be set to default unless and until you choose on your own. This also allows you to customize your own navbar, like logo width, navbar height, and so on.
notion image

Blog

The blogpost page can be customized from Blog page in Theme settings. This allows you to adjust Background color of cover image.
This includes the position of the header, thumbnail for blogs, TOC, publish date format, tag position, and columns.
notion image

Badge

The badge of the bullet can be customized from Badge section in Theme settings, which helps you display the floating badge, and more.

Style Application Hierarchy in Bullet.so

Bullet.so applies styles in a structured hierarchy, allowing flexibility while maintaining consistency.

Hierarchy of Style Application

1. Default Notion Styles (Base Styles)

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)
  1. Page-Level Styles (Overrides Theme & Global Styles)
  1. Global Styles (Overrides Theme Styles, Can Be Overridden by Page-Level Code)
  1. Theme Styles (Overrides Default Styles, Can Be Overridden by Page-Level & Global Styles)
  1. Default Notion Styles (Base Styling Applied Initially)
By following this hierarchy, you can manage styles efficiently while ensuring customizations behave as expected. 🚀