> For the complete documentation index, see [llms.txt](https://help.tryfreedesk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.tryfreedesk.com/platform/builder/global-styling.md). # Global Styling Global Styling is your site's design system in one place, instead of manually styling every individual element, you define your fonts, colors, buttons, and layout defaults once, and they apply consistently across every page. Update a setting here and it updates everywhere it's used, site-wide. To discover the global styling tab, select the paintbrush in the left side panel:
Once open, you will now see a list of current additional that you can add global styling to:
## **Text Styling:** This is where you set the default typography scale for your entire site — controlling how every heading level and text type looks, with independent sizing for desktop and mobile. #### **Why use it:** * **Consistent hierarchy across every page**: H1s, H2s, and body text always look the same wherever they're used, so pages feel unified rather than pieced together. * **Responsive by design**: set separate sizes for desktop and mobile, ensuring text stays readable and well-proportioned on every screen without manual adjustments per page. * **One place to fine-tune readability**: adjust sizing sitewide in seconds rather than resizing text element by element. ### **What's included:** * **H1–H6**: default font sizes for each heading level, with independent desktop and mobile values * **Paragraph text**: default body text size for both breakpoints * **Quote text**: styling for blockquote/testimonial-style text * **Hyperlink color**: the default color for linked text across the site, so links are consistently recognizable wherever they appear

Desktop Text Styling

And by selecting the **mobile icon** in the Text styling tab, you'll be able to set all your mobile font sizes to:

Mobile Text Styling

### **Add Fonts** Selecting a **new font** opens the Google font list with over **1,000 font options**. You can use up to **8 fonts at once**. We recommend using no more than 3 fonts to maintain branding consistency, readability, and optimal site performance.
### **Upload Custom Font** If you have your own font, and want to use it within your design. Select the Upload Custom Font and drop in your font file link, into the releating box: File in WOFF or File in OTF / TTF
### **Color Palette** This is where you define the core colors used across your entire site, primary, secondary, and background colors that every element (buttons, headlines, accents, etc.) can pull from. Change a color here and it updates everywhere it's applied, keeping your site visually consistent without manually re-coloring each element.
* **Palette Presets**: ready-made color schemes to apply in one click, or keep your custom palette * **Primary Color**: the main theme color used in major places (buttons, links, highlights) * **Secondary Colors**: supporting colors for text, backgrounds, and contrast elements * **Background Color**: the default background color applied across all pages #### **Color palette presets:**
### **Website Layout** This controls the overall structural footprint of your site, how wide your content stretches and whether it fills the full browser width or sits within contained margins. Since it's a global setting, changes here apply consistently across every page. * **Grid Width**: sets the maximum width of your site's content area (e.g., 1280px), controlling how much horizontal space content uses on larger screens * **Layout Style**: choose between: * **Full Width**: content stretches edge to edge with no side margins * **Bordered**: adds space to the left and right of the content, which can be filled with a preset background or a custom image for a framed, contained look
### **Buttons** This lets you build reusable button style presets, defining exactly how buttons look and feel, and apply them anywhere you use a button widget across your site, with independent styling for desktop and mobile.
#### **Why use it:** * **Consistent CTAs everywhere**, every "Buy Now," "Get Started," or "Learn More" button pulls from the same preset, so buttons look intentional and on-brand across every page. * **Multiple presets for different contexts**: create separate styles for primary actions vs. secondary/ghost buttons, so you can visually distinguish importance without manually restyling each one. * **Update once, apply everywhere**: edit a preset and every button using it updates automatically, no need to hunt down and restyle individual buttons. * **Responsive control**: desktop and mobile toggle lets you fine-tune padding, sizing, or spacing independently for each screen size. ### **Headline Pill** This is the global counterpart to the individual [Headline Pill](/platform/widgets/basic/headline-pill.md) element, instead of styling each pill one by one, you build reusable pill presets here and apply them wherever you use the element across your site, with independent styling for desktop and mobile.
#### **Why use them:** * **Consistent labeling across pages**: every pill (e.g., "Upper Headline," "New," "Featured") shares the same look, keeping this small but frequent design element on-brand everywhere. * **Multiple presets for different contexts**: create separate pill styles for different uses (e.g., a bold "Featured" pill vs. a subtle category tag) without restyling from scratch each time. * **Update once, apply everywhere**: edit a preset and every pill using it updates automatically. * **Responsive control**: desktop/mobile toggle lets you adjust sizing independently per device. ### **Page Styling** Unlike the rest of Global Styling, Page Styling only affects the individual page you're currently working on,not your whole site. It's the place to set a background image or color for a specific page without impacting any other pages.
#### **Styling options:** * **Background Image**: upload an image to display behind all content on the page * **Background Image Repeat**: control how the image behaves within the page area: * **Fixed**: image stays in place, doesn't scroll or tile * **Repeat**: tiles the image both horizontally and vertically * **Repeat Horizontally / Repeat Vertically**: tiles in one direction only * **No Repeat**: shows the image once, at its natural size * **Cover whole area**: scales the image to fill the entire page background * **Background Color**: set a solid background color for the page (used instead of, or alongside, an image) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.tryfreedesk.com/platform/builder/global-styling.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.