Design Systems

Every landing page in Fly Super has its own design system - a collection of colors, fonts, typography settings, and layout preferences that create visual consistency. Learn how to customize the design system to match your brand.

What is a Design System?

A design system defines the visual language of your landing page:

• Colors: Primary, accent, background, and text colors
• Typography: Font families, sizes, weights, and spacing
• Layout: Container widths, spacing, and grid gaps
• Styling: Border radius, shadows, and effects

Why Per-Page Design Systems?

• Different campaigns may need different branding
• A/B test design variations
• Maintain separate looks for different products
• Apply client-specific branding

Accessing Design Mode

1. Open any landing page in the editor
2. Click Design (palette icon) in the mode selector
3. The design system panel appears on the right
4. Make changes and see them applied instantly

All changes are auto-saved and affect the entire page!

Color System

Primary Color

What it controls:

• Primary buttons (CTAs)
• Links
• Accent elements
• Icon colors
• Focus states

How to set:

1. Click the primary color swatch
2. Use the color picker, or
3. Enter a hex code (e.g., #667eea)

Automatic shade generation:

• Lighter shades for hover states
• Darker shades for active states
• Ensures accessibility contrast

Brand Color Examples:

• Tech/SaaS: #667eea (purple-blue), #4f46e5 (indigo), #3b82f6 (blue)
• Finance: #10b981 (green), #0ea5e9 (blue), #1e293b (dark)
• Creative: #f43f5e (pink), #8b5cf6 (purple), #f59e0b (orange)
• Professional: #1e40af (dark blue), #374151 (gray), #059669 (green)

Accent Color

What it controls:

• Secondary buttons
• Alternative CTAs
• Highlights and badges
• Icon variations
• Decorative elements

Best practices:

• Should complement, not clash with primary
• Often a warmer/cooler version of primary
• Can be analogous or complementary on color wheel

Example pairings:

• Primary: Blue (#3b82f6) → Accent: Teal (#14b8a6)
• Primary: Purple (#8b5cf6) → Accent: Pink (#ec4899)
• Primary: Green (#10b981) → Accent: Blue (#3b82f6)

Background Colors

Page Background

• Default: White (#ffffff) or light gray (#f9fafb)
• Dark mode: Near-black (#0f172a) or dark gray (#1e293b)
• Subtle texture/gradient option

Section Backgrounds

• Alternating colors for visual rhythm
• Usually primary background or slightly different shade
• Example: White (#ffffff) alternating with light gray (#f9fafb)

Card Backgrounds

• Component containers (pricing cards, feature cards)
• Usually white on light backgrounds, dark on dark backgrounds
• Can have slight elevation with shadow

Text Colors

Heading Color

• High contrast for readability
• Usually near-black (#1f2937) on light backgrounds
• Near-white (#f9fafb) on dark backgrounds

Body Text Color

• Slightly lower contrast than headings
• Usually dark gray (#4b5563) on light backgrounds
• Light gray (#d1d5db) on dark backgrounds
• Enhances readability for longer content

Muted Text Color

• For captions, labels, metadata
• Lower contrast but still readable
• Usually mid-gray (#9ca3af)
• Used for less important information

Color Accessibility

Contrast Ratios (WCAG AA standards)

• Normal text: minimum 4.5:1 contrast ratio
• Large text (18pt+): minimum 3:1 contrast ratio
• Fly Super checks contrast and warns if insufficient

Tips for accessible colors:

• Avoid light text on light backgrounds
• Avoid red/green combinations (colorblindness)
• Test with a contrast checker
• Provide sufficient differentiation

Typography

Font Selection

Heading Font

• Used for all headlines (H1-H4)
• Should be bold, attention-grabbing
• Can be more decorative

Popular heading fonts:

• Modern: Inter, Poppins, Plus Jakarta Sans, Lexend
• Professional: Roboto, Open Sans, Lato, Work Sans
• Elegant: Playfair Display, Merriweather, Lora, Crimson Text
• Bold: Montserrat, Raleway, Oswald, Bebas Neue

Body Font

• Used for all paragraph text
• Must be highly readable at small sizes
• Usually simpler than heading font

Popular body fonts:

• Sans-serif: Inter, Open Sans, Roboto, System UI, Arial
• Serif: Merriweather, Georgia, Lora, Source Serif Pro

Font pairing tips:

• Safe: Use same font for both (e.g., Inter for everything)
• Contrast: Serif headings + sans-serif body (or vice versa)
• Harmonious: Fonts from same family (Roboto + Roboto Slab)
• Test: Preview with actual content before committing

Font Weights

Control emphasis and hierarchy:

• Light (300): Subtle headings, decorative text
• Normal (400): Body text, default weight
• Medium (500): Emphasized text, buttons
• Semibold (600): Subheadlines, strong emphasis
• Bold (700): Headlines, CTAs, high emphasis

Hierarchy example:

H1: Semibold (600) or Bold (700)
H2: Semibold (600)
H3: Medium (500) or Semibold (600)
Body: Normal (400)
Button: Medium (500) or Semibold (600)

Font Sizes (Type Scale)

Desktop Sizes

• H1: 48px - 72px (hero headlines)
• H2: 36px - 48px (section headlines)
• H3: 24px - 32px (sub-sections)
• H4: 20px - 24px (component headings)
• Body: 16px - 18px (paragraph text)
• Small: 14px (captions, labels)

Mobile Sizes (automatically scaled)

• H1: 32px - 48px
• H2: 28px - 36px
• H3: 20px - 24px
• H4: 18px - 20px
• Body: 16px
• Small: 14px

Type scale recommendations:

• Consistent ratio between sizes (e.g., 1.25x scale)
• Larger sizes for sales/marketing pages
• Smaller sizes for content-heavy pages
• Always test on mobile

Line Height

Controls vertical spacing between lines of text:

• Tight (1.2): Headlines, short text
• Normal (1.5): Default for most text
• Relaxed (1.75): Long-form content, readability
• Loose (2.0): Very spacious, modern look

Recommendations:

• Headlines: Tight to Normal (1.2-1.5)
• Body text: Normal to Relaxed (1.5-1.75)
• Long articles: Relaxed to Loose (1.75-2.0)

Letter Spacing

Controls horizontal spacing between characters:

• Tight (-0.05em): Headlines, impactful text
• Normal (0): Default for most text
• Wide (0.05em): Uppercase text, improved readability
• Extra Wide (0.1em): Uppercase headlines, luxury feel

Recommendations:

• Uppercase text: Wide or Extra Wide
• Normal text: Normal
• Large headlines: Tight for impact

Layout & Spacing

Container Width

Controls maximum width of content:

• Narrow (640px): Blog posts, reading-focused content
• Standard (1024px): Balanced layouts, most landing pages
• Wide (1280px): Expansive designs, lots of content
• Full (100%): Edge-to-edge content, hero sections

Recommendations:

• SaaS products: Standard (1024px)
• Portfolio/creative: Wide (1280px)
• Content/blog: Narrow (640px)
• E-commerce: Wide (1280px)

Section Spacing

Controls padding between major sections:

• Compact: 40px (mobile) / 60px (desktop)
• Normal: 60px (mobile) / 80px (desktop)
• Spacious: 80px (mobile) / 120px (desktop)
• Extra Spacious: 120px (mobile) / 160px (desktop)

Recommendations:

• Short pages: Compact or Normal
• Long pages: Normal or Spacious
• Premium feel: Spacious or Extra Spacious
• Content-heavy: Compact to Normal

Grid Gap

Controls spacing between grid items (features, pricing cards, etc.):

• Tight: 16px
• Normal: 24px
• Loose: 32px
• Extra Loose: 48px

Recommendations:

• Dense layouts: Tight (16px)
• Balanced layouts: Normal (24px)
• Spacious layouts: Loose (32px)
• Premium feel: Extra Loose (48px)

Border Radius

Controls roundness of buttons, cards, images:

• None (0px): Sharp, modern, minimalist
• Small (4px): Subtle roundness
• Medium (8px): Balanced, friendly
• Large (16px): Very rounded, playful
• Full (9999px): Pills/circular

Recommendations:

• Modern/tech: None or Small
• Friendly/approachable: Medium
• Playful/creative: Large
• Buttons: Medium to Full (pill shape)
• Cards: Small to Medium

Custom CSS

For advanced customization beyond the design system settings.

When to Use Custom CSS

• Fine-tune specific element styles
• Add custom animations or transitions
• Create unique effects not available in settings
• Override specific component styles
• Add advanced responsive behavior

CSS Editor

Located at the bottom of Design Mode panel:

/* Example: Gradient background */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Example: Custom button hover */
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Example: Glassmorphism effect */
.card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Example: Animated gradient text */
h1 {
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 3s linear infinite;
}

@keyframes gradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

CSS Tips

1. Target Specific Elements: Use class names or IDs
2. Inspect Elements: Use browser DevTools to find selectors
3. Test Responsive: Check mobile after adding CSS
4. Avoid !important: Causes specificity issues
5. Comment Your Code: Explain what each rule does

Common Custom Patterns

Shadow Elevation

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

Smooth Animations

* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Custom Scrollbar

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

Design System Presets

Recommended Combinations

Modern SaaS

• Primary: #3b82f6 (blue)
• Accent: #8b5cf6 (purple)
• Heading Font: Inter
• Body Font: Inter
• Border Radius: Medium (8px)
• Spacing: Normal

Professional Enterprise

• Primary: #1e40af (dark blue)
• Accent: #059669 (green)
• Heading Font: Roboto
• Body Font: Open Sans
• Border Radius: Small (4px)
• Spacing: Compact

Creative/Agency

• Primary: #ec4899 (pink)
• Accent: #f59e0b (orange)
• Heading Font: Poppins
• Body Font: Inter
• Border Radius: Large (16px)
• Spacing: Spacious

Minimalist

• Primary: #1f2937 (dark gray)
• Accent: #6b7280 (mid gray)
• Heading Font: Inter
• Body Font: Inter
• Border Radius: None (0px)
• Spacing: Extra Spacious

Bold Startup

• Primary: #f43f5e (rose)
• Accent: #8b5cf6 (purple)
• Heading Font: Montserrat
• Body Font: Inter
• Border Radius: Medium (8px)
• Spacing: Normal

Brand Consistency Tips

Maintaining Consistency

1. Pick 2-3 core colors - Don't use too many
2. Choose 1-2 fonts - More is messy
3. Define spacing system - Consistent rhythm
4. Document your system - Share with team

Matching Existing Brand

If you have brand guidelines:

1. Use exact brand colors (hex codes)
2. Use brand fonts (upload custom if needed)
3. Match spacing/layout to brand materials
4. Apply custom CSS for brand-specific effects

If starting from scratch:

1. Look at competitor sites for inspiration
2. Choose colors that match your industry
3. Pick professional, readable fonts
4. Start simple, refine over time

A/B Testing Design Systems

Create multiple landing pages with different design systems to test:

• Color variations: Blue vs Green primary
• Typography: Serif vs Sans-serif headings
• Spacing: Compact vs Spacious
• Border radius: Sharp vs Rounded

Use Fly Super Links to split traffic and track conversions!

Troubleshooting

"My colors look different on mobile"

• Check in mobile viewport preview
• Some colors may appear lighter/darker on different screens
• Test on actual mobile devices

"Fonts aren't loading"

• Google Fonts may be blocked in some regions
• Try system fonts as fallback (System UI, Arial, etc.)
• Check browser console for errors

"Custom CSS isn't working"

• Check syntax for errors
• Ensure selectors are specific enough
• Use browser DevTools to debug
• Avoid conflicting with design system settings

"Page looks inconsistent"

• Review all components in Edit Mode
• Ensure design system is applied
• Check for hardcoded styles in components
• Use custom CSS to override if needed

What's Next?

• Publishing - Make your page live
• Editing Pages - Fine-tune components
• Forms - Add forms to capture leads

Quick Reference

Pro Tip: Start with the "Modern SaaS" preset and customize from there. It's a safe, professional foundation that works for most products!