diff --git a/elm-package.json b/elm-package.json
index 5bfda862..e62999bd 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -24,12 +24,12 @@
         "Nri.Ui.TextInput.V1"
     ],
     "dependencies": {
-        "NoRedInk/nri-elm-css": "5.0.0 <= v <= 5.0.0",
+        "NoRedInk/nri-elm-css": "5.0.0 <= v < 6.0.0",
         "NoRedInk/view-extra": "2.0.0 <= v < 3.0.0",
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
         "pablohirafuji/elm-markdown": "2.0.4 <= v < 3.0.0",
-        "rtfeldman/elm-css": "11.2.0 <= v < 12.0.0",
+        "rtfeldman/elm-css": "13.1.1 <= v < 14.0.0",
         "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0",
         "rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
         "tesk9/accessible-html": "3.0.0 <= v < 4.0.0",
diff --git a/src/Nri/Ui/Alert/V1.elm b/src/Nri/Ui/Alert/V1.elm
index 5da854dc..3b48a9b3 100644
--- a/src/Nri/Ui/Alert/V1.elm
+++ b/src/Nri/Ui/Alert/V1.elm
@@ -23,7 +23,8 @@ module Nri.Ui.Alert.V1
 
 import Accessibility
 import Css
-import Css.Elements
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (Html)
 import Markdown
 import Nri.Colors
@@ -92,7 +93,7 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-Alert-"
-        [ Css.class Alert
+        [ Css.Foreign.class Alert
             [ Css.displayFlex
             , Css.fontSize (Css.px 13)
             , Css.lineHeight (Css.num 1.2)
@@ -100,10 +101,10 @@ styles =
             , Css.overflow Css.hidden
             , Css.padding4 (Css.px 6) (Css.px 8) (Css.px 8) (Css.px 30)
             , Css.position Css.relative
-            , Css.children
-                [ Css.Elements.div
-                    [ Css.children
-                        [ Css.Elements.p
+            , Css.Foreign.children
+                [ Css.Foreign.div
+                    [ Css.Foreign.children
+                        [ Css.Foreign.p
                             [ Css.margin Css.zero
                             ]
                         ]
@@ -121,25 +122,25 @@ styles =
                 , Css.width (Css.px 25)
                 ]
             ]
-        , Css.class Error
+        , Css.Foreign.class Error
             [ Css.color Nri.Colors.purple
             , Css.after
                 [ Css.backgroundColor Nri.Colors.purple
                 ]
             ]
-        , Css.class Success
+        , Css.Foreign.class Success
             [ Css.color Nri.Colors.greenDarkest
             , Css.after
                 [ Css.backgroundColor Nri.Colors.green
                 ]
             ]
-        , Css.class Tip
+        , Css.Foreign.class Tip
             [ Css.color Nri.Colors.navy
             , Css.after
                 [ Css.backgroundColor Nri.Colors.white
                 ]
             ]
-        , Css.class Warning
+        , Css.Foreign.class Warning
             [ Css.color Nri.Colors.red
             , Css.after
                 [ Css.backgroundColor Nri.Colors.red
diff --git a/src/Nri/Ui/BannerAlert/V1.elm b/src/Nri/Ui/BannerAlert/V1.elm
index 018450e2..6014d96d 100644
--- a/src/Nri/Ui/BannerAlert/V1.elm
+++ b/src/Nri/Ui/BannerAlert/V1.elm
@@ -17,7 +17,8 @@ module Nri.Ui.BannerAlert.V1
 
 import Accessibility
 import Css
-import Css.Elements
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (Html)
 import Nri.Colors
 import Nri.Fonts
@@ -71,35 +72,35 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses b
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-BannerAlert-"
-        [ Css.class AlertMessage
+        [ Css.Foreign.class AlertMessage
             [ Css.fontSize (Css.px 20)
             , Css.fontWeight (Css.int 700)
             , Css.lineHeight (Css.px 25)
             , Css.maxWidth (Css.px 600)
             , Nri.Fonts.baseFont
             ]
-        , Css.class Banner
+        , Css.Foreign.class Banner
             [ Css.alignItems Css.center
             , Css.displayFlex
             , Css.justifyContent Css.center
             , Css.padding (Css.px 20)
             , Css.width (Css.pct 100)
-            , Css.children
-                [ Css.Elements.button
+            , Css.Foreign.children
+                [ Css.Foreign.button
                     [ Css.position Css.absolute
                     , Css.right (Css.px 15)
                     ]
                 ]
             ]
-        , Css.class Error
+        , Css.Foreign.class Error
             [ Css.backgroundColor Nri.Colors.purpleLight
             , Css.color Nri.Colors.purpleDark
             ]
-        , Css.class Neutral
+        , Css.Foreign.class Neutral
             [ Css.backgroundColor Nri.Colors.frost
             , Css.color Nri.Colors.navy
             ]
-        , Css.class Success
+        , Css.Foreign.class Success
             [ Css.backgroundColor Nri.Colors.greenLightest
             , Css.color Nri.Colors.greenDarkest
             ]
diff --git a/src/Nri/Ui/Button/V1.elm b/src/Nri/Ui/Button/V1.elm
index 203fd5a4..6ea1396f 100644
--- a/src/Nri/Ui/Button/V1.elm
+++ b/src/Nri/Ui/Button/V1.elm
@@ -39,7 +39,8 @@ There will generally be a `*Button` and `*Link` version of each button style.
 
 import Accessibility exposing (..)
 import Css exposing (..)
-import Css.Elements
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html
 import Html.Attributes exposing (..)
 import Html.Events exposing (onClick)
@@ -253,7 +254,7 @@ styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
 styles =
     let
         newSizeStyle size config =
-            Css.class (SizeStyle size)
+            Css.Foreign.class (SizeStyle size)
                 [ fontSize (px config.fontSize)
                 , borderRadius (px 8)
                 , Css.height (px config.height)
@@ -261,15 +262,15 @@ styles =
                 , padding2 zero (px config.sidePadding)
                 , borderWidth (px 1)
                 , borderBottomWidth (px config.shadowHeight)
-                , Css.descendants
-                    [ Css.Elements.img
+                , Css.Foreign.descendants
+                    [ Css.Foreign.img
                         [ Css.height (px config.imageHeight)
                         , marginRight (px <| config.imageHeight / 6)
                         , position relative
                         , bottom (px 2)
                         , verticalAlign middle
                         ]
-                    , Css.Elements.svg
+                    , Css.Foreign.svg
                         [ Css.height (px config.imageHeight) |> important
                         , Css.width (px config.imageHeight) |> important
                         , marginRight (px <| config.imageHeight / 6)
@@ -277,7 +278,7 @@ styles =
                         , bottom (px 2)
                         , verticalAlign middle
                         ]
-                    , Css.Elements.svg
+                    , Css.Foreign.svg
                         [ Css.important <| Css.height (px config.imageHeight)
                         , Css.important <| Css.width auto
                         , maxWidth (px (config.imageHeight * 1.25))
@@ -289,18 +290,18 @@ styles =
                     ]
 
                 -- Borderless buttons get bigger icons
-                , Css.withClass (ColorsStyle BorderlessColors)
-                    [ Css.descendants
-                        [ Css.Elements.img
+                , Css.Foreign.withClass (ColorsStyle BorderlessColors)
+                    [ Css.Foreign.descendants
+                        [ Css.Foreign.img
                             [ Css.height (px (config.imageHeight * 1.6))
                             , marginRight (px (config.imageHeight * 1.6 / 6))
                             ]
-                        , Css.Elements.svg
+                        , Css.Foreign.svg
                             [ Css.height (px (config.imageHeight * 1.6)) |> important
                             , Css.width (px (config.imageHeight * 1.6)) |> important
                             , marginRight (px (config.imageHeight * 1.6 / 6))
                             ]
-                        , Css.Elements.svg
+                        , Css.Foreign.svg
                             [ Css.important <| Css.height (px (config.imageHeight * 1.6))
                             , Css.important <| Css.width auto
                             , maxWidth (px (config.imageHeight * 1.25))
@@ -313,7 +314,7 @@ styles =
                 ]
 
         styleStyle style config =
-            Css.class (ColorsStyle style)
+            Css.Foreign.class (ColorsStyle style)
                 [ color config.text
                 , backgroundColor config.background
                 , borderColor config.border
@@ -338,7 +339,7 @@ styles =
                 ]
 
         newStyleStyle style config =
-            Css.class (ColorsStyle style)
+            Css.Foreign.class (ColorsStyle style)
                 [ color config.text
                 , backgroundColor config.background
                 , fontWeight (int 700)
@@ -368,7 +369,7 @@ styles =
                 ]
     in
     Nri.Ui.Styles.V1.styles "Nri-Ui-Button-"
-        [ Css.class Button
+        [ Css.Foreign.class Button
             [ cursor pointer
             , display inlineBlock
             , -- Specifying the font can and should go away after bootstrap is removed from application.css
@@ -431,7 +432,7 @@ styles =
             , border = Nothing
             , shadow = transparent
             }
-        , Css.class (ColorsStyle BorderlessColors)
+        , Css.Foreign.class (ColorsStyle BorderlessColors)
             [ Css.hover
                 [ textDecoration underline
                 , Css.disabled
diff --git a/src/Nri/Ui/Checkbox/V1.elm b/src/Nri/Ui/Checkbox/V1.elm
index c96282ba..555d2f38 100644
--- a/src/Nri/Ui/Checkbox/V1.elm
+++ b/src/Nri/Ui/Checkbox/V1.elm
@@ -33,7 +33,8 @@ import Accessibility exposing (..)
 import Accessibility.Aria exposing (controls)
 import Accessibility.Widget as Widget
 import Css exposing (..)
-import Css.Elements
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html
 import Html.Attributes as Attributes
 import Html.Events as Events exposing (defaultOptions)
@@ -369,11 +370,11 @@ type ColorTheme
 
 mainSnippet : List Snippet
 mainSnippet =
-    [ Css.class Container
+    [ Css.Foreign.class Container
         [ display block
         , height inherit
         , descendants
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ display inlineBlock
                 , verticalAlign middle
                 , minHeight (px 42) -- container height
@@ -382,15 +383,15 @@ mainSnippet =
                 , property "background-position" "left center"
                 , property "background-repeat" "no-repeat"
                 ]
-            , Css.Elements.input [ display none ]
+            , Css.Foreign.input [ display none ]
             , selector ":disabled + label"
                 [ cursor auto
                 ]
             ]
         ]
-    , Css.class Checkbox
+    , Css.Foreign.class Checkbox
         [ cursor pointer ]
-    , Css.class Label
+    , Css.Foreign.class Label
         [ cursor pointer
         , outline none
         ]
@@ -399,14 +400,14 @@ mainSnippet =
 
 square : Assets r -> List Snippet
 square assets =
-    [ Css.class SquareClass
+    [ Css.Foreign.class SquareClass
         [ children
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ paddingLeft (px (29 + 6)) -- checkbox width + padding
                 ]
-            , Css.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
-            , Css.class Checked [ backgroundImage assets CheckboxChecked ]
-            , Css.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
+            , Css.Foreign.class Unchecked [ backgroundImage assets CheckboxUnchecked ]
+            , Css.Foreign.class Checked [ backgroundImage assets CheckboxChecked ]
+            , Css.Foreign.class Indeterminate [ backgroundImage assets CheckboxCheckedPartially ]
             ]
         ]
     ]
@@ -414,18 +415,18 @@ square assets =
 
 gray : List Snippet
 gray =
-    [ Css.class GrayClass
+    [ Css.Foreign.class GrayClass
         [ children
-            [ Css.Elements.label [ color Colors.gray45 ] ]
+            [ Css.Foreign.label [ color Colors.gray45 ] ]
         ]
     ]
 
 
 orange : Assets r -> List Snippet
 orange assets =
-    [ Css.class OrangeClass
+    [ Css.Foreign.class OrangeClass
         [ children
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ color Colors.ochre
                 , displayFlex
                 , alignItems center
@@ -444,9 +445,9 @@ orange assets =
 
 round : Assets r -> List Snippet
 round assets =
-    [ Css.class RoundClass
+    [ Css.Foreign.class RoundClass
         [ children
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ displayFlex
                 , alignItems center
                 , property "cursor" "pointer"
@@ -474,7 +475,7 @@ round assets =
                 ]
             ]
         ]
-    , Css.class WithPulsing
+    , Css.Foreign.class WithPulsing
         [ property "-webkit-animation" "pulsate 1s infinite"
         , property "-moz-animation" "pulsate 1s infinite"
         , property "animation" "pulsate 1s infinite"
@@ -484,9 +485,9 @@ round assets =
 
 locked : Assets r -> List Snippet
 locked assets =
-    [ Css.class LockedClass
+    [ Css.Foreign.class LockedClass
         [ descendants
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ paddingLeft (px (29 + 6)) -- checkbox width + padding
                 , backgroundImage assets PremiumLocked
                 , property "cursor" "auto"
@@ -498,9 +499,9 @@ locked assets =
 
 lockOnInside : Assets r -> List Snippet
 lockOnInside assets =
-    [ Css.class LockOnInsideClass
+    [ Css.Foreign.class LockOnInsideClass
         [ descendants
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ paddingLeft (px 35)
                 , backgroundImage assets CheckboxLockOnInside
                 , backgroundSize (px 24)
@@ -514,9 +515,9 @@ lockOnInside assets =
 
 unlockable : Assets r -> List Snippet
 unlockable assets =
-    [ Css.class UnlockableClass
+    [ Css.Foreign.class UnlockableClass
         [ descendants
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ paddingLeft (px (29 + 6)) -- checkbox width + padding
                 , backgroundImage assets PremiumKey
                 , property "cursor" "auto"
@@ -528,9 +529,9 @@ unlockable assets =
 
 premiumStyles : Assets r -> List Snippet
 premiumStyles assets =
-    [ Css.class PremiumClass
+    [ Css.Foreign.class PremiumClass
         [ children
-            [ Css.Elements.label
+            [ Css.Foreign.label
                 [ displayFlex
                 , alignItems center
                 ]
@@ -551,14 +552,14 @@ premiumStyles assets =
 
 opacified : List Snippet
 opacified =
-    [ Css.class Opacified
+    [ Css.Foreign.class Opacified
         [ descendants [ everything [ opacity (num 0.4) ] ] ]
     ]
 
 
 hiddenLabelText : List Snippet
 hiddenLabelText =
-    [ Css.class LabelText
+    [ Css.Foreign.class LabelText
         [ Accessibility.invisibleText
         ]
     ]
diff --git a/src/Nri/Ui/Divider/V1.elm b/src/Nri/Ui/Divider/V1.elm
index 03570b69..fc71f53a 100644
--- a/src/Nri/Ui/Divider/V1.elm
+++ b/src/Nri/Ui/Divider/V1.elm
@@ -7,6 +7,8 @@ module Nri.Ui.Divider.V1 exposing (styles, view)
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (..)
 import Nri.Colors as Colors
 import Nri.Ui.Styles.V1
@@ -39,24 +41,24 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-Divider-"
-        [ Css.class Container
+        [ Css.Foreign.class Container
             [ Css.width (pct 100)
             , Css.displayFlex
             , Css.alignItems Css.center
             ]
-        , Css.class LeftLine
+        , Css.Foreign.class LeftLine
             [ Css.width (px 10)
             , Css.height (px 1)
             , backgroundColor Colors.gray75
             , marginTop (px 2)
             ]
-        , Css.class RightLine
+        , Css.Foreign.class RightLine
             [ Css.flexGrow (Css.int 1)
             , backgroundColor Colors.gray75
             , Css.height (px 1)
             , marginTop (px 2)
             ]
-        , Css.class Title
+        , Css.Foreign.class Title
             [ margin2 zero (px 5)
             , fontSize (px 12)
             , color Colors.gray45
diff --git a/src/Nri/Ui/Effects/V1.elm b/src/Nri/Ui/Effects/V1.elm
index 79c90b38..da4c79f0 100644
--- a/src/Nri/Ui/Effects/V1.elm
+++ b/src/Nri/Ui/Effects/V1.elm
@@ -7,6 +7,8 @@ module Nri.Ui.Effects.V1 exposing (selectionShadow)
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Nri.Colors
 
 
diff --git a/src/Nri/Ui/Modal/V1.elm b/src/Nri/Ui/Modal/V1.elm
index 6b871111..95f462ce 100644
--- a/src/Nri/Ui/Modal/V1.elm
+++ b/src/Nri/Ui/Modal/V1.elm
@@ -16,7 +16,8 @@ module Nri.Ui.Modal.V1
 -}
 
 import Css
-import Css.Elements exposing (body)
+import Css.Foreign exposing (Snippet, body, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.CssHelpers exposing (..)
@@ -142,12 +143,12 @@ open (and this node is present on the page).
 -}
 styleNode : Html msg
 styleNode =
-    [ Css.stylesheet
-        [ Css.Elements.body
+    [ stylesheet
+        [ Css.Foreign.body
             [ Css.overflow Css.hidden ]
         ]
     ]
-        |> Css.compile
+        |> compile
         |> .css
         |> Html.CssHelpers.style
 
@@ -170,7 +171,7 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses b
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-BannerAlert-"
-        [ Css.class BackdropContainer
+        [ Css.Foreign.class BackdropContainer
             [ Css.height (Css.vh 100)
             , Css.left Css.zero
             , Css.overflow Css.hidden
@@ -179,26 +180,26 @@ styles =
             , Css.width (Css.pct 100)
             , Css.zIndex (Css.int 3)
             ]
-        , Css.class BackdropContainerWarning
+        , Css.Foreign.class BackdropContainerWarning
             [ Css.backgroundColor (Nri.Colors.Extra.withAlpha 0.9 Nri.Colors.gray20)
             ]
-        , Css.class BackdropContainerInfo
+        , Css.Foreign.class BackdropContainerInfo
             [ Css.backgroundColor (Nri.Colors.Extra.withAlpha 0.9 Nri.Colors.navy)
             ]
-        , Css.class ClickCatcher
+        , Css.Foreign.class ClickCatcher
             [ Css.bottom Css.zero
             , Css.left Css.zero
             , Css.position Css.absolute
             , Css.right Css.zero
             , Css.top Css.zero
             ]
-        , Css.class Content
+        , Css.Foreign.class Content
             [ Css.flexShrink (Css.int 4)
             , Css.overflowY Css.auto
             , Css.padding2 Css.zero (Css.px 45)
             , Css.width (Css.pct 100)
             ]
-        , Css.class Footer
+        , Css.Foreign.class Footer
             [ Css.alignItems Css.center
             , Css.displayFlex
             , Css.flexDirection Css.column
@@ -207,24 +208,24 @@ styles =
             , Css.margin4 (Css.px 40) Css.zero Css.zero Css.zero
             , Css.width (Css.pct 100)
             ]
-        , Css.class FooterItem
+        , Css.Foreign.class FooterItem
             [ Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero
             , Css.firstChild
                 [ Css.margin Css.zero
                 ]
             ]
-        , Css.class Heading
+        , Css.Foreign.class Heading
             [ Css.fontWeight (Css.int 700)
             , Css.lineHeight (Css.px 27)
             , Css.margin4 Css.zero Css.zero (Css.px 40) Css.zero
             ]
-        , Css.class HeadingInfo
+        , Css.Foreign.class HeadingInfo
             [ Nri.Stylers.makeFont (Css.px 20) Nri.Colors.navy
             ]
-        , Css.class HeadingWarning
+        , Css.Foreign.class HeadingWarning
             [ Nri.Stylers.makeFont (Css.px 20) Nri.Colors.red
             ]
-        , Css.class ModalContainer
+        , Css.Foreign.class ModalContainer
             [ Css.alignItems Css.center
             , Css.displayFlex
             , Css.flexDirection Css.column
diff --git a/src/Nri/Ui/Outline/V1.elm b/src/Nri/Ui/Outline/V1.elm
index a2b169ae..765669f7 100644
--- a/src/Nri/Ui/Outline/V1.elm
+++ b/src/Nri/Ui/Outline/V1.elm
@@ -12,7 +12,9 @@ module Nri.Ui.Outline.V1 exposing (NodeConfig, NodeLayout, config, html, node, s
 
 -}
 
-import Css exposing (Stylesheet)
+import Css
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (Attribute, Html)
 import Nri.Colors
 import Nri.Stylers
@@ -153,7 +155,7 @@ labelHeight =
 styles : Styles a Style b
 styles =
     Nri.Ui.Styles.V1.styles "Outline" <|
-        [ Css.class Segment
+        [ Css.Foreign.class Segment
             [ Css.position Css.relative
             , Css.zIndex (Css.int 0)
 
@@ -161,15 +163,15 @@ styles =
             -- top level nodes.
             , Css.overflow Css.auto
             ]
-        , Css.class Node
+        , Css.Foreign.class Node
             -- The node's relative positioning allows the connecting line to
             -- point upward relative from the node's bounding box.
             [ Css.position Css.relative
             , Css.display Css.block
 
             -- This selects all nodes on a level but the first.
-            , Css.generalSiblings
-                [ Css.class Node
+            , Css.Foreign.generalSiblings
+                [ Css.Foreign.class Node
                     -- Add some spacing between nodes of the same level.
                     [ Css.marginTop (Css.px 20)
                     , Css.before
@@ -181,9 +183,9 @@ styles =
                 ]
 
             -- Child nodes have a connecting line and are indented.
-            , Css.descendants nestedNodeStyles
+            , Css.Foreign.descendants nestedNodeStyles
             ]
-        , Css.class InnerNode
+        , Css.Foreign.class InnerNode
             [ Css.overflow Css.auto
 
             -- The position and zIndex create a new stacking context. Connecting
@@ -193,7 +195,7 @@ styles =
 
             -- Recursively assign color styles to the different nested levels of
             -- the outline structure.
-            , Css.descendants
+            , Css.Foreign.descendants
                 (colorStyles
                     [ Nri.Ui.Palette.V1.cornflower
                     , Nri.Ui.Palette.V1.aqua
@@ -202,12 +204,12 @@ styles =
                     ]
                 )
             ]
-        , Css.class GhostedNode
+        , Css.Foreign.class GhostedNode
             [ Css.opacity (Css.num 0.5)
             , Css.zIndex (Css.int -1)
             , Css.position Css.relative
             ]
-        , Css.class Label
+        , Css.Foreign.class Label
             [ Css.border2 (Css.px 1) Css.solid
             , Css.padding2 Css.zero (Css.px 15)
             , Css.fontSize (Css.px 15)
@@ -222,7 +224,7 @@ styles =
             , Nri.Stylers.makeFont (Css.px 15) Nri.Colors.gray20
             , Css.fontWeight Css.bold
             ]
-        , Css.class Contents
+        , Css.Foreign.class Contents
             [ Css.borderRadius (Css.px 8)
             , Css.marginTop (Css.px (labelHeight / 2))
             , Css.marginLeft (Css.px (labelHeight / 2))
@@ -234,9 +236,9 @@ styles =
             , Css.marginRight (Css.px 5)
             , Css.marginBottom (Css.px 5)
             ]
-        , Css.class SelectedNode
-            [ Css.children
-                [ Css.class Contents
+        , Css.Foreign.class SelectedNode
+            [ Css.Foreign.children
+                [ Css.Foreign.class Contents
                     [ Css.batch Nri.Ui.Effects.V1.selectionShadow
                     ]
                 ]
@@ -245,9 +247,9 @@ styles =
             ++ curvedConnectingLineStyles
 
 
-nestedNodeStyles : List Css.Snippet
+nestedNodeStyles : List Snippet
 nestedNodeStyles =
-    [ Css.class Node
+    [ Css.Foreign.class Node
         [ Css.marginTop (Css.px 20)
         , Css.before
             -- Draw the connect line. It is like an antenna pointing
@@ -257,14 +259,14 @@ nestedNodeStyles =
             , Css.borderBottom2 (Css.px 1) Css.solid
             , Css.batch lineStyles
             ]
-        , Css.children
+        , Css.Foreign.children
             -- Indent this node relative to the parent.
-            [ Css.class InnerNode
+            [ Css.Foreign.class InnerNode
                 [ Css.marginLeft (Css.px 50)
                 ]
             ]
         ]
-    , Css.class CustomHtml
+    , Css.Foreign.class CustomHtml
         [ Css.marginLeft (Css.px 50)
         ]
     ]
@@ -273,7 +275,7 @@ nestedNodeStyles =
 {-| The last node is sometimes connected by a curving line to its parent.
 Whether this curve should appear or not depends on the level of the node.
 -}
-curvedConnectingLineStyles : List Css.Snippet
+curvedConnectingLineStyles : List Snippet
 curvedConnectingLineStyles =
     -- 1. Root level nodes are connected with one another using straight lines,
     --    so they are never curved.
@@ -298,10 +300,10 @@ curvedConnectingLineStyles =
     --         │
     --         ╰─ Child Node 3
     --
-    [ Css.class Node
+    [ Css.Foreign.class Node
         [ Css.lastOfType
-            [ Css.descendants
-                [ Css.class Node
+            [ Css.Foreign.descendants
+                [ Css.Foreign.class Node
                     [ Css.lastOfType
                         [ Css.before
                             [ Css.borderRadius (Css.px 8)
@@ -327,11 +329,11 @@ curvedConnectingLineStyles =
     --         │
     --         ╰─ Child Node 2
     --
-    , Css.class Node
-        [ Css.descendants
-            [ Css.class Node
-                [ Css.descendants
-                    [ Css.class Node
+    , Css.Foreign.class Node
+        [ Css.Foreign.descendants
+            [ Css.Foreign.class Node
+                [ Css.Foreign.descendants
+                    [ Css.Foreign.class Node
                         [ Css.lastOfType
                             [ Css.before
                                 [ Css.borderRadius (Css.px 8)
@@ -345,20 +347,20 @@ curvedConnectingLineStyles =
     ]
 
 
-colorStyles : List Palette -> List Css.Snippet
+colorStyles : List Palette -> List Snippet
 colorStyles palettes =
     case palettes of
         [] ->
             []
 
         palette :: rest ->
-            [ Css.class InnerNode
-                [ Css.descendants (colorStyles rest)
+            [ Css.Foreign.class InnerNode
+                [ Css.Foreign.descendants (colorStyles rest)
                 ]
-            , Css.class Contents
+            , Css.Foreign.class Contents
                 [ Css.backgroundColor palette.background
                 ]
-            , Css.class Label
+            , Css.Foreign.class Label
                 [ Css.color palette.primary
                 , Css.borderColor palette.border
                 ]
diff --git a/src/Nri/Ui/Palette/V1.elm b/src/Nri/Ui/Palette/V1.elm
index ed5640eb..4e571fde 100644
--- a/src/Nri/Ui/Palette/V1.elm
+++ b/src/Nri/Ui/Palette/V1.elm
@@ -8,6 +8,8 @@ module Nri.Ui.Palette.V1 exposing (..)
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Nri.Colors as Colors
 
 
diff --git a/src/Nri/Ui/Styles/V1.elm b/src/Nri/Ui/Styles/V1.elm
index 766aba59..d1951c02 100644
--- a/src/Nri/Ui/Styles/V1.elm
+++ b/src/Nri/Ui/Styles/V1.elm
@@ -18,7 +18,9 @@ module Nri.Ui.Styles.V1 exposing (Keyframe, Styles, StylesWithAssets, keyframes,
 -}
 
 import Css
-import Css.Namespace
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
+import DEPRECATED.Css.Namespace
 import Html exposing (Attribute, Html)
 import Html.CssHelpers
 
@@ -37,7 +39,7 @@ type alias Styles id class msg =
 image somewhere.
 -}
 type alias StylesWithAssets id class msg assets =
-    { css : assets -> List Css.Stylesheet
+    { css : assets -> List Stylesheet
     , id : id -> Attribute msg
     , class : List class -> Attribute msg
     , classList : List ( class, Bool ) -> Attribute msg
@@ -51,41 +53,41 @@ This will help you make sure you don't mismatch the namespace you're using.
 
     { css, class } =
         Nri.Ui.Styles.styles "Nri-Ui-MyWidget-"
-            [ Css.class Container
+            [ Css.Foreign.class Container
                 [ backgroundColor Nri.Colors.ochre ]
             ]
 
 -}
 styles :
     String
-    -> List Css.Snippet
+    -> List Snippet
     -> Styles id class msg
 styles namespace snippets =
     stylesWithExtraStylesheets namespace [] snippets
 
 
 {-| Use this instead of [`styles`](#styles) if you need to
-include Css.Stylesheets from external packages,
+include Stylesheets from external packages,
 or if you need to add styles without a namespace.
 Remember, all stylesheets given here will be included
 on all pages of the site.
 -}
 stylesWithExtraStylesheets :
     String
-    -> List Css.Stylesheet
-    -> List Css.Snippet
+    -> List Stylesheet
+    -> List Snippet
     -> Styles id class msg
 stylesWithExtraStylesheets namespace extras snippets =
     let
         { id, class, classList } =
             Html.CssHelpers.withNamespace namespace
 
-        stylesheet =
+        sheet =
             snippets
-                |> Css.Namespace.namespace namespace
-                |> Css.stylesheet
+                |> DEPRECATED.Css.Namespace.namespace namespace
+                |> stylesheet
     in
-    { css = \assets -> stylesheet :: extras
+    { css = \assets -> sheet :: extras
     , id = id
     , class = class
     , classList = classList
@@ -98,19 +100,19 @@ stylesWithExtraStylesheets namespace extras snippets =
 -}
 stylesWithAssets :
     String
-    -> (assets -> List Css.Snippet)
+    -> (assets -> List Snippet)
     -> StylesWithAssets id class msg assets
 stylesWithAssets namespace snippets =
     let
         { id, class, classList } =
             Html.CssHelpers.withNamespace namespace
 
-        stylesheet assets =
+        sheet assets =
             snippets assets
-                |> Css.Namespace.namespace namespace
-                |> Css.stylesheet
+                |> DEPRECATED.Css.Namespace.namespace namespace
+                |> stylesheet
     in
-    { css = \assets -> [ stylesheet assets ]
+    { css = \assets -> [ sheet assets ]
     , id = id
     , class = class
     , classList = classList
diff --git a/src/Nri/Ui/Tabs/V1.elm b/src/Nri/Ui/Tabs/V1.elm
index a4256151..327257eb 100644
--- a/src/Nri/Ui/Tabs/V1.elm
+++ b/src/Nri/Ui/Tabs/V1.elm
@@ -36,6 +36,8 @@ import Accessibility.Key
 import Accessibility.Role
 import Accessibility.Widget
 import Css exposing (Style)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (Attribute, Html)
 import Html.Attributes
 import Html.Events
@@ -265,7 +267,7 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-Tabs-"
-        [ Css.class Container
+        [ Css.Foreign.class Container
             [ Css.displayFlex
             , Css.alignItems Css.flexEnd
             , Css.borderBottom (Css.px 1)
@@ -273,7 +275,7 @@ styles =
             , Css.borderBottomColor Nri.Colors.navy
             , Nri.Fonts.baseFont
             ]
-        , Css.class Title
+        , Css.Foreign.class Title
             [ Css.flexGrow (Css.int 2)
             , Css.fontSize (Css.px 30)
             , Css.fontWeight Css.bold
@@ -283,19 +285,19 @@ styles =
             , Css.color Nri.Colors.navy
             , Css.width (Css.px 430)
             ]
-        , Css.class (Tabs Left)
+        , Css.Foreign.class (Tabs Left)
             [ stylesTabs
             , Css.justifyContent Css.flexStart
             ]
-        , Css.class (Tabs Center)
+        , Css.Foreign.class (Tabs Center)
             [ stylesTabs
             , Css.justifyContent Css.center
             ]
-        , Css.class (Tabs Right)
+        , Css.Foreign.class (Tabs Right)
             [ stylesTabs
             , Css.justifyContent Css.flexEnd
             ]
-        , Css.class (TabContainer False) <|
+        , Css.Foreign.class (TabContainer False) <|
             [ stylesTab
             , Css.backgroundColor Nri.Colors.frost
             , Css.backgroundImage <|
@@ -304,14 +306,14 @@ styles =
                     (Css.stop2 (Nri.Colors.Extra.withAlpha 0 Nri.Colors.azure) (Css.pct 25))
                     [ Css.stop2 (Nri.Colors.Extra.withAlpha 0 Nri.Colors.azure) (Css.pct 100) ]
             ]
-        , Css.class (TabContainer True) <|
+        , Css.Foreign.class (TabContainer True) <|
             [ stylesTab
             , Css.backgroundColor Nri.Colors.white
             , Css.borderBottom (Css.px 1)
             , Css.borderBottomStyle Css.solid
             , Css.borderBottomColor Nri.Colors.white
             ]
-        , Css.class TabContainerLink
+        , Css.Foreign.class TabContainerLink
             [ Css.color Nri.Colors.navy
             , Css.hover [ Css.textDecoration Css.none ]
             , Css.focus [ Css.textDecoration Css.none ]
@@ -320,7 +322,7 @@ styles =
             , Css.position Css.relative
             , Css.textDecoration Css.none
             ]
-        , Css.class TabClickableLink
+        , Css.Foreign.class TabClickableLink
             [ Css.color Nri.Colors.navy
             , Css.display Css.inlineBlock
             , Css.padding4 (Css.px 14) (Css.px 20) (Css.px 12) (Css.px 20)
diff --git a/src/Nri/Ui/Text/V1.elm b/src/Nri/Ui/Text/V1.elm
index 84fd657e..a75090d7 100644
--- a/src/Nri/Ui/Text/V1.elm
+++ b/src/Nri/Ui/Text/V1.elm
@@ -41,7 +41,9 @@ Modifying strings to display nicely:
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
 import Css.Helpers exposing (identifierToString)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (..)
 import Nri.Colors exposing (..)
 import Nri.Stylers exposing (makeFont)
@@ -169,55 +171,55 @@ type CssClasses
 styles : Nri.Ui.Styles.V1.Styles Never CssClasses msg
 styles =
     Nri.Ui.Styles.V1.styles namespace
-        [ Css.class Heading
+        [ Css.Foreign.class Heading
             [ makeFont (px 30) navy
             , lineHeight (px 40.5)
             , fontWeight (int 700)
             , margin zero
             ]
-        , Css.class Tagline
+        , Css.Foreign.class Tagline
             [ makeFont (px 20) gray45
             , lineHeight (px 27)
             , fontWeight (int 400)
             , margin4 (px 5) (px 0) (px 0) (px 0)
             ]
-        , Css.class SubHeading
+        , Css.Foreign.class SubHeading
             [ makeFont (px 20) navy
             , lineHeight (px 27)
             , fontWeight (int 700)
             , margin4 (px 20) (px 0) (px 10) (px 0)
             ]
-        , Css.class SmallHeading
+        , Css.Foreign.class SmallHeading
             [ makeFont (px 16) gray20
             , lineHeight (px 23)
             , fontWeight (int 700)
             , margin zero
             ]
-        , Css.class MediumBody
+        , Css.Foreign.class MediumBody
             [ makeFont (px 18) gray20
             , lineHeight (px 27)
             , fontWeight (int 400)
             , margin4 (px 10) (px 0) (px 0) (px 0)
             ]
-        , Css.class SmallBody
+        , Css.Foreign.class SmallBody
             [ makeFont (px 15) gray20
             , lineHeight (px 23)
             , fontWeight (int 400)
             , margin4 (px 7) (px 0) (px 0) (px 0)
             ]
-        , Css.class SmallBodyGray
+        , Css.Foreign.class SmallBodyGray
             [ makeFont (px 15) gray45
             , lineHeight (px 23)
             , fontWeight (int 400)
             , margin4 (px 7) (px 0) (px 0) (px 0)
             ]
-        , Css.class Caption
+        , Css.Foreign.class Caption
             [ makeFont (px 13) gray45
             , lineHeight (px 18)
             , fontWeight (int 400)
             , margin4 (px 5) (px 0) (px 0) (px 0)
             ]
-        , Css.class Text
+        , Css.Foreign.class Text
             [ padding zero
             , textAlign left
             , firstChild
diff --git a/src/Nri/Ui/TextArea/V1.elm b/src/Nri/Ui/TextArea/V1.elm
index 0660a664..441d0beb 100644
--- a/src/Nri/Ui/TextArea/V1.elm
+++ b/src/Nri/Ui/TextArea/V1.elm
@@ -10,6 +10,8 @@ module Nri.Ui.TextArea.V1 exposing (styles, view)
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onInput)
@@ -75,14 +77,14 @@ type CssClass
 styles : Nri.Ui.Styles.V1.Styles Never CssClass msg
 styles =
     Nri.Ui.Styles.V1.styles "Nri-Ui-Textarea-"
-        [ Css.class Container
+        [ Css.Foreign.class Container
             [ position relative
             , paddingTop (px 7)
             ]
-        , Css.class InvisibleLabel
+        , Css.Foreign.class InvisibleLabel
             [ Nri.Accessibility.invisibleText
             ]
-        , Css.class Label
+        , Css.Foreign.class Label
             [ backgroundColor Nri.Colors.white
             , left (px 10)
             , top (px 0)
@@ -92,7 +94,7 @@ styles =
             , border3 (px 1) solid Nri.Colors.gray75
             , borderRadius (px 3)
             ]
-        , Css.class TextArea
+        , Css.Foreign.class TextArea
             [ boxShadow5 inset zero (px 1) (px 1) (withAlpha 0.2 gray20)
             , position relative
             , resize vertical
@@ -107,7 +109,7 @@ styles =
                 [ borderColor Nri.Colors.turquoise -- TODO: swap for new styleguide color
                 , outline none
                 ]
-            , Css.withClass IsInError
+            , Css.Foreign.withClass IsInError
                 [ borderColor purple
                 ]
             ]
diff --git a/src/Nri/Ui/TextInput/V1.elm b/src/Nri/Ui/TextInput/V1.elm
index b704a57c..330cbe8b 100644
--- a/src/Nri/Ui/TextInput/V1.elm
+++ b/src/Nri/Ui/TextInput/V1.elm
@@ -26,6 +26,8 @@ module Nri.Ui.TextInput.V1
 -}
 
 import Css exposing (..)
+import Css.Foreign exposing (Snippet, children, descendants, everything, selector)
+import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (onInput)
@@ -157,14 +159,14 @@ styles =
             ]
     in
     Nri.Ui.Styles.V1.styles "Nri-Ui-TextInput-"
-        [ Css.selector "input[type=text]"
-            [ Css.withClass Input inputStyle ]
-        , Css.selector "input[type=number]"
-            [ Css.withClass Input inputStyle ]
-        , Css.class InvisibleLabel
+        [ Css.Foreign.selector "input[type=text]"
+            [ Css.Foreign.withClass Input inputStyle ]
+        , Css.Foreign.selector "input[type=number]"
+            [ Css.Foreign.withClass Input inputStyle ]
+        , Css.Foreign.class InvisibleLabel
             [ Nri.Accessibility.invisibleText
             ]
-        , Css.class OverlappingLabel
+        , Css.Foreign.class OverlappingLabel
             [ Css.backgroundColor Nri.Colors.white
             , Css.left (Css.px 10)
             , Css.top (Css.px 0)
@@ -173,18 +175,18 @@ styles =
             , Css.position Css.absolute
             , Css.fontWeight (int 600)
             ]
-        , Css.class OverlappingLabelInput
+        , Css.Foreign.class OverlappingLabelInput
             [ Css.position Css.relative
             ]
-        , Css.class IsInError
-            [ Css.children
-                [ Css.class Input
-                    [ Css.withClass IsInErrorInput
+        , Css.Foreign.class IsInError
+            [ Css.Foreign.children
+                [ Css.Foreign.class Input
+                    [ Css.Foreign.withClass IsInErrorInput
                         [ borderColor purple
                         , focus [ borderColor purple ]
                         ]
                     ]
-                , Css.class OverlappingLabel
+                , Css.Foreign.class OverlappingLabel
                     [ color purple
                     ]
                 ]