Use color to draw attention to important parts of your interface.

Color shouldn't be the only way a piece of information is conveyed, use text or symbols along with it.

It's best to use colors provided by Jenkins as they will automatically adapt to the user's theme.

Primarily use semantic colors in your interface, you can create your own semantic colors using the palette below.

Semantics

1. Accent

   Use for branding

   var(--accent-color)

   .jenkins-!-accent-color
2. Text

   Use for text

   var(--text-color)

   .jenkins-!-text-color
3. Secondary text

   Use for secondary text

   var(--text-color-secondary)

   .jenkins-!-text-color-secondary
4. Success

   Use for success states

   var(--success-color)

   .jenkins-!-success-color
5. Warning

   Use for warning states

   var(--warning-color)

   .jenkins-!-warning-color
6. Error

   Use for error states

   var(--error-color)

   .jenkins-!-error-color
7. Build

   Use for build kickoff

   var(--build-color)

   .jenkins-!-build-color
8. Destructive

   Use for destructive actions

   var(--destructive-color)

   .jenkins-!-destructive-color

Palette

1. Light Red

   var(--light-red)

   .jenkins-!-color-light-red
2. Red

   var(--red)

   .jenkins-!-color-red
3. Dark Red

   var(--dark-red)

   .jenkins-!-color-dark-red
4. Light Green

   var(--light-green)

   .jenkins-!-color-light-green
5. Green

   var(--green)

   .jenkins-!-color-green
6. Dark Green

   var(--dark-green)

   .jenkins-!-color-dark-green
7. Light Orange

   var(--light-orange)

   .jenkins-!-color-light-orange
8. Orange

   var(--orange)

   .jenkins-!-color-orange
9. Dark Orange

   var(--dark-orange)

   .jenkins-!-color-dark-orange
10. Light Yellow

    var(--light-yellow)

    .jenkins-!-color-light-yellow
11. Yellow

    var(--yellow)

    .jenkins-!-color-yellow
12. Dark Yellow

    var(--dark-yellow)

    .jenkins-!-color-dark-yellow
13. Light Blue

    var(--light-blue)

    .jenkins-!-color-light-blue
14. Blue

    var(--blue)

    .jenkins-!-color-blue
15. Dark Blue

    var(--dark-blue)

    .jenkins-!-color-dark-blue
16. Light Indigo

    var(--light-indigo)

    .jenkins-!-color-light-indigo
17. Indigo

    var(--indigo)

    .jenkins-!-color-indigo
18. Dark Indigo

    var(--dark-indigo)

    .jenkins-!-color-dark-indigo
19. Light Purple

    var(--light-purple)

    .jenkins-!-color-light-purple
20. Purple

    var(--purple)

    .jenkins-!-color-purple
21. Dark Purple

    var(--dark-purple)

    .jenkins-!-color-dark-purple
22. Light Pink

    var(--light-pink)

    .jenkins-!-color-light-pink
23. Pink

    var(--pink)

    .jenkins-!-color-pink
24. Dark Pink

    var(--dark-pink)

    .jenkins-!-color-dark-pink
25. Light Brown

    var(--light-brown)

    .jenkins-!-color-light-brown
26. Brown

    var(--brown)

    .jenkins-!-color-brown
27. Dark Brown

    var(--dark-brown)

    .jenkins-!-color-dark-brown