Design & Styling Guide
Guidelines for building Connected Apps that look and feel native to the Facilio platform.
Facilio Design System#
Facilio maintains its own design system with a comprehensive set of UI components documented as a Storybook.
Storybook: https://dsm.facilio.in
Browse the Storybook to explore available components, their variants, props, and interactive examples. Using these components ensures your Connected App is visually consistent with the rest of the Facilio interface — matching spacing, colors, typography, interactions, and accessibility out of the box.
Recommended
Always use the Facilio Design System at dsm.facilio.in when building Connected Apps. It provides all the standard UI components you need — buttons, inputs, tables, cards, badges, and more — with Facilio's look and feel built in.
Design Principles#
- Blend in — Your widget should feel like a natural part of Facilio, not a foreign embed. Use Facilio's design system components.
- Keep it light — Use whitespace, subtle borders, and a neutral color palette.
- Be responsive — Widgets appear in panels, sidebars, and dialogs of varying sizes. Design for flexible widths.
- Prioritize readability — Use clear typography, adequate contrast, and logical information hierarchy.