Getting Started with Global Styling

In Web Studio → Global Styling you can set your site-wide design rules: typography, fonts, color palette, grid layout, and page-specific backgrounds. These settings act as your project’s design foundation, ensuring consistency and responsiveness across all pages.

1. Text Styling

Here you define the default look for all text elements: Paragraphs, Headings (H1–H6), Quotes, and Links.

• You can set font, font-size, color, letter-spacing and line height for each element.
• Recrevio lets you switch between Desktop and Mobile tabs to adjust text styling separately.
• If you stick to global definitions, every heading and paragraph you add in the Web Studio will automatically match your responsive design.

Why it’s important:

If you create “custom” font sizes directly in the Web Studio, they will not adapt to different devices. That means text that looks fine on desktop may be unreadable on mobile.

👉 See full guide: Text Styling in Global Styling

2. Add Fonts

This section controls which fonts are available in your project.

• Click Add Fonts to select from Recrevio’s built-in font library.
• You can also upload custom fonts in WOFF format (recommended) or OTF/TTF.
• You can enable up to 8 fonts total for performance and brand consistency reasons.

Best practices:

• Use no more than 2–3 families (e.g. one for headings, one for body text).
• Prefer variable fonts where possible—they give multiple weights in one file.
• After adding fonts, go back to Text Styling to apply them to headings and paragraphs.

👉 See full guide: Adding Fonts in Global Styling

3. Color Palette

The Color Palette defines your Primary, Secondary, Background, and Main Text colors. These colors cascade across buttons, links, and other elements automatically.

• Primary Color: Used in key UI elements (e.g., buttons).
• Secondary Colors: Accent tones for highlights or categories.
• Background Color: Base color of your pages.
• Main Text Color: Default text and heading color.

Pro tips:

• When starting from a template, replace dark template colors with your dark brand colors, and accents with your brand accents. This preserves the template’s design logic while making it yours.
• Check contrast ratios to ensure text remains readable (aim for WCAG AA: 4.5:1).
• Keep your palette lean: Primary + 2–3 secondary colors is usually enough and will keep your design consistent.

👉 See full guide: Using the Color Palette in Global Styling

4. Website Layout

Here you define the grid width and layout style that control your site’s structure.

• Grid Width: The maximum content width in pixels (commonly 1140–1320px). It affects text line length and readability. You can override the grid width in each block to make use the full width of the page. This is useful for Hero sections and similar where your design needs more space.
• Layout Style: Choose between Full Width (modern, edge-to-edge visuals) or Boxed (fixed-width with margins for a more classic look).

Best practices:

• Aim for 60–80 characters per line for comfortable reading on desktop. Adjust grid width accordingly.
• Use Full Width for modern, visual-heavy sites.
• Use Boxed Layout for editorial or corporate designs that need strong margins.

👉 See full guide: Setting the Website Layout in Global Styling

5. Page Styling

Unlike the other options, Page Styling only affects the current page you’re editing.

• You can set a page background color or upload a background image.
• Choose whether the background image should repeat or not.
• Useful for landing pages, events, or campaigns that need a different look from the rest of the site.

Best practices:

• Use optimized images (2000–2560px wide, compressed) for backgrounds.
• Add a color overlay or use Page Styling + block styling to keep text readable.
• Avoid using Page Styling for minor tweaks—reserve it for meaningful, page-specific visuals.

👉 See full guide: Page Styling in Global Styling

Best Practices for Global Styling

• Set it up first: Define fonts, colors, and layout before building pages.
• Use the defaults in the Web Studio: Always add text as Paragraph, H1–H6 or quote – don’t create manual overrides as this may break the design and readability on mobile devices.
• Keep it simple: Limit fonts and colors. The fewer variables, the cleaner your design.
• Confirm changes: Always click Confirm at the bottom right to save.