Colors and Typography Guide

Applies to: Current VideoHub360 theme package

Open Design Controls

Use Appearance → Customize and the relevant VideoHub360 panels. Global Design contains the main color and typography controls. Feature panels also contain colors and type settings specific to that feature.

Global Colors

Configure the primary/brand colors, text colors, backgrounds, borders, links, buttons, and other global tokens provided by the Customizer. These values are intended to flow into components that use the theme design system.

Typography

Configure the available font families, sizes, weights, line heights, and heading/body treatments. Use readable contrast and verify desktop and mobile layouts after changing font metrics.

Feature-Specific Design

Some components have their own controls, including:

• Site Header and Header Action
• Community Menu
• Mobile Bottom Navigation
• Authentication Pages
• Activity Feed
• Template Headers
• Footer
• archive and layout-specific sections

A feature-specific value can override a broader global value. Change the closest matching control before adding custom CSS.

Studio Styling

Studio owns its production-interface styling and uses its own controls where provided. Do not assume every Studio control inherits ordinary page typography.

Test Design Changes

Test the homepage, archive cards, single video, Dashboard, forms, comments, mobile menus, installed PWA, and any enabled membership or shop pages. Check focus states and text contrast as well as ordinary appearance.