Styling Your Site with Global Design Settings

Global design settings are where individual edits become systematic changes. Instead of updating colors and fonts on every page, you define them once and they apply throughout your site. This approach saves time, ensures consistency, and makes rebranding remarkably simple.

Why Global Styles Matter

Imagine you've customized twenty pages and then realize your primary blue isn't quite right. Without global styles, you'd need to find and update every instance of that blue manually. With global styles, you change one value and every element using that color updates instantly.

This isn't just about efficiency—it's about maintaining professional consistency. Global styles prevent the scenario where your homepage buttons are slightly different blue than your contact page buttons because you picked the color manually each time.

Your template comes with a complete global style system already set up. Your job is to customize these globals to match your brand, not to create the system from scratch.

Understanding Color Tokens

Open the color styles in Assets panel and you'll see named colors like Primary, Secondary, Background, Text, and Accent. These aren't just colors—they're tokens that represent specific roles in your design system.

Primary is your brand's main color, used for key buttons and important elements. Secondary provides contrast and variety. Background and Surface define the canvas your content sits on. Text colors ensure readability against those backgrounds.

To customize your site's color scheme, change these token values. Click on Primary, choose your brand color, and every element using the Primary token updates throughout your entire site. This includes buttons, links, icons, and any other element that references that token.

The beauty is semantic naming. Instead of "blue" you have "primary," which means if you later decide primary should be green instead of blue, you change one value rather than finding every blue element and reconsidering whether it should stay blue or become green.

Working with Typography Styles

Typography follows the same token-based approach. Your template has text styles for headings, body text, captions, and other typographic roles. Each style defines font family, size, weight, line height, and letter spacing.

Click into the Text Folder and you'll see all available styles. Heading 1 through 6, Body, Body Large, Body Small, Caption, and potentially custom styles for specific purposes. These correspond to the semantic hierarchy of your content.

You can also adjust sizing, weight, and spacing for each style. Just remember that these changes apply everywhere that style is used, so test thoroughly after making changes.

When to Use Custom Styling

Global styles should cover 90% of your needs, but sometimes you genuinely need a one-off style for a specific element. This is fine—the goal is consistency, not rigidity.

If you find yourself creating the same custom style repeatedly, consider adding it as a new global style or token. This converts your one-off into a reusable element that can be applied consistently in the future.

The key is intention. Custom styling for a unique hero section makes sense. Custom styling for every paragraph on your about page suggests you should be updating the global body text style instead.

Typography Hierarchy Best Practices

When customizing typography, maintain clear hierarchy. Heading 1 should be noticeably larger than Heading 2, which should be larger than Heading 3. Body text should be comfortable to read, usually 16-18 pixels for web.

The contrast between heading and body fonts should be clear but not jarring. A geometric sans-serif heading with a humanist sans-serif body creates interest. A decorative display font with a neutral body font provides personality without sacrificing readability.

Line height matters more than most people realize. Body text usually needs 1.5 to 1.6 line height for comfortable reading. Headings can be tighter, around 1.2 to 1.3, since they're larger and not read in long paragraphs.

Testing Your Global Changes

After updating global styles, review multiple pages to ensure changes work everywhere. Check pages with different types of content—a text-heavy blog post, an image-heavy portfolio page, a form-focused contact page.

Look for unintended consequences. Sometimes a color that looks perfect on light backgrounds becomes invisible on dark backgrounds, or a font that works beautifully for short headings becomes hard to read in longer paragraphs.

Preview your site at different breakpoints. Some fonts that are readable on desktop become too small or too large on mobile. Color contrast that works on bright desktop screens might fail on dim phone screens.