Guidelines

Explore the core principles and design tokens that form the foundation of the Funnel Design System.

• Animation principles
• Colors
• Contribute
• Funnel markdown
• Interaction states
• Performance
• Principles
• Setup
• Sizes
• Token reference
• Typography
• Updates
• Writing

Components and patterns for displaying alerts, notifications, badges, and other messaging elements.

• Alert Web component
• Empty state
• Fun badge Web component
• Fun tag Web component
• Fun tooltip Web component
• Premium features

Illustrations, icons, logos, and visual assets that represent the Funnel brand.

• Icons Web component React
• Illustrations legacy
• Logotype
• Visualisation

Button components for actions and interactions throughout the UI.

• Fun button Web component
• Google signin button Tailwind
• Split button Web component

Dropdown menus and popovers for displaying contextual content and actions.

• Field picker React
• Fun dropdown Web component
• Fun dropdown menu Web component
• Fun dropdown menu divider Web component
• Fun dropdown menu heading Web component
• Fun dropdown menu item Web component
• Fun popover Web component
• Period selector React

Components for filtering and searching content.

• Fun chip Web component
• Search Tailwind

Components for form inputs, text fields, and data entry elements.

• Expression editor React
• Field select React
• Input Tailwind
• Multi select React
• Regex input React
• Single select React

Internal components, utilities, and development tools for the design system.

• Fun brand icon Web component
• Fun brand logo Web component
• Fun field icon Web component
• Fun field label Web component
• Fun field unit Web component
• Fun source label Web component
• Fun theme container Web component
• Fun user Web component
• Funnel concepts

Components and patterns for page layout, containers, and structural elements.

• Fun fixed header Tailwind
• Fun grid gap Tailwind
• Fun header controller Web component
• Fun page Tailwind
• Fun pane Tailwind
• Page header
• Page layouts

Components and patterns for navigation, links, and breadcrumbs.

• Fun breadcrumbs Web component
• Links Tailwind

Components for displaying lists, tables, and structured data.

• Accordion Web component
• List Tailwind
• Magic table React
• Property list
• Fun card Web component
• Table
• Drag and drop

Components for showing loading states, progress indicators, and multi-step workflows.

• Fun progress circle Web component
• Fun progress controller Web component
• Fun wizard step Web component
• Fun wizard stepper Web component

Modal dialogs and overlays that require user attention.

• Fun backdrop Web component
• Fun hero modal Web component
• Fun modal Web component
• Fun modal auto size Web component
• Fun modal controller Web component

Components and patterns for selecting options and making choices.

• Checkbox Tailwind
• Fun toggle Web component
• Radio button Tailwind

Getting Started

New to the Funnel Design System? Start with these essential pages:

• Setup - Learn how to integrate the design system into your project
• Colors - Understand our color system and usage
• Typography - Typography guidelines and hierarchy
• Principles - Core design principles that guide our decisions

Contributing

Want to contribute to the design system? Check out our contribution guidelines to learn how you can help improve the Funnel Design System.