Build Theme

    Theme Config

    Play around with the colors below to see how they affect the components on the page and the application as a whole.

    background
    #F5F5F5
    Sets the overall canvas color for the application.
    surface
    #FFFFFF
    Defines the color for components placed over the background.
    primary
    #50A6FF
    Represents the main identity color used for emphasis and branding.
    secondary
    #E6E9FF
    Complements the primary color and provides contrast for branding.
    error
    #F44336
    Signals errors or problems in visual design elements like buttons, cards and notifications.
    info
    #2196F3
    Used for displaying informational messages in visual design elements like buttons, cards and notifications.
    success
    #4CAF50
    Indicates successful actions or outcomes in visual design elements like buttons, cards and notifications.
    warning
    #FFC107
    Highlights warnings or potential issues in visual design elements like buttons, cards and notifications.

    Buttons

    Buttons are used to trigger an action. Try toggling the options below to see how they affect the cards.

    baseline
    primary
    secondary
    error
    info
    success
    warning

    Cards

    Cards are used to display content related to a single subject. Try toggling the options below to see how they affect the cards.

    Card
    baseline
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    primary
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    secondary
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    error
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    info
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    success
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.
    Card
    warning
    Lorem ip sum dolor sit amet, consectetur adipiscing elit. Nullam vitae diam et dolor lobortis aliquam. Donec nec dolor vitae.

    Input Text

    Text fields are used to collect text-based user input. Try toggling the options below to see how they affect the cards.