Styling System

Reading Time: 3 minutes Last Updated: October 28, 2025

RedFox Thank You includes a powerful and intuitive styling system that gives you complete control over the appearance of your thank you pages. No coding knowledge required!

Overview#

The styling system includes four main control groups:

  1. Typography – Control all text styling
  2. Spacing – Manage margins and padding
  3. Background – Customize backgrounds
  4. Colors – Control all color elements

All styling controls are:

  • Visual – See changes in real-time
  • Responsive – Different settings per device
  • Intuitive – Easy-to-use interface
  • Powerful – Professional results

Typography Controls#

Control every aspect of text styling:

Available Options#

Font Size

  • Set in pixels (px), ems, or rems
  • Responsive controls included
  • Real-time preview

Line Height

  • Control spacing between lines
  • Improve readability
  • Set in pixels or unitless values

Text Color

  • Full color picker
  • Preset colors
  • Custom hex values

Text Alignment

  • Left – Align text to the left
  • Center – Center text horizontally
  • Right – Align text to the right
  • Justify – Distribute text evenly across the line

Where to Find Typography Controls#

  1. Select any block with text
  2. Look for Typography section in block settings like Text, Title Text, etc.
  3. Expand to see all options
  4. Adjust settings as needed

Typography Best Practices#

  • Readability First – Choose legible fonts and sizes
  • Hierarchy – Use different sizes for headings vs body
  • Consistency – Keep font choices consistent
  • Contrast – Ensure good color contrast
  • Responsive – Smaller sizes on mobile devices

Spacing Controls#

Control the space around and inside blocks:

Margin#

External spacing around blocks:

Sides:

  • Top
  • Right
  • Bottom
  • Left

Modes:

  • Linked (all sides same value)
  • Unlinked (individual values per side)

Units:

  • Pixels (px)
  • Percentages (%)
  • Ems (em)
  • Rems (rem)

Responsive:

  • Different values per device
  • Mobile-first approach

Padding#

Internal spacing inside blocks:

Sides:

  • Top
  • Right
  • Bottom
  • Left

Configuration:

  • Same options as margin
  • Link/unlink functionality
  • Full responsive support

Where to Find Spacing Controls#

  1. Select any block
  2. Look for Spacing section
  3. Expand to see margin and padding
  4. Adjust values as needed

Spacing Best Practices#

  • White Space – Use generous spacing for readability
  • Consistency – Keep spacing consistent across blocks
  • Mobile – Reduce spacing on smaller screens
  • Visual Rhythm – Create consistent vertical rhythm
  • Linked Values – Use linked mode for uniform spacing

Background Controls#

Customize block backgrounds:

Background Color#

Options:

  • Color picker with presets
  • Custom hex values
  • RGBA for transparency
  • Gradient support (coming soon)

Uses:

  • Highlight important blocks
  • Create visual sections
  • Match brand colors
  • Improve readability

Where to Find Background Controls#

  1. Select any block
  2. Look for Background section
  3. Click color picker
  4. Choose or enter color

Background Best Practices#

  • Contrast – Ensure text is readable on background
  • Subtlety – Use subtle colors unless highlighting
  • Brand Colors – Match your brand palette
  • Accessibility – Maintain WCAG contrast ratios

Color System#

Comprehensive color controls throughout:

Text Colors#

Control text color in typography settings:

  • Headings
  • Body text
  • Links
  • Captions

Border Colors#

Control borders where applicable:

  • Table borders
  • Block outlines
  • Dividers

Element Colors#

Specific color controls for:

  • Buttons (text, background, hover)
  • Links (default, visited, hover)
  • Tables (header, rows, borders)

Color Picker Features#

  • Preset Colors – Quick access to common colors
  • Custom Colors – Enter any hex value
  • Color History – Recently used colors
  • Transparency – RGBA values for opacity

Responsive Styling Workflow#

Design Desktop First

  • Set all desktop styles
  • Get the look right on large screens

Adapt for Tablet

  • Switch to tablet view
  • Adjust font sizes (slightly smaller)
  • Reduce spacing if needed

Optimize for Mobile

  • Switch to mobile view
  • Further reduce font sizes
  • Minimize padding/margin
  • Ensure readability

Device Switching#

Look for device icons in controls:

  • 🖥️ Desktop (default)
  • 📱 Tablet (768-1023px)
  • 📱 Mobile (< 768px)

Click to switch and set device-specific values.

Browser Compatibility#

All styling controls generate CSS that works in:

  • Chrome/Edge (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Mobile browsers