diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
index cc83210374a..19ccfe239a6 100644
--- a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
+++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx
@@ -67,7 +67,7 @@ export const ThemeColors = () => {
           <DemoBox bg={theme.colors.bg2} border={theme.colors.border2}>
             <DemoText>
               colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on
-              elements placed ontop of bg1. Ths box is using border2.
+              elements placed ontop of bg1. This box is using border2.
             </DemoText>
             <DemoBox bg={theme.colors.bg3} border={theme.colors.border2}>
               <DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText>