diff --git a/assets/src/PlanningPokerEntry.elm b/assets/src/PlanningPokerEntry.elm
index 67e38f3..2163c2f 100644
--- a/assets/src/PlanningPokerEntry.elm
+++ b/assets/src/PlanningPokerEntry.elm
@@ -84,9 +84,9 @@ layout model =
                 }
             , el
                 [ centerX
-                , Background.color UI.red
+                , Background.color UI.colors.errorBackground
                 , padding 20
-                , Font.color UI.white
+                , Font.color UI.colors.errorForeground
                 , transparent (model.error == Nothing)
                 ]
               <|
diff --git a/assets/src/PlanningPokerRoom.elm b/assets/src/PlanningPokerRoom.elm
index efe3362..0f94976 100644
--- a/assets/src/PlanningPokerRoom.elm
+++ b/assets/src/PlanningPokerRoom.elm
@@ -212,20 +212,20 @@ viewRoom player room =
 navBar : { title : String, playerName : String } -> Element Msg
 navBar { title, playerName } =
     row
-        [ Background.color UI.blue
+        [ Background.color UI.colors.primary
         , height (px 50)
         , width fill
         , padding 10
         ]
         [ el
             [ Font.alignLeft
-            , Font.color UI.white
+            , Font.color UI.colors.background
             , width fill
             ]
             (text title)
         , el
             [ Font.alignRight
-            , Font.color UI.white
+            , Font.color UI.colors.background
             ]
             (text playerName)
         ]
@@ -245,10 +245,10 @@ viewCards selected =
                 , Border.rounded 10
                 , Background.color <|
                     if selected == Just value then
-                        UI.blue
+                        UI.colors.selected
 
                     else
-                        UI.white
+                        UI.colors.background
                 , Font.size 50
                 ]
                 { onPress = Just (Vote value)
@@ -278,7 +278,6 @@ viewPlayers playerList =
                         el
                             [ padding 10
                             , Font.alignRight
-                            , Background.color UI.lightGrey
                             ]
                             (text <| Maybe.withDefault " " player.vote)
               }
diff --git a/assets/src/PlanningPokerUI.elm b/assets/src/PlanningPokerUI.elm
index f9816ed..18e0e91 100644
--- a/assets/src/PlanningPokerUI.elm
+++ b/assets/src/PlanningPokerUI.elm
@@ -1,13 +1,9 @@
 module PlanningPokerUI exposing
     ( actionButton
-    , blue
     , colors
     , fontSizes
     , heroText
-    , lightGrey
-    , red
     , toDocument
-    , white
     )
 
 import Browser exposing (Document)
@@ -26,7 +22,10 @@ colors =
     , background = white
     , selected = primary
     , disabled = lightGrey
-    , error = red
+    , errorBackground = red
+    , errorForeground = white
+    , text = black
+    , buttonText = white
     }
 
 
@@ -56,6 +55,11 @@ white =
     rgb255 255 255 255
 
 
+black : Color
+black =
+    rgb255 0 0 0
+
+
 actionButton :
     List (Attribute msg)
     -> { isActive : Bool, onPress : msg, label : Element msg }
@@ -93,7 +97,7 @@ toDocument : { title : String, body : List (Element msg) } -> Document msg
 toDocument { title, body } =
     { title = title
     , body =
-        [ layout [ explain Debug.todo ] <|
+        [ layout [] <|
             column [ width fill, height fill, spacing 20 ] body
         ]
     }