Styling Overview

    The Indigo.Design System provides elaborate means for styling all 60+ UI components that also map to Ignite UI for Angular controls. The theming engine in our Angular product allows for creating custom color themes that can restyle the whole product in just a few lines of code. The App Builder also implements these theming mechanisms to let users change the complete look of their apps with just a few clicks.

    Styling in Figma

    The Indigo.Design for Material library in Figma, has the following structure of pages:

    • ↳ Icons
    • ↳ Colors
    • ↳ Typography
    • ↳ Elevation
    • ↳ Illustrations

    The listed pages are located under the 🧱 Foundation page. Тhe Colors and Elevations exist as Color styles and Effect styles, while Typography is defined as Text styles, which allows you to quickly change the theme for any given design we have created with the Indigo.Design System.

    Styling in Sketch

    Each of the four Sketch libraries, Indigo.Design for Material, Indigo.Design for Bootstrap, Indigo.Design for Fluent, and Indigo.Design for Indigo Theme, has the same structure of pages prefixed with a 🎨 emoji that provide assets and a powerful styling infrastructure upon which the rest of the library is built. So after you pick your variant based on the design language you prefer, head to the following pages to further customize the appearance of your library:

    • 🎨 Material Icons
    • 🎨 Colors
    • 🎨 Typography
    • 🎨 Elevation
    • 🎨 Illustrations

    Тhe colors and elevations exist as Layer Styles, while typography is defined as Text Styles, which allows you to quickly change the theme for any given design we have created with the Indigo.Design System.

    Styling in Adobe XD

    The Adobe XD library has a few Artboards prefixed with a 🎨 emoji that showcase the powerful styling infrastructure upon which the rest of the library is built:

    • 🎨 Material Icons
    • 🎨 Colors
    • 🎨 Typography
    • 🎨 Elevation
    • 🎨 Illustrations

    Тhe colors are defined as Colors, the typography is defined as Character Styles, while icons, elevation and illustrations exist as Components. This allows you to quickly change the theme for any given design we have created with the Indigo.Design System.

    To find more:

    • Material Icons - a collection of 160+ Material Icons extended with 360+ more icons created by us according to the Material icon design guidelines, which you can easily extend even further
    • Colors - palettes with primary, secondary and gray color variants, as well as special colors and a couple of palettes specifically designed for data visualizations, including a set optimized for different types of color blindness
    • Typography - a collection of generic and component-specific text styles
    • Elevation - the set of 24 shadows we are familiar with from Material Design
    • Illustrations - a set of 17 customizable and stylable illustrations to make your designs more playful and complete

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.