> ## Documentation Index > Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt > Use this file to discover all available pages before exploring further. # Semantic Color Palette > A semantic color palette is commonly applied to represent positive versus negative values, such as profit and loss, performance margins, or sentiment analysis. export const DoDont = ({text, type, children}) => { return <> {type === "do" &&
{children &&
{children}
}

Do {text && {text}}

} {type === "dont" &&
{children &&
{children}
}

Don't {text && {text}}

} {type === "caution" &&
{children &&
{children}
}

Caution {text && {text}}

} ; }; ## Use when: Semantic, or status, colors show the condition of data relative to a baseline. Red indicates danger or error, yellow signals a warning, and green represents normal or successful performance. These colors help users quickly understand status at a glance. ### Light mode semantic light mode ### Dark mode semantic dark mode ### Application Guidance Green = success Yellow = warning Red = danger Blue/grey = default Start with tier 1 colors for all semantic needs, if your specific instance needs more nuance use the other tiers to illustrate importance by using saturation. See example below: ### Real Example See the invoice chart below. Both scenarios should signal a warning state. Use the tier 3 color for the variable with lower urgency. If an additional variable needs to be introduced, apply the patterned treatment as the intermediate option to indicate moderate urgency. Use this pattern structure for success, warning, and default. real example, light mode real example, dark mode ### How to Use The following Do’s and Don’ts illustrate best practices and common mistakes to help guide effective use of the diverging color palette in data visualizations. bar chart using 3 variables for each bar bar chart using 3 variables for each bar bar chart with 3 variables using categorical palette bar chart with 3 variables using categorical palette bar chart with 3 variables using categorical palette bar chart with 3 variables using categorical palette bar chart with 3 variables using categorical palette bar chart with 3 variables using categorical palette Contact the Visual Design team on the #ask-vizd channel