Styling Guide

CMS Filter components provide granular styling controls for every visual element. Customize colors, fonts, spacing, and layouts to match your brand perfectly.

Styling Philosophy

Each component exposes style objects that group related styling properties. This makes it easy to maintain consistent styling across your filter system.

CMSFilters Styling

CMSFilters has 7 style objects for comprehensive customization:

1. Filter Container Styles

Controls the overall layout and appearance of the filter container.

📦 Container Properties

  • Columns: 1-4 columns (default: 1)
  • Gap: Spacing between filters (16px recommended)
  • Background: Container background color
  • Padding: Inner spacing (20px recommended)
  • Border Radius: Rounded corners (8px recommended)
  • Border Width & Color: Container border styling

2. Filter Label Styles

Customize filter title/label appearance.

🏷️ Label Properties

  • Show Label: Toggle label visibility
  • Font Size: Label text size (14px recommended)
  • Font Weight: Text boldness (600 recommended)
  • Color: Label text color
  • Padding: Space around label
  • Margin Bottom: Space below label

3. Filter Input Styles

Style text and number input fields.

✏️ Input Field Properties

  • Font Size: Input text size (14px recommended)
  • Padding: Inner spacing (10px recommended)
  • Background: Input background color
  • Border: Width, color, and radius
  • Text Color: Input text color
  • Hover State: Border color when hovering
  • Focus State: Border color and outline when focused

4. Filter Pill Styles

Style tag/pill buttons for multi-select filters.

💊 Pill Button Properties

  • Font Size & Weight: Pill text styling (14px, 500 weight recommended)
  • Gap: Spacing between pills (8px recommended)
  • Padding: Inner spacing (8px vertical, 16px horizontal)
  • Background & Color: Default pill appearance
  • Border: Width, color, and radius
  • Hover State: Background color when hovering
  • Selected State: Background, text, and border color when active

5. Filter Range Styles

Customize range slider appearance.

🎚️ Range Slider Properties

  • Track Color: Background track color
  • Range Color: Active range color (filled portion)
  • Thumb Color: Slider handle color
  • Thumb Size: Handle size (18px recommended)
  • Track Height: Slider track thickness (6px recommended)
  • Value Bubble: Background, text color, and font size for value display

6. Filter Toggle Styles

Style toggle switches.

🔘 Toggle Switch Properties

  • Size: Width (48px) and height (24px) of switch
  • Knob Size: Handle size (20px recommended)
  • Off State: Background and knob color when inactive
  • On State: Background and knob color when active

7. Filter Checkbox Styles

Customize checkbox inputs.

☑️ Checkbox Properties

  • Size: Checkbox dimensions (18px recommended)
  • Gap: Spacing between checkbox and label
  • Border: Width, color, and radius
  • Checked State: Background, border, and checkmark color when selected

CMSFacets Styling

CMSFacets has 5 style objects for active filter chips:

🏷️ Chip Styles

  • Chip Style: Choose 'pill' (rounded) or 'square'
  • Font Size & Weight: Text styling (13px, 500 weight recommended)
  • Padding & Gap: Inner spacing and space between chips
  • Background & Color: Default chip appearance
  • Border: Width, color, and radius
  • Hover State: Background color when hovering

❌ Remove Button Styles

  • Remove Scale: Button size (0.85 recommended)
  • Remove Color: Default X button color
  • Remove Hover Color: X button color when hovering

🔍 Search Chip Styles

  • Background: Search chip background color
  • Color: Search chip text color
  • Border Color: Search chip border color

📦 Container Styles

  • Background: Facets container background
  • Padding: Inner spacing (12px recommended)
  • Gap: Space between chips (8px recommended)
  • Border Radius: Rounded corners

Styling Best Practices

1. Maintain Consistency

Use the same color palette and spacing values across all style objects.

🎨 Brand Color Strategy

Pick your brand colors once and use them consistently:

  • Primary Color: Use for selected states, active filters, buttons
  • Background Color: Use for container and input backgrounds
  • Border Color: Use for all borders and dividers

Apply the same colors to inputs, pills, toggles, and chips for a cohesive look.

2. Responsive Font Sizes

Keep font sizes proportional for different screen sizes:

  • Labels: 12-14px
  • Inputs: 14-16px
  • Chips/Pills: 12-14px
  • Buttons: 14-16px

3. Adequate Spacing

Use consistent spacing values:

  • Small gap: 4-8px
  • Medium gap: 12-16px
  • Large gap: 20-24px
  • Padding: 8-16px

4. Accessible Colors

Ensure sufficient contrast ratios:

  • Text on background: minimum 4.5:1 ratio
  • Interactive elements: minimum 3:1 ratio
  • Hover states: clearly distinguishable
  • Selected states: high contrast

Theme Examples

Get inspired by these ready-to-use color schemes. Copy these values into your component property panels:

☀️ Light Theme (Default)

  • Background: #ffffff
  • Border: #e0e0e0
  • Text: #101010
  • Primary: #6052ff
  • Secondary BG: #f8f8ff

🌙 Dark Theme

  • Background: #1a1a1a
  • Border: #333333
  • Text: #ffffff
  • Primary: #8b7aff
  • Secondary BG: #2a2a2a

✨ Minimal Theme

  • Background: transparent
  • Border: #e0e0e0
  • Text: #101010
  • Primary: #000000
  • Border Radius: 0 (square)

Advanced Customization

Custom CSS Classes

For advanced styling beyond property controls, you can target components with custom CSS in your Framer project.

Hover and Focus States

All interactive elements support separate styling for different states:

  • Default: Normal state
  • Hover: Mouse over
  • Focus: Keyboard focus
  • Selected/Active: Current selection
  • Disabled: Inactive state