diff --git a/docs/Examples2/QRCode.example.purs b/docs/Examples2/QRCode.example.purs
index c333ac49..5f7a1473 100644
--- a/docs/Examples2/QRCode.example.purs
+++ b/docs/Examples2/QRCode.example.purs
@@ -48,13 +48,13 @@ qrcodeExample =
       { qrcode, url } <- useQRCode ECLLow props.value
       pure
         $ box
-        <<< Box._align Center
+        $ Box._align Center
         $ _
             { content =
               [ qrcode
-                  <<< Border.border
-                  >>> Border._round
-                  >>> S.styleModifier_
+                  $ Border.border
+                  $ Border._round
+                  $ S.style_
                       ( S.css
                           { padding: S.int 16
                           , width: S.int 140
diff --git a/docs/Examples2/Slat.example.purs b/docs/Examples2/Slat.example.purs
index 1bbb1b7d..1f83886d 100644
--- a/docs/Examples2/Slat.example.purs
+++ b/docs/Examples2/Slat.example.purs
@@ -6,7 +6,7 @@ import Data.Array (intercalate, replicate)
 import Data.Maybe (Maybe(..))
 import Data.Nullable as Nullable
 import Effect.Unsafe (unsafePerformEffect)
-import Lumi.Components (LumiComponent, PropsModifier, lumiComponent)
+import Lumi.Components (LumiComponent, lumiComponent)
 import Lumi.Components.Example (example)
 import Lumi.Components.Lockup (userLockup)
 import Lumi.Components.Spacing (Space(..), vspace)
@@ -15,7 +15,7 @@ import Lumi.Components.Text (h2_, p_)
 import Lumi.Components.Text as Text
 import Lumi.Components2.Box (box)
 import Lumi.Components2.Slat as Slat
-import Lumi.Styles (styleModifier_)
+import Lumi.Styles (StyleModifier, style_)
 import Lumi.Styles.Box (FlexAlign(..))
 import Lumi.Styles.Theme (LumiTheme(..), useTheme)
 import React.Basic (JSX, fragment)
@@ -111,12 +111,12 @@ docs =
           $ _ { content = exampleSlatContent }
       ]
 
-slatExWidth :: forall props. PropsModifier props
-slatExWidth = styleModifier_ $ E.css { maxWidth: E.int 500, width: E.str "100%" }
+slatExWidth :: StyleModifier
+slatExWidth = style_ $ E.css { maxWidth: E.int 500, width: E.str "100%" }
 
-slatColumn :: forall props. Int -> PropsModifier props
+slatColumn :: Int -> StyleModifier
 slatColumn flexGrow =
-  styleModifier_
+  style_
     $ E.css
     $ { flexGrow: E.int flexGrow
       , "&:not(:first-child)":
@@ -134,7 +134,7 @@ labeledInfo =
       theme@(LumiTheme { colorNames }) <- useTheme
       pure
         $ box
-        $ styleModifier_ (E.css { label: E.str "labeledInfo" })
+        $ style_ (E.css { label: E.str "labeledInfo" })
         $ _
             { css = css
             , className = className
diff --git a/src/Lumi/Components2/Box.purs b/src/Lumi/Components2/Box.purs
index 1c8c72ce..f61b064b 100644
--- a/src/Lumi/Components2/Box.purs
+++ b/src/Lumi/Components2/Box.purs
@@ -24,7 +24,7 @@ box =
         $ E.element R.div'
             { children: props.content
             , className: props.className
-            , css: toCSS theme props Styles.Box.box
+            , css: theme # toCSS Styles.Box.box <> props.css
             }
 
 row :: LumiComponent BoxProps
diff --git a/src/Lumi/Components2/Button.purs b/src/Lumi/Components2/Button.purs
index 33468ea2..43291301 100644
--- a/src/Lumi/Components2/Button.purs
+++ b/src/Lumi/Components2/Button.purs
@@ -68,7 +68,7 @@ button =
           , children
           , className: props.className
           , css:
-            toCSS theme props (Styles.Button.button props.color props.kind props.state props.size)
+            theme # toCSS (Styles.Button.button props.color props.kind props.state props.size) <> props.css
           , onClick: handler_ props.onPress
           , type: props.type
           , disabled:
diff --git a/src/Lumi/Components2/ButtonGroup.purs b/src/Lumi/Components2/ButtonGroup.purs
index 7db81570..1260233a 100644
--- a/src/Lumi/Components2/ButtonGroup.purs
+++ b/src/Lumi/Components2/ButtonGroup.purs
@@ -26,5 +26,5 @@ buttonGroup =
         $ E.element R.div'
             { className: props.className
             , children: props.content
-            , css: toCSS theme props (Styles.Button.buttonGroup props.joined)
+            , css: theme # toCSS (Styles.Button.buttonGroup props.joined) <> props.css
             }
diff --git a/src/Lumi/Components2/Clip.purs b/src/Lumi/Components2/Clip.purs
index e8e186fc..7f429dc9 100644
--- a/src/Lumi/Components2/Clip.purs
+++ b/src/Lumi/Components2/Clip.purs
@@ -17,7 +17,7 @@ import Lumi.Components (LumiComponent, lumiComponent)
 import Lumi.Components.Spacing (Space(..))
 import Lumi.Components2.Box (box)
 import Lumi.Components2.Button (_linkStyle, button)
-import Lumi.Styles (styleModifier_, toCSS)
+import Lumi.Styles (style_, toCSS)
 import Lumi.Styles.Box (FlexAlign(..), _justify)
 import Lumi.Styles.Box as Styles.Box
 import Lumi.Styles.Clip as Styles.Clip
@@ -45,7 +45,7 @@ clip =
         copyButton =
           button
             $ _linkStyle
-            $ styleModifier_
+            $ style_
                 ( E.merge
                     [ E.css
                         { marginLeft: E.prop S16
@@ -65,14 +65,14 @@ clip =
       pure
         $ E.element R.div'
             { className: props.className
-            , css: toCSS theme props Styles.Clip.clip
+            , css: theme # toCSS Styles.Clip.clip <> props.css
             , children:
               [ E.element R.div'
                   { className: ""
                   , css:
-                    toCSS theme props
-                      $ Styles.Box.box
-                      >>> Styles.Box._justify Center
+                    theme
+                      # toCSS (Styles.Box.box <<< Styles.Box._justify Center)
+                      <> props.css
                   , ref
                   , children: props.content
                   }
diff --git a/src/Lumi/Components2/Link.purs b/src/Lumi/Components2/Link.purs
index 82ebd096..187fcfad 100644
--- a/src/Lumi/Components2/Link.purs
+++ b/src/Lumi/Components2/Link.purs
@@ -50,7 +50,7 @@ link =
       theme <- useTheme
       pure
         $ lumiAnchorElement
-            { css: toCSS theme props Styles.Link.link
+            { css: theme # toCSS Styles.Link.link <> props.css
             , children: props.content
             , className
             , href: un URL props.href
diff --git a/src/Lumi/Components2/QRCode.purs b/src/Lumi/Components2/QRCode.purs
index 4661e9e9..0f44bfa1 100644
--- a/src/Lumi/Components2/QRCode.purs
+++ b/src/Lumi/Components2/QRCode.purs
@@ -72,7 +72,7 @@ useQRCode level value =
                       ]
                   , ref
                   , className: props.className
-                  , css: toCSS theme props Styles.QRCode.qrcode
+                  , css: theme # toCSS Styles.QRCode.qrcode <> props.css
                   }
     url /\ setUrl <- useState Nothing
     useEffect (UnsafeReference qrcode) do
diff --git a/src/Lumi/Components2/Slat.purs b/src/Lumi/Components2/Slat.purs
index 3c1a7ba0..538eb2ac 100644
--- a/src/Lumi/Components2/Slat.purs
+++ b/src/Lumi/Components2/Slat.purs
@@ -13,7 +13,7 @@ import Data.Newtype (un)
 import Effect (Effect)
 import Effect.Unsafe (unsafePerformEffect)
 import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier)
-import Lumi.Styles (styleModifier, styleModifier_, toCSS)
+import Lumi.Styles (style, style_, toCSS)
 import Lumi.Styles.Slat (_interactive, slat) as Styles.Slat.Hidden
 import Lumi.Styles.Slat hiding (_interactive,slat) as Styles.Slat
 import Lumi.Styles.Theme (LumiTheme(..), useTheme)
@@ -43,13 +43,13 @@ slat =
       pure case props.interaction of
         Nothing ->
           E.element R.div'
-            { css: toCSS theme props slatStyle
+            { css: theme # toCSS slatStyle <> props.css
             , children: props.content
             , className
             }
         Just interaction@{ href: Nothing } ->
           E.element R.button'
-            { css: toCSS theme props slatStyleInteractive
+            { css: theme # toCSS slatStyleInteractive <> props.css
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
@@ -57,7 +57,7 @@ slat =
             }
         Just interaction@{ href: Just href } ->
           E.element R.a'
-            { css: toCSS theme props slatStyleInteractive
+            { css: theme # toCSS slatStyleInteractive <> props.css
             , children: props.content
             , onClick: capture_ interaction.onClick
             , tabIndex: interaction.tabIndex
@@ -72,11 +72,11 @@ slat =
 
   slatStyle =
     Styles.Slat.Hidden.slat
-      >>> styleModifier_ (E.css { appearance: E.none })
+      <<< style_ (E.css { appearance: E.none })
 
   slatStyleInteractive =
     slatStyle
-      >>> Styles.Slat.Hidden._interactive
+      <<< Styles.Slat.Hidden._interactive
 
 _interactive :: SlatInteraction -> PropsModifier SlatProps
 _interactive interaction =
@@ -91,7 +91,7 @@ _interactiveBackground interaction =
     _
       { interaction = Just interaction
       }
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< style \(LumiTheme theme) ->
         E.css
           { "&:hover":
             E.nested
diff --git a/src/Lumi/Styles.purs b/src/Lumi/Styles.purs
index de20f602..8c9ffadb 100644
--- a/src/Lumi/Styles.purs
+++ b/src/Lumi/Styles.purs
@@ -1,40 +1,41 @@
 module Lumi.Styles
-  ( styleModifier
-  , styleModifier_
+  ( StyleModifier
+  , style
+  , style_
   , toCSS
   , module Emotion
   ) where
 
 import Prelude
-import Lumi.Components (PropsModifier, LumiProps, propsModifier)
+
+import Data.Foldable (fold)
+import Lumi.Components (PropsModifier, propsModifier)
 import Lumi.Styles.Theme (LumiTheme)
-import React.Basic.Emotion hiding (element) as Emotion
-
--- | Lift a themed set of styles into a `PropsModifier` for composition with other modifiers.
--- |
--- | Note: A style modifier should generally leave the `props` type unconstrained and take
--- |   configuration as regular arguments instead. Adding constraints to `props` makes it
--- |   difficult to compose style and prop modifiers together across different components,
--- |   where the same field name could mean different things.
-styleModifier :: forall props. (LumiTheme -> Emotion.Style) -> PropsModifier props
-styleModifier f = propsModifier \props -> props { css = f <> props.css }
-
--- | Lift a static set of styles into a `PropsModifier` for composition with other modifiers.
--- |
--- | Note: A style modifier should generally leave the `props` type unconstrained and take
--- |   configuration as regular arguments instead. Adding constraints to `props` makes it
--- |   difficult to compose style and prop modifiers together across different components,
--- |   where the same field name could mean different things.
-styleModifier_ :: forall props. Emotion.Style -> PropsModifier props
-styleModifier_ = styleModifier <<< const
+import React.Basic.Emotion hiding (element,style) as Emotion
+
+type StyleModifier = forall props. PropsModifier props
+
+-- | Lift a themed set of styles into a `StyleModifier` for composition with other modifiers.
+style :: (LumiTheme -> Emotion.Style) -> StyleModifier
+style f = propsModifier \props -> props { css = props.css <> f }
+
+-- | Lift a static set of styles into a `StyleModifier` for composition with other modifiers.
+style_ :: Emotion.Style -> StyleModifier
+style_ = style <<< const
+
+-- | Lift an array of themed styles into a `StyleModifier` for composition with other modifiers.
+styles :: Array (LumiTheme -> Emotion.Style) -> StyleModifier
+styles = style <<< fold
+
+-- | Lift an array of static styles into a `StyleModifier` for composition with other modifiers.
+styles_ :: Array Emotion.Style -> StyleModifier
+styles_ = style_ <<< fold
 
 -- | Flatten a `PropsModifier` and extract the Emotion styles for use with `React.Basic.Emotion.element`.
 -- | This function is mainly used inside component implementations where the `LumiComponent` boundary
 -- | gives way to DOM components or other `ReactComponent`s.
 toCSS ::
-  forall props.
+  PropsModifier () ->
   LumiTheme ->
-  LumiProps props ->
-  PropsModifier props ->
   Emotion.Style
-toCSS theme props m = (m identity props).css theme
+toCSS m = (m identity { className: "", css: mempty }).css
diff --git a/src/Lumi/Styles/Border.purs b/src/Lumi/Styles/Border.purs
index c01f77fd..57a3bf89 100644
--- a/src/Lumi/Styles/Border.purs
+++ b/src/Lumi/Styles/Border.purs
@@ -2,18 +2,17 @@ module Lumi.Styles.Border where
 
 import Prelude
 
-import Lumi.Components (PropsModifier)
 import Lumi.Components.Spacing (Space(..))
-import Lumi.Styles (styleModifier, styleModifier_)
+import Lumi.Styles (StyleModifier, style, style_)
 import Lumi.Styles.Box (box)
 import Lumi.Styles.Box as Box
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (color, css, int, nested, none, prop, str)
 
-border :: forall props. PropsModifier props
+border :: StyleModifier
 border =
   box
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< style \(LumiTheme theme) ->
       css
         { label: str "border"
         , borderWidth: int 1
@@ -22,16 +21,16 @@ border =
         , padding: str "8px 16px"
         }
 
-_round :: forall props. PropsModifier props
+_round :: StyleModifier
 _round =
-  styleModifier_
+  style_
     $ css
       { borderRadius: int 4
       }
 
-_topBottom :: forall props. PropsModifier props
+_topBottom :: StyleModifier
 _topBottom =
-  styleModifier_
+  style_
         ( css
             { borderLeft: none
             , borderRight: none
@@ -41,11 +40,11 @@ _topBottom =
             }
         )
 
-_interactive :: forall props. PropsModifier props
+_interactive :: StyleModifier
 _interactive =
   Box._interactive
-    >>> Box._focusable
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< Box._focusable
+    <<< style \(LumiTheme theme) ->
         css
           { "&:hover":
             nested
@@ -54,9 +53,9 @@ _interactive =
                   }
           }
 
-_listSpaced :: forall props. PropsModifier props
+_listSpaced :: StyleModifier
 _listSpaced =
-  styleModifier \(LumiTheme theme) ->
+  style \(LumiTheme theme) ->
     css
       { "&:not(:first-child)":
         nested
@@ -65,9 +64,9 @@ _listSpaced =
               }
       }
 
-_listCompact :: forall props. PropsModifier props
+_listCompact :: StyleModifier
 _listCompact =
-  styleModifier \(LumiTheme theme) ->
+  style \(LumiTheme theme) ->
     css
       { "&:first-child":
         nested
diff --git a/src/Lumi/Styles/Box.purs b/src/Lumi/Styles/Box.purs
index 458da6c9..87fd6fee 100644
--- a/src/Lumi/Styles/Box.purs
+++ b/src/Lumi/Styles/Box.purs
@@ -2,14 +2,13 @@ module Lumi.Styles.Box where
 
 import Prelude
 import Color (cssStringHSLA)
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (int, styleModifier, styleModifier_)
+import Lumi.Styles (StyleModifier, int, style, style_)
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (class IsStyleProperty, css, nested, prop, str)
 
-box :: forall props. PropsModifier props
+box :: StyleModifier
 box =
-  styleModifier_
+  style_
     $ css
         { label: str "box"
         , display: str "flex"
@@ -22,19 +21,19 @@ box =
         , padding: int 0
         }
 
-_row :: forall props. PropsModifier props
+_row :: StyleModifier
 _row =
-  styleModifier_
+  style_
     $ css { flexDirection: str "row" }
 
-_column :: forall props. PropsModifier props
+_column :: StyleModifier
 _column =
-  styleModifier_
+  style_
     $ css { flexDirection: str "column" }
 
-_wrap :: forall props. PropsModifier props
+_wrap :: StyleModifier
 _wrap =
-  styleModifier_
+  style_
     $ css { flexWrap: str "wrap" }
 
 data FlexAlign
@@ -59,27 +58,27 @@ instance isStylePropertyFlexAlign :: IsStyleProperty FlexAlign where
       SpaceBetween -> "space-between"
       SpaceEvenly -> "space-evenly"
 
-_justify :: forall props. FlexAlign -> PropsModifier props
-_justify a = styleModifier_ $ css { justifyContent: prop a }
+_justify :: FlexAlign -> StyleModifier
+_justify a = style_ $ css { justifyContent: prop a }
 
-_align :: forall props. FlexAlign -> PropsModifier props
-_align a = styleModifier_ $ css { alignItems: prop a }
+_align :: FlexAlign -> StyleModifier
+_align a = style_ $ css { alignItems: prop a }
 
-_alignSelf :: forall props. FlexAlign -> PropsModifier props
-_alignSelf a = styleModifier_ $ css { alignSelf: prop a }
+_alignSelf :: FlexAlign -> StyleModifier
+_alignSelf a = style_ $ css { alignSelf: prop a }
 
-_interactive :: forall props. PropsModifier props
+_interactive :: StyleModifier
 _interactive =
-  styleModifier_
+  style_
     $ css
     $ { touchAction: str "manipulation"
       , userSelect: str "none"
       , cursor: str "pointer"
       }
 
-_focusable :: forall props. PropsModifier props
+_focusable :: StyleModifier
 _focusable =
-  styleModifier \(LumiTheme theme) ->
+  style \(LumiTheme theme) ->
     css
       { "&:focus, &:active":
         nested
diff --git a/src/Lumi/Styles/Button.purs b/src/Lumi/Styles/Button.purs
index f05edc1f..a5f09579 100644
--- a/src/Lumi/Styles/Button.purs
+++ b/src/Lumi/Styles/Button.purs
@@ -4,10 +4,9 @@ import Prelude
 import Color (Color, darken, desaturate, lighten)
 import Data.Foldable (fold)
 import Data.Maybe (Maybe, fromMaybe)
-import Lumi.Components (PropsModifier)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.ZIndex (ziButtonGroup)
-import Lumi.Styles (merge, none, styleModifier, styleModifier_)
+import Lumi.Styles (StyleModifier, merge, none, style, style_)
 import Lumi.Styles.Box (FlexAlign(..), _align, _focusable, _interactive, _justify, _row, box)
 import Lumi.Styles.Link as Link
 import Lumi.Styles.Loader (mkLoader, spin)
@@ -25,16 +24,15 @@ data ButtonState
   | Loading
 
 button ::
-  forall props.
   Maybe Color ->
   ButtonKind ->
   ButtonState ->
   Size ->
-  PropsModifier props
+  StyleModifier
 button colo kind state size = case kind of
   Primary ->
     buttonStyle
-      >>> styleModifier \theme@(LumiTheme { colors }) ->
+      <<< style \theme@(LumiTheme { colors }) ->
           let
             { hue, hueDarker, hueDarkest, hueDisabled, white } =
               makeColorShades
@@ -79,7 +77,7 @@ button colo kind state size = case kind of
                   ]
   Secondary ->
     buttonStyle
-      >>> styleModifier \theme@(LumiTheme { colors }) ->
+      <<< style \theme@(LumiTheme { colors }) ->
           let
             { hueDarker, hueDarkest, grey1, grey2, white, black } =
               makeColorShades
@@ -126,7 +124,7 @@ button colo kind state size = case kind of
                   ]
   Link ->
     Link.link
-      >>> styleModifier \(LumiTheme { colors }) ->
+      <<< style \(LumiTheme { colors }) ->
           let
             { hueDisabled } =
               makeColorShades
@@ -163,14 +161,14 @@ button colo kind state size = case kind of
   where
   buttonStyle =
     box
-      >>> _row
-      >>> _align Center
-      >>> _justify Center
-      >>> case state of
+      <<< _row
+      <<< _align Center
+      <<< _justify Center
+      <<< case state of
           Disabled -> identity
           Loading -> identity
-          Enabled -> _interactive >>> _focusable
-      >>> styleModifier_
+          Enabled -> _interactive <<< _focusable
+      <<< style_
           ( css
               { label: str "button"
               , appearance: none
@@ -271,12 +269,12 @@ button colo kind state size = case kind of
     in
       { hue, hueDarker, hueDarkest, hueDisabled, grey1, grey2, white, black }
 
-buttonGroup :: forall props. Boolean -> PropsModifier props
+buttonGroup :: Boolean -> StyleModifier
 buttonGroup joined =
   box
-    >>> _row
-    >>> styleModifier_ (css { label: str "buttonGroup" })
-    >>> styleModifier_
+    <<< _row
+    <<< style_ (css { label: str "buttonGroup" })
+    <<< style_
         if not joined then
           css
             { label: str "notJoined"
diff --git a/src/Lumi/Styles/Clip.purs b/src/Lumi/Styles/Clip.purs
index 6fc9f908..6a556633 100644
--- a/src/Lumi/Styles/Clip.purs
+++ b/src/Lumi/Styles/Clip.purs
@@ -1,20 +1,19 @@
 module Lumi.Styles.Clip where
 
 import Prelude
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (styleModifier)
+import Lumi.Styles (StyleModifier, style)
 import Lumi.Styles.Border (_round, border)
 import Lumi.Styles.Box (FlexAlign(..), _justify, _row)
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (color, css)
 
-clip :: forall props. PropsModifier props
+clip :: StyleModifier
 clip =
   border
-    >>> _round
-    >>> _row
-    >>> _justify SpaceBetween
-    >>> styleModifier \(LumiTheme { colors }) ->
+    <<< _round
+    <<< _row
+    <<< _justify SpaceBetween
+    <<< style \(LumiTheme { colors }) ->
         css
           { borderColor: color colors.black5
           , backgroundColor: color colors.black5
diff --git a/src/Lumi/Styles/Link.purs b/src/Lumi/Styles/Link.purs
index 22b7f313..084c9f97 100644
--- a/src/Lumi/Styles/Link.purs
+++ b/src/Lumi/Styles/Link.purs
@@ -1,16 +1,15 @@
 module Lumi.Styles.Link where
 
 import Prelude
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (color, nested, none, str, styleModifier)
+import Lumi.Styles (StyleModifier, color, nested, none, str, style)
 import Lumi.Styles.Box (box)
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (css)
 
-link :: forall props. PropsModifier props
+link :: StyleModifier
 link =
   box
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< style \(LumiTheme theme) ->
         css
           { color: color theme.colors.primary
           , textDecoration: none
diff --git a/src/Lumi/Styles/Loader.purs b/src/Lumi/Styles/Loader.purs
index ff870d52..a0a2bb36 100644
--- a/src/Lumi/Styles/Loader.purs
+++ b/src/Lumi/Styles/Loader.purs
@@ -1,14 +1,13 @@
 module Lumi.Styles.Loader where
 
 import Prelude
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (Style, color, css, merge, str, styleModifier)
+import Lumi.Styles (Style, StyleModifier, color, css, merge, str, style)
 import Lumi.Styles.Theme (LumiTheme(..))
 import React.Basic.Emotion (nested)
 
-loader :: forall props. PropsModifier props
+loader :: StyleModifier
 loader =
-  styleModifier \theme ->
+  style \theme ->
     ( merge
         [ mkLoader theme { radius: "38px", borderWidth: "5px" }
         , spin
diff --git a/src/Lumi/Styles/QRCode.purs b/src/Lumi/Styles/QRCode.purs
index 3d8176be..0e2dfb71 100644
--- a/src/Lumi/Styles/QRCode.purs
+++ b/src/Lumi/Styles/QRCode.purs
@@ -1,15 +1,14 @@
 module Lumi.Styles.QRCode where
 
 import Prelude
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (styleModifier_)
+import Lumi.Styles (StyleModifier, style_)
 import Lumi.Styles.Box (box)
 import React.Basic.Emotion (css, str)
 
-qrcode :: forall props. PropsModifier props
+qrcode :: StyleModifier
 qrcode =
   box
-    >>> styleModifier_
+    <<< style_
         ( css
             { label: str "qrcode"
             }
diff --git a/src/Lumi/Styles/Responsive.purs b/src/Lumi/Styles/Responsive.purs
index b1bd3d8a..2c134c7e 100644
--- a/src/Lumi/Styles/Responsive.purs
+++ b/src/Lumi/Styles/Responsive.purs
@@ -2,8 +2,7 @@ module Lumi.Styles.Responsive where
 
 import Prelude
 
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (Style, css, nested, styleModifier)
+import Lumi.Styles (Style, StyleModifier, css, nested, style)
 
 -- | Create a style modifier that, only in a desktop-sized screen, applies the
 -- | styles accumulated in the modifier passed in as argument.
@@ -11,9 +10,9 @@ import Lumi.Styles (Style, css, nested, styleModifier)
 -- | NOTE: the value passed in as argument must be a props modifier that touches
 -- | no component-specific props, a property that currently defines style
 -- | modifiers.
-onDesktop :: forall props. PropsModifier () -> PropsModifier props
+onDesktop :: StyleModifier -> StyleModifier
 onDesktop m =
-  styleModifier \theme ->
+  style \theme ->
     desktopQuery
       $ (m identity { className: "", css: mempty }).css
       $ theme
diff --git a/src/Lumi/Styles/Slat.purs b/src/Lumi/Styles/Slat.purs
index 0e9a01b2..6bc3f828 100644
--- a/src/Lumi/Styles/Slat.purs
+++ b/src/Lumi/Styles/Slat.purs
@@ -5,20 +5,19 @@ module Lumi.Styles.Slat
 
 import Prelude
 
-import Lumi.Components (PropsModifier)
-import Lumi.Styles (styleModifier_)
+import Lumi.Styles (StyleModifier, style_)
 import Lumi.Styles.Box (FlexAlign(..), _align, _justify, _row)
 import Lumi.Styles.Border (border)
 import Lumi.Styles.Border hiding (border) as Border
 import React.Basic.Emotion (css, str, unset)
 
-slat :: forall props. PropsModifier props
+slat :: StyleModifier
 slat =
   border
-    >>> _row
-    >>> _align Center
-    >>> _justify SpaceBetween
-    >>> styleModifier_
+    <<< _row
+    <<< _align Center
+    <<< _justify SpaceBetween
+    <<< style_
         ( css
             { label: str "slat"
             , flex: str "0 0 content"