Getting Started
      Back to home
      1. Kalungi's Help Center
      2. Atlas 2 Documentation
      3. Getting Started

      ⭐ Customizing your Global Theme Settings

      Let’s go over how to make your Atlas theme embrace your brand’s identity. (2 of 5)

      (1 of 5) ⇐ PrevNext ⇒ (3 of 5)

      The theme settings are broken down into six main setting groups:

      • Basics: Key surface settings that can get your theme up and running without deeply diving into the details. This includes your theme's colors, fonts, basic styling, and spacing. The rest of the settings will use these values as default.
      • Typography: Specific font overrides for headings, including colors, font sizes, responsive sizes, line heights, and more.
      • Buttons: Complete settings for your button's colors, fonts, and stylings.
      • Forms: Color styling settings for all forms that can then be overridden locally by each form module
      • Cards: General styling settings available for all card-shaped components.
      • Animations: Global animation settings.

      To familiarize yourself with the different website elements types, check out our styling guide.

      To Access the Global Theme Settings:

      1. Use the gear icon at the top right of your screen to go to Settings, then scroll down the navigation column to access Content ⇒ Themes.
      2. Click the View Theme button that shows when hovering over the child theme you created.
      3. Use the Publish to x assets button to make these changes take place in all of the pages and blogs you’ve created and to make this setting a default for future pages and blogs.

      Basics

      Key surface settings to get your theme up and running, including colors, fonts, basic styling, and spacing.

      Colors

      Colors are fundamental to your brand. With this setting group, we can make them consistent throughout your site.

      Primary Color basics primary color The primary color sets the accent tone of your brand. Call to Action buttons, labels, pre-headings, and anything that should be highlighted will use this color.
      Accent Color basics accent color The accent color is used as a second option to highlight certain UI elements.
      Background Color basics background color The default background color for all your pages and sections.
      Surface Color basics surface color Alternative background color used for modules, UI elements, and to balance color spacings.
      Text Color basics text color The default color for all text across your site.
      Link Color basics link color The default color for all links across your site.

       

      Fonts

      Fonts can set the tone of your site. We recommend fonts that complement each other and have the same structure. Using font weights for hierarchy instead of multiple font families will ensure consistency.

      Heading Font basics heading font This font will be used for all headings.
      Body Font basics body font This font will be used for all text, labels, and buttons.
      Body Font Size basics body font height Font size (px) for all body text.

       

      Style

      Tweak your theme's appearance with adjustable corner radius and shadow settings that will affect multiple elements across your site.

      Corner Radius basics corner radius This setting will round up the corners of a container. Affects buttons, forms, and multiple modules across Atlas.
      Shadows basics shadows This setting will enable box shadows of different magnitudes: light, medium, or heavy. Affects buttons, forms, and multiple modules across Atlas.

       

      Spacing

      Default spacing settings for all sections to ensure consistency. These settings can be overwritten within any section.

      Vertical Spacing basics vertical spacing Vertical space between a section’s content and its limits.
      Horizontal Spacing basics horizontal spacing Horizontal space between a section’s content and its limits.
      Maximum Content Width basics horizontal spacing-1 The width of a section adjusts to the user’s screen resolution, but your content is prone to lose its structure if stretched too much. With this setting, you can limit the width of your content within a section. The value is expressed in pixels.

       

       

      Typography

      You can set specific colors, fonts, and font sizes for each type of text.

      Headings represent different types of titles with different hierarchy levels. Use them to your advantage to properly define sections and content relevance.

      Body Line Height

      Sets the distance between lines of the body text.

      Body Line Height typography body line height Multiplier for the default space between lines in a body text.

       

      Level (x) Headings (Repeated for heading types 1 to 6)

      Deep customizations for all header types. Responsive settings allow you to resize your headers for different screen sizes.

      H(x) Font typography heading font Font, size, color, and styling settings for a header.
      H(x) Line Height typography heading line height Multiplier for the default space between lines in a header.
      Use Responsive Text typography use responsive text Enables responsive typography settings. This will allow you to automatically resize your text based on the user’s screen size.
      Responsive Type typography responsive type There are two responsive behaviors to choose from: Basic and Fluid. Basic scaling adjusts the text size at fixed breakpoints, while fluid scaling dynamically shrinks the text size without hard stops
      Min Font typography min font This value determines the smallest font size that will be used.
      Fluid Text End typography fluid text end This setting determines the breakpoint at which the text will stop scaling fluidly and maintain a fixed size.

       

       

      Buttons

      In-depth button styling settings, overriding any other settings.

      Colors

      Main color settings. Most default values are inherited from your brand settings.

      Background Color button background color It’s recommended to pick a color that matches your brand’s primary colors. The background color setting can be set with the color picker or with a hex color code alongside the transparency, expressed in percentages.
      Text Color button text color Use this setting to change the color of the text that labels your button. Use a color that has a high contrast ratio against the background color.
      Border Color button border color It’s recommended to pick a color that matches your brand’s primary colors. The border color setting can be set with the color picker or with a hex color code alongside the transparency, expressed in percentages.

       

      Font

      Button font settings.

      Font button font Button’s font.
      Font Size button font size Button’s font size (px).
      Bold Font button bold font Toggle to bold your button’s text.
      Text Case button text case Used to standardize your font’s capitalization. You can choose between Normal, Title Case, lower case, and ALL CAPS.

       

      Border

      Button border settings.

      Border Width button border width Button’s border width expressed in pixels.
      Corner Radius button border radius Expressed in pixels. It’s recommended to be consistent with the corner radius value across boxes on your site.

       

      Padding

      Button spacing settings.

      Top/Bottom Padding button top bottom padding The space between the text and the button’s top and bottom borders.
      Left/Right Padding button left right padding The space between the text and the button’s left and right borders.

       

      Forms

      Forms are a very powerful way to get to know your users. Use color palettes that match your branding and draw your users’ attention. You can set the colors with the color picker or a hex color code. These settings can then be locally overriden on every form module.

      Heading Color forms heading color Use this setting to pick a color for the main title of your form.
      Label Color forms label color Use this setting to pick a color for the label that shows above your input fields.
      Help Text Color forms help text color Use this setting to pick a color for the tooltip label that can be configured in the form editor.
      Border Color forms border color Use this setting to pick a color for the borders of all your input fields.
      Focused Border Color forms focused border color Use this setting to pick a color for the borders of focused input fields. An input field becomes focused when a user is editing it.

       

       

      Cards

      Cards are used in multiple modules as a simple stylized boxed container. These settings will reflect on all modules that use any card-shaped element.

      Background Color cards background color Background color setting for all card-shaped elements. The default value is inherited from the surface color.
      Border Color cards border color It’s recommended to use either a similar shade of your primary color or a similar shade of the card’s background color.
      Box Shadow Color cards box shadow color Use this setting to customize a card’s shadow color.
      Border Radius cards border radius Expressed in pixels. It’s recommended to be consistent with the border-radius value across boxes on your site.

       

       

      Animations

      Global animation settings.

      Use Locomotive Scroll animations use locomotive scroll Enables smooth scrolling with inertia effect

       

       

       

      (1 of 5) ⇐ PrevNext ⇒ (3 of 5)

       

       

      Get premium Atlas support from the team that built it   Need an extra hand? Get web dev support from the team that built Atlas, including… Atlas implementation Ongoing site improvements and optimizations Custom module development Web page development Managing multiple Atlas websites Our team of developers are experts in all things HubSpot web development, and flexible pricing tiers mean you get exactly the level of support you need in the areas you need it.