Masters Radio Style Guide
Logos
Masters Radio — Brand / Style Guide
Logos & Variants
Use the full logo on light backgrounds. Use the white / reversed version on dark backgrounds.
Color Palette
#1a1a1a
#e60023
#f1c40f
#333333
#777777
#dddddd
Primary: dark / brand base. Secondary or accent: red, gold, etc. Grays for neutrals.
Typography
We use a hierarchy of headings, subheadings, body text, and captions. Here’s a sample scale:
Heading 1 (e.g. 36 px / 500)
Used for major section titles.
Heading 2 (e.g. 28 px / 500)
Section headings.
Heading 3 (e.g. 22 px / 500)
Subsection headings.
Body text (18 px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula justo sit amet massa placerat fermentum.
Default paragraph styling.
Caption / small (14 px) — For fine print, image captions, etc.
Caption / utility text.
For web use: define in CSS as `html { font-size: 100%; }` or root rem scale, with a typographic scale system (modular scale) if desired.
Usage Examples
Buttons, links, etc., using our brand colors:
Color combinations, spacing, imagery, etc., should respect contrast, padding, and brand voice.
Spacing / Layout Guide
Use a consistent spacing system. Example scale (in px):
4px
8px
16px
24px
32px
48px
Use these increments as margins, gutters, paddings, etc.
Design Notes / Guidelines
- Logo must always maintain safe padding boundary (e.g. whitespace = x height).
- Don’t stretch or distort logos; maintain aspect ratio.
- Primary text color should be dark on light backgrounds; white on dark backgrounds.
- Use red (secondary) sparingly as accent or call to action.
- Ensure contrast ratios (WCAG) for text over backgrounds.
- For responsive designs, font sizes and spacing may scale using rem/em or CSS clamp().