Colors

Brand Colors

Use the color class for any of these classes, just replace [color] with the name of the color you want. The last six colors are used exclusively for the Ubora brand.

Class Property
.brand-bg-[color] background-color
.brand-color-[color] color
.brand-border-[color] border-color
.brand-fill-[color] fill (Used for SVGs)
.brand-stroke-[color] stroke (Used for SVGs)

    UI Colors

    Treehouse utilizes colors in various parts of our app UI. Most of our app is gray, so color is rather important. Each of the UI colors has utility classes you can use to apply the color to different parts of an element. Use the color class for any of these classes, just replace [color] with the name of the color you want.

    Class Property
    .bg-[color] background-color
    .color-[color] color
    .border-[color] border-color
    .fill-[color] fill (Used for SVGs)
    .stroke-[color] stroke (Used for SVGs)

      Pop Colors

      These accent colors are used in illustrations and throughout the UI. Each of the UI colors has utility classes you can use to apply the color to different parts of an element. Use the color class for any of these classes, just replace [color] with the name of the color you want.

      Class Property
      .pop-bg-[color] background-color
      .pop-color-[color] color
      .pop-border-[color] border-color
      .pop-fill-[color] fill (Used for SVGs)
      .pop-stroke-[color] stroke (Used for SVGs)

        Gray Colors

        Use the color class for any of these classes, just replace [color] with the name of the color you want.

        Class Property
        .bg-[color] background-color
        .color-[color] color
        .border-[color] border-color
        .fill-[color] fill (Used for SVGs)
        .stroke-[color] stroke (Used for SVGs)

          Text Colors

          Use the color class for any of these classes, just replace [color] with the name of the color you want.

          Class Property
          .text-bg-[color] background-color
          .text-color-[color] color
          .text-border-[color] border-color
          .text-fill-[color] fill (Used for SVGs)
          .text-stroke-[color] stroke (Used for SVGs)

            Category Colors

            Leap contains utility classes for all variations of topic colors within Treehouse. These colors are used to denote the topic of courses and for various UI associated with a course. Use the color class for any of these classes, just replace [color] with the name of the color you want.

            Class Property
            .category-bg-[color]-[value] background-color
            .category-color-[color]-[value] color
            .category-border-[color]-[value] border-color
            .category-fill-[color]-[value] fill (Used for SVGs)
            .category-stroke-[color]-[value] stroke (Used for SVGs)