Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.fanfare.io/llms.txt

Use this file to discover all available pages before exploring further.

Partial AvailabilityOrganization brand themes are fully functional and will apply to landing pages. Per-page theme overrides are coming with the landing page editor.

​
Theme Inheritance

Landing pages inherit branding from multiple levels: 
Organization Brand Theme (base)
         ↓
Experience Theme Overrides (optional)
         ↓
Landing Page Theme Overrides (optional)
         ↓
Final Rendered Page
Each level can override specific properties while inheriting the rest.

​
Brand Theme Properties

​
Colors

PropertyDescriptionExample
primaryMain brand color, used for CTAs and links#8c14ff
secondaryAccent color for secondary actions#22d3ee
backgroundPage background (supports CSS gradients)#0b1020
textPrimary text color#e2e8f0
mutedSecondary text and captionsrgba(226,232,240,0.72)

​
Typography

PropertyDescriptionExample
fontFamilyPrimary font stackInter, ui-sans-serif, system-ui
headingFontFamilyFont for headings (optional)Playfair Display, serif

​
Visual Style

PropertyDescriptionOptions
borderRadiusCorner roundingnone, sm, md, lg, full
buttonStyleButton appearancesolid, outline, ghost

​
Setting Organization Theme

Configure your base brand theme in organization settings:
  1. Navigate to Settings > Branding
  2. Upload your logo
  3. Set primary and secondary colors
  4. Choose typography options
  5. Save changes
All landing pages will inherit these settings by default.

​
Experience-Level Overrides

Override branding for a specific experience:
  1. Open the experience detail page
  2. Navigate to Design Studio
  3. Adjust theme settings
  4. Save changes
These overrides apply to:
  • The experience’s landing page
  • Embedded widgets for this experience
  • Consumer-facing emails for this experience

​
Page-Level Overrides

Page-level theme overrides will be available in the landing page editor. Until then, use experience-level overrides.
Within the landing page editor, you will be able to:
  • Override specific colors for this page only
  • Use a different font for this page
  • Adjust button styles
Example use case: A special holiday-themed landing page that uses festive colors while maintaining your brand fonts.

​
Color Best Practices

​
Contrast Requirements

Ensure sufficient contrast for accessibility:
ElementMinimum ContrastRecommended
Body text4.5:17:1
Large text (18px+)3:14.5:1
UI components3:14.5:1
Use a contrast checker tool to verify your color combinations meet WCAG guidelines.

​
Dark vs Light Themes

Consider your audience and context:
ThemeBest For
DarkTech products, luxury items, evening events
LightGeneral audiences, e-commerce, professional services

​
Gradient Backgrounds

Gradients create visual interest. The editor supports: 
/* Linear gradient */
background: linear-gradient(135deg, #0b1020, #0f172a 55%, #05060f);

/* Radial gradient with overlay */
background:
  radial-gradient(1200px 700px at 25% 20%, rgba(140, 20, 255, 0.35), transparent 55%),
  linear-gradient(135deg, #0b1020, #0f172a);

​
Typography Guidelines

​
Font Selection

Choose fonts that:
  • Load quickly (consider web font performance)
  • Are legible at various sizes
  • Match your brand personality
StyleHeading FontBody Font
ModernInterInter
ClassicPlayfair DisplaySource Sans Pro
BoldMontserratOpen Sans
TechnicalJetBrains MonoInter

​
Font Size Scale

The editor uses a consistent type scale:
ElementSizeWeight
H148px / 3remBold (700)
H236px / 2.25remBold (700)
H324px / 1.5remSemibold (600)
Body16px / 1remNormal (400)
Caption14px / 0.875remNormal (400)

​
Logo Guidelines

​
Supported Formats

FormatBest For
SVGScalable logos, best quality
PNGLogos with transparency
JPGPhotographic logos
PlacementRecommended Size
HeaderMax height 48px
FooterMax height 32px
Favicon32x32px, 180x180px (Apple)

​
Logo Variants

Upload multiple versions for different contexts:
  • Primary - Full color for light backgrounds
  • Reversed - For dark backgrounds
  • Icon - Compact version without text

​
CSS Variables

The theme system uses CSS custom properties: 
:root {
  /* Colors */
  --ff-color-primary: #8c14ff;
  --ff-color-secondary: #22d3ee;
  --ff-color-background: #0b1020;
  --ff-color-text: #e2e8f0;
  --ff-color-muted: rgba(226, 232, 240, 0.72);

  /* Typography */
  --ff-font-family: Inter, ui-sans-serif, system-ui;
  --ff-font-size-base: 16px;

  /* Spacing */
  --ff-spacing-section: 4rem;
  --ff-spacing-element: 1.5rem;

  /* Borders */
  --ff-border-radius: 0.75rem;
}
For advanced customization using CSS variables, see Advanced Customization.

​
Preview Your Theme

Always preview theme changes across:
  • Desktop - Full layout
  • Tablet - Medium breakpoint
  • Mobile - Narrow layout
Check that:
  • Text remains readable
  • Buttons are clearly visible
  • Images work with your color scheme
  • Interactive elements have visible focus states

​
Next Steps

Content Blocks

Customize section content

Media

Add images and videos

Countdown Timer

Display time until launch

SEO Settings

Optimize for search engines