diff --git a/packages/fuselage-tokens/typography.js b/packages/fuselage-tokens/typography.js
index b5a8f879ce..e857ed34d1 100644
--- a/packages/fuselage-tokens/typography.js
+++ b/packages/fuselage-tokens/typography.js
@@ -26,60 +26,58 @@ const fontMono = [
 ];
 
 export default {
-  h1: {
-    fontFamily: fontSans,
-    fontSize: 22,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 32,
+  fontFamilies: {
+    sans: fontSans,
+    mono: fontMono,
   },
-  s1: {
-    fontFamily: fontSans,
-    fontSize: 16,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 22,
-  },
-  s2: {
-    fontFamily: fontSans,
-    fontSize: 16,
-    fontWeight: 500,
-    letterSpacing: 0,
-    lineHeight: 22,
-  },
-  p1: {
-    fontFamily: fontSans,
-    fontSize: 14,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 20,
-  },
-  p2: {
-    fontFamily: fontSans,
-    fontSize: 14,
-    fontWeight: 500,
-    letterSpacing: 0,
-    lineHeight: 20,
-  },
-  c1: {
-    fontFamily: fontSans,
-    fontSize: 12,
-    fontWeight: 400,
-    letterSpacing: 0,
-    lineHeight: 16,
-  },
-  c2: {
-    fontFamily: fontSans,
-    fontSize: 12,
-    fontWeight: 600,
-    letterSpacing: 0,
-    lineHeight: 16,
-  },
-  micro: {
-    fontFamily: fontSans,
-    fontSize: 10,
-    fontWeight: 600,
-    letterSpacing: 0.2,
-    lineHeight: 12,
+  fontScales: {
+    h1: {
+      fontSize: 22,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 32,
+    },
+    s1: {
+      fontSize: 16,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 22,
+    },
+    s2: {
+      fontSize: 16,
+      fontWeight: 500,
+      letterSpacing: 0,
+      lineHeight: 22,
+    },
+    p1: {
+      fontSize: 14,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 20,
+    },
+    p2: {
+      fontSize: 14,
+      fontWeight: 500,
+      letterSpacing: 0,
+      lineHeight: 20,
+    },
+    c1: {
+      fontSize: 12,
+      fontWeight: 400,
+      letterSpacing: 0,
+      lineHeight: 16,
+    },
+    c2: {
+      fontSize: 12,
+      fontWeight: 600,
+      letterSpacing: 0,
+      lineHeight: 16,
+    },
+    micro: {
+      fontSize: 10,
+      fontWeight: 600,
+      letterSpacing: 0.2,
+      lineHeight: 12,
+    },
   },
 }
diff --git a/packages/fuselage-tokens/typography.scss b/packages/fuselage-tokens/typography.scss
index a4f8cc9244..002f84f98e 100644
--- a/packages/fuselage-tokens/typography.scss
+++ b/packages/fuselage-tokens/typography.scss
@@ -1,4 +1,4 @@
-$font-sans:
+$-font-sans:
   Inter,
   -apple-system,
   BlinkMacSystemFont,
@@ -15,7 +15,7 @@ $font-sans:
   Arial,
   sans-serif;
 
-$font-mono:
+$-font-mono:
   Menlo,
   Monaco,
   Consolas,
@@ -23,58 +23,55 @@ $font-mono:
   'Courier New',
   monospace;
 
-$typography: (
+$font-families: (
+  sans: $-font-sans,
+  mono: $-font-mono,
+);
+
+$font-scales: (
   h1: (
-    font-family: $font-sans,
     font-size: 22,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 32,
   ),
   s1: (
-    font-family: $font-sans,
     font-size: 16,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 22,
   ),
   s2: (
-    font-family: $font-sans,
     font-size: 16,
     font-weight: 500,
     letter-spacing: 0,
     line-height: 22,
   ),
   p1: (
-    font-family: $font-sans,
     font-size: 14,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 20,
   ),
   p2: (
-    font-family: $font-sans,
     font-size: 14,
     font-weight: 500,
     letter-spacing: 0,
     line-height: 20,
   ),
   c1: (
-    font-family: $font-sans,
     font-size: 12,
     font-weight: 400,
     letter-spacing: 0,
     line-height: 16,
   ),
   c2: (
-    font-family: $font-sans,
     font-size: 12,
     font-weight: 600,
     letter-spacing: 0,
     line-height: 16,
   ),
   micro: (
-    font-family: $font-sans,
     font-size: 10,
     font-weight: 600,
     letter-spacing: 0.2,
diff --git a/packages/fuselage-ui-kit/src/Section.js b/packages/fuselage-ui-kit/src/Section.js
index 7de8b50ac7..e3d9a19cd2 100644
--- a/packages/fuselage-ui-kit/src/Section.js
+++ b/packages/fuselage-ui-kit/src/Section.js
@@ -38,7 +38,7 @@ const Fields = ({ fields, parser }) => (
 export const Section = ({ blockId, appId, text, fields, accessory, parser }) => <Block>
   <Grid>
     <Grid.Item>
-      {text && <Box is='span' textStyle='p1' textColor='default'>{parser.text(text)}</Box>}
+      {text && <Box is='span' textStyle='p1' color='default'>{parser.text(text)}</Box>}
       {fields && <Fields fields={fields} parser={parser} />}
     </Grid.Item>
     { accessory && < Flex.Item grow={0}>
diff --git a/packages/fuselage-ui-kit/src/index.js b/packages/fuselage-ui-kit/src/index.js
index a52ee63260..77bbb5d866 100644
--- a/packages/fuselage-ui-kit/src/index.js
+++ b/packages/fuselage-ui-kit/src/index.js
@@ -124,7 +124,7 @@ class MessageParser extends UiKitParserMessage {
                         ELEMENT_TYPES.PLAIN_TEXT,
                         ELEMENT_TYPES.MARKDOWN,
                       ].includes(element.type) ? (
-                          <Box is='span' textStyle='c1' textColor='info'>
+                          <Box is='span' textStyle='c1' color='info'>
                             {this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
                           </Box>
                         )
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align.png
deleted file mode 100644
index c22affdcd3..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Content.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Content.png
deleted file mode 100644
index 331af1c932..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Content.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Items.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Items.png
deleted file mode 100644
index 56bfedbab9..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Align_Items.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Basis.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Basis.png
deleted file mode 100644
index fe792e8e39..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Basis.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Default.png
deleted file mode 100644
index cf0364b354..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Direction.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Direction.png
deleted file mode 100644
index 7744e17d8d..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Direction.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Grow.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Grow.png
deleted file mode 100644
index fe792e8e39..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Grow.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Justify_Content.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Justify_Content.png
deleted file mode 100644
index 15d59ba557..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Justify_Content.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Order.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Order.png
deleted file mode 100644
index 439919a820..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Order.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Shrink.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Shrink.png
deleted file mode 100644
index fe792e8e39..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Shrink.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Wrap.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Wrap.png
deleted file mode 100644
index d47f800325..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Flex_Wrap.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png
deleted file mode 100644
index bd3b1796b0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_styles.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_styles.png
deleted file mode 100644
index e5365f90c5..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_styles.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Background_colors.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Background_colors.png
new file mode 100644
index 0000000000..c6dad5d296
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Background_colors.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Border_radii.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Border_radii.png
new file mode 100644
index 0000000000..01b09814fe
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Border_radii.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Borders.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Borders.png
new file mode 100644
index 0000000000..b5dcf9881f
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Borders.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Colors.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Colors.png
new file mode 100644
index 0000000000..ca0342e67e
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Colors.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Display.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Display.png
new file mode 100644
index 0000000000..1509258f66
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Display.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_families.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_families.png
new file mode 100644
index 0000000000..fe364e8182
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_families.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_scales.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_scales.png
new file mode 100644
index 0000000000..75d00225b6
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_scales.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_sizes.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_sizes.png
new file mode 100644
index 0000000000..0944617b3c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_sizes.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_styles.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_styles.png
new file mode 100644
index 0000000000..7e99c54c57
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_styles.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_weights.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_weights.png
new file mode 100644
index 0000000000..cd7f8fcbef
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Font_weights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Heights.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Heights.png
new file mode 100644
index 0000000000..60a340af92
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Heights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Inset.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Inset.png
new file mode 100644
index 0000000000..f847307f06
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Inset.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Invisible.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Invisible.png
new file mode 100644
index 0000000000..1633469bd6
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Invisible.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Letter_spacing.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Letter_spacing.png
new file mode 100644
index 0000000000..85426b661c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Letter_spacing.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Line_heights.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Line_heights.png
new file mode 100644
index 0000000000..d6daab6d4e
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Line_heights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Margins.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Margins.png
new file mode 100644
index 0000000000..eeb5932481
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Margins.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Opacity.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Opacity.png
new file mode 100644
index 0000000000..b962b34827
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Opacity.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Paddings.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Paddings.png
new file mode 100644
index 0000000000..f0616560b3
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Paddings.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Position.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Position.png
new file mode 100644
index 0000000000..3b1d014ecb
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Position.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Sizes.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Sizes.png
new file mode 100644
index 0000000000..5bff4b8f05
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Sizes.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_alignment.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_alignment.png
new file mode 100644
index 0000000000..e6b8da75a7
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_alignment.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_decoration.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_decoration.png
new file mode 100644
index 0000000000..f220609012
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_decoration.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_transform.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_transform.png
new file mode 100644
index 0000000000..4b40b3fedf
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Text_transform.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Vertical_alignment.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Vertical_alignment.png
new file mode 100644
index 0000000000..11e77d4aab
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Vertical_alignment.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Widths.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Widths.png
new file mode 100644
index 0000000000..3b980f65fd
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Widths.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_rich_content.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_rich_content.png
new file mode 100644
index 0000000000..f3b284a57b
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_rich_content.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_truncated_text.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_truncated_text.png
new file mode 100644
index 0000000000..3baacdf192
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_With_truncated_text.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Z_index.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Z_index.png
new file mode 100644
index 0000000000..657ef1328a
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_Z_index.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_is_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_is_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_is_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Box_Props_is_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_abbr.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_abbr.png
deleted file mode 100644
index db9eb1381c..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_abbr.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_b.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_b.png
deleted file mode 100644
index 50bed6b789..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_b.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_blockquote_and_cite.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_blockquote_and_cite.png
deleted file mode 100644
index 74ef47dd4b..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_blockquote_and_cite.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_code.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_code.png
deleted file mode 100644
index bb35aa81a3..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_code.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_default.png
deleted file mode 100644
index c328da9904..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_del_and_ins.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_del_and_ins.png
deleted file mode 100644
index 8a0a660ca4..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_del_and_ins.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dfn.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dfn.png
deleted file mode 100644
index feb7850e47..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dfn.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dl.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dl.png
deleted file mode 100644
index deb2ea3ee5..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_dl.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_em.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_em.png
deleted file mode 100644
index 93f1e77ff0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_em.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_hx.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_hx.png
deleted file mode 100644
index f87c18f92e..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_hx.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_i.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_i.png
deleted file mode 100644
index 45ef306c4b..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_i.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_kbd.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_kbd.png
deleted file mode 100644
index d98f4fbb3b..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_kbd.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ol.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ol.png
deleted file mode 100644
index 0da4f464ad..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ol.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_p.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_p.png
deleted file mode 100644
index 2c9f7af3da..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_p.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre.png
deleted file mode 100644
index dd64dc11d0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre_with_code.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre_with_code.png
deleted file mode 100644
index f3d1521aa8..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_pre_with_code.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_q_and_cite.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_q_and_cite.png
deleted file mode 100644
index ace6ba23aa..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_q_and_cite.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_small.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_small.png
deleted file mode 100644
index 80efb1bc71..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_small.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_strong.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_strong.png
deleted file mode 100644
index 0522da2747..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_strong.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_sup_and_sub.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_sup_and_sub.png
deleted file mode 100644
index f8a59bfcac..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_sup_and_sub.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_complex.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_complex.png
deleted file mode 100644
index ddcf7ff176..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_complex.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_simple.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_simple.png
deleted file mode 100644
index 9bdd06b8f0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_table_simple.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ul.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ul.png
deleted file mode 100644
index ef92f25f0c..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_ul.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_var.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_var.png
deleted file mode 100644
index cda9aa6c73..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_var.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_a.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_a.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_a.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_a.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_abbr.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_abbr.png
new file mode 100644
index 0000000000..96ad8ea0db
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_abbr.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_b.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_b.png
new file mode 100644
index 0000000000..30bdb6e2ac
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_b.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_blockquote_and_cite.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_blockquote_and_cite.png
new file mode 100644
index 0000000000..534c1e602d
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_blockquote_and_cite.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_code.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_code.png
new file mode 100644
index 0000000000..da0a7fed93
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_code.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_del_and_ins.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_del_and_ins.png
new file mode 100644
index 0000000000..c8e94899c3
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_del_and_ins.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dfn.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dfn.png
new file mode 100644
index 0000000000..65e1f7a6d9
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dfn.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dl.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dl.png
new file mode 100644
index 0000000000..496a201a15
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_dl.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_em.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_em.png
new file mode 100644
index 0000000000..2dd4db4856
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_em.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_hx.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_hx.png
new file mode 100644
index 0000000000..f6ac3b4153
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_hx.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_i.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_i.png
new file mode 100644
index 0000000000..cef6bab75a
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_i.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_kbd.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_kbd.png
new file mode 100644
index 0000000000..21e6bf6915
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_kbd.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ol.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ol.png
new file mode 100644
index 0000000000..6897af429b
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ol.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_p.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_p.png
new file mode 100644
index 0000000000..bba9b11559
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_p.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre.png
new file mode 100644
index 0000000000..bcdff808b3
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre_with_code.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre_with_code.png
new file mode 100644
index 0000000000..904a35b463
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_pre_with_code.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_q_and_cite.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_q_and_cite.png
new file mode 100644
index 0000000000..f5f5adb095
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_q_and_cite.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_small.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_small.png
new file mode 100644
index 0000000000..20c824a170
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_small.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_strong.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_strong.png
new file mode 100644
index 0000000000..4d70fa3fe7
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_strong.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_sup_and_sub.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_sup_and_sub.png
new file mode 100644
index 0000000000..c864ebc648
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_sup_and_sub.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_complex.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_complex.png
new file mode 100644
index 0000000000..5ca8cffcfd
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_complex.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_simple.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_simple.png
new file mode 100644
index 0000000000..f33209c4ab
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_table_simple.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_time.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_time.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_Text_time.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_time.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ul.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ul.png
new file mode 100644
index 0000000000..a3a18e547c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_ul.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_var.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_var.png
new file mode 100644
index 0000000000..dc9ae589fc
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Rich_content_var.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_componentClassName_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_componentClassName_prop.png
deleted file mode 100644
index 633b7aa6b7..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_componentClassName_prop.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_invisible_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_invisible_prop.png
deleted file mode 100644
index b280b3194c..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_invisible_prop.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png
index 1b7235f0f3..e350c07358 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Default.png
deleted file mode 100644
index 004fc9c5a9..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Rich_text.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Rich_text.png
deleted file mode 100644
index 8075a7d91c..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Rich_text.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton.png b/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton.png
deleted file mode 100644
index 92dcf08cce..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Typography_Paragraph_Skeleton.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align.png
deleted file mode 100644
index dc453b7e59..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Content.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Content.png
deleted file mode 100644
index be57999574..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Content.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Items.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Items.png
deleted file mode 100644
index d59b92bcdc..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Align_Items.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Basis.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Basis.png
deleted file mode 100644
index 119a06f1b0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Basis.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Default.png
deleted file mode 100644
index 7f79faabfc..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Direction.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Direction.png
deleted file mode 100644
index c24408314f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Direction.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Grow.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Grow.png
deleted file mode 100644
index 6374b30bcb..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Grow.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Justify_Content.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Justify_Content.png
deleted file mode 100644
index d57ccbd149..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Justify_Content.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Order.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Order.png
deleted file mode 100644
index b20799fa07..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Order.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Shrink.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Shrink.png
deleted file mode 100644
index 6374b30bcb..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Shrink.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Wrap.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Wrap.png
deleted file mode 100644
index 8e45fdac4f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Flex_Wrap.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png
deleted file mode 100644
index f4d8744ecc..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_styles.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_styles.png
deleted file mode 100644
index 34b8dc3d5f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_styles.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Background_colors.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Background_colors.png
new file mode 100644
index 0000000000..233318f88c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Background_colors.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Border_radii.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Border_radii.png
new file mode 100644
index 0000000000..a390a82b19
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Border_radii.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Borders.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Borders.png
new file mode 100644
index 0000000000..d449946052
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Borders.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Colors.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Colors.png
new file mode 100644
index 0000000000..51cc3228e5
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Colors.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Display.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Display.png
new file mode 100644
index 0000000000..17d002249e
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Display.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_families.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_families.png
new file mode 100644
index 0000000000..1fc7fee887
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_families.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_scales.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_scales.png
new file mode 100644
index 0000000000..82df6d39e1
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_scales.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_sizes.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_sizes.png
new file mode 100644
index 0000000000..04b8fd43b7
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_sizes.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_styles.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_styles.png
new file mode 100644
index 0000000000..30e9277758
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_styles.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_weights.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_weights.png
new file mode 100644
index 0000000000..1c1d953792
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Font_weights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Heights.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Heights.png
new file mode 100644
index 0000000000..7689c54803
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Heights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Inset.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Inset.png
new file mode 100644
index 0000000000..44fd30ca21
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Inset.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Invisible.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Invisible.png
new file mode 100644
index 0000000000..34d9a08aa6
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Invisible.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Letter_spacing.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Letter_spacing.png
new file mode 100644
index 0000000000..3593cec9ee
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Letter_spacing.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Line_heights.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Line_heights.png
new file mode 100644
index 0000000000..ff2c61f22e
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Line_heights.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Margins.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Margins.png
new file mode 100644
index 0000000000..d925cd11d5
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Margins.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Opacity.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Opacity.png
new file mode 100644
index 0000000000..706bdb0334
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Opacity.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Paddings.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Paddings.png
new file mode 100644
index 0000000000..bf0103f456
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Paddings.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Position.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Position.png
new file mode 100644
index 0000000000..b0d063b805
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Position.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Sizes.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Sizes.png
new file mode 100644
index 0000000000..58f8b83e01
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Sizes.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_alignment.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_alignment.png
new file mode 100644
index 0000000000..769e481b68
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_alignment.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_decoration.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_decoration.png
new file mode 100644
index 0000000000..fdf91d2141
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_decoration.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_transform.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_transform.png
new file mode 100644
index 0000000000..fcd5cd127f
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Text_transform.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Vertical_alignment.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Vertical_alignment.png
new file mode 100644
index 0000000000..65fcd8f43c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Vertical_alignment.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Widths.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Widths.png
new file mode 100644
index 0000000000..fdc8f97001
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Widths.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_rich_content.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_rich_content.png
new file mode 100644
index 0000000000..712a4467ec
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_rich_content.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_truncated_text.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_truncated_text.png
new file mode 100644
index 0000000000..f7db794425
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_With_truncated_text.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Z_index.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Z_index.png
new file mode 100644
index 0000000000..7b3c1800bb
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_Z_index.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_is_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Props_is_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_is_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Box_Props_is_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_abbr.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_abbr.png
deleted file mode 100644
index c5e2558783..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_abbr.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_b.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_b.png
deleted file mode 100644
index 5aedf049c1..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_b.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_blockquote_and_cite.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_blockquote_and_cite.png
deleted file mode 100644
index 5deabb717e..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_blockquote_and_cite.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_code.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_code.png
deleted file mode 100644
index 0dbd5178fa..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_code.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_default.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_default.png
deleted file mode 100644
index 8dc92bc8ff..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_del_and_ins.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_del_and_ins.png
deleted file mode 100644
index 35f6c1fdf9..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_del_and_ins.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dfn.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dfn.png
deleted file mode 100644
index 4f908bd38e..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dfn.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dl.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dl.png
deleted file mode 100644
index 39d79b50c1..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_dl.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_em.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_em.png
deleted file mode 100644
index 5cc2c9fb6f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_em.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_hx.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_hx.png
deleted file mode 100644
index 3f8ab1fe81..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_hx.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_i.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_i.png
deleted file mode 100644
index 32713ff44e..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_i.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_kbd.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_kbd.png
deleted file mode 100644
index 5199a0e81f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_kbd.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ol.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ol.png
deleted file mode 100644
index 476e479eea..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ol.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_p.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_p.png
deleted file mode 100644
index 1bec996463..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_p.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre.png
deleted file mode 100644
index 943a8fb0f1..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre_with_code.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre_with_code.png
deleted file mode 100644
index fccc4fe917..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_pre_with_code.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_q_and_cite.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_q_and_cite.png
deleted file mode 100644
index cefe42b3a8..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_q_and_cite.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_small.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_small.png
deleted file mode 100644
index b38528be19..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_small.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_strong.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_strong.png
deleted file mode 100644
index 6cbd954be3..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_strong.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_sup_and_sub.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_sup_and_sub.png
deleted file mode 100644
index 35f8396d60..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_sup_and_sub.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_complex.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_complex.png
deleted file mode 100644
index b24e5cc114..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_complex.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_simple.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_simple.png
deleted file mode 100644
index 851296fbe0..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_table_simple.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ul.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ul.png
deleted file mode 100644
index e851103298..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_ul.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_var.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_var.png
deleted file mode 100644
index df86616a2f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_var.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_a.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_a.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_a.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_a.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_abbr.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_abbr.png
new file mode 100644
index 0000000000..62a3f448c9
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_abbr.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_b.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_b.png
new file mode 100644
index 0000000000..fd0d5a78c7
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_b.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_blockquote_and_cite.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_blockquote_and_cite.png
new file mode 100644
index 0000000000..3cd81b6af3
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_blockquote_and_cite.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_code.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_code.png
new file mode 100644
index 0000000000..42bb76a848
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_code.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_del_and_ins.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_del_and_ins.png
new file mode 100644
index 0000000000..15520bcc53
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_del_and_ins.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dfn.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dfn.png
new file mode 100644
index 0000000000..34f59e5801
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dfn.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dl.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dl.png
new file mode 100644
index 0000000000..4bb39d69d3
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_dl.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_em.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_em.png
new file mode 100644
index 0000000000..cd9252ded8
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_em.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_hx.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_hx.png
new file mode 100644
index 0000000000..e997c63eaa
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_hx.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_i.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_i.png
new file mode 100644
index 0000000000..e49c663cad
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_i.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_kbd.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_kbd.png
new file mode 100644
index 0000000000..9e50992e13
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_kbd.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ol.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ol.png
new file mode 100644
index 0000000000..1ea1737c76
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ol.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_p.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_p.png
new file mode 100644
index 0000000000..bfbcc687f6
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_p.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre.png
new file mode 100644
index 0000000000..a68f91670a
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre_with_code.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre_with_code.png
new file mode 100644
index 0000000000..7527db858c
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_pre_with_code.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_q_and_cite.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_q_and_cite.png
new file mode 100644
index 0000000000..c99624ada6
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_q_and_cite.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_small.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_small.png
new file mode 100644
index 0000000000..2580894127
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_small.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_strong.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_strong.png
new file mode 100644
index 0000000000..c826714566
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_strong.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_sup_and_sub.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_sup_and_sub.png
new file mode 100644
index 0000000000..e656552715
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_sup_and_sub.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_complex.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_complex.png
new file mode 100644
index 0000000000..e41e348b2d
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_complex.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_simple.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_simple.png
new file mode 100644
index 0000000000..7c75583bbe
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_table_simple.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_time.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_time.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_Text_time.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_time.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ul.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ul.png
new file mode 100644
index 0000000000..911aa454bb
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_ul.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_var.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_var.png
new file mode 100644
index 0000000000..ea68883caf
Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Rich_content_var.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_componentClassName_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_componentClassName_prop.png
deleted file mode 100644
index eae826980f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_componentClassName_prop.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_invisible_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_invisible_prop.png
deleted file mode 100644
index 9d4888448d..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_invisible_prop.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png
index 2962a07112..f7bcff9375 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Default.png
deleted file mode 100644
index 01f36e9b8f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Default.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Rich_text.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Rich_text.png
deleted file mode 100644
index 106dc7ca0f..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Rich_text.png and /dev/null differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton.png b/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton.png
deleted file mode 100644
index ce5629f213..0000000000
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Typography_Paragraph_Skeleton.png and /dev/null differ
diff --git a/packages/fuselage/.storybook/helpers.js b/packages/fuselage/.storybook/helpers.js
index 685eeb36b9..88998242f3 100644
--- a/packages/fuselage/.storybook/helpers.js
+++ b/packages/fuselage/.storybook/helpers.js
@@ -3,20 +3,20 @@ import React from 'react';
 import { Box, Text } from '../src';
 
 export function PropsVariationSection({ component: Component, common = {}, xAxis = {}, yAxis = {} }) {
-  return <Box is='table' style={{ borderCollapse: 'collapse', margin: '1rem auto' }}>
+  return <Box is='table' marginBlock='x16' marginInline='auto' style={{ borderCollapse: 'collapse' }}>
     <Box is='thead'>
       <Box is='tr'>
         <Box is='th' />
         {Object.keys(xAxis).map((xVariation, key) =>
-          <Box key={key} is='th' textColor='hint' textStyle='c1'>{xVariation}</Box>)}
+          <Box key={key} is='th' color='hint' fontScale='c1'>{xVariation}</Box>)}
       </Box>
     </Box>
     <Box is='tbody'>
       {Object.entries(yAxis).map(([yVariation, yProps], y) => (
         <Box key={y} is='tr'>
-          <Box is='th' textColor='hint' textStyle='c1'>{yVariation}</Box>
-          {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' style={{ margin: 0, padding: '0.5rem 1rem' }}>
-            <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Box is='th' color='hint' fontScale='c1'>{yVariation}</Box>
+          {Object.values(xAxis).map((xProps, x) => <Box key={x} is='td' margin='none' paddingBlock='x8' paddingInline='x16'>
+            <Box display='flex' alignItems='center' justifyContent='center'>
               <Component {...common} {...xProps} {...yProps} />
             </Box>
           </Box>)}
diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
index fc7fbcb096..01b23702df 100644
--- a/packages/fuselage/package.json
+++ b/packages/fuselage/package.json
@@ -45,7 +45,9 @@
   "dependencies": {
     "@rocket.chat/css-in-js": "^0.8.0",
     "@rocket.chat/fuselage-tokens": "^0.8.0",
-    "@rocket.chat/icons": "^0.8.0"
+    "@rocket.chat/icons": "^0.8.0",
+    "invariant": "^2.2.4",
+    "mem": "^6.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
diff --git a/packages/fuselage/src/components/Accordion/Item.js b/packages/fuselage/src/components/Accordion/Item.js
index 00a75c7bfd..911026bcde 100644
--- a/packages/fuselage/src/components/Accordion/Item.js
+++ b/packages/fuselage/src/components/Accordion/Item.js
@@ -80,18 +80,18 @@ export function Item({
 
   const barProps = noncollapsible ? nonCollapsibleProps : collapsibleProps;
 
-  return <Box componentClassName='rcx-accordion-item' is='section' className={className} {...props}>
-    {title && <Box componentClassName='rcx-accordion-item__bar' mod-disabled={disabled} {...barProps}>
-      <Box componentClassName='rcx-accordion-item__title' is='h1' id={titleId}>{title}</Box>
+  return <Box is='section' rcx-accordion-item className={className} {...props}>
+    {title && <Box rcx-accordion-item__bar rcx-accordion-item__bar--disabled={disabled} {...barProps}>
+      <Box is='h1' rcx-accordion-item__title id={titleId}>{title}</Box>
       {!noncollapsible && <>
         {(disabled || onToggleEnabled)
-          && <Box componentClassName='rcx-accordion-item__toggle-switch'>
+          && <Box rcx-accordion-item__toggle-switch>
             <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />
           </Box>}
         <Chevron size='x24' up={expanded} />
       </>}
     </Box>}
-    <Box componentClassName='rcx-accordion-item__panel' id={panelId} mod-expanded={panelExpanded} role='region'>
+    <Box rcx-accordion-item__panel rcx-accordion-item__panel--expanded={panelExpanded} id={panelId} role='region'>
       {children}
     </Box>
   </Box>;
diff --git a/packages/fuselage/src/components/Accordion/Item.stories.mdx b/packages/fuselage/src/components/Accordion/Item.stories.mdx
index efaf45fe2c..af461e85c9 100644
--- a/packages/fuselage/src/components/Accordion/Item.stories.mdx
+++ b/packages/fuselage/src/components/Accordion/Item.stories.mdx
@@ -14,7 +14,7 @@ A collapsible panel.
   <Story name='Default'>
     <Accordion>
       <Accordion.Item title='Item'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -28,7 +28,7 @@ A collapsible panel.
   <Story name='Expanded'>
     <Accordion>
       <Accordion.Item title='Item' defaultExpanded>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -40,7 +40,7 @@ A collapsible panel.
   <Story name='Noncollapsible'>
     <Accordion>
       <Accordion.Item title='Item' noncollapsible>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -56,7 +56,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Without Title'>
     <Accordion>
       <Accordion.Item>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -70,7 +70,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Enabled'>
     <Accordion>
       <Accordion.Item title='Item' onToggleEnabled={action('toggleEnabled')}>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
@@ -82,7 +82,7 @@ is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>non
   <Story name='Disabled'>
     <Accordion>
       <Accordion.Item title='Item' disabled onToggleEnabled={action('toggleEnabled')}>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
diff --git a/packages/fuselage/src/components/Accordion/index.js b/packages/fuselage/src/components/Accordion/index.js
index 84b5854d1b..105f901743 100644
--- a/packages/fuselage/src/components/Accordion/index.js
+++ b/packages/fuselage/src/components/Accordion/index.js
@@ -5,7 +5,7 @@ import { Item } from './Item';
 import { Box } from '../Box';
 
 export function Accordion(props) {
-  return <Box componentClassName='rcx-accordion' {...props} />;
+  return <Box rcx-accordion {...props} />;
 }
 
 Accordion.propTypes = {
diff --git a/packages/fuselage/src/components/Accordion/stories.mdx b/packages/fuselage/src/components/Accordion/stories.mdx
index d7ced91fb8..1f6bcd8961 100644
--- a/packages/fuselage/src/components/Accordion/stories.mdx
+++ b/packages/fuselage/src/components/Accordion/stories.mdx
@@ -14,13 +14,13 @@ sections of content.
   <Story name='Default'>
     <Accordion>
       <Accordion.Item title='Item #1' defaultExpanded>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #1</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #1</Box>
       </Accordion.Item>
       <Accordion.Item title='Item #2'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #2</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #2</Box>
       </Accordion.Item>
       <Accordion.Item title='Item #3'>
-        <Box textStyle='p1' textColor='default' marginBlockEnd='x16'>Content #3</Box>
+        <Box color='default' fontScale='p1' marginBlockEnd='x16'>Content #3</Box>
       </Accordion.Item>
     </Accordion>
   </Story>
diff --git a/packages/fuselage/src/components/AutoComplete/index.js b/packages/fuselage/src/components/AutoComplete/index.js
index f0797ea76f..95408a5536 100644
--- a/packages/fuselage/src/components/AutoComplete/index.js
+++ b/packages/fuselage/src/components/AutoComplete/index.js
@@ -1,17 +1,32 @@
 import React, { useState, useEffect, useRef } from 'react';
 
-import { Icon } from '../Icon';
-import { Margins, Chip, InputBox, Options, OptionAvatar } from '../..';
 import { Box, PositionAnimated } from '../Box';
-import { useCursor } from '../Options';
+import { Chip } from '../Chip';
+import { Icon } from '../Icon';
+import { useCursor, Options, OptionAvatar } from '../Options';
+import { InputBox } from '../InputBox';
+
+const Item = (props) => <Box is='div' marginInline='x4' {...props} />;
+
+const Container = React.forwardRef(({ children, ...props }, ref) => <Box
+  {...props}
+  is='div'
+  rcx-autocomplete
+  ref={ref}
+>
+  {children.map((c, i) => <Item key={i}>{c}</Item>)}
+</Box>);
+
+const Addon = (props) => <Box is='div' rcx-autocomplete__addon {...props} />;
 
-const Item = ({ children }) => <Margins inline='x4'><Box is='div'>{children}</Box></Margins>;
-const Container = React.forwardRef(({ children, ...props }, ref) => <Box {...props} is='div' className='rcx-autocomplete' ref={ref}>{children.map((c, i) => <Item key={i}>{c}</Item>)}</Box>);
-const Addon = Box.extend('rcx-autocomplete__addon', 'div');
 const SelectedOptions = React.memo((props) => <Chip {...props}/>);
-// const Focus = React.forwardRef((props, ref) => <Box ref={ref} className='rcx-select__focus' is='button' {...props}/>);
-const prevent = (e) => e.preventDefault() & e.stopPropagation();
-export const AutoComplete = function AutoComplete({
+
+const prevent = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+export function AutoComplete({
   value,
   filter,
   setFilter = () => {},
@@ -34,8 +49,9 @@ export const AutoComplete = function AutoComplete({
     setInternalValue([...currentValue, value]);
   };
 
-  useEffect(() => onChange(currentValue), [currentValue.join()]);
-
+  useEffect(() => {
+    onChange(currentValue);
+  }, [currentValue, onChange]);
 
   const [cursor, handleKeyDown, setCursor, reset, [visible, hide, show]] = useCursor(value, options, onChange);
 
@@ -44,7 +60,7 @@ export const AutoComplete = function AutoComplete({
   return (
     <Container ref={containerRef} onClick={() => ref.current.focus()}>
       <Chip.Wrapper role='listbox'>
-        <InputBox.Input ref={ref} onInput={(e) => setFilter(e.currentTarget.value)} onBlur={hide} onFocus={show} onKeyDown={handleKeyDown} placeholder={placeholder} style={{ order: 1 }} mod-undecorated value={value}/>
+        <InputBox.Input ref={ref} onInput={(e) => setFilter(e.currentTarget.value)} onBlur={hide} onFocus={show} onKeyDown={handleKeyDown} placeholder={placeholder} order={1} rcx-input-box--undecorated value={value}/>
         {currentValue.map((value) => <SelectedOptions role='option' key={value} onMouseDown={(e) => prevent(e) & internalChanged(value) && false} children={getLabel(options.find((option) => getValue(option) === value))}/>)}
       </Chip.Wrapper>
       <Addon children={<Icon name='magnifier' size='x20' />}/>
@@ -53,19 +69,4 @@ export const AutoComplete = function AutoComplete({
       </PositionAnimated>
     </Container>
   );
-};
-
-// export const AutoCompleteExample = () => {
-//   const [options, setOptions] = useState([]);
-//   const [filter, setFilter] = useState('');
-//   const [value, setValue] = useState([]);
-
-//   useEffect(() => {
-//     (async () => {
-//       const result = await Promise.resolve([]);
-//       setOptions(result);
-//     })();
-//   }, [filter]);
-
-//   return <AutoComplete { ...{ value, filter, setFilter, options, onChange: setValue } }/>;
-// };
+}
diff --git a/packages/fuselage/src/components/Avatar/index.js b/packages/fuselage/src/components/Avatar/index.js
index 0d4d9bf415..34f3985370 100644
--- a/packages/fuselage/src/components/Avatar/index.js
+++ b/packages/fuselage/src/components/Avatar/index.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext, createContext } from 'react';
 
-import { sizePropType } from '../../propTypes/sizes';
 import { Box } from '../Box';
+import { sizePropType } from '../../styles/props/layout';
 
 const AvatarContext = createContext({
   baseUrl: '',
@@ -19,7 +19,7 @@ export function Avatar({
 
   return <Box
     is='figure'
-    componentClassName='rcx-avatar'
+    rcx-avatar
     aria-label={title}
     {...props}
     width={size}
@@ -28,9 +28,9 @@ export function Avatar({
     <Box
       is='img'
       {...props}
-      componentClassName='rcx-avatar__element'
+      rcx-avatar__element
+      rcx-avatar__element--rounded={rounded}
       src={`${ baseUrl }${ url }`}
-      mod-rounded={rounded}
       width={size}
       height={size}
     />
@@ -47,7 +47,7 @@ Avatar.propTypes = {
 };
 
 const AvatarStack = ({ children, ...props }) =>
-  <Box componentClassName='rcx-avatar-stack' { ...props }>
+  <Box rcx-avatar-stack {...props}>
     {React.Children.toArray(children).reverse()}
   </Box>;
 
diff --git a/packages/fuselage/src/components/Box/AnimatedVisibility/index.js b/packages/fuselage/src/components/Box/AnimatedVisibility/index.js
index 4981f957eb..72e32a0aa0 100644
--- a/packages/fuselage/src/components/Box/AnimatedVisibility/index.js
+++ b/packages/fuselage/src/components/Box/AnimatedVisibility/index.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 
 import { PropsProvider } from '../PropsContext';
-import { useCss } from '../useCss';
 
 export function AnimatedVisibility({ children, visibility: propVisibility = AnimatedVisibility.HIDDEN }) {
   const [visibility, setVisibility] = useState(propVisibility);
@@ -23,7 +22,7 @@ export function AnimatedVisibility({ children, visibility: propVisibility = Anim
     });
   }, [propVisibility]);
 
-  const animatedVisibilityClassName = useCss([
+  const animatedVisibilityStyles = [
     css`
       animation-duration: 230ms;
       animation-duration: var(--rcx-theme-transition-duration, 230ms);;
@@ -54,7 +53,7 @@ export function AnimatedVisibility({ children, visibility: propVisibility = Anim
         }
       ` };
     `,
-  ], [visibility]);
+  ];
 
   const handleAnimationEnd = useMutableCallback(() => setVisibility((visibility) => {
     if (visibility === AnimatedVisibility.HIDING) {
@@ -73,7 +72,7 @@ export function AnimatedVisibility({ children, visibility: propVisibility = Anim
   }
 
   return <PropsProvider children={children} fn={({ className, ...props }) => ({
-    className: [className, animatedVisibilityClassName].filter(Boolean).join(' '),
+    className: [className, ...animatedVisibilityStyles],
     ...props,
     onAnimationEnd: handleAnimationEnd,
   })} memoized />;
diff --git a/packages/fuselage/src/components/Box/Flex/stories.mdx b/packages/fuselage/src/components/Box/Flex/stories.mdx
deleted file mode 100644
index 5916467cf9..0000000000
--- a/packages/fuselage/src/components/Box/Flex/stories.mdx
+++ /dev/null
@@ -1,209 +0,0 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
-
-import { Box, Flex, Tile } from '../../..';
-
-<Meta title='Box/Modifiers/Flex' parameters={{ jest: ['Flex/spec'] }} />
-
-# Flex
-
-<Preview>
-  <Story name='Default'>
-    <Flex.Container>
-      <Tile>
-        {Array.from({ length: 3 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-## Flex.Container
-
-<Props of={Flex.Container} />
-
-### Direction
-
-<Preview>
-  <Story name='Direction'>
-    <Flex.Container direction='row-reverse'>
-      <Tile>
-        {Array.from({ length: 3 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Wrap
-
-<Preview>
-  <Story name='Wrap'>
-    <Flex.Container wrap='wrap'>
-      <Tile>
-        {Array.from({ length: 12 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Justify content
-
-<Preview>
-  <Story name='Justify Content'>
-    <Flex.Container justifyContent='space-around'>
-      <Tile>
-        {Array.from({ length: 3 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Align items
-
-<Preview>
-  <Story name='Align Items'>
-    <Flex.Container alignItems='end'>
-      <Tile>
-        {Array.from({ length: 3 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile style={{ height: i * 100 }}>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Align content
-
-<Preview>
-  <Story name='Align Content'>
-    <Flex.Container wrap='wrap' alignContent='end'>
-      <Tile style={{ minHeight: 400 }}>
-        {Array.from({ length: 12 }, (_, i) =>
-          <Flex.Item key={i}>
-            <Tile>#{i + 1}</Tile>
-          </Flex.Item>
-        )}
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-## Flex.Item
-
-<Props of={Flex.Item} />
-
-### Order
-
-<Preview>
-  <Story name='Order'>
-    <Flex.Container>
-      <Tile>
-        <Flex.Item>
-          <Tile>#1</Tile>
-        </Flex.Item>
-        <Flex.Item order={1}>
-          <Tile>#2</Tile>
-        </Flex.Item>
-        <Flex.Item>
-          <Tile>#3</Tile>
-        </Flex.Item>
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Grow
-
-<Preview>
-  <Story name='Grow'>
-    <Flex.Container>
-      <Tile>
-        <Flex.Item>
-          <Tile>#1</Tile>
-        </Flex.Item>
-        <Flex.Item grow={1}>
-          <Tile>#2</Tile>
-        </Flex.Item>
-        <Flex.Item>
-          <Tile>#3</Tile>
-        </Flex.Item>
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Shrink
-
-<Preview>
-  <Story name='Shrink'>
-    <Flex.Container>
-      <Tile>
-        <Flex.Item>
-          <Tile>#1</Tile>
-        </Flex.Item>
-        <Flex.Item shrink={1}>
-          <Tile w='full'>#2</Tile>
-        </Flex.Item>
-        <Flex.Item>
-          <Tile>#3</Tile>
-        </Flex.Item>
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Basis
-
-<Preview>
-  <Story name='Basis'>
-    <Flex.Container>
-      <Tile>
-        <Flex.Item>
-          <Tile>#1</Tile>
-        </Flex.Item>
-        <Flex.Item basis='400px'>
-          <Tile>#2</Tile>
-        </Flex.Item>
-        <Flex.Item>
-          <Tile>#3</Tile>
-        </Flex.Item>
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
-
-### Align
-
-<Preview>
-  <Story name='Align'>
-    <Flex.Container alignItems='center'>
-      <Tile style={{ minHeight: 400 }}>
-        <Flex.Item>
-          <Tile>#1</Tile>
-        </Flex.Item>
-        <Flex.Item align='end'>
-          <Tile>#2</Tile>
-        </Flex.Item>
-        <Flex.Item>
-          <Tile>#3</Tile>
-        </Flex.Item>
-      </Tile>
-    </Flex.Container>
-  </Story>
-</Preview>
diff --git a/packages/fuselage/src/components/Box/Margins/index.js b/packages/fuselage/src/components/Box/Margins/index.js
index 001a6cad63..b56251e08f 100644
--- a/packages/fuselage/src/components/Box/Margins/index.js
+++ b/packages/fuselage/src/components/Box/Margins/index.js
@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { PropsProvider } from '../PropsContext';
-import { marginPropType } from '../../../propTypes/margins';
+import { marginPropType } from '../../../styles/props/spaces';
 
 export function Margins({
   children,
@@ -26,11 +27,11 @@ export function Margins({
 }
 
 Margins.propTypes = {
-  all: marginPropType,
-  block: marginPropType,
-  blockStart: marginPropType,
-  blockEnd: marginPropType,
-  inline: marginPropType,
-  inlineStart: marginPropType,
-  inlineEnd: marginPropType,
+  all: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  block: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  blockStart: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  blockEnd: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  inline: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  inlineStart: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  inlineEnd: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
 };
diff --git a/packages/fuselage/src/components/Box/PlainText.stories.mdx b/packages/fuselage/src/components/Box/PlainText.stories.mdx
deleted file mode 100644
index 5211515ea0..0000000000
--- a/packages/fuselage/src/components/Box/PlainText.stories.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
-import { Box } from '../..';
-
-<Meta title='Box/Plain Text' parameters={{ jest: ['Box/spec'] }} />
-
-# Box
-
-### Text styles
-
-<Preview>
-  <Story name='Text styles'>
-    <>
-      <Box textStyle='h1'>H1</Box>
-      <Box textStyle='s1'>S1</Box>
-      <Box textStyle='s2'>S2</Box>
-      <Box textStyle='p1'>P1</Box>
-      <Box textStyle='p2'>P2</Box>
-      <Box textStyle='c1'>C1</Box>
-      <Box textStyle='c2'>C2</Box>
-      <Box textStyle='micro'>Micro</Box>
-    </>
-  </Story>
-</Preview>
-
-### Text colors
-
-<Preview>
-  <Story name='Text colors'>
-    <>
-      <Box textStyle='p1' textColor='default'>Default</Box>
-      <Box textStyle='p1' textColor='info'>Info</Box>
-      <Box textStyle='p1' textColor='hint'>Hint</Box>
-      <Box textStyle='p1' textColor='disabled'>Disabled</Box>
-      <Box textStyle='p1' textColor='alternative'>Alternative</Box>
-      <Box textStyle='p1' textColor='primary'>Primary</Box>
-      <Box textStyle='p1' textColor='success'>Success</Box>
-      <Box textStyle='p1' textColor='danger'>Danger</Box>
-      <Box textStyle='p1' textColor='warning'>Warning</Box>
-    </>
-  </Story>
-</Preview>
diff --git a/packages/fuselage/src/components/Box/Position/index.js b/packages/fuselage/src/components/Box/Position/index.js
index bd2edef997..aa4ecdbcee 100644
--- a/packages/fuselage/src/components/Box/Position/index.js
+++ b/packages/fuselage/src/components/Box/Position/index.js
@@ -9,7 +9,6 @@ import React, {
 import ReactDOM from 'react-dom';
 
 import { AnimatedVisibility } from '../AnimatedVisibility';
-import { useCss } from '../useCss';
 
 const top = (top) => ({ top });
 const left = (left) => ({ left });
@@ -114,17 +113,19 @@ export const Position = ({ anchor, width = 'stretch', style, className, children
 
   useEffect(() => () => document.body.removeChild(portalContainer), []);
 
-  const positionClassName = useCss(css`
-    position: fixed;
-    z-index: 9999;
-    transition: none;
-  `, []);
-
   return ReactDOM.createPortal(
     React.cloneElement(children, {
       ref,
       style: { ...position, ...children.props.style, ...style },
-      className: [className, positionClassName, children.props.className].filter(Boolean).join(' '),
+      className: [
+        className,
+        css`
+          position: fixed;
+          z-index: 9999;
+          transition: none;
+        `,
+        children.props.className,
+      ],
     }),
     portalContainer,
   );
diff --git a/packages/fuselage/src/components/Box/RichText.stories.mdx b/packages/fuselage/src/components/Box/RichText.stories.mdx
deleted file mode 100644
index f98c47ec2a..0000000000
--- a/packages/fuselage/src/components/Box/RichText.stories.mdx
+++ /dev/null
@@ -1,333 +0,0 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
-import { Box } from '../..';
-
-<Meta title='Box/Rich Text' parameters={{ jest: ['Box/spec'] }} />
-
-# Box
-
-### Rich text
-
-#### Inline
-
-<Preview>
-  <Story name='default'>
-    <Box textStyle='p1' richText='inline'>
-      default
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='strong'>
-    <Box textStyle='p1' richText='inline'>
-      <strong>strong importance</strong>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='em'>
-    <Box textStyle='p1' richText='inline'>
-      <em>emphasis</em>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='b'>
-    <Box textStyle='p1' richText='inline'>
-      <b>bring attention</b>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='i'>
-    <Box textStyle='p1' richText='inline'>
-      <i>technical terms, foreign language phrases, or fictional character thoughts</i>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='a'>
-    <Box textStyle='p1' richText='inline'>
-      <>
-        <a href='#'>Normal</a><br />
-        <a href='#' className='is-visited'>Visited</a><br />
-        <a href='#' className='is-active'>Active</a><br />
-        <a href='#' className='is-hovered'>Hovered</a><br />
-      </>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='q and cite'>
-    <Box textStyle='p1' richText='inline'>
-      <q>The problem with quotes found on the internet is that they are often not true. <cite>Abraham Lincoln</cite></q>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='code'>
-    <Box textStyle='p1' richText='inline'>
-      <code>inline code</code>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='time'>
-    <Box textStyle='p1' richText='inline'>
-      <time dateTime='20220101 10:00'>January 1th 2022, 10 a.m.</time>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='dfn'>
-    <Box textStyle='p1' richText='inline'>
-      <dfn>Definition</dfn>: description.
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='abbr'>
-    <Box textStyle='p1' richText='inline'>
-      <abbr title='Source Development Kit'>SDK</abbr>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='del and ins'>
-    <Box textStyle='p1' richText='inline'>
-      <del>deleted</del> <ins>inserted</ins>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='sup and sub'>
-    <Box textStyle='p1' richText='inline'>
-      <sup>superscript</sup> <sub>subscript</sub>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='kbd'>
-    <Box textStyle='p1' richText='inline'>
-      <kbd>Ctrl + Alt + Del</kbd>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='var'>
-    <Box textStyle='p1' richText='inline'>
-      <var>x² + y² = r²</var>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='small'>
-    <Box textStyle='p1' richText='inline'>
-      <small>small text</small>
-    </Box>
-  </Story>
-</Preview>
-
-#### Block
-
-<Preview>
-  <Story name='hx'>
-    <Box textStyle='p1' richText='block'>
-      <>
-        <h1>Heading 1</h1>
-        <h2>Heading 2</h2>
-        <h3>Heading 3</h3>
-        <h4>Heading 4</h4>
-        <h5>Heading 5</h5>
-        <h6>Heading 6</h6>
-      </>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='p'>
-    <Box textStyle='p1' richText='block'>
-      <p>Paragraph</p>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='ul'>
-    <Box textStyle='p1' richText='block'>
-      <ul>
-        <li>unordered list item 1</li>
-        <li>unordered list item 2</li>
-        <li>unordered list item 3</li>
-      </ul>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='ol'>
-    <Box textStyle='p1' richText='block'>
-      <ol>
-        <li>ordered list item 1</li>
-        <li>ordered list item 2</li>
-        <li>ordered list item 3</li>
-      </ol>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='dl'>
-    <Box textStyle='p1' richText='block'>
-      <dl>
-        <dt>description list term 1</dt>
-        <dd>description list description 1</dd>
-        <dt>description list term 2</dt>
-        <dd>description list description 2</dd>
-        <dt>description list term 3</dt>
-        <dd>description list description 3</dd>
-      </dl>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='table (simple)'>
-    <Box textStyle='p1' richText='block'>
-      <table>
-        <thead>
-          <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Item 1 of row 1</td>
-            <td>Item 2 of row 1</td>
-            <td>Item 3 of row 1</td>
-          </tr>
-          <tr>
-            <td>Item 1 of row 2</td>
-            <td>Item 2 of row 2</td>
-            <td>Item 3 of row 2</td>
-          </tr>
-          <tr>
-            <td>Item 1 of row 3</td>
-            <td>Item 2 of row 3</td>
-            <td>Item 3 of row 3</td>
-          </tr>
-        </tbody>
-      </table>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='table (complex)'>
-    <Box textStyle='p1' richText='block'>
-      <table>
-        <caption>Caption</caption>
-        <thead>
-          <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-          </tr>
-        </thead>
-        <tfoot>
-          <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-          </tr>
-        </tfoot>
-        <tbody>
-          <tr>
-            <td>Item 1 of row 1</td>
-            <td>Item 2 of row 1</td>
-            <td>Item 3 of row 1</td>
-          </tr>
-          <tr>
-            <td>Item 1 of row 2</td>
-            <td>Item 2 of row 2</td>
-            <td>Item 3 of row 2</td>
-          </tr>
-          <tr>
-            <td>Item 1 of row 3</td>
-            <td>Item 2 of row 3</td>
-            <td>Item 3 of row 3</td>
-          </tr>
-        </tbody>
-      </table>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='blockquote and cite'>
-    <Box textStyle='p1' richText='block'>
-      <blockquote>
-        <p>
-          Words can be like X-rays, if you use them properly — they’ll go through anything.
-          You read and you’re pierced.
-        </p>
-        <footer>— Aldous Huxley, <cite>Brave New World</cite></footer>
-      </blockquote>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='pre'>
-    <Box textStyle='p1' richText='block'>
-      <pre>
-        # A UNINTENDED LOL-ZONE: SORRY FOR THIS{'\n'}
-        # ------------+----------+-------------{'\n'}
-        #      /\O    |    _O    |      O      {'\n'}
-        #       /\/   |   //|_   |     /_      {'\n'}
-        #      /\     |    |     |     |\      {'\n'}
-        #     /  \    |   /|     |    / |      {'\n'}
-        #   LOL  LOL  |   LLOL   |  LOLLOL     {'\n'}
-        # ------------+----------+-------------{'\n'}
-        # BLACK MAGIC FULL FEATURED ENABLED
-      </pre>
-    </Box>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name='pre with code'>
-    <Box textStyle='p1' richText='block'>
-      <pre>
-        <code>
-          # A UNINTENDED LOL-ZONE: SORRY FOR THIS{'\n'}
-          # ------------+----------+-------------{'\n'}
-          #      /\O    |    _O    |      O      {'\n'}
-          #       /\/   |   //|_   |     /_      {'\n'}
-          #      /\     |    |     |     |\      {'\n'}
-          #     /  \    |   /|     |    / |      {'\n'}
-          #   LOL  LOL  |   LLOL   |  LOLLOL     {'\n'}
-          # ------------+----------+-------------{'\n'}
-          # BLACK MAGIC FULL FEATURED ENABLED
-        </code>
-      </pre>
-    </Box>
-  </Story>
-</Preview>
diff --git a/packages/fuselage/src/components/Box/Scrollable/index.js b/packages/fuselage/src/components/Box/Scrollable/index.js
index 0e59ba5d43..4de0d62254 100644
--- a/packages/fuselage/src/components/Box/Scrollable/index.js
+++ b/packages/fuselage/src/components/Box/Scrollable/index.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 
 import { PropsProvider } from '../PropsContext';
-import { useCss } from '../useCss';
 
 const getTouchingEdges = (element) => ({
   top: !element.scrollTop,
@@ -29,35 +28,6 @@ const pollTouchingEdges = (element, touchingEdgesRef, onScrollContent) => {
 };
 
 export function Scrollable({ children, horizontal, vertical, smooth, onScrollContent }) {
-  const scrollableClassName = useCss([
-    css`
-      position: relative;
-
-      &::-webkit-scrollbar {
-        width: ${ 4 / 16 }rem;
-        height: ${ 4 / 16 }rem;
-      }
-
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.05);
-        background-color: var(--rcx-theme-scrollbar-thumb-color, rgba(0, 0, 0, 0.05));
-      }
-
-      &:hover::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.15);
-        background-color: var(--rcx-theme-scrollbar-thumb-hover-color, rgba(0, 0, 0, 0.15));
-      }
-    `,
-    (horizontal && css`overflow-x: auto !important;`)
-      || (vertical && css`overflow-y: auto !important;`)
-      || css`overflow: auto !important;`,
-    smooth && css`scroll-behavior: smooth !important;`,
-  ], [horizontal, vertical, smooth]);
-
   const scrollTimeoutRef = useRef();
   const touchingEdgesRef = useRef({});
 
@@ -76,7 +46,35 @@ export function Scrollable({ children, horizontal, vertical, smooth, onScrollCon
   });
 
   return <PropsProvider children={children} fn={({ className, ...props }) => ({
-    className: [className, scrollableClassName].filter(Boolean).join(' '),
+    className: [
+      className,
+      css`
+        position: relative;
+
+        &::-webkit-scrollbar {
+          width: ${ 4 / 16 }rem;
+          height: ${ 4 / 16 }rem;
+        }
+
+        &::-webkit-scrollbar-track {
+          background-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: rgba(0, 0, 0, 0.05);
+          background-color: var(--rcx-theme-scrollbar-thumb-color, rgba(0, 0, 0, 0.05));
+        }
+
+        &:hover::-webkit-scrollbar-thumb {
+          background-color: rgba(0, 0, 0, 0.15);
+          background-color: var(--rcx-theme-scrollbar-thumb-hover-color, rgba(0, 0, 0, 0.15));
+        }
+      `,
+      (horizontal && css`overflow-x: auto !important;`)
+        || (vertical && css`overflow-y: auto !important;`)
+        || css`overflow: auto !important;`,
+      smooth && css`scroll-behavior: smooth !important;`,
+    ],
     onScroll: onScrollContent ? handleScroll : undefined,
     ...props,
   })} memoized />;
diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js
index d236b289df..bed34efaaa 100644
--- a/packages/fuselage/src/components/Box/index.js
+++ b/packages/fuselage/src/components/Box/index.js
@@ -3,23 +3,20 @@ import React, { createElement, forwardRef, memo, useContext } from 'react';
 
 import { PropsContext } from './PropsContext';
 import { useStyleSheet } from './useStyleSheet';
-import { useMergedProps } from './useMergedProps';
-import { marginPropType } from '../../propTypes/margins';
-import { paddingPropType } from '../../propTypes/paddings';
-import { sizePropType } from '../../propTypes/sizes';
+import { mergeProps } from './mergeProps';
+import { marginPropType, paddingPropType } from '../../styles/props/spaces';
+import { colorPropType } from '../../styles/props/colors';
+import { fontFamilyPropType, fontScalePropType } from '../../styles/props/typography';
+import { sizePropType } from '../../styles/props/layout';
+import { insetPropType } from '../../styles/props/position';
 
 export const Box = memo(forwardRef(function Box(props, ref) {
   useStyleSheet();
 
   const contextProps = useContext(PropsContext);
-  const mergedProps = useMergedProps(props, contextProps, ref);
+  const { is, ...mergedProps } = mergeProps(props, contextProps, ref);
 
-  const children = createElement(mergedProps.is || 'div', {
-    ...mergedProps,
-    is: undefined,
-    className: Array.from(new Set(mergedProps.className)).filter(Boolean).join(' '),
-    style: mergedProps.style,
-  });
+  const children = createElement(is || 'div', mergedProps);
 
   if (contextProps) {
     return <PropsContext.Provider children={children} />;
@@ -28,65 +25,80 @@ export const Box = memo(forwardRef(function Box(props, ref) {
   return children;
 }));
 
-Box.defaultProps = {
-  invisible: false,
-  is: 'div',
-};
-
 Box.propTypes = {
-  className: PropTypes.string,
-  componentClassName: PropTypes.string,
-  invisible: PropTypes.bool,
-  is: PropTypes.elementType.isRequired,
-  richText: PropTypes.oneOf(['inline', 'block']),
-  style: PropTypes.object,
-  textColor: PropTypes.oneOf([
-    'default', 'info', 'hint', 'disabled', 'alternative',
-    'primary', 'success', 'danger', 'warning',
-  ]),
-  textStyle: PropTypes.oneOf([
-    'h1', 's1', 's2', 'p1', 'p2', 'c1', 'c2', 'micro',
+  is: PropTypes.elementType,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.arrayOf(PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ])),
   ]),
+  style: PropTypes.object,
+  componentClassName: PropTypes.string,
 
   // Spaces
-  m: marginPropType,
-  margin: marginPropType,
-  mb: marginPropType,
-  marginBlock: marginPropType,
-  mbs: marginPropType,
-  marginBlockStart: marginPropType,
-  mbe: marginPropType,
-  marginBlockEnd: marginPropType,
-  mi: marginPropType,
-  marginInline: marginPropType,
-  mis: marginPropType,
-  marginInlineStart: marginPropType,
-  mie: marginPropType,
-  marginInlineEnd: marginPropType,
-  p: paddingPropType,
-  padding: paddingPropType,
-  pb: paddingPropType,
-  paddingBlock: paddingPropType,
-  pbs: paddingPropType,
-  paddingBlockStart: paddingPropType,
-  pbe: paddingPropType,
-  paddingBlockEnd: paddingPropType,
-  pi: paddingPropType,
-  paddingInline: paddingPropType,
-  pis: paddingPropType,
-  paddingInlineStart: paddingPropType,
-  pie: paddingPropType,
-  paddingInlineEnd: paddingPropType,
+  m: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  margin: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mb: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginBlock: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mbs: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginBlockStart: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mbe: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginBlockEnd: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mi: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginInline: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mis: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginInlineStart: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  mie: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  marginInlineEnd: PropTypes.oneOfType([marginPropType, PropTypes.string, PropTypes.number]),
+  p: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  padding: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pb: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingBlock: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pbs: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingBlockStart: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pbe: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingBlockEnd: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pi: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingInline: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pis: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingInlineStart: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  pie: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+  paddingInlineEnd: PropTypes.oneOfType([paddingPropType, PropTypes.string, PropTypes.number]),
+
+  // Color
+
+  color: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  backgroundColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  opacity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  // Typography
+  fontFamily: PropTypes.oneOfType([fontFamilyPropType, PropTypes.string]),
+  fontSize: PropTypes.oneOfType([fontScalePropType, sizePropType, PropTypes.string, PropTypes.number]),
+  fontWeight: PropTypes.oneOfType([fontScalePropType, PropTypes.string]),
+  lineHeight: PropTypes.oneOfType([fontScalePropType, sizePropType, PropTypes.string, PropTypes.number]),
+  letterSpacing: PropTypes.oneOfType([fontScalePropType, PropTypes.string, PropTypes.number]),
+  fontScale: fontScalePropType,
+  fontStyle: PropTypes.string,
+  textAlign: PropTypes.string,
+  textTransform: PropTypes.string,
+  textDecorationLine: PropTypes.string,
 
   // Layout
-  w: sizePropType,
-  width: sizePropType,
-  minWidth: sizePropType,
-  maxWidth: sizePropType,
-  h: sizePropType,
-  height: sizePropType,
-  minHeight: sizePropType,
-  maxHeight: sizePropType,
+  w: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  maxWidth: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  h: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  minHeight: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  maxHeight: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  minSize: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  maxSize: PropTypes.oneOfType([sizePropType, PropTypes.string, PropTypes.number]),
+  htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   display: PropTypes.string,
   verticalAlign: PropTypes.string,
   overflow: PropTypes.string,
@@ -106,15 +118,108 @@ Box.propTypes = {
   justifySelf: PropTypes.string,
   alignSelf: PropTypes.string,
   order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
 
-Box.extend = (componentClassName, is) => {
-  const BoxExtension = forwardRef((props, ref) =>
-    <Box is={is} componentClassName={componentClassName} ref={ref} {...props} />);
+  // Borders
+  border: PropTypes.string,
+  borderBlock: PropTypes.string,
+  borderBlockStart: PropTypes.string,
+  borderBlockEnd: PropTypes.string,
+  borderInline: PropTypes.string,
+  borderInlineStart: PropTypes.string,
+  borderInlineEnd: PropTypes.string,
+  borderWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderBlockWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderBlockStartWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderBlockEndWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderInlineWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderInlineStartWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderInlineEndWidth: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x1', 'x2', 'x4']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderStyle: PropTypes.string,
+  borderBlockStyle: PropTypes.string,
+  borderBlockStartStyle: PropTypes.string,
+  borderBlockEndStyle: PropTypes.string,
+  borderInlineStyle: PropTypes.string,
+  borderInlineStartStyle: PropTypes.string,
+  borderInlineEndStyle: PropTypes.string,
+  borderColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderBlockColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderBlockStartColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderBlockEndColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderInlineColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderInlineStartColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderInlineEndColor: PropTypes.oneOfType([colorPropType, PropTypes.string]),
+  borderRadius: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x2', 'x4', 'full']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderStartStartRadius: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x2', 'x4', 'full']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderStartEndRadius: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x2', 'x4', 'full']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderEndStartRadius: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x2', 'x4', 'full']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  borderEndEndRadius: PropTypes.oneOfType([
+    PropTypes.oneOf(['none', 'x2', 'x4', 'full']),
+    PropTypes.string,
+    PropTypes.number,
+  ]),
 
-  BoxExtension.displayName = componentClassName;
+  // Inset
+  position: PropTypes.string,
+  zIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  inset: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetBlock: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetBlockStart: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetBlockEnd: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetInline: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetInlineStart: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
+  insetInlineEnd: PropTypes.oneOfType([insetPropType, PropTypes.string, PropTypes.number]),
 
-  return BoxExtension;
+  // Special
+  invisible: PropTypes.bool,
+  withRichContent: PropTypes.bool,
+  withTruncatedText: PropTypes.bool,
+  richText: PropTypes.oneOf(['inline', 'block']),
+  textColor: colorPropType,
+  textStyle: fontScalePropType,
 };
 
 export * from './PropsContext';
diff --git a/packages/fuselage/src/components/Box/mapClassNames.js b/packages/fuselage/src/components/Box/mapClassNames.js
new file mode 100644
index 0000000000..6b8be3d0c7
--- /dev/null
+++ b/packages/fuselage/src/components/Box/mapClassNames.js
@@ -0,0 +1,48 @@
+export const mapClassNames = ({ className, componentClassName, ...props }) => {
+  const modifierClassNames = [];
+
+  if (componentClassName) {
+    console.warn('The `componentClassName` property is deprecated; prefer `rcx-*` properties');
+  }
+
+  for (const [name, value] of Object.entries(props)) {
+    if (name.slice(0, 4) === 'mod-') {
+      console.warn('`mod-*` properties are deprecated; prefer `rcx-*` properties');
+
+      delete props[name];
+
+      if (value === true) {
+        modifierClassNames.push(`${ componentClassName }--${ name.slice(4) }`);
+        continue;
+      }
+
+      if (value) {
+        modifierClassNames.push(`${ componentClassName }--${ name.slice(4) }-${ value }`);
+      }
+
+      continue;
+    }
+
+    if (name.slice(0, 4) === 'rcx-') {
+      delete props[name];
+
+      if (value === true) {
+        modifierClassNames.push(name);
+        continue;
+      }
+
+      if (value) {
+        modifierClassNames.push(`${ name }-${ value }`);
+      }
+    }
+  }
+
+  return {
+    className: [
+      componentClassName,
+      ...modifierClassNames,
+      ...className,
+    ],
+    ...props,
+  };
+};
diff --git a/packages/fuselage/src/components/Box/mergeProps.js b/packages/fuselage/src/components/Box/mergeProps.js
new file mode 100644
index 0000000000..91110d497f
--- /dev/null
+++ b/packages/fuselage/src/components/Box/mergeProps.js
@@ -0,0 +1,75 @@
+import { createSelector, transpile, referenceRules } from '@rocket.chat/css-in-js';
+
+import { mapClassNames } from './mapClassNames';
+import { mapSpaceProps } from '../../styles/props/spaces';
+import { mapLayoutProps } from '../../styles/props/layout';
+import { mapFlexBoxProps } from '../../styles/props/flexBox';
+import { mapColorProps } from '../../styles/props/colors';
+import { mapTypographyProps } from '../../styles/props/typography';
+import { mapBorderProps } from '../../styles/props/borders';
+import { mapPositionProps } from '../../styles/props/position';
+import { mapSpecialProps } from '../../styles/props/special';
+
+export const mergeProps = (props, contextProps, ref) => {
+  const initialProps = {
+    ref,
+    ...contextProps,
+    ...props,
+    className: [
+      'rcx-box',
+      ...Array.isArray(contextProps?.className) ? contextProps?.className : [contextProps?.className],
+      ...Array.isArray(props.className) ? props.className : [props.className],
+    ],
+    style: {
+      ...contextProps?.style,
+      ...props.style,
+    },
+  };
+
+  const mergedProps = [
+    mapSpecialProps,
+    mapClassNames,
+    mapSpaceProps,
+    mapLayoutProps,
+    mapColorProps,
+    mapTypographyProps,
+    mapFlexBoxProps,
+    mapBorderProps,
+    mapPositionProps,
+  ].reduce((props, transform) => transform(props), initialProps);
+
+  const rules = [];
+
+  mergedProps.className = Array.from(
+    new Set(
+      mergedProps.className.map((className) => {
+        if (typeof className === 'function') {
+          rules.push(className(rules));
+          return undefined;
+        }
+
+        if (typeof className === 'string') {
+          return className;
+        }
+
+        return undefined;
+      }).filter(Boolean),
+    ),
+  );
+
+  mergedProps.className = mergedProps.className.join(' ');
+
+  const content = rules.filter(Boolean).join('') || undefined;
+
+  if (!content) {
+    return mergedProps;
+  }
+
+  const [className, encodedClassName] = createSelector(content);
+  const parsedRules = transpile(`.rcx-box.${ encodedClassName }`, content);
+  referenceRules(parsedRules);
+
+  mergedProps.className += ` ${ className }`;
+
+  return mergedProps;
+};
diff --git a/packages/fuselage/src/components/Box/props.stories.mdx b/packages/fuselage/src/components/Box/props.stories.mdx
new file mode 100644
index 0000000000..03542e374e
--- /dev/null
+++ b/packages/fuselage/src/components/Box/props.stories.mdx
@@ -0,0 +1,653 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import { Box, Button } from '../..';
+
+<Meta title='Box/Props' parameters={{ jest: ['Box/spec'] }} />
+
+# Box
+
+## Props
+
+Most of the props are designed to change styles by creating CSS rules at runtime.
+
+<Props of={Box} />
+
+### `is` prop
+
+The `is` prop allows `Box` to render any component capable of handling common DOM attributes, specially `className` and
+`style`.
+
+<Preview>
+  <Story name='is prop'>
+    <Box is={Button}>A Box rendering a Button</Box>
+  </Story>
+</Preview>
+
+### Space
+
+#### Margins
+
+<Preview>
+  <Story
+    name='Margins'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) => <Box bg='neutral-200' m='x16'>
+          {React.cloneElement(child, { bg:'primary-200' }, <Box bg='neutral-500' size='x16' />)}
+        </Box>)}
+      </Box>
+    ]}
+  >
+    <>
+      <Box m='x16' />
+      <Box margin='x16' />
+      <Box mb='x16' />
+      <Box marginBlock='x16' />
+      <Box mbs='x16' />
+      <Box marginBlockStart='x16' />
+      <Box mbe='x16' />
+      <Box marginBlockEnd='x16' />
+      <Box mi='x16' />
+      <Box marginInline='x16' />
+      <Box mis='x16' />
+      <Box marginInlineStart='x16' />
+      <Box mie='x16' />
+      <Box marginInlineEnd='x16' />
+    </>
+  </Story>
+</Preview>
+
+#### Paddings
+
+<Preview>
+  <Story
+    name='Paddings'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) => <Box bg='neutral-200' m='x16'>
+          {React.cloneElement(child, { bg:'primary-200' }, <Box bg='neutral-500' size='x16' />)}
+        </Box>)}
+      </Box>
+    ]}
+  >
+    <>
+      <Box p='x16' />
+      <Box padding='x16' />
+      <Box pb='x16' />
+      <Box paddingBlock='x16' />
+      <Box pbs='x16' />
+      <Box paddingBlockStart='x16' />
+      <Box pbe='x16' />
+      <Box paddingBlockEnd='x16' />
+      <Box pi='x16' />
+      <Box paddingInline='x16' />
+      <Box pis='x16' />
+      <Box paddingInlineStart='x16' />
+      <Box pie='x16' />
+      <Box paddingInlineEnd='x16' />
+    </>
+  </Story>
+</Preview>
+
+### Color
+
+#### Colors
+
+<Preview>
+  <Story
+    name='Colors'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center' overflow='hidden'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg: 'neutral-200', m: 'x4', p: 'x4' }, child.props.color))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box color='neutral-500' />
+      <Box color='neutral-500-50' />
+      <Box color='primary-500' />
+      <Box color='primary-500-50' />
+      <Box color='info-500' />
+      <Box color='info-500-50' />
+      <Box color='success-500' />
+      <Box color='success-500-50' />
+      <Box color='warning-500' />
+      <Box color='warning-500-50' />
+      <Box color='danger-500' />
+      <Box color='danger-500-50' />
+      <Box color='surface' />
+      <Box color='default' />
+      <Box color='info' />
+      <Box color='hint' />
+      <Box color='disabled' />
+      <Box color='alternative' />
+      <Box color='primary' />
+      <Box color='success' />
+      <Box color='danger' />
+      <Box color='warning' />
+      <Box color='link' />
+      <Box color='visited-link' />
+      <Box color='active-link' />
+      <Box color='rebeccapurple' />
+    </>
+  </Story>
+</Preview>
+
+#### Background colors
+
+<Preview>
+  <Story
+    name='Background colors'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center' overflow='hidden'>
+        {React.Children.map(fn().props.children, (child) => React.cloneElement(child, { m: 'x4', size: 'x32' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box bg='neutral-500' />
+      <Box bg='neutral-500-50' />
+      <Box bg='primary-500' />
+      <Box bg='primary-500-50' />
+      <Box bg='info-500' />
+      <Box bg='info-500-50' />
+      <Box bg='success-500' />
+      <Box bg='success-500-50' />
+      <Box bg='warning-500' />
+      <Box bg='warning-500-50' />
+      <Box bg='danger-500' />
+      <Box bg='danger-500-50' />
+      <Box bg='surface' />
+      <Box bg='default' />
+      <Box bg='info' />
+      <Box bg='hint' />
+      <Box bg='disabled' />
+      <Box bg='alternative' />
+      <Box bg='primary' />
+      <Box bg='success' />
+      <Box bg='danger' />
+      <Box bg='warning' />
+      <Box bg='link' />
+      <Box bg='visited-link' />
+      <Box bg='active-link' />
+      <Box bg='rebeccapurple' />
+    </>
+  </Story>
+</Preview>
+
+#### Opacity
+
+<Preview>
+  <Story
+    name='Opacity'
+    decorators={[(fn) => React.cloneElement(fn(), { size: 'x32', bg: 'neutral-500' })]}
+  >
+    <Box opacity={0.5} />
+  </Story>
+</Preview>
+
+### Typography
+
+#### Font families
+
+<Preview>
+  <Story name='Font families'>
+    <>
+      <Box fontFamily='sans'>The quick brown fox jumps over the lazy dog</Box>
+      <Box fontFamily='mono'>The quick brown fox jumps over the lazy dog</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Font sizes
+
+<Preview>
+  <Story name='Font sizes'>
+    <>
+      <Box fontSize='x12'>x12</Box>
+      <Box fontSize='x16'>x16</Box>
+      <Box fontSize='x20'>x20</Box>
+      <Box fontSize='x24'>x24</Box>
+      <Box fontSize='x32'>x32</Box>
+      <Box fontSize='h1'>h1</Box>
+      <Box fontSize='s1'>s1</Box>
+      <Box fontSize='s2'>s2</Box>
+      <Box fontSize='p1'>p1</Box>
+      <Box fontSize='p2'>p2</Box>
+      <Box fontSize='c1'>c1</Box>
+      <Box fontSize='c2'>c2</Box>
+      <Box fontSize='micro'>micro</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Font weights
+
+<Preview>
+  <Story name='Font weights'>
+    <>
+      <Box fontWeight='100'>100</Box>
+      <Box fontWeight='200'>200</Box>
+      <Box fontWeight='300'>300</Box>
+      <Box fontWeight='400'>400</Box>
+      <Box fontWeight='500'>500</Box>
+      <Box fontWeight='600'>600</Box>
+      <Box fontWeight='700'>700</Box>
+      <Box fontWeight='800'>800</Box>
+      <Box fontWeight='900'>900</Box>
+      <Box fontWeight='h1'>h1</Box>
+      <Box fontWeight='s1'>s1</Box>
+      <Box fontWeight='s2'>s2</Box>
+      <Box fontWeight='p1'>p1</Box>
+      <Box fontWeight='p2'>p2</Box>
+      <Box fontWeight='c1'>c1</Box>
+      <Box fontWeight='c2'>c2</Box>
+      <Box fontWeight='micro'>micro</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Line heights
+
+<Preview>
+  <Story name='Line heights'>
+    <>
+      <Box lineHeight='1'>1</Box>
+      <Box lineHeight='1.25'>1.25</Box>
+      <Box lineHeight='1.5'>1.5</Box>
+      <Box lineHeight='2'>2</Box>
+      <Box lineHeight='h1'>h1</Box>
+      <Box lineHeight='s1'>s1</Box>
+      <Box lineHeight='s2'>s2</Box>
+      <Box lineHeight='p1'>p1</Box>
+      <Box lineHeight='p2'>p2</Box>
+      <Box lineHeight='c1'>c1</Box>
+      <Box lineHeight='c2'>c2</Box>
+      <Box lineHeight='micro'>micro</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Letter spacing
+
+<Preview>
+  <Story name='Letter spacing'>
+    <>
+      <Box letterSpacing='4px'>4px</Box>
+      <Box letterSpacing='-4px'>-4px</Box>
+      <Box letterSpacing='h1'>h1</Box>
+      <Box letterSpacing='s1'>s1</Box>
+      <Box letterSpacing='s2'>s2</Box>
+      <Box letterSpacing='p1'>p1</Box>
+      <Box letterSpacing='p2'>p2</Box>
+      <Box letterSpacing='c1'>c1</Box>
+      <Box letterSpacing='c2'>c2</Box>
+      <Box letterSpacing='micro'>micro</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Font scales
+
+<Preview>
+  <Story name='Font scales'>
+    <>
+      <Box fontScale='h1'>h1</Box>
+      <Box fontScale='s1'>s1</Box>
+      <Box fontScale='s2'>s2</Box>
+      <Box fontScale='p1'>p1</Box>
+      <Box fontScale='p2'>p2</Box>
+      <Box fontScale='c1'>c1</Box>
+      <Box fontScale='c2'>c2</Box>
+      <Box fontScale='micro'>micro</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Font styles
+
+<Preview>
+  <Story name='Font styles'>
+    <>
+      <Box fontStyle='normal'>normal</Box>
+      <Box fontStyle='italic'>italic</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Text alignment
+
+<Preview>
+  <Story name='Text alignment'>
+    <>
+      <Box textAlign='start'>start</Box>
+      <Box textAlign='end'>end</Box>
+      <Box textAlign='center'>center</Box>
+      <Box textAlign='justify'>justify</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Text transform
+
+<Preview>
+  <Story name='Text transform'>
+    <>
+      <Box textTransform='none'>none</Box>
+      <Box textTransform='uppercase'>uppercase</Box>
+      <Box textTransform='lowercase'>lowercase</Box>
+      <Box textTransform='capitalize'>capitalize</Box>
+    </>
+  </Story>
+</Preview>
+
+#### Text decoration
+
+<Preview>
+  <Story name='Text decoration'>
+    <>
+      <Box textDecorationLine='none'>none</Box>
+      <Box textDecorationLine='underline'>underline</Box>
+      <Box textDecorationLine='overline'>overline</Box>
+      <Box textDecorationLine='line-through'>line-through</Box>
+    </>
+  </Story>
+</Preview>
+
+### Layout
+
+#### Widths
+
+<Preview>
+  <Story
+    name='Widths'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', h: 'x32', m: 'x4' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box w='x64' />
+      <Box width='x64' />
+      <Box w='none' minWidth='x64' />
+      <Box w='sw' maxWidth='x64' />
+    </>
+  </Story>
+</Preview>
+
+#### Heights
+
+<Preview>
+  <Story
+    name='Heights'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', w: 'x32', m: 'x4' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box h='x64' />
+      <Box height='x64' />
+      <Box h='none' minHeight='x64' />
+      <Box h='sw' maxHeight='x64' />
+    </>
+  </Story>
+</Preview>
+
+#### Sizes
+
+<Preview>
+  <Story
+    name='Sizes'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', m: 'x4' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box size='x64' />
+      <Box size='none' minSize='x64' />
+      <Box size={9999} maxSize='x64' />
+    </>
+  </Story>
+</Preview>
+
+#### Display
+
+<Preview>
+  <Story
+    name='Display'
+    decorators={[
+      (fn) => <Box>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { children: child.props.display }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box display='none' />
+      <Box display='inline' />
+      <Box display='inline-block' />
+      <Box display='inline-flex' />
+      <Box display='block' />
+      <Box verticalAlign='-40px' />
+      <Box verticalAlign='40px' />
+    </>
+  </Story>
+</Preview>
+
+#### Vertical alignment
+
+<Preview>
+  <Story
+    name='Vertical alignment'
+    decorators={[
+      (fn) => <Box>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { display: 'inline', children: child.props.verticalAlign }))}
+      </Box>
+    ]}
+  >
+    <Box>
+      <Box verticalAlign='top' />
+      <Box verticalAlign='baseline' />
+      <Box verticalAlign='sub' />
+      <Box verticalAlign='middle' />
+      <Box verticalAlign='bottom' />
+      <Box verticalAlign='-40px' />
+      <Box verticalAlign='40px' />
+    </Box>
+  </Story>
+</Preview>
+
+### Borders
+
+#### Borders
+
+<Preview>
+  <Story
+    name='Borders'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', size: 'x32', m: 'x16' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box border='2px solid currentColor' />
+      <Box borderBlock='2px solid currentColor' />
+      <Box borderBlockStart='2px solid currentColor' />
+      <Box borderBlockEnd='2px solid currentColor' />
+      <Box borderInline='2px solid currentColor' />
+      <Box borderInlineStart='2px solid currentColor' />
+      <Box borderInlineEnd='2px solid currentColor' />
+      <Box borderWidth='x2' />
+      <Box borderBlockWidth='x2' />
+      <Box borderBlockStartWidth='x2' />
+      <Box borderBlockEndWidth='x2' />
+      <Box borderInlineWidth='x2' />
+      <Box borderInlineStartWidth='x2' />
+      <Box borderInlineEndWidth='x2' />
+      <Box borderWidth='x1' borderStyle='dashed' />
+      <Box borderWidth='x1' borderBlockStyle='dashed' />
+      <Box borderWidth='x1' borderBlockStartStyle='dashed' />
+      <Box borderWidth='x1' borderBlockEndStyle='dashed' />
+      <Box borderWidth='x1' borderInlineStyle='dashed' />
+      <Box borderWidth='x1' borderInlineStartStyle='dashed' />
+      <Box borderWidth='x1' borderInlineEndStyle='dashed' />
+      <Box borderWidth='x4' borderColor='primary-500' />
+      <Box borderWidth='x4' borderBlockColor='primary-500' />
+      <Box borderWidth='x4' borderBlockStartColor='primary-500' />
+      <Box borderWidth='x4' borderBlockEndColor='primary-500' />
+      <Box borderWidth='x4' borderInlineColor='primary-500' />
+      <Box borderWidth='x4' borderInlineStartColor='primary-500' />
+      <Box borderWidth='x4' borderInlineEndColor='primary-500' />
+    </>
+  </Story>
+</Preview>
+
+#### Border radii
+
+<Preview>
+  <Story
+    name='Border radii'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', size: 'x32', m: 'x16' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box borderRadius='full' />
+      <Box borderStartStartRadius='full' />
+      <Box borderStartEndRadius='full' />
+      <Box borderEndStartRadius='full' />
+      <Box borderEndEndRadius='full' />
+    </>
+  </Story>
+</Preview>
+
+### Position
+
+#### Position
+
+<Preview>
+  <Story
+    name='Position'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg:'primary-200', size: 'x32', m: 'x16' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box position='static' />
+      <Box position='relative' />
+      <Box position='absolute' />
+      <Box position='fixed' />
+    </>
+  </Story>
+</Preview>
+
+
+#### Z-index
+
+<Preview>
+  <Story
+    name='Z-index'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) =>
+          React.cloneElement(child, { bg: 'primary-200', borderWidth: 'x4', size: 'x32', m: 'neg-x2' }))}
+      </Box>
+    ]}
+  >
+    <>
+      <Box zIndex='2' borderColor='success-300' />
+      <Box zIndex='1' borderColor='info-300' />
+      <Box zIndex='2' borderColor='warning-300' />
+      <Box zIndex='1' borderColor='danger-300' />
+    </>
+  </Story>
+</Preview>
+
+#### Inset
+
+<Preview>
+  <Story
+    name='Inset'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn().props.children, (child) => <Box position='relative' bg='neutral-200' m='x16' size='x64'>
+          {React.cloneElement(child, { bg:'primary-200', position: 'absolute', minSize: 'x16' })}
+        </Box>)}
+      </Box>
+    ]}
+  >
+    <>
+      <Box inset='none' />
+      <Box inset='x1' />
+      <Box inset='x2' />
+      <Box inset='x4' />
+      <Box inset='x8' />
+      <Box inset='x16' />
+      <Box insetBlock='x16' />
+      <Box insetBlockStart='x16' />
+      <Box insetBlockEnd='x16' />
+      <Box insetInline='x16' />
+      <Box insetInlineStart='x16' />
+      <Box insetInlineEnd='x16' />
+    </>
+  </Story>
+</Preview>
+
+### Special
+
+#### Invisible
+
+<Preview>
+  <Story
+    name='Invisible'
+    decorators={[
+      (fn) => <Box display='flex' flexWrap='wrap' alignItems='center'>
+        {React.Children.map(fn(), (child) => <Box bg='neutral-200' p='x16'>
+          {React.cloneElement(child, { bg:'primary-200', size: 'x16' })}
+        </Box>)}
+      </Box>
+    ]}
+  >
+    <Box invisible />
+  </Story>
+</Preview>
+
+#### With rich content
+
+<Preview>
+  <Story name='With rich content'>
+    <Box withRichContent>
+      <p><strong>This text is strong</strong></p>
+      <p><em>This text has emphasis</em></p>
+      <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
+    </Box>
+  </Story>
+</Preview>
+
+#### With truncated text
+
+<Preview>
+  <Story name='With truncated text'>
+    <Box withTruncatedText w='x80'>
+      This text is truncated.
+    </Box>
+  </Story>
+</Preview>
diff --git a/packages/fuselage/src/components/Box/richContent.stories.mdx b/packages/fuselage/src/components/Box/richContent.stories.mdx
new file mode 100644
index 0000000000..e5da01e591
--- /dev/null
+++ b/packages/fuselage/src/components/Box/richContent.stories.mdx
@@ -0,0 +1,283 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import { Box } from '../..';
+
+<Meta
+  title='Box/Rich content'
+  parameters={{ jest: ['Box/spec'] }}
+  decorators={[
+    (fn) => <Box fontFamily='sans' fontScale='p1' withRichContent>{fn()}</Box>
+  ]}
+/>
+
+# Box
+
+## Rich content
+
+Here is how rich content will be rendered, in details.
+
+### Inline
+
+<Preview>
+  <Story name='strong'>
+    <strong>strong importance</strong>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='em'>
+    <em>emphasis</em>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='b'>
+    <b>bring attention</b>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='i'>
+    <i>technical terms, foreign language phrases, or fictional character thoughts</i>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='a'>
+    <>
+      <a href='#'>Normal</a><br />
+      <a href='#' className='is-visited'>Visited</a><br />
+      <a href='#' className='is-active'>Active</a><br />
+      <a href='#' className='is-hovered'>Hovered</a><br />
+    </>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='q and cite'>
+    <q>The problem with quotes found on the internet is that they are often not true. <cite>Abraham Lincoln</cite></q>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='code'>
+    <code>inline code</code>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='time'>
+    <time dateTime='20220101 10:00'>January 1th 2022, 10 a.m.</time>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='dfn'>
+    <dfn>Definition:</dfn> description.
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='abbr'>
+    <abbr title='Source Development Kit'>SDK</abbr>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='del and ins'>
+    <del>deleted</del> <ins>inserted</ins>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='sup and sub'>
+    <sup>superscript</sup> <sub>subscript</sub>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='kbd'>
+    <kbd>Ctrl + Alt + Del</kbd>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='var'>
+    <var>x² + y² = r²</var>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='small'>
+    <small>small text</small>
+  </Story>
+</Preview>
+
+#### Block
+
+<Preview>
+  <Story name='hx'>
+    <>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+    </>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='p'>
+    <p>Paragraph</p>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='ul'>
+    <ul>
+      <li>unordered list item 1</li>
+      <li>unordered list item 2</li>
+      <li>unordered list item 3</li>
+    </ul>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='ol'>
+    <ol>
+      <li>ordered list item 1</li>
+      <li>ordered list item 2</li>
+      <li>ordered list item 3</li>
+    </ol>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='dl'>
+    <dl>
+      <dt>description list term 1</dt>
+      <dd>description list description 1</dd>
+      <dt>description list term 2</dt>
+      <dd>description list description 2</dd>
+      <dt>description list term 3</dt>
+      <dd>description list description 3</dd>
+    </dl>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='table (simple)'>
+    <table>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Item 1 of row 1</td>
+          <td>Item 2 of row 1</td>
+          <td>Item 3 of row 1</td>
+        </tr>
+        <tr>
+          <td>Item 1 of row 2</td>
+          <td>Item 2 of row 2</td>
+          <td>Item 3 of row 2</td>
+        </tr>
+        <tr>
+          <td>Item 1 of row 3</td>
+          <td>Item 2 of row 3</td>
+          <td>Item 3 of row 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='table (complex)'>
+    <table>
+      <caption>Caption</caption>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tfoot>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </tfoot>
+      <tbody>
+        <tr>
+          <td>Item 1 of row 1</td>
+          <td>Item 2 of row 1</td>
+          <td>Item 3 of row 1</td>
+        </tr>
+        <tr>
+          <td>Item 1 of row 2</td>
+          <td>Item 2 of row 2</td>
+          <td>Item 3 of row 2</td>
+        </tr>
+        <tr>
+          <td>Item 1 of row 3</td>
+          <td>Item 2 of row 3</td>
+          <td>Item 3 of row 3</td>
+        </tr>
+      </tbody>
+    </table>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='blockquote and cite'>
+    <blockquote>
+      <p>
+        Words can be like X-rays, if you use them properly — they’ll go through anything.
+        You read and you’re pierced.
+      </p>
+      <footer>— Aldous Huxley, <cite>Brave New World</cite></footer>
+    </blockquote>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='pre'>
+    <pre>
+      # A UNINTENDED LOL-ZONE: SORRY FOR THIS{'\n'}
+      # ------------+----------+-------------{'\n'}
+      #      /\O    |    _O    |      O      {'\n'}
+      #       /\/   |   //|_   |     /_      {'\n'}
+      #      /\     |    |     |     |\      {'\n'}
+      #     /  \    |   /|     |    / |      {'\n'}
+      #   LOL  LOL  |   LLOL   |  LOLLOL     {'\n'}
+      # ------------+----------+-------------{'\n'}
+      # BLACK MAGIC FULL FEATURED ENABLED
+    </pre>
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name='pre with code'>
+    <pre>
+      <code>
+        # A UNINTENDED LOL-ZONE: SORRY FOR THIS{'\n'}
+        # ------------+----------+-------------{'\n'}
+        #      /\O    |    _O    |      O      {'\n'}
+        #       /\/   |   //|_   |     /_      {'\n'}
+        #      /\     |    |     |     |\      {'\n'}
+        #     /  \    |   /|     |    / |      {'\n'}
+        #   LOL  LOL  |   LLOL   |  LOLLOL     {'\n'}
+        # ------------+----------+-------------{'\n'}
+        # BLACK MAGIC FULL FEATURED ENABLED
+      </code>
+    </pre>
+  </Story>
+</Preview>
diff --git a/packages/fuselage/src/components/Box/stories.mdx b/packages/fuselage/src/components/Box/stories.mdx
index 17bdb00a62..f9c5e7a3e2 100644
--- a/packages/fuselage/src/components/Box/stories.mdx
+++ b/packages/fuselage/src/components/Box/stories.mdx
@@ -1,60 +1,29 @@
 import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 import { Box, Button } from '../..';
 
-<Meta title='Box' parameters={{ jest: ['Box/spec'] }} />
+<Meta title='Box/Intro' parameters={{ jest: ['Box/spec'] }} />
 
 # Box
 
-A primitive component with normalized styles.
-
-<Props of={Box} />
-
-### `is` prop
-
-The `is` prop allows `Box` to render any component capable of handling common DOM attributes, specially `className` and
-`style`.
-
-<Preview>
-  <Story name='is prop'>
-    <Box is={Button}>A Box rendering a Button</Box>
-  </Story>
-</Preview>
+A primitive component with normalized styles and a lot of props for prototyping.
 
 ### `invisible` prop
 
 The `Box` can be hidden using the boolean prop `invisible`.
 
-<Preview>
-  <Story name='invisible prop'>
-    <>
-      <Box>Visible</Box>
-      <Box invisible>Invisible</Box>
-    </>
-  </Story>
-</Preview>
-
-### `componentClassName` prop and modifier props
+### `rcx-` prefixed props
 
-Following the [BEM convention](http://getbem.com/), `Box` elements can have a `componentClassName` comprising the block
-and element parts while the modifiers are appended via props prefixed with `mod-`. The generated class name will be
-appended to the `className` prop value and `rcx-box` class names coming from components named `Box` modifiers.
+As the class names used in Fuselage are prefixed by `rcx-`, props named as `rcx-*` are automatically converted into
+values appended to the `className` prop.
 
 For instance,
 
 ```jsx
-  <Box componentClassName='my-component' mod-bool-modifier mod-string-modifier='value' />
+  <Box rcx-component rcx-component--bool-modifier rcx-component--string-modifier='value' />
 ```
 
 is rendered as
 
 ```html
-  <div class="rcx-box my-component my-component--bool-modifier my-component--string-modifier-value"></div>
+  <div class="rcx-box rcx-component rcx-component--bool-modifier rcx-component--string-modifier-value"></div>
 ```
-
-<Preview>
-  <Story name='componentClassName prop'>
-    <Box componentClassName='my-component' mod-bool-modifier mod-string-modifier='value'>
-      Component with generated className
-    </Box>
-  </Story>
-</Preview>
diff --git a/packages/fuselage/src/components/Box/styles.scss b/packages/fuselage/src/components/Box/styles.scss
index d6b1451448..be6852295d 100644
--- a/packages/fuselage/src/components/Box/styles.scss
+++ b/packages/fuselage/src/components/Box/styles.scss
@@ -1,56 +1,7 @@
-@use '../../styles/colors.scss';
-@use '../../styles/lengths.scss';
-@use '../../styles/typography.scss';
-
 .rcx-box {
   &,
   &::before,
   &::after {
     @extend %box;
   }
-
-  &--invisible {
-    visibility: hidden;
-
-    opacity: 0;
-  }
-
-  @each $text-style in typography.$font-scales {
-    &--text-style-#{ $text-style } {
-      @include typography.use-font-scale($text-style);
-    }
-  }
-
-  &--text-style-headline {
-    @include typography.use-font-scale(h1);
-  }
-
-  &--text-style-subtitle {
-    @include typography.use-font-scale(s1);
-  }
-
-  &--text-style-paragraph {
-    @include typography.use-font-scale(p1);
-  }
-
-  &--text-style-caption {
-    @include typography.use-font-scale(c1);
-  }
-
-  @each $text-color in colors.$foreground-types {
-    &--text-color-#{ $text-color } {
-      color: colors.foreground($text-color);
-    }
-  }
-
-  &--inline {
-    color: colors.foreground(default);
-    @extend %--with-inline-elements;
-  }
-
-  &--block {
-    color: colors.foreground(default);
-    @extend %--with-inline-elements;
-    @extend %--with-block-elements;
-  }
 }
diff --git a/packages/fuselage/src/components/Box/useCss.js b/packages/fuselage/src/components/Box/useCss.js
deleted file mode 100644
index 9fe36a89b5..0000000000
--- a/packages/fuselage/src/components/Box/useCss.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { referenceRules, transpile, createSelector } from '@rocket.chat/css-in-js';
-import { useLayoutEffect, useMemo } from 'react';
-
-export const useCss = (css, deps) => {
-  const [className, rules] = useMemo(() => {
-    if (!css) {
-      return [];
-    }
-
-    const cssFns = (Array.isArray(css) ? css : [css]).filter(Boolean);
-    const rules = [];
-    rules.push(...cssFns.map((cssFn) => cssFn(rules)));
-    const content = rules.filter(Boolean).join('') || undefined;
-
-    if (!content) {
-      return [];
-    }
-
-    const [className, encodedClassName] = createSelector(content);
-
-    return [className, transpile(`.rcx-box.${ encodedClassName }`, content)];
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  useLayoutEffect(() => rules && referenceRules(rules), [rules]);
-
-  return className;
-};
diff --git a/packages/fuselage/src/components/Box/useFlexBoxProps.js b/packages/fuselage/src/components/Box/useFlexBoxProps.js
deleted file mode 100644
index c269251488..0000000000
--- a/packages/fuselage/src/components/Box/useFlexBoxProps.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-
-import { useCss } from './useCss';
-
-export const useFlexBoxProps = ({
-  className,
-  alignItems,
-  alignContent,
-  justifyItems,
-  justifyContent,
-  flexWrap,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  flexBasis,
-  justifySelf,
-  alignSelf,
-  order,
-  ...props
-}) => {
-  const flexBoxClassName = useCss([
-    alignItems !== undefined && css`align-items: ${ alignItems } !important;`,
-    alignContent !== undefined && css`align-content: ${ alignContent } !important;`,
-    justifyItems !== undefined && css`justify-items: ${ justifyItems } !important;`,
-    justifyContent !== undefined && css`justify-content: ${ justifyContent } !important;`,
-    flexWrap !== undefined && css`flex-wrap: ${ flexWrap } !important;`,
-    flexDirection !== undefined && css`flex-direction: ${ flexDirection } !important;`,
-    flexGrow !== undefined && css`flex-grow: ${ flexGrow } !important;`,
-    flexShrink !== undefined && css`flex-shrink: ${ flexShrink } !important;`,
-    flexBasis !== undefined && css`flex-basis: ${ flexBasis } !important;`,
-    justifySelf !== undefined && css`justify-self: ${ justifySelf } !important;`,
-    alignSelf !== undefined && css`align-self: ${ alignSelf } !important;`,
-    order !== undefined && css`order: ${ order } !important;`,
-  ], [
-    alignItems,
-    alignContent,
-    justifyItems,
-    justifyContent,
-    flexWrap,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-    justifySelf,
-    alignSelf,
-    order,
-  ]);
-
-  return {
-    className: [
-      ...className,
-      flexBoxClassName,
-    ],
-    ...props,
-  };
-};
diff --git a/packages/fuselage/src/components/Box/useLayoutProps.js b/packages/fuselage/src/components/Box/useLayoutProps.js
deleted file mode 100644
index 315d7e8a01..0000000000
--- a/packages/fuselage/src/components/Box/useLayoutProps.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-
-import { useCss } from './useCss';
-import { getSizeValue } from '../../propTypes/sizes';
-
-export const useLayoutProps = ({
-  className,
-  w,
-  width = w,
-  minWidth,
-  maxWidth,
-  h,
-  height = h,
-  minHeight,
-  maxHeight,
-  display,
-  verticalAlign,
-  overflow,
-  overflowX,
-  overflowY,
-  ...props
-}) => {
-  const layoutClassName = useCss([
-    width && css`width: ${ getSizeValue(width) } !important;`,
-    minWidth && css`min-width: ${ getSizeValue(minWidth) } !important;`,
-    maxWidth && css`max-width: ${ getSizeValue(maxWidth) } !important;`,
-    height && css`height: ${ getSizeValue(height) } !important;`,
-    minHeight && css`min-height: ${ getSizeValue(minHeight) } !important;`,
-    maxHeight && css`max-height: ${ getSizeValue(maxHeight) } !important;`,
-    display && css`display: ${ display } !important;`,
-    verticalAlign && css`vertical-align: ${ verticalAlign } !important;`,
-    overflow && css`overflow: ${ overflow } !important;`,
-    overflowX && css`overflow-x: ${ overflowX } !important;`,
-    overflowY && css`overflow-y: ${ overflowY } !important;`,
-  ], [
-    width,
-    minWidth,
-    maxWidth,
-    height,
-    minHeight,
-    maxHeight,
-    display,
-    verticalAlign,
-    overflow,
-    overflowX,
-    overflowY,
-  ]);
-
-  return {
-    className: [
-      ...className,
-      layoutClassName,
-    ],
-    ...props,
-  };
-};
diff --git a/packages/fuselage/src/components/Box/useMergedProps.js b/packages/fuselage/src/components/Box/useMergedProps.js
deleted file mode 100644
index 02f8a37852..0000000000
--- a/packages/fuselage/src/components/Box/useMergedProps.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useSpaceProps } from './useSpaceProps';
-import { useLayoutProps } from './useLayoutProps';
-import { useFlexBoxProps } from './useFlexBoxProps';
-
-const useBoxClassNames = ({ className, invisible, richText, textColor, textStyle, ...props }) => ({
-  className: [
-    'rcx-box',
-    !!invisible && 'rcx-box--invisible',
-    richText === 'inline' && 'rcx-box--inline',
-    richText === 'block' && 'rcx-box--block',
-    textColor && `rcx-box--text-color-${ textColor }`,
-    textStyle && `rcx-box--text-style-${ textStyle }`,
-    ...className,
-  ],
-  ...props,
-});
-
-const useModifierClassNames = ({ className, componentClassName, ...props }) => {
-  const modifierClassNames = [];
-
-  for (const [name, value] of Object.entries(props)) {
-    if (name.slice(0, 4) === 'mod-') {
-      delete props[name];
-
-      if (value === true) {
-        modifierClassNames.push(`${ componentClassName }--${ name.slice(4) }`);
-        continue;
-      }
-
-      if (value) {
-        modifierClassNames.push(`${ componentClassName }--${ name.slice(4) }-${ value }`);
-      }
-    }
-  }
-
-  return {
-    className: [
-      componentClassName,
-      ...modifierClassNames,
-      ...className,
-    ],
-    ...props,
-  };
-};
-
-export const useMergedProps = (props, contextProps, ref) => {
-  const initialProps = {
-    ref,
-    ...contextProps,
-    ...props,
-    className: [
-      ...Array.isArray(contextProps?.className) ? contextProps?.className : [contextProps?.className],
-      ...Array.isArray(props.className) ? props.className : [props.className],
-    ],
-    style: {
-      ...contextProps?.style,
-      ...props.style,
-    },
-  };
-
-  return [
-    useBoxClassNames,
-    useModifierClassNames,
-    useSpaceProps,
-    useLayoutProps,
-    useFlexBoxProps,
-  ].reduceRight((props, transform) => transform(props), initialProps);
-};
diff --git a/packages/fuselage/src/components/Box/useSpaceProps.js b/packages/fuselage/src/components/Box/useSpaceProps.js
deleted file mode 100644
index 2a13a29037..0000000000
--- a/packages/fuselage/src/components/Box/useSpaceProps.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-
-import { getMarginValue } from '../../propTypes/margins';
-import { getPaddingValue } from '../../propTypes/paddings';
-import { useCss } from './useCss';
-
-const getMarginBlock = (() => {
-  if (window.CSS && window.CSS.supports('margin-block: auto')) {
-    return (value) => css`margin-block: ${ value } !important;`;
-  }
-
-  if (window.CSS && window.CSS.supports('margin-block-start: auto') && window.CSS.supports('margin-block-end: auto')) {
-    return (value) => css`
-      margin-block-start: ${ value } !important;
-      margin-block-end: ${ value } !important;
-    `;
-  }
-
-  return (value) => css`
-    margin-top: ${ value } !important;
-    margin-bottom: ${ value } !important;
-  `;
-})();
-
-const getMarginBlockStart = (() => {
-  if (window.CSS && window.CSS.supports('margin-block-start: auto')) {
-    return (value) => css`margin-block-start: ${ value } !important;`;
-  }
-
-  return (value) => css`margin-top: ${ value } !important;`;
-})();
-
-const getMarginBlockEnd = (() => {
-  if (window.CSS && window.CSS.supports('margin-block-end: auto')) {
-    return (value) => css`margin-block-end: ${ value } !important;`;
-  }
-
-  return (value) => css`margin-bottom: ${ value } !important;`;
-})();
-
-const getMarginInline = (() => {
-  if (window.CSS && window.CSS.supports('margin-inline: auto')) {
-    return (value) => css`margin-inline: ${ value } !important;`;
-  }
-
-  if (window.CSS && window.CSS.supports('margin-inline-start: auto') && window.CSS.supports('margin-inline-end: auto')) {
-    return (value) => css`
-      margin-inline-start: ${ value } !important;
-      margin-inline-end: ${ value } !important;
-    `;
-  }
-
-  return (value) => css`
-    margin-left: ${ value } !important;
-    margin-right: ${ value } !important;
-  `;
-})();
-
-const getMarginInlineStart = (() => {
-  if (window.CSS && window.CSS.supports('margin-inline-start: auto')) {
-    return (value) => css`margin-inline-start: ${ value } !important;`;
-  }
-
-  return (value) => css`
-    [dir=ltr] & {
-      margin-left: ${ value } !important;
-    }
-
-    [dir=rtl] & {
-      margin-right: ${ value } !important;
-    }
-  `;
-})();
-
-const getMarginInlineEnd = (() => {
-  if (window.CSS && window.CSS.supports('margin-inline-end: auto')) {
-    return (value) => css`margin-inline-end: ${ value } !important;`;
-  }
-
-  return (value) => css`
-    [dir=ltr] & {
-      margin-right: ${ value } !important;
-    }
-
-    [dir=rtl] & {
-      margin-left: ${ value } !important;
-    }
-  `;
-})();
-
-const getPaddingBlock = (() => {
-  if (window.CSS && window.CSS.supports('padding-block: auto')) {
-    return (value) => css`padding-block: ${ value } !important;`;
-  }
-
-  if (window.CSS && window.CSS.supports('padding-block-start: auto') && window.CSS.supports('padding-block-end: auto')) {
-    return (value) => css`
-      padding-block-start: ${ value } !important;
-      padding-block-end: ${ value } !important;
-    `;
-  }
-
-  return (value) => css`
-    padding-top: ${ value } !important;
-    padding-bottom: ${ value } !important;
-  `;
-})();
-
-const getPaddingBlockStart = (() => {
-  if (window.CSS && window.CSS.supports('padding-block-start: auto')) {
-    return (value) => css`padding-block-start: ${ value } !important;`;
-  }
-
-  return (value) => css`padding-top: ${ value } !important;`;
-})();
-
-const getPaddingBlockEnd = (() => {
-  if (window.CSS && window.CSS.supports('padding-block-end: auto')) {
-    return (value) => css`padding-block-end: ${ value } !important;`;
-  }
-
-  return (value) => css`padding-bottom: ${ value } !important;`;
-})();
-
-const getPaddingInline = (() => {
-  if (window.CSS && window.CSS.supports('padding-inline: auto')) {
-    return (value) => css`padding-inline: ${ value } !important;`;
-  }
-
-  if (window.CSS && window.CSS.supports('padding-inline-start: auto') && window.CSS.supports('padding-inline-end: auto')) {
-    return (value) => css`
-      padding-inline-start: ${ value } !important;
-      padding-inline-end: ${ value } !important;
-    `;
-  }
-
-  return (value) => css`
-    padding-left: ${ value } !important;
-    padding-right: ${ value } !important;
-  `;
-})();
-
-const getPaddingInlineStart = (() => {
-  if (window.CSS && window.CSS.supports('padding-inline-start: auto')) {
-    return (value) => css`padding-inline-start: ${ value } !important;`;
-  }
-
-  return (value) => css`
-    [dir=ltr] & {
-      padding-left: ${ value } !important;
-    }
-
-    [dir=rtl] & {
-      padding-right: ${ value } !important;
-    }
-  `;
-})();
-
-const getPaddingInlineEnd = (() => {
-  if (window.CSS && window.CSS.supports('padding-inline-end: auto')) {
-    return (value) => css`padding-inline-end: ${ value } !important;`;
-  }
-
-  return (value) => css`
-    [dir=ltr] & {
-      padding-right: ${ value } !important;
-    }
-
-    [dir=rtl] & {
-      padding-left: ${ value } !important;
-    }
-  `;
-})();
-
-export const useSpaceProps = ({
-  className,
-  m,
-  margin = m,
-  mi,
-  marginInline = mi,
-  mis,
-  marginInlineStart = mis,
-  mie,
-  marginInlineEnd = mie,
-  mb,
-  marginBlock = mb,
-  mbs,
-  marginBlockStart = mbs,
-  mbe,
-  marginBlockEnd = mbe,
-  p,
-  padding = p,
-  pi,
-  paddingInline = pi,
-  pis,
-  paddingInlineStart = pis,
-  pie,
-  paddingInlineEnd = pie,
-  pb,
-  paddingBlock = pb,
-  pbs,
-  paddingBlockStart = pbs,
-  pbe,
-  paddingBlockEnd = pbe,
-  ...props
-}) => {
-  const spacesClassName = useCss([
-    margin !== undefined && css`margin: ${ getMarginValue(margin) } !important;`,
-    marginBlock !== undefined && getMarginBlock(getMarginValue(marginBlock)),
-    marginBlockStart !== undefined && getMarginBlockStart(getMarginValue(marginBlockStart)),
-    marginBlockEnd !== undefined && getMarginBlockEnd(getMarginValue(marginBlockEnd)),
-    marginInline !== undefined && getMarginInline(getMarginValue(marginInline)),
-    marginInlineStart !== undefined && getMarginInlineStart(getMarginValue(marginInlineStart)),
-    marginInlineEnd !== undefined && getMarginInlineEnd(getMarginValue(marginInlineEnd)),
-    padding !== undefined && css`padding: ${ getPaddingValue(padding) } !important;`,
-    paddingBlock !== undefined && getPaddingBlock(getPaddingValue(paddingBlock)),
-    paddingBlockStart !== undefined && getPaddingBlockStart(getPaddingValue(paddingBlockStart)),
-    paddingBlockEnd !== undefined && getPaddingBlockEnd(getPaddingValue(paddingBlockEnd)),
-    paddingInline !== undefined && getPaddingInline(getPaddingValue(paddingInline)),
-    paddingInlineStart !== undefined && getPaddingInlineStart(getPaddingValue(paddingInlineStart)),
-    paddingInlineEnd !== undefined && getPaddingInlineEnd(getPaddingValue(paddingInlineEnd)),
-  ], [
-    margin,
-    marginBlock,
-    marginBlockStart,
-    marginBlockEnd,
-    marginInline,
-    marginInlineStart,
-    marginInlineEnd,
-    padding,
-    paddingInline,
-    paddingInlineStart,
-    paddingInlineEnd,
-    paddingBlock,
-    paddingBlockStart,
-    paddingBlockEnd,
-  ]);
-
-  return {
-    className: [
-      ...className,
-      spacesClassName,
-    ],
-    ...props,
-  };
-};
diff --git a/packages/fuselage/src/components/Button/index.js b/packages/fuselage/src/components/Button/index.js
index 24787478f2..83ac70c6b2 100644
--- a/packages/fuselage/src/components/Button/index.js
+++ b/packages/fuselage/src/components/Button/index.js
@@ -24,16 +24,16 @@ export const Button = forwardRef(function Button({
   || {};
 
   return <Box
-    componentClassName='rcx-button'
     is={is}
-    mod-danger={!primary && danger && !ghost}
-    mod-ghost={!primary && !danger && ghost}
-    mod-ghost-danger={!primary && danger && ghost}
-    mod-primary={primary && !danger && !ghost}
-    mod-primary-danger={primary && danger && !ghost}
-    mod-small={small}
-    mod-square={square}
-    mod-small-square={small && square}
+    rcx-button
+    rcx-button--danger={!primary && danger && !ghost}
+    rcx-button--ghost={!primary && !danger && ghost}
+    rcx-button--ghost-danger={!primary && danger && ghost}
+    rcx-button--primary={primary && !danger && !ghost}
+    rcx-button--primary-danger={primary && danger && !ghost}
+    rcx-button--small={small}
+    rcx-button--square={square}
+    rcx-button--small-square={small && square}
     ref={ref}
     {...extraProps}
     {...props}
diff --git a/packages/fuselage/src/components/ButtonGroup/index.js b/packages/fuselage/src/components/ButtonGroup/index.js
index 63e8d18099..bd9f9d9a71 100644
--- a/packages/fuselage/src/components/ButtonGroup/index.js
+++ b/packages/fuselage/src/components/ButtonGroup/index.js
@@ -12,16 +12,16 @@ export function ButtonGroup({
   ...props
 }) {
   return <Box
-    componentClassName='rcx-button-group'
-    mod-align={align}
-    mod-stretch={stretch}
-    mod-vertical={vertical}
-    mod-wrap={wrap}
+    rcx-button-group
+    rcx-button-group--align={align}
+    rcx-button-group--stretch={stretch}
+    rcx-button-group--vertical={vertical}
+    rcx-button-group--wrap={wrap}
     role='group'
     {...props}
   >
     <PropsProvider children={children} fn={({ className }) => ({
-      className: [className, 'rcx-button-group__item'].filter(Boolean).join(' '),
+      className: [className, 'rcx-button-group__item'],
     })} />
   </Box>;
 }
diff --git a/packages/fuselage/src/components/Callout/index.js b/packages/fuselage/src/components/Callout/index.js
index cbe27fae8c..d8487aaaef 100644
--- a/packages/fuselage/src/components/Callout/index.js
+++ b/packages/fuselage/src/components/Callout/index.js
@@ -15,11 +15,11 @@ export function Callout({
     || (type === 'warning' && 'warning')
     || (type === 'danger' && 'ban');
 
-  return <Box componentClassName='rcx-callout' is='section' mod-type={type} {...props}>
+  return <Box is='section' rcx-callout rcx-callout--type={type} {...props}>
     <Icon name={iconName} size='x20' />
-    <Box componentClassName='rcx-callout__wrapper'>
-      {title && <Box componentClassName='rcx-callout__title' is='h1'>{title}</Box>}
-      {children && <Box componentClassName='rcx-callout__children'>
+    <Box rcx-callout__wrapper>
+      {title && <Box is='h1' rcx-callout__title>{title}</Box>}
+      {children && <Box rcx-callout__children>
         {children}
       </Box>}
     </Box>
diff --git a/packages/fuselage/src/components/CheckBox/index.js b/packages/fuselage/src/components/CheckBox/index.js
index 46c4228789..896b49ad44 100644
--- a/packages/fuselage/src/components/CheckBox/index.js
+++ b/packages/fuselage/src/components/CheckBox/index.js
@@ -36,10 +36,10 @@ export const CheckBox = forwardRef(function CheckBox({
     onChange && onChange.call(innerRef.current, event);
   }, [innerRef, indeterminate, onChange]);
 
-  return <Box is={Label} componentClassName='rcx-check-box' {...props}>
+  return <Box is={Label} rcx-check-box {...props}>
     <Box
       is='input'
-      componentClassName='rcx-check-box__input'
+      rcx-check-box__input
       autoComplete={autoComplete}
       checked={checked}
       defaultChecked={defaultChecked}
@@ -57,7 +57,7 @@ export const CheckBox = forwardRef(function CheckBox({
       onInput={onInput}
       onInvalid={onInvalid}
     />
-    <Box is='i' componentClassName='rcx-check-box__fake' aria-hidden='true' />
+    <Box is='i' rcx-check-box__fake aria-hidden='true' />
   </Box>;
 });
 
diff --git a/packages/fuselage/src/components/CheckBox/styles.scss b/packages/fuselage/src/components/CheckBox/styles.scss
index 8942e472cf..7655fcc72e 100644
--- a/packages/fuselage/src/components/CheckBox/styles.scss
+++ b/packages/fuselage/src/components/CheckBox/styles.scss
@@ -19,8 +19,8 @@
     &::before,
     &::after {
       position: absolute;
-      inset-block-start: lengths.inset(50%);
-      inset-inline-start: lengths.inset(50%);
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
 
       display: block;
       visibility: hidden;
diff --git a/packages/fuselage/src/components/Chevron/index.js b/packages/fuselage/src/components/Chevron/index.js
index 436767a599..fd869302ba 100644
--- a/packages/fuselage/src/components/Chevron/index.js
+++ b/packages/fuselage/src/components/Chevron/index.js
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 
 import { Box } from '../Box';
 import { Icon } from '../Icon';
-import { sizePropType } from '../../propTypes/sizes';
+import { sizePropType } from '../../styles/props/layout';
 
 export function Chevron({
   up,
@@ -16,13 +16,13 @@ export function Chevron({
   const children = useMemo(() => <Icon name='arrow-down' size={size} />, [size]);
 
   return <Box
-    componentClassName='rcx-chevron'
     is='span'
     children={children}
-    mod-up={up}
-    mod-right={right}
-    mod-down={down}
-    mod-left={left}
+    rcx-chevron
+    rcx-chevron--up={up}
+    rcx-chevron--right={right}
+    rcx-chevron--down={down}
+    rcx-chevron--left={left}
     {...props}
   />;
 }
diff --git a/packages/fuselage/src/components/Chevron/stories.mdx b/packages/fuselage/src/components/Chevron/stories.mdx
index 18e0fe9029..335837af45 100644
--- a/packages/fuselage/src/components/Chevron/stories.mdx
+++ b/packages/fuselage/src/components/Chevron/stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 
-import { Chevron } from '../..';
+import { Box, Chevron } from '../..';
 
 <Meta title='Misc/Chevron' parameters={{ jest: ['Chevron/spec'] }} />
 
@@ -49,8 +49,13 @@ import { Chevron } from '../..';
 ## Size
 
 <Preview>
-  <Story name='Size'>
-    <div style={{ display: 'flex', alignItems: 'center' }}>
+  <Story
+    name='Size'
+    decorators={[
+      (fn) => <Box display='flex' alignItems='center'>{fn()}</Box>
+    ]}
+  >
+    <>
       <Chevron size='x2' />
       <Chevron size='x4' />
       <Chevron size='x8' />
@@ -59,6 +64,6 @@ import { Chevron } from '../..';
       <Chevron size='x24' />
       <Chevron size='x32' />
       <Chevron size='x40' />
-    </div>
+    </>
   </Story>
 </Preview>
diff --git a/packages/fuselage/src/components/Chip/index.js b/packages/fuselage/src/components/Chip/index.js
index e5ee299db8..7752d88ff4 100644
--- a/packages/fuselage/src/components/Chip/index.js
+++ b/packages/fuselage/src/components/Chip/index.js
@@ -17,13 +17,13 @@ export const Chip = ({
   ...props
 }) => (
   <Flex.Container>
-    <Box componentClassName='rcx-chip' is='button' type='button' disabled={!(onClick || onMouseDown)} onClick={onClick || onMouseDown} {...props}>
+    <Box rcx-chip is='button' type='button' disabled={!(onClick || onMouseDown)} onClick={onClick || onMouseDown} {...props}>
       {Thumb && thumbUrl && <Margins all='x4'>
         <Thumb url={thumbUrl} />
       </Margins>}
       {children && <Flex.Item shrink={1}>
         <Margins all='x4'>
-          <Box is='span' textStyle='p1' textColor='default' className='rcx-chip__text'>{children}</Box>
+          <Box is='span' textStyle='p1' color='default' className='rcx-chip__text'>{children}</Box>
         </Margins>
       </Flex.Item>}
       {Remove && (onClick || onMouseDown) && <Margins all='x4'>
@@ -38,7 +38,7 @@ export const Chip = ({
 Chip.Wrapper = ({ children, width, alignItems = 'center', wrap = 'wrap', ...props }) =>
   <Margins all='neg-x4'>
     <Flex.Container alignItems={alignItems} wrap={wrap}>
-      <Box componentClassName='rcx-chip__wrapper' is='div' {...props}>
+      <Box rcx-chip__wrapper is='div' {...props}>
         {children.map((children, i) =>
           <Flex.Item key={i} shrink={1}>
             <Margins all='x4'>
diff --git a/packages/fuselage/src/components/Divider/index.js b/packages/fuselage/src/components/Divider/index.js
index 63db0100be..89548180a7 100644
--- a/packages/fuselage/src/components/Divider/index.js
+++ b/packages/fuselage/src/components/Divider/index.js
@@ -3,5 +3,5 @@ import React from 'react';
 import { Box } from '../Box';
 
 export function Divider(props) {
-  return <Box componentClassName='rcx-divider' is='hr' {...props} />;
+  return <Box is='hr' rcx-divider {...props} />;
 }
diff --git a/packages/fuselage/src/components/Field/index.js b/packages/fuselage/src/components/Field/index.js
index de083cd18d..0da7ae3714 100644
--- a/packages/fuselage/src/components/Field/index.js
+++ b/packages/fuselage/src/components/Field/index.js
@@ -4,27 +4,27 @@ import { Box } from '../Box';
 import { Label } from '../Label';
 
 export function FieldLabel(props) {
-  return <Box is={Label} componentClassName='rcx-field__label' {...props}/>;
+  return <Box is={Label} rcx-field__label {...props}/>;
 }
 
 export function FieldDescription(props) {
-  return <Box is='span' componentClassName='rcx-field__description' {...props}/>;
+  return <Box is='span' rcx-field__description {...props}/>;
 }
 
 export function FieldRow(props) {
-  return <Box is='span' componentClassName='rcx-field__row' {...props} />;
+  return <Box is='span' rcx-field__row {...props} />;
 }
 
 export function FieldHint(props) {
-  return <Box is='span' componentClassName='rcx-field__hint' {...props} />;
+  return <Box is='span' rcx-field__hint {...props} />;
 }
 
 export function FieldError(props) {
-  return <Box is='span' componentClassName='rcx-field__error' {...props} />;
+  return <Box is='span' rcx-field__error {...props} />;
 }
 
 export function Field(props) {
-  return <Box componentClassName='rcx-field' {...props} />;
+  return <Box rcx-field {...props} />;
 }
 
 Field.Label = FieldLabel;
diff --git a/packages/fuselage/src/components/FieldGroup/index.js b/packages/fuselage/src/components/FieldGroup/index.js
index f33f9271af..cb87c8e5ee 100644
--- a/packages/fuselage/src/components/FieldGroup/index.js
+++ b/packages/fuselage/src/components/FieldGroup/index.js
@@ -8,7 +8,7 @@ export function FieldGroup({
 }) {
   const wrappedChildren = useMemo(() =>
     React.Children.map(children, (child, index) =>
-      <Box key={index} componentClassName='rcx-field-group__item' children={child} />), [children]);
+      <Box key={index} rcx-field-group__item children={child} />), [children]);
 
-  return <Box componentClassName='rcx-field-group' is='fieldset' children={wrappedChildren} role='group' {...props} />;
+  return <Box is='fieldset' rcx-field-group children={wrappedChildren} role='group' {...props} />;
 }
diff --git a/packages/fuselage/src/components/Grid/index.js b/packages/fuselage/src/components/Grid/index.js
index e6e9b44a4c..baa456ade5 100644
--- a/packages/fuselage/src/components/Grid/index.js
+++ b/packages/fuselage/src/components/Grid/index.js
@@ -4,14 +4,14 @@ import React from 'react';
 import { Box } from '../Box';
 
 export function Grid({ xs, sm, md, lg, xl, ...props }) {
-  return <Box componentClassName='rcx-grid__wrapper'>
+  return <Box rcx-grid__wrapper>
     <Box
-      componentClassName='rcx-grid'
-      mod-xs={xs}
-      mod-sm={sm}
-      mod-md={md}
-      mod-lg={lg}
-      mod-xl={xl}
+      rcx-grid
+      rcx-grid--xs={xs}
+      rcx-grid--sm={sm}
+      rcx-grid--md={md}
+      rcx-grid--lg={lg}
+      rcx-grid--xl={xl}
       {...props}
     />
   </Box>;
@@ -27,12 +27,12 @@ Grid.propTypes = {
 
 export function GridItem({ xs, sm, md, lg, xl, ...props }) {
   return <Box
-    componentClassName='rcx-grid__item'
-    mod-xs={xs}
-    mod-sm={sm}
-    mod-md={md}
-    mod-lg={lg}
-    mod-xl={xl}
+    rcx-grid__item
+    rcx-grid__item--xs={xs}
+    rcx-grid__item--sm={sm}
+    rcx-grid__item--md={md}
+    rcx-grid__item--lg={lg}
+    rcx-grid__item--xl={xl}
     {...props}
   />;
 }
diff --git a/packages/fuselage/src/components/Headline/index.js b/packages/fuselage/src/components/Headline/index.js
index f982e1864d..8d9061809e 100644
--- a/packages/fuselage/src/components/Headline/index.js
+++ b/packages/fuselage/src/components/Headline/index.js
@@ -8,7 +8,7 @@ export function Headline({
   level = 1,
   ...props
 }) {
-  return <Box is={`h${ level }`} componentClassName='rcx-headline' {...props} />;
+  return <Box is={`h${ level }`} rcx-headline {...props} />;
 }
 
 Headline.propTypes = {
@@ -16,7 +16,7 @@ Headline.propTypes = {
 };
 
 export function HeadlineSkeleton(props) {
-  return <Box componentClassName='rcx-headline' {...props}>
+  return <Box rcx-headline {...props}>
     <Skeleton />
   </Box>;
 }
diff --git a/packages/fuselage/src/components/Icon/index.js b/packages/fuselage/src/components/Icon/index.js
index b4a86d7655..fb93ddca13 100644
--- a/packages/fuselage/src/components/Icon/index.js
+++ b/packages/fuselage/src/components/Icon/index.js
@@ -1,27 +1,23 @@
-import { css } from '@rocket.chat/css-in-js';
 import nameToCharacterMapping from '@rocket.chat/icons';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
-import { sizePropType, getSizeValue } from '../../propTypes/sizes';
 import { Box } from '../Box';
-import { useCss } from '../Box/useCss';
+import { sizePropType } from '../../styles/props/layout';
 
-export const Icon = React.forwardRef(function Icon({
-  className,
+export const Icon = forwardRef(function Icon({
   name,
   size,
   ...props
 }, ref) {
-  const iconSizeClassName = useCss(size ? css`font-size: ${ getSizeValue(size) };` : css``, [size]);
-
-  return <Box ref={ref}
+  return <Box
     is='i'
-    componentClassName='rcx-icon'
-    aria-hidden='true'
+    rcx-icon
+    rcx-icon--name={name}
     children={nameToCharacterMapping[name]}
-    className={[iconSizeClassName, className].filter(Boolean).join(' ')}
-    mod-name={name}
+    aria-hidden='true'
+    fontSize={size}
+    ref={ref}
     {...props}
   />;
 });
diff --git a/packages/fuselage/src/components/Icon/stories.mdx b/packages/fuselage/src/components/Icon/stories.mdx
index 5f3befd25b..23580bac51 100644
--- a/packages/fuselage/src/components/Icon/stories.mdx
+++ b/packages/fuselage/src/components/Icon/stories.mdx
@@ -9,7 +9,7 @@ import { Box, Hint, Icon } from '../..';
 # Icon
 
 <Story name='Default'>
-  <Box textColor='default' textStyle='p1'>
+  <Box color='default' textStyle='p1'>
     {Object.keys(namesToCharactersMapping).map((name) => <Icon key={name} name={name} size='x40' /> )}
   </Box>
 </Story>
@@ -38,7 +38,7 @@ export const styles = {
       <Box>
         <Icon name={name} size='x40' />
       </Box>
-      <Box textColor='hint'>{name}</Box>
+      <Box color='hint'>{name}</Box>
     </div>
   )}
 </div>
diff --git a/packages/fuselage/src/components/InputBox/Option.js b/packages/fuselage/src/components/InputBox/Option.js
index be9f08fbe0..92c2ed7bd7 100644
--- a/packages/fuselage/src/components/InputBox/Option.js
+++ b/packages/fuselage/src/components/InputBox/Option.js
@@ -3,10 +3,8 @@ import React, { forwardRef } from 'react';
 
 import { Box } from '../Box';
 
-const OptionContainer = Box.extend('rcx-input-box__option', 'option');
-
 export const Option = forwardRef(function Option(props, ref) {
-  return <OptionContainer ref={ref} {...props} />;
+  return <Box is='option' rcx-input-box__option ref={ref} {...props} />;
 });
 
 Option.propTypes = {
diff --git a/packages/fuselage/src/components/InputBox/Placeholder.js b/packages/fuselage/src/components/InputBox/Placeholder.js
index 7dfc3a436e..13f8a6d9a0 100644
--- a/packages/fuselage/src/components/InputBox/Placeholder.js
+++ b/packages/fuselage/src/components/InputBox/Placeholder.js
@@ -3,10 +3,8 @@ import React, { forwardRef } from 'react';
 
 import { Box } from '../Box';
 
-const PlaceholderContainer = Box.extend('rcx-input-box__placeholder', 'option');
-
 export const Placeholder = forwardRef(function Placeholder(props, ref) {
-  return <PlaceholderContainer ref={ref} {...props} />;
+  return <Box is='option' rcx-input-box__placeholder ref={ref} {...props} />;
 });
 
 Placeholder.propTypes = {
diff --git a/packages/fuselage/src/components/InputBox/index.js b/packages/fuselage/src/components/InputBox/index.js
index 37a21accdd..4a73852e11 100644
--- a/packages/fuselage/src/components/InputBox/index.js
+++ b/packages/fuselage/src/components/InputBox/index.js
@@ -9,9 +9,11 @@ import { Option } from './Option';
 import { Placeholder } from './Placeholder';
 import { Skeleton } from '../Skeleton';
 
-const Wrapper = (props) => <Box componentClassName='rcx-input-box__wrapper' is={Label} {...props}/>;
-const Input = Box.extend('rcx-input-box', 'input');
-const Addon = Box.extend('rcx-input-box__addon', 'span');
+const Wrapper = (props) => <Box is={Label} rcx-input-box__wrapper {...props}/>;
+
+const Input = forwardRef((props, ref) => <Box is='input' rcx-input-box ref={ref} {...props} />);
+
+const Addon = forwardRef((props, ref) => <Box is='span' rcx-input-box__addon ref={ref} {...props} />);
 
 export const InputBox = forwardRef(function InputBox({
   className,
@@ -63,21 +65,21 @@ export const InputBox = forwardRef(function InputBox({
       invisible={invisible}
       multiple={multiple}
       ref={mergedRef}
-      size={
+      htmlSize={
         (type === 'textarea' && undefined)
       || (type === 'select' && 1)
       || 1}
       type={type === 'textarea' || type === 'select' ? undefined : type}
       onChange={handleChange}
-      mod-multiple={multiple}
-      mod-placeholder-visible={placeholderVisible}
-      mod-type={type}
+      rcx-input-box--multiple={multiple}
+      rcx-input-box--placeholder-visible={placeholderVisible}
+      rcx-input-box--type={type}
       {...props}
     />;
   }
 
   return <Wrapper
-    className={[props.disabled && 'disabled', className].filter(Boolean).join(' ')}
+    className={[props.disabled && 'disabled', className]}
     hidden={hidden}
     invisible={invisible}
   >
@@ -93,16 +95,16 @@ export const InputBox = forwardRef(function InputBox({
       || 0}
       multiple={multiple}
       ref={mergedRef}
-      size={
+      htmlSize={
         (type === 'textarea' && undefined)
       || (type === 'select' && 1)
       || 1}
       type={type === 'textarea' || type === 'select' ? undefined : type}
       onChange={handleChange}
-      mod-multiple={multiple}
-      mod-placeholder-visible={placeholderVisible}
-      mod-type={type}
-      mod-undecorated
+      rcx-input-box--multiple={multiple}
+      rcx-input-box--placeholder-visible={placeholderVisible}
+      rcx-input-box--type={type}
+      rcx-input-box--undecorated
       {...props}
     />
     <Addon children={addon} />
@@ -157,7 +159,7 @@ InputBox.Placeholder = Placeholder;
 InputBox.Option = Option;
 
 export function InputBoxSkeleton(props) {
-  return <Box componentClassName='rcx-skeleton__input' {...props}>
+  return <Box rcx-skeleton__input {...props}>
     <Skeleton width='100%' />
   </Box>;
 }
diff --git a/packages/fuselage/src/components/Label/index.js b/packages/fuselage/src/components/Label/index.js
index 99fc86a930..f602084779 100644
--- a/packages/fuselage/src/components/Label/index.js
+++ b/packages/fuselage/src/components/Label/index.js
@@ -15,7 +15,7 @@ export function Label({
   const component = is || (isInsideLabel && 'span') || 'label';
 
   return <LabelContext.Provider value={true}>
-    <Box is={component} componentClassName='rcx-label' mod-disabled={disabled} mod-required={required} {...props} />
+    <Box is={component} rcx-label rcx-label--disabled={disabled} rcx-label--required={required} {...props} />
   </LabelContext.Provider>;
 }
 
diff --git a/packages/fuselage/src/components/Modal/Stack.js b/packages/fuselage/src/components/Modal/Stack.js
index 7bda4cc49c..bff57b6ce8 100644
--- a/packages/fuselage/src/components/Modal/Stack.js
+++ b/packages/fuselage/src/components/Modal/Stack.js
@@ -16,7 +16,7 @@ const createModalRoot = () => {
 export const ModalPortal = ({ children, rootElement = createModalRoot() }) =>
   ReactDOM.createPortal(children, rootElement);
 
-export const ModalBackdrop = (props) => <Box componentClassName='rcx-modal__backdrop' { ...props }/>;
+export const ModalBackdrop = (props) => <Box rcx-modal__backdrop {...props}/>;
 
 export function ModalContainer() {
   const { stack } = useModalStack();
diff --git a/packages/fuselage/src/components/Modal/index.js b/packages/fuselage/src/components/Modal/index.js
index 86da055606..99aa70dc84 100644
--- a/packages/fuselage/src/components/Modal/index.js
+++ b/packages/fuselage/src/components/Modal/index.js
@@ -9,7 +9,7 @@ import { ModalBackdrop, ModalContainer, ModalPortal, ModalStack } from './Stack'
 
 export const Modal = React.forwardRef(({ children, ...props }, ref) =>
   <Flex.Container>
-    <Box is='dialog' componentClassName='rcx-modal' { ...props }>
+    <Box is='dialog' rcx-modal { ...props }>
       <Flex.Container direction='column'>
         <Flex.Item grow={1}>
           <Tile ref={ref} elevation='2' className='rcx-modal__inner' padding='none'>
@@ -39,7 +39,7 @@ export const ModalThumb = (props) => <Avatar size='x32' {...props} />;
 
 export const ModalTitle = ({ children, ...props }) =>
   <Flex.Item grow={1} shrink={1}>
-    <Box componentClassName='rcx-modal__title' textColor='default' textStyle='h1' {...props}>
+    <Box rcx-modal__title color='default' textStyle='h1' {...props}>
       {children}
     </Box>
   </Flex.Item>;
@@ -52,9 +52,9 @@ export const ModalClose = (props) => <Flex.Item shrink={0}>
 
 export const ModalContent = ({ children, onScrollContent, ...props }) =>
   <Scrollable vertical onScrollContent={onScrollContent}>
-    <Box componentClassName='rcx-modal__content'>
+    <Box rcx-modal__content>
       <Margins inline='x32'>
-        <Box componentClassName='rcx-modal__content-wrapper' {...props}>
+        <Box rcx-modal__content-wrapper {...props}>
           {children}
         </Box>
       </Margins>
@@ -63,7 +63,7 @@ export const ModalContent = ({ children, onScrollContent, ...props }) =>
 
 export const ModalFooter = ({ children }) =>
   <Margins all='x32'>
-    <Box componentClassName='rcx-modal__footer'>
+    <Box rcx-modal__footer>
       {children}
     </Box>
   </Margins>;
diff --git a/packages/fuselage/src/components/Modal/styles.scss b/packages/fuselage/src/components/Modal/styles.scss
index 13a04b5a70..128fd544ad 100644
--- a/packages/fuselage/src/components/Modal/styles.scss
+++ b/packages/fuselage/src/components/Modal/styles.scss
@@ -24,7 +24,7 @@
     position: fixed;
 
     z-index: 100;
-    inset: lengths.inset(0);
+    inset: lengths.inset(none);
     top: 0;
     bottom: 0;
     left: 0;
diff --git a/packages/fuselage/src/components/Options/index.js b/packages/fuselage/src/components/Options/index.js
index 8232e7f0cc..92a3ae53c9 100644
--- a/packages/fuselage/src/components/Options/index.js
+++ b/packages/fuselage/src/components/Options/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useState, forwardRef } from 'react';
 
 
 import { AnimatedVisibility, Box, Flex, Margins, Scrollable } from '../Box';
@@ -16,23 +16,26 @@ export const ACTIONS = {
   ENTER: 13,
 };
 
-const merge = (...args) => args.filter((e) => e).join(' ');
-
-const prevent = (e) => e.preventDefault() & e.stopPropagation();
+const prevent = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
 
-const Li = Box.extend('rcx-option', 'li');
+const Li = forwardRef(function Li(props, ref) {
+  return <Box is='li' rcx-option ref={ref} {...props} />;
+});
 
-export const Empty = React.memo(() => <Box is='span' textStyle='p1' textColor='hint'>Empty</Box>);
+export const Empty = React.memo(() => <Box is='span' textStyle='p1' color='hint'>Empty</Box>);
 
-export const Option = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} mod-focus={focus} id={id} mod-selected={selected} aria-selected={selected} {...options}>{label}</Li>);
+export const Option = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>{label}</Li>);
 
-export const CheckOption = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} mod-focus={focus} id={id} aria-selected={selected} {...options}><Margins inline='x4'><CheckBox checked={selected} /></Margins><Margins inline='x4'><Box is='span' textStyle='p1' textColor='default'>{label}</Box></Margins></Li>);
+export const CheckOption = React.memo(({ id, children: label, focus, selected, ...options }) => <Li key={id} rcx-option--focus={focus} id={id} aria-selected={selected} {...options}><Margins inline='x4'><CheckBox checked={selected} /></Margins><Margins inline='x4'><Box is='span' textStyle='p1' color='default'>{label}</Box></Margins></Li>);
 
 export const OptionAvatar = React.memo(({ id, value, children: label, focus, selected, ...options }) => (
   <Flex.Container>
-    <Li key={id} mod-focus={focus} id={id} mod-selected={selected} aria-selected={selected} {...options}>
+    <Li key={id} rcx-option--focus={focus} id={id} rcx-option--selected={selected} aria-selected={selected} {...options}>
       <Margins inline='x4'><Avatar size='x20' url={value} tile={label}/></Margins>
-      <Margins inline='x4'><Box is='span' textStyle='p1' textColor='default'>{label}</Box></Margins>
+      <Margins inline='x4'><Box is='span' textStyle='p1' color='default'>{label}</Box></Margins>
     </Li>
   </Flex.Container>
 ));
@@ -41,7 +44,6 @@ export const Options = React.forwardRef(({
   maxHeight = '144px',
   multiple,
   renderEmpty: EmptyComponent = Empty,
-  className,
   options,
   cursor,
   renderItem: OptionComponent = Option,
@@ -58,11 +60,11 @@ export const Options = React.forwardRef(({
       current.scrollTop = li.offsetTop;
     }
   }, [cursor]);
-  return <Box className={merge('rcx-options', className)} is='div' {...props}>
+  return <Box rcx-options is='div' {...props}>
     <Tile padding='x8' elevation='2'>
       <Scrollable vertical smooth>
         <Margins blockStart='x4'>
-          <Tile ref={ref} elevation='0' padding='none' style={{ maxHeight }} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
+          <Tile ref={ref} elevation='0' padding='none' maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
             {!options.length && <EmptyComponent/>}
             {options.map(([value, label, selected], i) => <OptionComponent role='option' onMouseDown={(e) => prevent(e) & onSelect([value, label]) && false} key={value} value={value} selected={selected || (multiple !== true && null)} focus={cursor === i || null}>{label}</OptionComponent>)}
           </Tile>
diff --git a/packages/fuselage/src/components/Options/stories.mdx b/packages/fuselage/src/components/Options/stories.mdx
index 09796892e7..ee5fcbc7d9 100644
--- a/packages/fuselage/src/components/Options/stories.mdx
+++ b/packages/fuselage/src/components/Options/stories.mdx
@@ -20,7 +20,7 @@ An input for selection of options.
 
 <Preview>
   <Story name='Default'>
-    <Box style={{ position: 'relative', maxWidth: 250 }} >
+    <Box position='relative' maxWidth={250}>
       <Options ref={React.createRef()} options={options}  cursor={1} />
     </Box>
   </Story>
@@ -30,7 +30,7 @@ An input for selection of options.
 
 <Preview>
   <Story name='CheckOption'>
-    <Box style={{ position: 'relative', maxWidth: 250 }} >
+    <Box position='relative' maxWidth={250}>
       <Options ref={React.createRef()} renderItem={CheckOption} options={options} value={[1]} cursor={0}/>
     </Box>
   </Story>
@@ -38,7 +38,7 @@ An input for selection of options.
 
 <Preview>
   <Story name='OptionAvatar'>
-    <Box style={{ position: 'relative', maxWidth: 250 }} >
+    <Box position='relative' maxWidth={250}>
       <Options ref={React.createRef()} renderItem={(props) => <OptionAvatar {...props} value={thumb}/>}  options={options} />
     </Box>
   </Story>
diff --git a/packages/fuselage/src/components/Pagination/index.js b/packages/fuselage/src/components/Pagination/index.js
index 6a92821081..2bdd94ba0a 100644
--- a/packages/fuselage/src/components/Pagination/index.js
+++ b/packages/fuselage/src/components/Pagination/index.js
@@ -4,16 +4,6 @@ import React, { useMemo } from 'react';
 import { Box } from '../Box';
 import { Chevron } from '../Chevron';
 
-const Container = Box.extend('rcx-pagination', 'nav');
-const Left = Box.extend('rcx-pagination__left');
-const Right = Box.extend('rcx-pagination__right');
-const Label = Box.extend('rcx-pagination__label', 'span');
-const List = Box.extend('rcx-pagination__list', 'ol');
-const ListItem = Box.extend('rcx-pagination__list-item', 'li');
-const Link = Box.extend('rcx-pagination__link', 'button');
-const BackLink = Box.extend('rcx-pagination__back', 'button');
-const ForwardLink = Box.extend('rcx-pagination__forward', 'button');
-
 const defaultItemsPerPageLabel = () => 'Items per page:';
 
 const defaultShowingResultsLabel = ({ count, current, itemsPerPage }) =>
@@ -65,44 +55,57 @@ export function Pagination({
     onSetCurrent && onSetCurrent(page * itemsPerPage);
   };
 
-  return <Container mod-divider={divider} {...props}>
+  return <Box is='nav' rcx-pagination rcx-pagination--divider={divider} {...props}>
     {hasItemsPerPageSelection && (
-      <Left>
-        <Label>{itemsPerPageLabel(renderingContext)}</Label>
-        <List>
+      <Box rcx-pagination__left>
+        <Box is='span' rcx-pagination__label>{itemsPerPageLabel(renderingContext)}</Box>
+        <Box is='ol' rcx-pagination__list>
           {itemsPerPageOptions.map((itemsPerPageOption) =>
-            <ListItem key={itemsPerPageOption}>
-              <Link tabIndex={ itemsPerPage === itemsPerPageOption ? -1 : 0 } disabled={itemsPerPage === itemsPerPageOption} onClick={handleSetItemsPerPageLinkClick(itemsPerPageOption)}>
+            <Box key={itemsPerPageOption} is='li' rcx-pagination__list-item>
+              <Box
+                is='button'
+                rcx-pagination__link
+                tabIndex={ itemsPerPage === itemsPerPageOption ? -1 : 0 }
+                disabled={itemsPerPage === itemsPerPageOption}
+                onClick={handleSetItemsPerPageLinkClick(itemsPerPageOption)}
+              >
                 {itemsPerPageOption}
-              </Link>
-            </ListItem>,
+              </Box>
+            </Box>,
           )}
-        </List>
-      </Left>
+        </Box>
+      </Box>
     )}
-    <Right>
-      <Label>{showingResultsLabel(renderingContext)}</Label>
-      <List>
-        <ListItem>
-          <BackLink disabled={currentPage === 0} onClick={handleSetPageLinkClick(currentPage - 1)}>
+    <Box rcx-pagination__right>
+      <Box is='span' rcx-pagination__label>{showingResultsLabel(renderingContext)}</Box>
+      <Box is='ol' rcx-pagination__list>
+        <Box is='li' rcx-pagination__list-item>
+          <Box is='button' rcx-pagination__back disabled={currentPage === 0} onClick={handleSetPageLinkClick(currentPage - 1)}>
             <Chevron left size='x16' />
-          </BackLink>
-        </ListItem>
+          </Box>
+        </Box>
         {displayedPages.map((page, i) => (
-          <ListItem key={i}>
+          <Box key={i} is='li' rcx-pagination__list-item>
             {page === '⋯'
               ? '⋯'
-              : <Link disabled={currentPage === page} onClick={handleSetPageLinkClick(page)}>{page + 1}</Link>}
-          </ListItem>
+              : <Box
+                is='button'
+                rcx-pagination__link
+                disabled={currentPage === page}
+                onClick={handleSetPageLinkClick(page)}
+              >
+                {page + 1}
+              </Box>}
+          </Box>
         ))}
-        <ListItem>
-          <ForwardLink disabled={currentPage === pages - 1} onClick={handleSetPageLinkClick(currentPage + 1)}>
+        <Box is='li' rcx-pagination__list-item>
+          <Box is='button' rcx-pagination__forward disabled={currentPage === pages - 1} onClick={handleSetPageLinkClick(currentPage + 1)}>
             <Chevron right size='x16' />
-          </ForwardLink>
-        </ListItem>
-      </List>
-    </Right>
-  </Container>;
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  </Box>;
 }
 
 Pagination.defaultProps = {
diff --git a/packages/fuselage/src/components/RadioButton/index.js b/packages/fuselage/src/components/RadioButton/index.js
index 8b305c88be..8d31396328 100644
--- a/packages/fuselage/src/components/RadioButton/index.js
+++ b/packages/fuselage/src/components/RadioButton/index.js
@@ -22,10 +22,10 @@ export const RadioButton = forwardRef(function RadioButton({
   onInvalid,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-radio-button' {...props}>
+  return <Box is={Label} rcx-radio-button {...props}>
     <Box
       is='input'
-      componentClassName='rcx-radio-button__input'
+      rcx-radio-button__input
       autoComplete={autoComplete}
       checked={checked}
       defaultChecked={defaultChecked}
@@ -43,7 +43,7 @@ export const RadioButton = forwardRef(function RadioButton({
       onInput={onInput}
       onInvalid={onInvalid}
     />
-    <Box is='i' componentClassName='rcx-radio-button__fake' aria-hidden='true' />
+    <Box is='i' rcx-radio-button__fake aria-hidden='true' />
   </Box>;
 });
 
diff --git a/packages/fuselage/src/components/RadioButton/styles.scss b/packages/fuselage/src/components/RadioButton/styles.scss
index 116d5d1c6c..24043996fa 100644
--- a/packages/fuselage/src/components/RadioButton/styles.scss
+++ b/packages/fuselage/src/components/RadioButton/styles.scss
@@ -15,8 +15,8 @@
 
   &__input:checked + &__fake::before {
     position: absolute;
-    inset-block-start: lengths.inset(50%);
-    inset-inline-start: lengths.inset(50%);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
 
     display: block;
 
diff --git a/packages/fuselage/src/components/Select/MultiSelect.js b/packages/fuselage/src/components/Select/MultiSelect.js
index 878d14f59d..e88c1f57c2 100644
--- a/packages/fuselage/src/components/Select/MultiSelect.js
+++ b/packages/fuselage/src/components/Select/MultiSelect.js
@@ -7,12 +7,14 @@ import { InputBox } from '../InputBox';
 import { Options, CheckOption, useCursor } from '../Options';
 import { Focus, Addon } from './Select';
 
-const Container = Box.extend('rcx-select', 'div');
-
 const SelectedOptions = React.memo((props) => <Chip {...props}/>);
 
+const prevent = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  e.nativeEvent.stopImmediatePropagation();
+};
 
-const prevent = (e) => e.preventDefault() & e.stopPropagation() & e.nativeEvent.stopImmediatePropagation();
 export const MultiSelect = ({
   value,
   filter,
@@ -60,19 +62,25 @@ export const MultiSelect = ({
   const ref = useRef();
   const containerRef = useRef();
   return (
-    <Container className={
-      [
+    <Box
+      is='div'
+      rcx-select
+      className={[
         error && 'invalid',
         disabled && 'disabled',
-      ].filter(Boolean).join(' ')
-    } ref={containerRef} onClick={() => ref.current.focus() & show()} disabled={disabled} {...props}>
+      ]}
+      ref={containerRef}
+      onClick={() => ref.current.focus() & show()}
+      disabled={disabled}
+      {...props}
+    >
       <Flex.Item grow={1}>
         <Margins inline='x4'>
           <Flex.Container>
             <Box is='div'>
               <Margins all='neg-x8'>
                 <Chip.Wrapper role='listbox'>
-                  <Anchor disabled={disabled} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} style={{ order: 1 }} mod-undecorated children={!value ? option || placeholder : null}/>
+                  <Anchor disabled={disabled} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} order={1} rcx-input-box--undecorated children={!value ? option || placeholder : null}/>
                   {currentValue.map((value) => <SelectedOptions tabIndex={-1} role='option' key={value} onMouseDown={(e) => prevent(e) & internalChanged([value]) && false} children={getLabel(options.find(([val]) => val === value))}/>)}
                 </Chip.Wrapper>
               </Margins>
@@ -86,7 +94,7 @@ export const MultiSelect = ({
         </Margins>
       </Flex.Item>
       <AnimatedVisibility visibility={visible}><Position anchor={containerRef}><_Options onMouseDown={prevent} multiple filter={filter} renderItem={CheckOption} role='listbox' options={filteredOptions} onSelect={internalChanged} cursor={cursor} /></Position></AnimatedVisibility>
-    </Container>);
+    </Box>);
 };
 
 export const MultiSelectFiltered = ({
@@ -95,6 +103,6 @@ export const MultiSelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Flex.Item grow={1}><InputBox.Input ref={ref} placeholder={placeholder} value={filter} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Flex.Item grow={1}><InputBox.Input ref={ref} placeholder={placeholder} value={filter} onInput={(e) => setFilter(e.currentTarget.value)} {...props} rcx-input-box--undecorated /></Flex.Item>), []);
   return <MultiSelect filter={filter} options={options} {...props} anchor={anchor}/>;
 };
diff --git a/packages/fuselage/src/components/Select/Select.js b/packages/fuselage/src/components/Select/Select.js
index f8d23df13b..3f01a5f453 100644
--- a/packages/fuselage/src/components/Select/Select.js
+++ b/packages/fuselage/src/components/Select/Select.js
@@ -1,15 +1,15 @@
-import React, { useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useLayoutEffect, useRef, useCallback, useEffect, forwardRef } from 'react';
 
 import { PositionAnimated, Box, Flex, Margins, AnimatedVisibility } from '../Box';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
 import { Options, useCursor } from '../Options';
 
-export const Addon = Box.extend('rcx-select__addon', 'div');
+export const Addon = forwardRef((props, ref) => <Box is='div' rcx-select__addon ref={ref} {...props} />);
 
-const Wrapper = Box.extend('rcx-select__wrapper', 'div');
+const Wrapper = forwardRef((props, ref) => <Box is='div' rcx-select__wrapper ref={ref} {...props} />);
 
-export const Focus = React.forwardRef((props, ref) => <Box ref={ref} textStyle='p2' textColor='hint' componentClassName='rcx-select__focus' is='button' type='button' {...props}/>);
+export const Focus = React.forwardRef((props, ref) => <Box ref={ref} textStyle='p2' color='hint' rcx-select__focus is='button' type='button' {...props}/>);
 
 export const Select = ({
   value,
@@ -68,26 +68,22 @@ export const Select = ({
 
   const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || (placeholder || typeof placeholder === 'string'));
   return (
-    <Box componentClassName='rcx-select' disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={
-      [
-
-        error && 'invalid',
-        disabled && 'disabled',
-
-      ].filter(Boolean).join(' ')
-    }
-    { ...props }
+    <Box rcx-select disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={[
+      error && 'invalid',
+      disabled && 'disabled',
+    ]}
+    {...props}
     >
       <Flex.Item>
         <Flex.Container>
           <Margins inline='neg-x4'>
-            <Wrapper mod-hidden={!!visibleText}>
+            <Wrapper rcx-select__wrapper--hidden={!!visibleText}>
               { visibleText && <Flex.Item grow={1} shrink={1}>
                 <Margins inline='x4'>
-                  <Box is='span' componentClassName='rcx-select__item' textStyle='p2' textColor={ valueLabel ? 'default' : 'hint' }>{visibleText}</Box>
+                  <Box is='span' rcx-select__item textStyle='p2' color={valueLabel ? 'default' : 'hint'}>{visibleText}</Box>
                 </Margins>
               </Flex.Item>}
-              <Anchor disabled={disabled} mod-undecorated={true} filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
+              <Anchor disabled={disabled} rcx-input-box--undecorated filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
               <Margins inline='x4'><Addon children={<Icon name={ visible === AnimatedVisibility.VISIBLE ? 'cross' : 'arrow-down'} size='x20' />}/></Margins>
             </Wrapper>
           </Margins>
@@ -103,6 +99,6 @@ export const SelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1} shrink={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} mod-undecorated={true}/></Flex.Item></Margins>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1} shrink={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} rcx-input-box--undecorated /></Flex.Item></Margins>), []);
   return <Select placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
 };
diff --git a/packages/fuselage/src/components/Select/stories.mdx b/packages/fuselage/src/components/Select/stories.mdx
index 728b5d78f2..7096922724 100644
--- a/packages/fuselage/src/components/Select/stories.mdx
+++ b/packages/fuselage/src/components/Select/stories.mdx
@@ -27,19 +27,19 @@ An input for selection of options.
 
 <Preview>
   <Story name='Default'>
-    <Select style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
+    <Select width='250px' placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Error'>
-    <Select style={{ width: '250px' }}  error placeholder="Placeholder here..." options={options}/>
+    <Select width='250px' error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Disabled'>
-    <Select style={{ width: '250px' }}  disabled placeholder="Placeholder here..." options={options}/>
+    <Select width='250px' disabled placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
@@ -47,7 +47,7 @@ An input for selection of options.
 
 <Preview>
   <Story name='No Placeholder'>
-    <Select style={{ width: '250px' }}  options={options}/>
+    <Select width='250px' options={options}/>
   </Story>
 </Preview>
 
@@ -59,27 +59,27 @@ An input for selection of options.
 
 <Preview>
   <Story name='Select with filter'>
-    <SelectFiltered style={{ width: '250px' }} placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered width='250px' placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 
 <Preview>
   <Story name='Select with filter and ellipses'>
-    <SelectFiltered style={{ width: '250px' }} value={11} placeholder="Placeholder here..." options={optionsEllipses}/>
+    <SelectFiltered width='250px' value={11} placeholder="Placeholder here..." options={optionsEllipses}/>
   </Story>
 </Preview>
 
 <Preview>
   <Story name='Select with filter and error'>
-    <SelectFiltered style={{ width: '250px' }} error placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered width='250px' error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
 
 <Preview>
   <Story name='Select with filter and disabled'>
-    <SelectFiltered style={{ width: '250px' }} disabled error placeholder="Placeholder here..." options={options}/>
+    <SelectFiltered width='250px' disabled error placeholder="Placeholder here..." options={options}/>
   </Story>
 </Preview>
 
diff --git a/packages/fuselage/src/components/SelectInput/stories.mdx b/packages/fuselage/src/components/SelectInput/stories.mdx
index 1d64ed556e..654d93c02c 100644
--- a/packages/fuselage/src/components/SelectInput/stories.mdx
+++ b/packages/fuselage/src/components/SelectInput/stories.mdx
@@ -30,7 +30,7 @@ multiple selection of options.
 
 <Preview>
   <Story name='Multiple'>
-    <SelectInput multiple size={3} value={['b', 'c']}>
+    <SelectInput multiple htmlSize={3} value={['b', 'c']}>
       <SelectInput.Option value='a'>Item A</SelectInput.Option>
       <SelectInput.Option value='b'>Item B</SelectInput.Option>
       <SelectInput.Option value='c'>Item C</SelectInput.Option>
@@ -59,7 +59,7 @@ There is a subtle difference in the way the `addon` prop is handled: it is ignor
 
 <Preview>
   <Story name='Multiple With Addon'>
-    <SelectInput multiple size={3} addon={<Icon name='discover' size='x20' />}>
+    <SelectInput multiple htmlSize={3} addon={<Icon name='discover' size='x20' />}>
       <SelectInput.Option value='a'>Item A</SelectInput.Option>
       <SelectInput.Option value='b'>Item B</SelectInput.Option>
       <SelectInput.Option value='c'>Item C</SelectInput.Option>
diff --git a/packages/fuselage/src/components/Skeleton/index.js b/packages/fuselage/src/components/Skeleton/index.js
index 2710d1b664..476e3578a3 100644
--- a/packages/fuselage/src/components/Skeleton/index.js
+++ b/packages/fuselage/src/components/Skeleton/index.js
@@ -4,23 +4,18 @@ import React from 'react';
 import { Box } from '../Box';
 
 export function Skeleton({
-  height,
   variant = 'text',
-  width,
   ...props
 }) {
   return <Box
     is='span'
-    componentClassName='rcx-skeleton'
-    style={{ width, height }}
-    mod-text={variant === 'text'}
-    mod-rect={variant === 'rect'}
+    rcx-skeleton
+    rcx-skeleton--text={variant === 'text'}
+    rcx-skeleton--rect={variant === 'rect'}
     {...props}
   />;
 }
 
 Skeleton.propTypes = {
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: PropTypes.oneOf(['text', 'rect']),
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
diff --git a/packages/fuselage/src/components/Subtitle/index.js b/packages/fuselage/src/components/Subtitle/index.js
index 4f08fb4679..9639a7d2a7 100644
--- a/packages/fuselage/src/components/Subtitle/index.js
+++ b/packages/fuselage/src/components/Subtitle/index.js
@@ -8,7 +8,7 @@ export function Subtitle({
   level = 2,
   ...props
 }) {
-  return <Box is={`h${ level }`} componentClassName='rcx-subtitle' {...props} />;
+  return <Box is={`h${ level }`} rcx-subtitle {...props} />;
 }
 
 Subtitle.propTypes = {
@@ -16,7 +16,7 @@ Subtitle.propTypes = {
 };
 
 export function SubtitleSkeleton(props) {
-  return <Box componentClassName='rcx-subtitle' {...props}>
+  return <Box rcx-subtitle {...props}>
     <Skeleton />
   </Box>;
 }
diff --git a/packages/fuselage/src/components/Table/index.js b/packages/fuselage/src/components/Table/index.js
index 8b6b4299df..5359a1b956 100644
--- a/packages/fuselage/src/components/Table/index.js
+++ b/packages/fuselage/src/components/Table/index.js
@@ -9,7 +9,7 @@ const style = {
 };
 
 export function Selection({ children, text, ...props }) {
-  return <Box textColor='alternative' componentClassName='rcx-table__selection' display='flex' alignItems='center' justifyContent='space-between' {...props} pi='x24'>
+  return <Box color='alternative' rcx-table__selection display='flex' alignItems='center' justifyContent='space-between' {...props} pi='x24'>
     <Box textStyle='p2' mb='x16' flexShrink={1} style={style}>{text}</Box>
     { children && <Box mi='neg-x8' textStyle='p2' flexShrink={0} ><Margins inline='x4'>{children}</Margins></Box> }
   </Box>;
@@ -27,13 +27,13 @@ export function Table({
   fixed = false,
   ...props
 }) {
-  return <Box componentClassName='rcx-table__wrapper'>
+  return <Box rcx-table__wrapper>
     <Box
       is='table'
-      componentClassName='rcx-table'
-      mod-fixed={fixed}
-      mod-sticky={sticky}
-      mod-striped={striped}
+      rcx-table
+      rcx-table--fixed={fixed}
+      rcx-table--sticky={sticky}
+      rcx-table--striped={striped}
       {...props}
     />
   </Box>;
@@ -45,20 +45,26 @@ const TableHeadContext = createContext(false);
 
 export function TableHead(props) {
   return <TableHeadContext.Provider value={true}>
-    <Box is='thead' componentClassName='rcx-table__head' {...props}></Box>
+    <Box is='thead' rcx-table__head {...props}></Box>
   </TableHeadContext.Provider>;
 }
 
 export function TableBody(props) {
-  return <Box is='tbody' componentClassName='rcx-table__body' {...props} />;
+  return <Box is='tbody' rcx-table__body {...props} />;
 }
 
 export function TableFoot(props) {
-  return <Box is='tfoot' componentClassName='rcx-table__foot' {...props} />;
+  return <Box is='tfoot' rcx-table__foot {...props} />;
 }
 
 export function TableRow({ action, selected, ...props }) {
-  return <Box is='tr' componentClassName='rcx-table__row' mod-selected={selected} mod-action={action} {...props} />;
+  return <Box
+    is='tr'
+    rcx-table__row
+    rcx-table__row--selected={selected}
+    rcx-table__row--action={action}
+    {...props}
+  />;
 }
 
 export function TableCell({
@@ -69,12 +75,10 @@ export function TableCell({
   const isInsideHead = useContext(TableHeadContext);
   return <Box
     is={isInsideHead ? 'th' : 'td'}
-    componentClassName='rcx-table__cell'
-    textStyle='p1'
-    textColor='default'
-    mod-align={align}
-    mod-header={isInsideHead}
-    mod-clickable={clickable}
+    rcx-table__cell
+    rcx-table__cell--align={align}
+    rcx-table__cell--header={isInsideHead}
+    rcx-table__cell--clickable={clickable}
     {...props}
   />;
 }
diff --git a/packages/fuselage/src/components/Tabs/index.js b/packages/fuselage/src/components/Tabs/index.js
index 7c04ba7b94..fdc17cf317 100644
--- a/packages/fuselage/src/components/Tabs/index.js
+++ b/packages/fuselage/src/components/Tabs/index.js
@@ -7,9 +7,9 @@ export function Tabs({
   children,
   ...props
 }) {
-  return <Box is='div' componentClassName='rcx-tabs' {...props}>
-    <Box is='div' componentClassName='rcx-tabs__scroll-box'>
-      <Box is='div' p='x4' componentClassName='rcx-tabs__wrapper' children={children} role='tablist'/>
+  return <Box is='div' rcx-tabs {...props}>
+    <Box is='div' rcx-tabs__scroll-box>
+      <Box is='div' p='x4' rcx-tabs__wrapper children={children} role='tablist'/>
     </Box>
   </Box>;
 }
@@ -20,9 +20,9 @@ export const TabsItem = forwardRef(function TabsItem({
 }, ref) {
   return <Box
     is='button'
-    componentClassName='rcx-tabs__item'
+    rcx-tabs__item
+    rcx-tabs__item--selected={selected}
     aria-selected={selected ? 'true' : 'false'}
-    mod-selected={selected}
     ref={ref}
     role='tab'
     {...props}
diff --git a/packages/fuselage/src/components/Tag/index.js b/packages/fuselage/src/components/Tag/index.js
index 17af2b1eb3..7d2aa599ba 100644
--- a/packages/fuselage/src/components/Tag/index.js
+++ b/packages/fuselage/src/components/Tag/index.js
@@ -11,15 +11,15 @@ export function Tag({
   ...props
 }) {
   return <Box
-    componentClassName='rcx-tag'
     is='span'
-    mod-secondary={variant === 'secondary'}
-    mod-primary={variant === 'primary'}
-    mod-danger={variant === 'danger'}
-    mod-ghost={variant === 'ghost'}
-    mod-disabled={!!disabled}
-    mod-round={!!round}
-    mod-clickable={!!onClick}
+    rcx-tag
+    rcx-tag--secondary={variant === 'secondary'}
+    rcx-tag--primary={variant === 'primary'}
+    rcx-tag--danger={variant === 'danger'}
+    rcx-tag--ghost={variant === 'ghost'}
+    rcx-tag--disabled={!!disabled}
+    rcx-tag--round={!!round}
+    rcx-tag--clickable={!!onClick}
     onClick={onClick}
     {...props}
   />;
diff --git a/packages/fuselage/src/components/Throbber/index.js b/packages/fuselage/src/components/Throbber/index.js
index c3f7569a45..01a1d01c82 100644
--- a/packages/fuselage/src/components/Throbber/index.js
+++ b/packages/fuselage/src/components/Throbber/index.js
@@ -3,23 +3,19 @@ import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
 import { Box } from '../Box';
-import { useCss } from '../Box/useCss';
-import { getSizeValue, sizePropType } from '../../propTypes/sizes';
-
-function Circle({ disabled, size, circleCount, iteration, inheritColor }) {
-  const circleClassName = useCss(css`
-    animation-duration: ${ circleCount * 0.466 }s;
-    animation-delay: ${ iteration * 0.16 }s;
-    width: ${ getSizeValue(size) };
-    height: ${ getSizeValue(size) };
-  `, [circleCount, iteration]);
+import { sizePropType } from '../../styles/props/layout';
 
+function Circle({ disabled, circleCount, iteration, inheritColor, ...props }) {
   return <Box
-    componentClassName='rcx-throbber__circle'
     is='span'
-    className={circleClassName}
-    mod-disabled={disabled}
-    mod-inherit-color={inheritColor}
+    className={css`
+      animation-duration: ${ circleCount * 0.466 }s;
+      animation-delay: ${ iteration * 0.16 }s;
+    `}
+    rcx-throbber__circle
+    rcx-throbber__circle--disabled={disabled}
+    rcx-throbber__circle--inherit-color={inheritColor}
+    {...props}
   />;
 }
 
@@ -31,7 +27,7 @@ export const Throbber = forwardRef(function Throbber({
   ...props
 }, ref) {
   return <Box
-    componentClassName='rcx-throbber'
+    rcx-throbber
     ref={ref}
     {...props}
   >
diff --git a/packages/fuselage/src/components/Throbber/stories.mdx b/packages/fuselage/src/components/Throbber/stories.mdx
index ec0dd70879..0c5aa6a05c 100644
--- a/packages/fuselage/src/components/Throbber/stories.mdx
+++ b/packages/fuselage/src/components/Throbber/stories.mdx
@@ -28,7 +28,7 @@ Indicates content that has not loaded yet.
 
 <Preview>
   <Story name='Inside Button'>
-    <Button style={{minHeight:'40px'}}>
+    <Button minHeight='x40'>
       <Throbber size='x12'/>
     </Button>
   </Story>
@@ -39,10 +39,10 @@ Indicates content that has not loaded yet.
 <Preview>
   <Story name='Inside Button, inherit color'>
     <Box>
-      <Button primary danger style={{minHeight:'40px', marginInlineEnd: '5px'}}>
+      <Button primary danger minHeight='x40' marginInlineEnd='5px'>
         <Throbber size='x12' inheritColor/>
       </Button>
-      <Button primary style={{minHeight:'40px'}}>
+      <Button primary minHeight='x40'>
         <Throbber size='x12' inheritColor/>
       </Button>
     </Box>
diff --git a/packages/fuselage/src/components/Tile/index.js b/packages/fuselage/src/components/Tile/index.js
index 63e2325bb5..ed3627df7e 100644
--- a/packages/fuselage/src/components/Tile/index.js
+++ b/packages/fuselage/src/components/Tile/index.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 
-import { paddingPropType } from '../../propTypes/paddings';
 import { Box } from '../Box';
 
 export const Tile = forwardRef(function Tile({
@@ -11,8 +10,8 @@ export const Tile = forwardRef(function Tile({
 }, ref) {
   return <Box
     ref={ref}
-    componentClassName='rcx-tile'
-    mod-elevation={elevation}
+    rcx-tile
+    rcx-tile--elevation={elevation}
     {...props}
   />;
 });
@@ -24,5 +23,4 @@ Tile.defaultProps = {
 
 Tile.propTypes = {
   elevation: PropTypes.oneOf(['0', '1', '2']).isRequired,
-  padding: paddingPropType.isRequired,
 };
diff --git a/packages/fuselage/src/components/ToggleSwitch/index.js b/packages/fuselage/src/components/ToggleSwitch/index.js
index 9c8ca8f6f6..a862ffbc62 100644
--- a/packages/fuselage/src/components/ToggleSwitch/index.js
+++ b/packages/fuselage/src/components/ToggleSwitch/index.js
@@ -22,10 +22,10 @@ export const ToggleSwitch = forwardRef(function ToggleSwitch({
   onInvalid,
   ...props
 }, ref) {
-  return <Box is={Label} componentClassName='rcx-toggle-switch' {...props}>
+  return <Box is={Label} rcx-toggle-switch {...props}>
     <Box
       is='input'
-      componentClassName='rcx-toggle-switch__input'
+      rcx-toggle-switch__input
       autoComplete={autoComplete}
       checked={checked}
       defaultChecked={defaultChecked}
@@ -43,7 +43,7 @@ export const ToggleSwitch = forwardRef(function ToggleSwitch({
       onInput={onInput}
       onInvalid={onInvalid}
     />
-    <Box is='i' componentClassName='rcx-toggle-switch__fake' aria-hidden='true' />
+    <Box is='i' rcx-toggle-switch__fake aria-hidden='true' />
   </Box>;
 });
 
diff --git a/packages/fuselage/src/components/Tooltip/index.js b/packages/fuselage/src/components/Tooltip/index.js
index f12503ac50..137e95ad9e 100644
--- a/packages/fuselage/src/components/Tooltip/index.js
+++ b/packages/fuselage/src/components/Tooltip/index.js
@@ -19,9 +19,9 @@ export function Tooltip({
 
   return <Box
     is='div'
-    componentClassName='rcx-tooltip'
-    mod-dir={direction}
-    mod-pos={position}
+    rcx-tooltip
+    rcx-tooltip--dir={direction}
+    rcx-tooltip--pos={position}
     {...props}
   />;
 }
diff --git a/packages/fuselage/src/components/Tooltip/styles.scss b/packages/fuselage/src/components/Tooltip/styles.scss
index 77a71bab76..290f12654c 100644
--- a/packages/fuselage/src/components/Tooltip/styles.scss
+++ b/packages/fuselage/src/components/Tooltip/styles.scss
@@ -90,7 +90,7 @@ $tooltip-text-color: theme('tooltip-text-color', colors.surface());
   &--pos {
     &-center {
       &::after {
-        inset-inline-start: lengths.inset(50%);
+        inset-inline-start: 50%;
 
         margin-inline-start: lengths.margin(-4);
       }
diff --git a/packages/fuselage/src/propTypes/margins.js b/packages/fuselage/src/propTypes/margins.js
deleted file mode 100644
index 545b5b3140..0000000000
--- a/packages/fuselage/src/propTypes/margins.js
+++ /dev/null
@@ -1,63 +0,0 @@
-const none = '0px';
-const auto = 'auto';
-const x1 = `${ 1 / 16 }rem`;
-const x2 = `${ 2 / 16 }rem`;
-
-const specialValues = {
-  none,
-  auto,
-  x1,
-  x2,
-  'neg-x1': `-${ x1 }`,
-  'neg-x2': `-${ x2 }`,
-};
-
-export const getMarginValue = (propValue) => {
-  if (propValue === undefined || propValue === null) {
-    return;
-  }
-
-  if (specialValues[propValue]) {
-    return specialValues[propValue];
-  }
-
-  if (typeof propValue === 'number') {
-    return `${ propValue }px`;
-  }
-
-  if (typeof propValue !== 'string') {
-    return;
-  }
-
-  const matches = /^(neg-)?x(\d+)$/.exec(String(propValue));
-
-  if (matches) {
-    const value = (matches[1] === 'neg-' ? -1 : 1) * parseInt(matches[2], 10);
-
-    if (Number.isInteger(value) && value % 4 === 0) {
-      return `${ value / 16 }rem`;
-    }
-  }
-
-  return propValue;
-};
-
-export const marginPropType = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue === undefined || getMarginValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
-
-marginPropType.isRequired = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue !== undefined && getMarginValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
diff --git a/packages/fuselage/src/propTypes/paddings.js b/packages/fuselage/src/propTypes/paddings.js
deleted file mode 100644
index 60d41fea7d..0000000000
--- a/packages/fuselage/src/propTypes/paddings.js
+++ /dev/null
@@ -1,59 +0,0 @@
-const none = '0px';
-const x1 = `${ 1 / 16 }rem`;
-const x2 = `${ 2 / 16 }rem`;
-
-const specialValues = {
-  none,
-  x1,
-  x2,
-};
-
-export const getPaddingValue = (propValue) => {
-  if (propValue === undefined || propValue === null) {
-    return;
-  }
-
-  if (specialValues[propValue]) {
-    return specialValues[propValue];
-  }
-
-  if (typeof propValue === 'number') {
-    return `${ propValue }px`;
-  }
-
-  if (typeof propValue !== 'string') {
-    return;
-  }
-
-  const matches = /^x(\d+)$/.exec(String(propValue));
-
-  if (matches) {
-    const value = parseInt(matches[1], 10);
-
-    if (Number.isInteger(value) && value % 4 === 0) {
-      return `${ value / 16 }rem`;
-    }
-  }
-
-  return propValue;
-};
-
-export const paddingPropType = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue === undefined || getPaddingValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
-
-paddingPropType.isRequired = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue !== undefined && getPaddingValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
diff --git a/packages/fuselage/src/propTypes/sizes.js b/packages/fuselage/src/propTypes/sizes.js
deleted file mode 100644
index c51fcdfd1e..0000000000
--- a/packages/fuselage/src/propTypes/sizes.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const none = '0px';
-const full = '100%';
-const sw = '100vw';
-const sh = '100vh';
-const x1 = `${ 1 / 16 }rem`;
-const x2 = `${ 2 / 16 }rem`;
-
-const specialValues = {
-  none,
-  full,
-  sw,
-  sh,
-  x1,
-  x2,
-};
-
-export const getSizeValue = (propValue) => {
-  if (propValue === undefined || propValue === null) {
-    return;
-  }
-
-  if (specialValues[propValue]) {
-    return specialValues[propValue];
-  }
-
-  if (typeof propValue === 'number') {
-    return `${ propValue }px`;
-  }
-
-  if (typeof propValue !== 'string') {
-    return;
-  }
-
-  const matches = /^x(\d+)$/.exec(propValue);
-
-  if (matches) {
-    const value = parseInt(matches[1], 10);
-
-    if (Number.isInteger(value) && value % 4 === 0) {
-      return `${ value / 16 }rem`;
-    }
-  }
-
-  return propValue;
-};
-
-export const sizePropType = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue === undefined || getSizeValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
-
-sizePropType.isRequired = (props, propName, componentName) => {
-  const propValue = props[propName];
-
-  if (propValue !== undefined && getSizeValue(propValue) !== undefined) {
-    return;
-  }
-
-  return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
-};
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
index d6c4127acd..9574488e88 100644
--- a/packages/fuselage/src/styles/colors.scss
+++ b/packages/fuselage/src/styles/colors.scss
@@ -1,62 +1,75 @@
 @use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
 @use '~@rocket.chat/fuselage-tokens/colors.scss' as token-colors;
 
-@function _check-grade($grade) {
-  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
-    @error 'invalid color grade';
-  }
-
-  @return $grade;
-}
+$-map-type-to-prefix: (
+  neutral: 'n',
+  primary: 'b',
+  info: 'b',
+  success: 'g',
+  warning: 'y',
+  danger: 'r',
+);
 
-@function _get-color($prefix, $grade, $alpha) {
-  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
+@function _get-palette-color($type, $grade, $alpha) {
+  @if not ($grade % 100 == 0 and $grade / 100 >= 1 and $grade / 100 <= 9) {
     @error 'invalid color grade';
   }
 
-  $base-color: map-get(token-colors.$colors, #{ $prefix }#{ $grade });
+  @if not ($alpha == null or ($alpha >= 0 and $alpha <= 1)) {
+    @error 'invalid color alpha';
+  }
 
-  @if $alpha != null {
-    @return color.change($base-color, $alpha: $alpha);
+  $prefix: map.get($-map-type-to-prefix, $type);
+  @if not $prefix {
+    @error 'invalid color type';
   }
 
-  @return $base-color;
-}
+  $base-color: map.get(token-colors.$colors, #{ $prefix }#{ $grade });
 
-@function _get-varname($prefix, $grade, $alpha) {
-  @if $grade % 100 != 0 or $grade / 100 <= 0 or $grade / 100 > 9 {
-    @error 'invalid color grade';
+  @if not $base-color {
+    @error 'invalid color reference';
   }
 
-  @if $alpha != null {
-    @return --rcx-color-#{ $prefix }-#{ $grade }-#{ $alpha * 100 };
+  @if ($alpha != null) {
+    @return (
+      --rcx-color-#{ $type }-#{ $grade }-#{ $alpha * 100 },
+      color.change($base-color, $alpha: $alpha),
+    );
   }
 
-  @return --rcx-color-#{ $prefix }-#{ $grade };
+  @return (--rcx-color-#{ type }-#{ grade }, $base-color);
 }
 
 @function neutral($grade, $alpha: null) {
-  @return var(_get-varname(neutral, $grade, $alpha), _get-color(n, $grade, $alpha));
+  $pair: _get-palette-color(neutral, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function primary($grade, $alpha: null) {
-  @return var(_get-varname(primary, $grade, $alpha), _get-color(b, $grade, $alpha));
+  $pair: _get-palette-color(primary, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function info($grade, $alpha: null) {
-  @return var(_get-varname(info, $grade, $alpha), _get-color(b, $grade, $alpha));
+  $pair: _get-palette-color(info, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function success($grade, $alpha: null) {
-  @return var(_get-varname(success, $grade, $alpha), _get-color(g, $grade, $alpha));
+  $pair: _get-palette-color(success, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function warning($grade, $alpha: null) {
-  @return var(_get-varname(warning, $grade, $alpha), _get-color(y, $grade, $alpha));
+  $pair: _get-palette-color(warning, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function danger($grade, $alpha: null) {
-  @return var(_get-varname(danger, $grade, $alpha), _get-color(r, $grade, $alpha));
+  $pair: _get-palette-color(danger, $grade, $alpha);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 @function surface() {
@@ -64,26 +77,33 @@
 }
 
 $-foreground-colors: (
-  default: map-get(token-colors.$colors, n800),
-  info: map-get(token-colors.$colors, n700),
-  hint: map-get(token-colors.$colors, n600),
-  disabled: map-get(token-colors.$colors, n400),
+  default: map.get(token-colors.$colors, n800),
+  info: map.get(token-colors.$colors, n700),
+  hint: map.get(token-colors.$colors, n600),
+  disabled: map.get(token-colors.$colors, n400),
   alternative: white,
-  primary: map-get(token-colors.$colors, b500),
-  success: map-get(token-colors.$colors, g500),
-  danger: map-get(token-colors.$colors, r500),
-  warning: map-get(token-colors.$colors, y700),
-  link: map-get(token-colors.$colors, b500),
-  visited-link: map-get(token-colors.$colors, p500),
-  active-link: map-get(token-colors.$colors, r500),
+  primary: map.get(token-colors.$colors, b500),
+  success: map.get(token-colors.$colors, g500),
+  danger: map.get(token-colors.$colors, r500),
+  warning: map.get(token-colors.$colors, y700),
+  link: map.get(token-colors.$colors, b500),
+  visited-link: map.get(token-colors.$colors, p500),
+  active-link: map.get(token-colors.$colors, r500),
 );
 
-@function foreground($type) {
-  @if not map-has-key($-foreground-colors, $type) {
+@function _get-foreground-color($type) {
+  @if not map.has-key($-foreground-colors, $type) {
     @error 'invalid foreground type';
   }
 
-  @return var(--rcx-color-foreground-#{ $type }, map-get($-foreground-colors, $type));
+  $color: map.get($-foreground-colors, $type);
+
+  @return (--rcx-color-foreground-#{ type }, $color);
+}
+
+@function foreground($type) {
+  $pair: _get-foreground-color($type);
+  @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
 $foreground-types: map-keys($-foreground-colors);
diff --git a/packages/fuselage/src/styles/helpers.js b/packages/fuselage/src/styles/helpers.js
new file mode 100644
index 0000000000..9ca3f40427
--- /dev/null
+++ b/packages/fuselage/src/styles/helpers.js
@@ -0,0 +1,134 @@
+import { css } from '@rocket.chat/css-in-js';
+import mem from 'mem';
+
+export const cssSupports = mem((value) => typeof window !== 'undefined' && window.CSS && window.CSS.supports(value));
+
+export const createLogicalProperties = ({
+  blockPropertyName,
+  blockStartPropertyName,
+  blockStartFallbackPropertyName,
+  blockEndPropertyName,
+  blockEndFallbackPropertyName,
+  inlinePropertyName,
+  inlineStartPropertyName,
+  inlineStartFallbackPropertyName,
+  inlineEndPropertyName,
+  inlineEndFallbackPropertyName,
+}) => {
+  const blockProperty = (block) => {
+    if (cssSupports(`${ blockPropertyName }: inherit`)) {
+      return css`${ blockPropertyName }: ${ block } !important;`;
+    }
+
+    if (cssSupports(`${ blockStartPropertyName }: inherit`) && cssSupports(`${ blockEndPropertyName }: inherit`)) {
+      return css`
+        ${ blockStartPropertyName }: ${ block } !important;
+        ${ blockEndPropertyName }: ${ block } !important;
+      `;
+    }
+
+    return css`
+      ${ blockStartFallbackPropertyName }: ${ block } !important;
+      ${ blockEndFallbackPropertyName }: ${ block } !important;
+    `;
+  };
+
+  const blockStartProperty = (blockStart) => {
+    if (cssSupports(`${ blockStartPropertyName }: inherit`)) {
+      return css`${ blockStartPropertyName }: ${ blockStart } !important;`;
+    }
+
+    return css`${ blockStartFallbackPropertyName }: ${ blockStart } !important;`;
+  };
+
+  const blockEndProperty = (blockEnd) => {
+    if (cssSupports(`${ blockEndPropertyName }: inherit`)) {
+      return css`${ blockEndPropertyName }: ${ blockEnd } !important;`;
+    }
+
+    return css`${ blockEndFallbackPropertyName }: ${ blockEnd } !important;`;
+  };
+
+  const inlineProperty = (inline) => {
+    if (cssSupports(`${ inlinePropertyName }: inherit`)) {
+      return css`${ inlinePropertyName }: ${ inline } !important;`;
+    }
+
+    if (cssSupports(`${ inlineStartPropertyName }: inherit`) && cssSupports(`${ inlineEndPropertyName }: inherit`)) {
+      return css`
+        ${ inlineStartPropertyName }: ${ inline } !important;
+        ${ inlineEndPropertyName }: ${ inline } !important;
+      `;
+    }
+
+    return css`
+      ${ inlineStartFallbackPropertyName }: ${ inline } !important;
+      ${ inlineEndFallbackPropertyName }: ${ inline } !important;
+    `;
+  };
+
+  const inlineStartProperty = (inlineStart) => {
+    if (cssSupports(`${ inlineStartPropertyName }: inherit`)) {
+      return css`${ inlineStartPropertyName }: ${ inlineStart } !important;`;
+    }
+
+    return css`
+      *:not([dir=rtl]) & {
+        ${ inlineStartFallbackPropertyName }: ${ inlineStart } !important;
+      }
+
+      [dir=rtl] & {
+        ${ inlineEndFallbackPropertyName }: ${ inlineStart } !important;
+      }
+    `;
+  };
+
+  const inlineEndProperty = (inlineEnd) => {
+    if (cssSupports(`${ inlineEndPropertyName }: inherit`)) {
+      return css`${ inlineEndPropertyName }: ${ inlineEnd } !important;`;
+    }
+
+    return css`
+      *:not([dir=rtl]) & {
+        ${ inlineEndFallbackPropertyName }: ${ inlineEnd } !important;
+      }
+
+      [dir=rtl] & {
+        ${ inlineStartFallbackPropertyName }: ${ inlineEnd } !important;
+      }
+    `;
+  };
+
+  return [
+    blockProperty,
+    blockStartProperty,
+    blockEndProperty,
+    inlineProperty,
+    inlineStartProperty,
+    inlineEndProperty,
+  ];
+};
+
+export const createPropType = (getValue) => {
+  const propType = (props, propName, componentName) => {
+    const propValue = props[propName];
+
+    if (propValue === undefined || getValue(propValue) !== undefined) {
+      return;
+    }
+
+    return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
+  };
+
+  propType.isRequired = (props, propName, componentName) => {
+    const propValue = props[propName];
+
+    if (propValue !== undefined && getValue(propValue) !== undefined) {
+      return;
+    }
+
+    return new Error(`Invalid value for prop \`${ propName }\` supplied to \`${ componentName }\`: \`${ propValue }\``);
+  };
+
+  return propType;
+};
diff --git a/packages/fuselage/src/styles/lengths.scss b/packages/fuselage/src/styles/lengths.scss
index e1682dd590..28a414977c 100644
--- a/packages/fuselage/src/styles/lengths.scss
+++ b/packages/fuselage/src/styles/lengths.scss
@@ -6,14 +6,11 @@
   @if $value == 'none' {
     @return 0;
   }
-  @else if math.unit($value) == '%' {
-    @return $value;
-  }
   @else if math.abs($value) == 1 or math.abs($value) == 2 or $value % 4 == 0 {
     @return functions.to-rem($value);
   }
   @else {
-    @error 'value must be none, a percentage, ±1, ±2, or a multiple of ±4';
+    @error 'value must be none, ±1, ±2, or a multiple of ±4';
   }
 }
 
@@ -54,9 +51,6 @@
   @else if $value == 'sh' {
     @return 100vh;
   }
-  @else if math.unit($value) == '%' {
-    @return $value;
-  }
   @else if $value == 1 or $value == 2 or (meta.type-of($value) == number and $value > 0 and $value % 4 == 0) {
     @return functions.to-rem($value);
   }
diff --git a/packages/fuselage/src/styles/props/borders.js b/packages/fuselage/src/styles/props/borders.js
new file mode 100644
index 0000000000..e52e36897d
--- /dev/null
+++ b/packages/fuselage/src/styles/props/borders.js
@@ -0,0 +1,287 @@
+import { css } from '@rocket.chat/css-in-js';
+import mem from 'mem';
+
+import { createLogicalProperties, cssSupports } from '../helpers';
+import { getColorValue } from './colors';
+
+export const [
+  borderBlockProperty,
+  borderBlockStartProperty,
+  borderBlockEndProperty,
+  borderInlineProperty,
+  borderInlineStartProperty,
+  borderInlineEndProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'border-block',
+  blockStartPropertyName: 'border-block-start',
+  blockStartFallbackPropertyName: 'border-top',
+  blockEndPropertyName: 'border-block-end',
+  blockEndFallbackPropertyName: 'border-bottom',
+  inlinePropertyName: 'border-inline',
+  inlineStartPropertyName: 'border-inline-start',
+  inlineStartFallbackPropertyName: 'border-left',
+  inlineEndPropertyName: 'border-inline-end',
+  inlineEndFallbackPropertyName: 'border-right',
+});
+
+export const [
+  borderBlockWidthProperty,
+  borderBlockStartWidthProperty,
+  borderBlockEndWidthProperty,
+  borderInlineWidthProperty,
+  borderInlineStartWidthProperty,
+  borderInlineEndWidthProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'border-block-width',
+  blockStartPropertyName: 'border-block-start-width',
+  blockStartFallbackPropertyName: 'border-top-width',
+  blockEndPropertyName: 'border-block-end-width',
+  blockEndFallbackPropertyName: 'border-bottom-width',
+  inlinePropertyName: 'border-inline-width',
+  inlineStartPropertyName: 'border-inline-start-width',
+  inlineStartFallbackPropertyName: 'border-left-width',
+  inlineEndPropertyName: 'border-inline-end-width',
+  inlineEndFallbackPropertyName: 'border-right-width',
+});
+
+export const [
+  borderBlockStyleProperty,
+  borderBlockStartStyleProperty,
+  borderBlockEndStyleProperty,
+  borderInlineStyleProperty,
+  borderInlineStartStyleProperty,
+  borderInlineEndStyleProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'border-block-style',
+  blockStartPropertyName: 'border-block-start-style',
+  blockStartFallbackPropertyName: 'border-top-style',
+  blockEndPropertyName: 'border-block-end-style',
+  blockEndFallbackPropertyName: 'border-bottom-style',
+  inlinePropertyName: 'border-inline-style',
+  inlineStartPropertyName: 'border-inline-start-style',
+  inlineStartFallbackPropertyName: 'border-left-style',
+  inlineEndPropertyName: 'border-inline-end-style',
+  inlineEndFallbackPropertyName: 'border-right-style',
+});
+
+export const [
+  borderBlockColorProperty,
+  borderBlockStartColorProperty,
+  borderBlockEndColorProperty,
+  borderInlineColorProperty,
+  borderInlineStartColorProperty,
+  borderInlineEndColorProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'border-block-color',
+  blockStartPropertyName: 'border-block-start-color',
+  blockStartFallbackPropertyName: 'border-top-color',
+  blockEndPropertyName: 'border-block-end-color',
+  blockEndFallbackPropertyName: 'border-bottom-color',
+  inlinePropertyName: 'border-inline-color',
+  inlineStartPropertyName: 'border-inline-start-color',
+  inlineStartFallbackPropertyName: 'border-left-color',
+  inlineEndPropertyName: 'border-inline-end-color',
+  inlineEndFallbackPropertyName: 'border-right-color',
+});
+
+export const getBorderWidthValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  const matches = /^x(\d+)$/.exec(propValue);
+
+  if (matches) {
+    const value = parseInt(matches[1], 10);
+
+    if (Number.isInteger(value) && (value === 1 || value === 2 || value === 4)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+export const getBorderRadiusValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  if (propValue === 'full') {
+    return '9999px';
+  }
+
+  const matches = /^x(\d+)$/.exec(propValue);
+
+  if (matches) {
+    const value = parseInt(matches[1], 10);
+
+    if (Number.isInteger(value) && (value === 2 || value === 4)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+const borderStartStartRadiusProperty = (borderStartStartRadius) => {
+  if (cssSupports('border-start-start-radius: inherit')) {
+    return css`border-start-start-radius: ${ borderStartStartRadius } !important;`;
+  }
+
+  return css`border-top-left-radius: ${ borderStartStartRadius } !important;`;
+};
+
+const borderStartEndRadiusProperty = (borderStartEndRadius) => {
+  if (cssSupports('border-start-end-radius: inherit')) {
+    return css`border-start-end-radius: ${ borderStartEndRadius } !important;`;
+  }
+
+  return css`border-top-right-radius: ${ borderStartEndRadius } !important;`;
+};
+
+const borderEndStartRadiusProperty = (borderEndStartRadius) => {
+  if (cssSupports('border-end-start-radius: inherit')) {
+    return css`border-end-start-radius: ${ borderEndStartRadius } !important;`;
+  }
+
+  return css`border-bottom-left-radius: ${ borderEndStartRadius } !important;`;
+};
+
+const borderEndEndRadiusProperty = (borderEndEndRadius) => {
+  if (cssSupports('border-end-end-radius: inherit')) {
+    return css`border-end-end-radius: ${ borderEndEndRadius } !important;`;
+  }
+
+  return css`border-bottom-right-radius: ${ borderEndEndRadius } !important;`;
+};
+
+// eslint-disable-next-line complexity
+export const mapBorderProps = ({
+  className,
+  border,
+  borderBlock,
+  borderBlockStart,
+  borderBlockEnd,
+  borderInline,
+  borderInlineStart,
+  borderInlineEnd,
+  borderWidth,
+  borderBlockWidth,
+  borderBlockStartWidth,
+  borderBlockEndWidth,
+  borderInlineWidth,
+  borderInlineStartWidth,
+  borderInlineEndWidth,
+  borderStyle,
+  borderBlockStyle,
+  borderBlockStartStyle,
+  borderBlockEndStyle,
+  borderInlineStyle,
+  borderInlineStartStyle,
+  borderInlineEndStyle,
+  borderColor,
+  borderBlockColor,
+  borderBlockStartColor,
+  borderBlockEndColor,
+  borderInlineColor,
+  borderInlineStartColor,
+  borderInlineEndColor,
+  borderRadius,
+  borderStartStartRadius,
+  borderStartEndRadius,
+  borderEndStartRadius,
+  borderEndEndRadius,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    border !== undefined
+      && css`border: ${ border } !important;`,
+    borderBlock !== undefined
+      && borderBlockProperty(borderBlock),
+    borderBlockStart !== undefined
+      && borderBlockStartProperty(borderBlockStart),
+    borderBlockEnd !== undefined
+      && borderBlockEndProperty(borderBlockEnd),
+    borderInline !== undefined
+      && borderInlineProperty(borderInline),
+    borderInlineStart !== undefined
+      && borderInlineStartProperty(borderInlineStart),
+    borderInlineEnd !== undefined
+      && borderInlineEndProperty(borderInlineEnd),
+    borderWidth !== undefined
+      && css`border-width: ${ getBorderWidthValue(borderWidth) || borderWidth } !important;`,
+    borderBlockWidth !== undefined
+      && borderBlockWidthProperty(getBorderWidthValue(borderBlockWidth) || borderBlockWidth),
+    borderBlockStartWidth !== undefined
+      && borderBlockStartWidthProperty(getBorderWidthValue(borderBlockStartWidth) || borderBlockStartWidth),
+    borderBlockEndWidth !== undefined
+      && borderBlockEndWidthProperty(getBorderWidthValue(borderBlockEndWidth) || borderBlockEndWidth),
+    borderInlineWidth !== undefined
+      && borderInlineWidthProperty(getBorderWidthValue(borderInlineWidth) || borderInlineWidth),
+    borderInlineStartWidth !== undefined
+      && borderInlineStartWidthProperty(getBorderWidthValue(borderInlineStartWidth) || borderInlineStartWidth),
+    borderInlineEndWidth !== undefined
+      && borderInlineEndWidthProperty(getBorderWidthValue(borderInlineEndWidth) || borderInlineEndWidth),
+    borderStyle !== undefined
+      && css`border-style: ${ borderStyle } !important;`,
+    borderBlockStyle !== undefined
+      && borderBlockStyleProperty(borderBlockStyle),
+    borderBlockStartStyle !== undefined
+      && borderBlockStartStyleProperty(borderBlockStartStyle),
+    borderBlockEndStyle !== undefined
+      && borderBlockEndStyleProperty(borderBlockEndStyle),
+    borderInlineStyle !== undefined
+      && borderInlineStyleProperty(borderInlineStyle),
+    borderInlineStartStyle !== undefined
+      && borderInlineStartStyleProperty(borderInlineStartStyle),
+    borderInlineEndStyle !== undefined
+      && borderInlineEndStyleProperty(borderInlineEndStyle),
+    borderColor !== undefined
+      && css`border-color ${ getColorValue(borderColor) || borderColor } !important;`,
+    borderBlockColor !== undefined
+      && borderBlockColorProperty(getColorValue(borderBlockColor) || borderBlockColor),
+    borderBlockStartColor !== undefined
+      && borderBlockStartColorProperty(getColorValue(borderBlockStartColor) || borderBlockStartColor),
+    borderBlockEndColor !== undefined
+      && borderBlockEndColorProperty(getColorValue(borderBlockEndColor) || borderBlockEndColor),
+    borderInlineColor !== undefined
+      && borderInlineColorProperty(getColorValue(borderInlineColor) || borderInlineColor),
+    borderInlineStartColor !== undefined
+      && borderInlineStartColorProperty(getColorValue(borderInlineStartColor) || borderInlineStartColor),
+    borderInlineEndColor !== undefined
+      && borderInlineEndColorProperty(getColorValue(borderInlineEndColor) || borderInlineEndColor),
+    borderRadius !== undefined
+      && css`border-radius: ${ getBorderRadiusValue(borderRadius) || borderRadius } !important;`,
+    borderStartStartRadius !== undefined
+      && borderStartStartRadiusProperty(getBorderRadiusValue(borderStartStartRadius) || borderStartStartRadius),
+    borderStartEndRadius !== undefined
+      && borderStartEndRadiusProperty(getBorderRadiusValue(borderStartEndRadius) || borderStartEndRadius),
+    borderEndStartRadius !== undefined
+      && borderEndStartRadiusProperty(getBorderRadiusValue(borderEndStartRadius) || borderEndStartRadius),
+    borderEndEndRadius !== undefined
+      && borderEndEndRadiusProperty(getBorderRadiusValue(borderEndEndRadius) || borderEndEndRadius),
+  ],
+  ...props,
+});
diff --git a/packages/fuselage/src/styles/props/colors.js b/packages/fuselage/src/styles/props/colors.js
new file mode 100644
index 0000000000..fd8777864a
--- /dev/null
+++ b/packages/fuselage/src/styles/props/colors.js
@@ -0,0 +1,127 @@
+import { css } from '@rocket.chat/css-in-js';
+import tokenColors from '@rocket.chat/fuselage-tokens/colors';
+import mem from 'mem';
+import invariant from 'invariant';
+
+import { cssSupports, createPropType } from '../helpers';
+
+
+const mapTypeToPrefix = {
+  neutral: 'n',
+  primary: 'b',
+  info: 'b',
+  success: 'g',
+  warning: 'y',
+  danger: 'r',
+};
+
+const getPaletteColor = (type, grade, alpha) => {
+  invariant(grade % 100 === 0 && grade / 100 >= 1 && grade / 100 <= 9, 'invalid color grade');
+  invariant(alpha === undefined || (alpha >= 0 && alpha <= 1), 'invalid color alpha');
+
+  const prefix = mapTypeToPrefix[type];
+  invariant(!!prefix, 'invalid color type');
+
+  const baseColor = tokenColors[`${ prefix }${ grade }`];
+
+  invariant(!!baseColor, 'invalid color reference');
+
+  const matches = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/.exec(baseColor);
+
+  invariant(!!matches, 'invalid color token format');
+
+  if (alpha !== undefined) {
+    const [, r, g, b] = matches;
+    return [
+      `--rcx-color-${ type }-${ grade }-${ (alpha * 100).toFixed(0) }`,
+      `rgba(${ parseInt(r, 16) }, ${ parseInt(g, 16) }, ${ parseInt(b, 16) }, ${ alpha * 100 }%)`,
+    ];
+  }
+
+  return [`--rcx-color-${ type }-${ grade }`, baseColor];
+};
+
+const foregroundColors = {
+  default: tokenColors.n800,
+  info: tokenColors.n700,
+  hint: tokenColors.n600,
+  disabled: tokenColors.n400,
+  alternative: 'white',
+  primary: tokenColors.b500,
+  success: tokenColors.g500,
+  danger: tokenColors.r500,
+  warning: tokenColors.y700,
+  link: tokenColors.b500,
+  'visited-link': tokenColors.p500,
+  'active-link': tokenColors.r500,
+};
+
+const getForegroundColor = (type) => {
+  const color = foregroundColors[type];
+  invariant(!!color, 'invalid foreground color');
+
+  return [`--rcx-color-foreground-${ type }`, color];
+};
+
+const paletteColorRegex = /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
+
+export const getColorValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null || typeof propValue !== 'string') {
+    return;
+  }
+
+  const paletteMatches = paletteColorRegex.exec(String(propValue));
+
+  if (paletteMatches) {
+    const [, type, gradeString, , alphaString] = paletteMatches;
+    const grade = parseInt(gradeString, 10);
+    const alpha = alphaString !== undefined ? parseInt(alphaString, 10) / 100 : undefined;
+    const [customProperty, color] = getPaletteColor(type, grade, alpha);
+
+    if (customProperty && cssSupports('(--foo: bar)')) {
+      return `var(${ customProperty }, ${ color })`;
+    }
+
+    return color;
+  }
+
+  if (propValue === 'surface') {
+    if (cssSupports('(--foo: bar)')) {
+      return 'var(--rcx-color-surface, white)';
+    }
+
+    return 'white';
+  }
+
+  if (foregroundColors[String(propValue)]) {
+    const [customProperty, color] = getForegroundColor(String(propValue));
+
+    if (customProperty && cssSupports('(--foo: bar)')) {
+      return `var(${ customProperty }, ${ color })`;
+    }
+
+    return color;
+  }
+});
+
+export const colorPropType = createPropType(getColorValue);
+
+export const mapColorProps = ({
+  className,
+  color,
+  bg,
+  backgroundColor = bg,
+  opacity,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    color !== undefined
+      && css`color: ${ getColorValue(color) || color } !important;`,
+    backgroundColor !== undefined
+      && css`background-color: ${ getColorValue(backgroundColor) || backgroundColor } !important;`,
+    opacity !== undefined
+      && css`opacity: ${ opacity } !important;`,
+  ],
+  ...props,
+});
diff --git a/packages/fuselage/src/styles/props/flexBox.js b/packages/fuselage/src/styles/props/flexBox.js
new file mode 100644
index 0000000000..48cad972f1
--- /dev/null
+++ b/packages/fuselage/src/styles/props/flexBox.js
@@ -0,0 +1,47 @@
+import { css } from '@rocket.chat/css-in-js';
+
+export const mapFlexBoxProps = ({
+  className,
+  alignItems,
+  alignContent,
+  justifyItems,
+  justifyContent,
+  flexWrap,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  justifySelf,
+  alignSelf,
+  order,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    alignItems !== undefined
+      && css`align-items: ${ alignItems } !important;`,
+    alignContent !== undefined
+      && css`align-content: ${ alignContent } !important;`,
+    justifyItems !== undefined
+      && css`justify-items: ${ justifyItems } !important;`,
+    justifyContent !== undefined
+      && css`justify-content: ${ justifyContent } !important;`,
+    flexWrap !== undefined
+      && css`flex-wrap: ${ flexWrap } !important;`,
+    flexDirection !== undefined
+      && css`flex-direction: ${ flexDirection } !important;`,
+    flexGrow !== undefined
+      && css`flex-grow: ${ flexGrow } !important;`,
+    flexShrink !== undefined
+      && css`flex-shrink: ${ flexShrink } !important;`,
+    flexBasis !== undefined
+      && css`flex-basis: ${ flexBasis } !important;`,
+    justifySelf !== undefined
+      && css`justify-self: ${ justifySelf } !important;`,
+    alignSelf !== undefined
+      && css`align-self: ${ alignSelf } !important;`,
+    order !== undefined
+      && css`order: ${ order } !important;`,
+  ],
+  ...props,
+});
diff --git a/packages/fuselage/src/styles/props/layout.js b/packages/fuselage/src/styles/props/layout.js
new file mode 100644
index 0000000000..563ccf595c
--- /dev/null
+++ b/packages/fuselage/src/styles/props/layout.js
@@ -0,0 +1,111 @@
+import { css } from '@rocket.chat/css-in-js';
+import mem from 'mem';
+
+import { createPropType } from '../helpers';
+
+export const getSizeValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  if (propValue === 'full') {
+    return '100%';
+  }
+
+  if (propValue === 'sw') {
+    return '100vw';
+  }
+
+  if (propValue === 'sh') {
+    return '100vh';
+  }
+
+  const matches = /^x(\d+)$/.exec(propValue);
+
+  if (matches) {
+    const value = parseInt(matches[1], 10);
+
+    if (Number.isInteger(value) && (value % 4 === 0 || value === 1 || value === 2)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+export const mapLayoutProps = ({
+  className,
+  w,
+  width = w,
+  minWidth,
+  maxWidth,
+  h,
+  height = h,
+  minHeight,
+  maxHeight,
+  size,
+  minSize,
+  maxSize,
+  htmlSize,
+  display,
+  verticalAlign,
+  overflow,
+  overflowX,
+  overflowY,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    width !== undefined
+      && css`width: ${ getSizeValue(width) || width } !important;`,
+    minWidth !== undefined
+      && css`min-width: ${ getSizeValue(minWidth) || minWidth } !important;`,
+    maxWidth !== undefined
+      && css`max-width: ${ getSizeValue(maxWidth) || maxWidth } !important;`,
+    height !== undefined
+      && css`height: ${ getSizeValue(height) || height } !important;`,
+    minHeight !== undefined
+      && css`min-height: ${ getSizeValue(minHeight) || minHeight } !important;`,
+    maxHeight !== undefined
+      && css`max-height: ${ getSizeValue(maxHeight) || maxHeight } !important;`,
+    size !== undefined
+      && css`
+      width: ${ getSizeValue(size) || size } !important;
+      height: ${ getSizeValue(size) || size } !important;
+    `,
+    minSize !== undefined
+      && css`
+      min-width: ${ getSizeValue(minSize) || minSize } !important;
+      min-height: ${ getSizeValue(minSize) || minSize } !important;
+    `,
+    maxSize !== undefined
+      && css`
+      max-width: ${ getSizeValue(maxSize) || maxSize } !important;
+      max-height: ${ getSizeValue(maxSize) || maxSize } !important;
+    `,
+    display !== undefined
+      && css`display: ${ display } !important;`,
+    verticalAlign !== undefined
+      && css`vertical-align: ${ verticalAlign } !important;`,
+    overflow !== undefined
+      && css`overflow: ${ overflow } !important;`,
+    overflowX !== undefined
+      && css`overflow-x: ${ overflowX } !important;`,
+    overflowY !== undefined
+      && css`overflow-y: ${ overflowY } !important;`,
+  ],
+  size: htmlSize,
+  ...props,
+});
+
+export const sizePropType = createPropType(getSizeValue);
diff --git a/packages/fuselage/src/styles/props/position.js b/packages/fuselage/src/styles/props/position.js
new file mode 100644
index 0000000000..204411efa8
--- /dev/null
+++ b/packages/fuselage/src/styles/props/position.js
@@ -0,0 +1,115 @@
+import { css } from '@rocket.chat/css-in-js';
+import mem from 'mem';
+
+import { cssSupports, createLogicalProperties, createPropType } from '../helpers';
+
+
+export const getInsetValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  const matches = /^(neg-)?x(\d+)$/.exec(String(propValue));
+
+  if (matches) {
+    const value = (matches[1] === 'neg-' ? -1 : 1) * parseInt(matches[2], 10);
+
+    if (Number.isInteger(value) && (Math.abs(value) % 4 === 0 || Math.abs(value) === 1 || Math.abs(value) === 2)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+export const insetPropType = createPropType(getInsetValue);
+
+export const insetProperty = (inset) => {
+  if (cssSupports('inset: inherit')) {
+    return css`inset: ${ inset } !important;`;
+  }
+
+  if (cssSupports('inset-block: inherit') && cssSupports('inset-inline: inherit')) {
+    return css`
+      inset-block: ${ inset } !important;
+      inset-inline: ${ inset } !important;
+    `;
+  }
+
+  if (cssSupports('inset-block-start: inherit')
+    && cssSupports('inset-block-end: inherit')
+    && cssSupports('inset-inline-start: inherit')
+    && cssSupports('inset-inline-end: inherit')) {
+    return css`
+      inset-block-start: ${ inset } !important;
+      inset-block-end: ${ inset } !important;
+      inset-inline-start: ${ inset } !important;
+      inset-inline-end: ${ inset } !important;
+    `;
+  }
+
+  return css`
+    top: ${ inset } !important;
+    bottom: ${ inset } !important;
+    left: ${ inset } !important;
+    right: ${ inset } !important;
+  `;
+};
+
+export const [
+  insetBlockProperty,
+  insetBlockStartProperty,
+  insetBlockEndProperty,
+  insetInlineProperty,
+  insetInlineStartProperty,
+  insetInlineEndProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'inset-block',
+  blockStartPropertyName: 'inset-block-start',
+  blockStartFallbackPropertyName: 'top',
+  blockEndPropertyName: 'inset-block-end',
+  blockEndFallbackPropertyName: 'bottom',
+  inlinePropertyName: 'inset-inline',
+  inlineStartPropertyName: 'inset-inline-start',
+  inlineStartFallbackPropertyName: 'left',
+  inlineEndPropertyName: 'inset-inline-end',
+  inlineEndFallbackPropertyName: 'right',
+});
+
+export const mapPositionProps = ({
+  className,
+  position,
+  zIndex,
+  inset,
+  insetBlock,
+  insetBlockStart,
+  insetBlockEnd,
+  insetInline,
+  insetInlineStart,
+  insetInlineEnd,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    position !== undefined && css`position: ${ position } !important;`,
+    zIndex !== undefined && css`z-index: ${ zIndex } !important;`,
+    inset !== undefined && insetProperty(getInsetValue(inset) || inset),
+    insetBlock !== undefined && insetBlockProperty(getInsetValue(insetBlock) || insetBlock),
+    insetBlockStart !== undefined && insetBlockStartProperty(getInsetValue(insetBlockStart) || insetBlockStart),
+    insetBlockEnd !== undefined && insetBlockEndProperty(getInsetValue(insetBlockEnd) || insetBlockEnd),
+    insetInline !== undefined && insetInlineProperty(getInsetValue(insetInline) || insetInline),
+    insetInlineStart !== undefined && insetInlineStartProperty(getInsetValue(insetInlineStart) || insetInlineStart),
+    insetInlineEnd !== undefined && insetInlineEndProperty(getInsetValue(insetInlineEnd) || insetInlineEnd),
+  ],
+  ...props,
+});
diff --git a/packages/fuselage/src/styles/props/spaces.js b/packages/fuselage/src/styles/props/spaces.js
new file mode 100644
index 0000000000..dc623a433b
--- /dev/null
+++ b/packages/fuselage/src/styles/props/spaces.js
@@ -0,0 +1,171 @@
+import { css } from '@rocket.chat/css-in-js';
+import mem from 'mem';
+
+import { createPropType, createLogicalProperties } from '../helpers';
+
+
+export const getMarginValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  const matches = /^(neg-)?x(\d+)$/.exec(String(propValue));
+
+  if (matches) {
+    const value = (matches[1] === 'neg-' ? -1 : 1) * parseInt(matches[2], 10);
+
+    if (Number.isInteger(value) && (Math.abs(value) % 4 === 0 || Math.abs(value) === 1 || Math.abs(value) === 2)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+export const marginPropType = createPropType(getMarginValue);
+
+const [
+  marginBlockProperty,
+  marginBlockStartProperty,
+  marginBlockEndProperty,
+  marginInlineProperty,
+  marginInlineStartProperty,
+  marginInlineEndProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'margin-block',
+  blockStartPropertyName: 'margin-block-start',
+  blockStartFallbackPropertyName: 'margin-top',
+  blockEndPropertyName: 'margin-block-end',
+  blockEndFallbackPropertyName: 'margin-bottom',
+  inlinePropertyName: 'margin-inline',
+  inlineStartPropertyName: 'margin-inline-start',
+  inlineStartFallbackPropertyName: 'margin-left',
+  inlineEndPropertyName: 'margin-inline-end',
+  inlineEndFallbackPropertyName: 'margin-right',
+});
+
+export const getPaddingValue = mem((propValue) => {
+  if (propValue === undefined || propValue === null) {
+    return;
+  }
+
+  if (typeof propValue === 'number') {
+    return `${ propValue }px`;
+  }
+
+  if (typeof propValue !== 'string') {
+    return;
+  }
+
+  if (propValue === 'none') {
+    return '0px';
+  }
+
+  const matches = /^x(\d+)$/.exec(String(propValue));
+
+  if (matches) {
+    const value = parseInt(matches[1], 10);
+
+    if (Number.isInteger(value) && (value % 4 === 0 || value === 1 || value === 2)) {
+      return `${ value / 16 }rem`;
+    }
+  }
+});
+
+export const paddingPropType = createPropType(getPaddingValue);
+
+export const [
+  paddingBlockProperty,
+  paddingBlockStartProperty,
+  paddingBlockEndProperty,
+  paddingInlineProperty,
+  paddingInlineStartProperty,
+  paddingInlineEndProperty,
+] = createLogicalProperties({
+  blockPropertyName: 'padding-block',
+  blockStartPropertyName: 'padding-block-start',
+  blockStartFallbackPropertyName: 'padding-top',
+  blockEndPropertyName: 'padding-block-end',
+  blockEndFallbackPropertyName: 'padding-bottom',
+  inlinePropertyName: 'padding-inline',
+  inlineStartPropertyName: 'padding-inline-start',
+  inlineStartFallbackPropertyName: 'padding-left',
+  inlineEndPropertyName: 'padding-inline-end',
+  inlineEndFallbackPropertyName: 'padding-right',
+});
+
+export const mapSpaceProps = ({
+  className,
+  m,
+  margin = m,
+  mi,
+  marginInline = mi,
+  mis,
+  marginInlineStart = mis,
+  mie,
+  marginInlineEnd = mie,
+  mb,
+  marginBlock = mb,
+  mbs,
+  marginBlockStart = mbs,
+  mbe,
+  marginBlockEnd = mbe,
+  p,
+  padding = p,
+  pi,
+  paddingInline = pi,
+  pis,
+  paddingInlineStart = pis,
+  pie,
+  paddingInlineEnd = pie,
+  pb,
+  paddingBlock = pb,
+  pbs,
+  paddingBlockStart = pbs,
+  pbe,
+  paddingBlockEnd = pbe,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    margin !== undefined
+      && css`margin: ${ getMarginValue(margin) || margin } !important;`,
+    marginBlock !== undefined
+      && marginBlockProperty(getMarginValue(marginBlock) || marginBlock),
+    marginBlockStart !== undefined
+      && marginBlockStartProperty(getMarginValue(marginBlockStart) || marginBlockStart),
+    marginBlockEnd !== undefined
+      && marginBlockEndProperty(getMarginValue(marginBlockEnd) || marginBlockEnd),
+    marginInline !== undefined
+      && marginInlineProperty(getMarginValue(marginInline) || marginInline),
+    marginInlineStart !== undefined
+      && marginInlineStartProperty(getMarginValue(marginInlineStart) || marginInlineStart),
+    marginInlineEnd !== undefined
+      && marginInlineEndProperty(getMarginValue(marginInlineEnd) || marginInlineEnd),
+    padding !== undefined
+      && css`padding: ${ getPaddingValue(padding) || padding } !important;`,
+    paddingBlock !== undefined
+      && paddingBlockProperty(getPaddingValue(paddingBlock) || paddingBlock),
+    paddingBlockStart !== undefined
+      && paddingBlockStartProperty(getPaddingValue(paddingBlockStart) || paddingBlockStart),
+    paddingBlockEnd !== undefined
+      && paddingBlockEndProperty(getPaddingValue(paddingBlockEnd) || paddingBlockEnd),
+    paddingInline !== undefined
+      && paddingInlineProperty(getPaddingValue(paddingInline) || paddingInline),
+    paddingInlineStart !== undefined
+      && paddingInlineStartProperty(getPaddingValue(paddingInlineStart) || paddingInlineStart),
+    paddingInlineEnd !== undefined
+      && paddingInlineEndProperty(getPaddingValue(paddingInlineEnd) || paddingInlineEnd),
+  ],
+  ...props,
+});
diff --git a/packages/fuselage/src/styles/props/special.js b/packages/fuselage/src/styles/props/special.js
new file mode 100644
index 0000000000..5f1fcf77b1
--- /dev/null
+++ b/packages/fuselage/src/styles/props/special.js
@@ -0,0 +1,254 @@
+import { css } from '@rocket.chat/css-in-js';
+
+import { getColorValue } from './colors';
+import { getPaddingValue, getMarginValue, paddingInlineStartProperty } from './spaces';
+import { getBorderRadiusValue, borderBlockEndWidthProperty, getBorderWidthValue } from './borders';
+import { getFontFamilyValue, fontScaleProperty } from './typography';
+import { insetBlockStartProperty } from './position';
+
+const invisibleStyles = css`
+  visibility: hidden;
+  opacity: 0;
+`;
+
+const withRichContentStyles = css`
+  strong, em, b, i, a, q, cite, code, time, dfn, abbr, del, ins,
+  sup, sub, kbd, var, small, h1, h2, h3, h4, h5, h6, p {
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  strong, b {
+    font-weight: bolder;
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  a {
+    &:link {
+      text-decoration: none;
+      color: ${ getColorValue('link') };
+    }
+
+    &:visited,
+    &.is-visited {
+      color: ${ getColorValue('visited-link') };
+    }
+
+    &:active,
+    &.is-active {
+      color: ${ getColorValue('active-link') };
+    }
+
+    &:hover,
+    &.is-hovered {
+      text-decoration: underline;
+    }
+  }
+
+  q {
+    &::before {
+      content: open-quote;
+    }
+
+    &::after {
+      content: close-quote;
+    }
+
+    cite {
+      font-style: italic;
+    }
+  }
+
+  code {
+    padding:
+      ${ getPaddingValue('x4') }
+      ${ getPaddingValue('x8') };
+    border-radius: ${ getBorderRadiusValue('x2') };
+    background-color: ${ getColorValue('neutral-300') };
+    font-family: ${ getFontFamilyValue('mono') };
+    -webkit-font-smoothing: auto;
+  }
+
+  time {
+    color: ${ getColorValue('info') };
+  }
+
+  dfn {
+    color: ${ getColorValue('info') };
+    font-style: italic;
+  }
+
+  abbr {
+    &[title] {
+      text-decoration: underline dashed;
+      ${ borderBlockEndWidthProperty('none') };
+    }
+  }
+
+  del {
+    text-decoration: line-through solid;
+  }
+
+  ins {
+    text-decoration: underline solid;
+  }
+
+  sup,
+  sub {
+    position: relative;
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+  }
+
+  sup {
+    ${ insetBlockStartProperty('-0.5em') };
+  }
+
+  sub {
+    ${ insetBlockStartProperty('-0.25em') };
+  }
+
+  kbd {
+    padding:
+      ${ getPaddingValue('x4') }
+      ${ getPaddingValue('x8') };
+    border-width: ${ getBorderWidthValue('x1') };
+    border-style: solid;
+    border-color: currentColor;
+    border-radius: ${ getBorderRadiusValue('x2') };
+    font-family: ${ getFontFamilyValue('mono') };
+    -webkit-font-smoothing: auto;
+  }
+
+  var {
+    font-style: italic;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  pre {
+    display: block;
+    margin:
+      ${ getMarginValue('x16') }
+      ${ getMarginValue('none') };
+  }
+
+  h1 {
+    ${ fontScaleProperty('h1') }
+  }
+
+  h2 {
+    ${ fontScaleProperty('s2') }
+    @include typography.use-font-scale(s2);
+  }
+
+  h3 {
+    ${ fontScaleProperty('p2') }
+  }
+
+  h4 {
+    ${ fontScaleProperty('c2') }
+  }
+
+  h5 {
+    ${ fontScaleProperty('micro') }
+  }
+
+  h6 {
+    ${ fontScaleProperty('micro') }
+  }
+
+  p {
+    ${ fontScaleProperty('p1') }
+  }
+
+  ul,
+  ol {
+    ${ paddingInlineStartProperty('x40') };
+  }
+
+  ul {
+    ${ fontScaleProperty('p1') }
+    list-style-type: disc;
+  }
+
+  ol {
+    ${ fontScaleProperty('p1') }
+    list-style-type: decimal;
+  }
+
+  li {
+    display: list-item;
+    text-align: inherit;
+  }
+
+  pre {
+    font-family: ${ getFontFamilyValue('mono') };
+
+    code {
+      display: block;
+      padding: ${ getPaddingValue('x16') };
+    }
+  }
+`;
+
+const withTruncatedTextStyles = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const mapSpecialProps = ({
+  className,
+  invisible,
+  withRichContent,
+  withTruncatedText,
+  richText,
+  textColor,
+  textStyle,
+  ...props
+}) => {
+  if (richText) {
+    console.warn('`richText` is deprecated; prefer `withRichContent`');
+    withRichContent = true;
+  }
+
+  if (textColor) {
+    console.warn(`\`textColor\` is deprecated; prefer \`color='${ textColor }'`);
+  }
+
+  if (textStyle) {
+    console.warn(`\`textStyle\` is deprecated; prefer \`fontFamily='sans' fontScale='${ textStyle }'`);
+  }
+
+  return {
+    className: [
+      ...className,
+      invisible && invisibleStyles,
+      withRichContent && withRichContentStyles,
+      withTruncatedText && withTruncatedTextStyles,
+    ],
+    ...textColor && { color: textColor },
+    ...textStyle && {
+      fontFamily: 'sans',
+      fontScale: textStyle,
+    },
+    ...props,
+  };
+};
diff --git a/packages/fuselage/src/styles/props/typography.js b/packages/fuselage/src/styles/props/typography.js
new file mode 100644
index 0000000000..f658173514
--- /dev/null
+++ b/packages/fuselage/src/styles/props/typography.js
@@ -0,0 +1,139 @@
+import { css } from '@rocket.chat/css-in-js';
+import tokenTypography from '@rocket.chat/fuselage-tokens/typography';
+import PropTypes from 'prop-types';
+
+import { cssSupports } from '../helpers';
+import { getSizeValue } from './layout';
+
+export const getFontFamilyValue = (propValue) => {
+  if (!tokenTypography.fontFamilies[propValue]) {
+    return;
+  }
+
+  const fontFamily = tokenTypography.fontFamilies[propValue]
+    .map((fontFace) => (fontFace.includes(' ') ? `'${ fontFace }'` : fontFace)).join(', ');
+
+  if (cssSupports('(--foo: bar)')) {
+    return `var(--rcx-font-family-${ propValue }, ${ fontFamily })`;
+  }
+
+  return fontFamily;
+};
+
+export const getFontScaleValue = (propValue) => {
+  if (!tokenTypography.fontScales[propValue]) {
+    return;
+  }
+
+  const {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+  } = tokenTypography.fontScales[propValue];
+
+  return {
+    fontSize: `${ fontSize / 16 }rem`,
+    fontWeight,
+    lineHeight: `${ lineHeight / 16 }rem`,
+    letterSpacing: `${ letterSpacing / 16 }rem`,
+  };
+};
+
+const fontFamilyProperty = (value) =>
+  css`font-family: ${ getFontFamilyValue(value) || value } !important;`;
+
+const fontSizeProperty = (value) =>
+  css`font-size: ${ getFontScaleValue(value)?.fontSize || getSizeValue(value) || value } !important;`;
+
+const fontWeightProperty = (value) =>
+  css`font-weight: ${ getFontScaleValue(value)?.fontWeight || value } !important;`;
+
+const lineHeightProperty = (value) =>
+  css `line-height: ${ getFontScaleValue(value)?.lineHeight || getSizeValue(value) || value } !important;`;
+
+const letterSpacingProperty = (value) =>
+  css`letter-spacing: ${ getFontScaleValue(value)?.letterSpacing || value } !important;`;
+
+export const fontScaleProperty = (value) => {
+  const {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+  } = getFontScaleValue(value);
+
+  return css`
+    font-size: ${ fontSize } !important;
+    font-weight: ${ fontWeight } !important;
+    line-height: ${ lineHeight } !important;
+    letter-spacing: ${ letterSpacing } !important;
+  `;
+};
+
+const fontStyleProperty = (value) => css`font-style: ${ value } !important;`;
+
+const textAlignProperty = (value) => {
+  if (value === 'start' && !cssSupports('text-align: start')) {
+    return css`
+      :not([dir=rtl]) & {
+        text-align: left;
+      }
+
+      [dir=rtl] & {
+        text-align: right;
+      }
+    `;
+  }
+
+  if (value === 'end' && !cssSupports('text-align: end')) {
+    return css`
+      *:not([dir=rtl]) & {
+        text-align: right;
+      }
+
+      [dir=rtl] & {
+        text-align: left;
+      }
+    `;
+  }
+
+  return css`text-align: ${ value } !important;`;
+};
+
+const textTransformProperty = (value) => css`text-transform: ${ value } !important;`;
+
+const textDecorationLineProperty = (value) => css`text-decoration-line: ${ value } !important;`;
+
+export const mapTypographyProps = ({
+  className,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+  fontScale,
+  fontStyle,
+  textAlign,
+  textTransform,
+  textDecorationLine,
+  ...props
+}) => ({
+  className: [
+    ...className,
+    fontFamily !== undefined && fontFamilyProperty(fontFamily),
+    fontSize !== undefined && fontSizeProperty(fontSize),
+    fontWeight !== undefined && fontWeightProperty(fontWeight),
+    lineHeight !== undefined && lineHeightProperty(lineHeight),
+    letterSpacing !== undefined && letterSpacingProperty(letterSpacing),
+    fontScale !== undefined && fontScaleProperty(fontScale),
+    fontStyle !== undefined && fontStyleProperty(fontStyle),
+    textAlign !== undefined && textAlignProperty(textAlign),
+    textTransform !== undefined && textTransformProperty(textTransform),
+    textDecorationLine !== undefined && textDecorationLineProperty(textDecorationLine),
+  ],
+  ...props,
+});
+
+export const fontFamilyPropType = PropTypes.oneOf(Object.keys(tokenTypography.fontFamilies));
+export const fontScalePropType = PropTypes.oneOf(Object.keys(tokenTypography.fontScales));
diff --git a/packages/fuselage/src/styles/typography.scss b/packages/fuselage/src/styles/typography.scss
index 6fe10a8e09..4236b358eb 100644
--- a/packages/fuselage/src/styles/typography.scss
+++ b/packages/fuselage/src/styles/typography.scss
@@ -1,75 +1,60 @@
+@use 'sass:map';
 @use '~@rocket.chat/fuselage-tokens/typography.scss';
 @use './functions.scss';
 
-$-font-families: (
-  sans: typography.$font-sans,
-  mono: typography.$font-mono,
-);
-
 @function font-family($name) {
-  @if not map-has-key($-font-families, $name) {
+  @if not map.has-key(typography.$font-families, $name) {
     @error 'invalid font family name';
   }
 
-  @return var(--rcx-font-family-#{ $name }, map-get($-font-families, $name));
+  @return var(--rcx-font-family-#{ $name }, map.get(typography.$font-families, $name));
 }
 
-$-font-scales: (
-  h1: map-get(typography.$typography, h1),
-  s1: map-get(typography.$typography, s1),
-  s2: map-get(typography.$typography, s2),
-  p1: map-get(typography.$typography, p1),
-  p2: map-get(typography.$typography, p2),
-  c1: map-get(typography.$typography, c1),
-  c2: map-get(typography.$typography, c2),
-  micro: map-get(typography.$typography, micro),
-);
-
-$font-scales: map-keys($-font-scales);
+$font-scales: map.keys(typography.$font-scales);
 
 @mixin use-font-scale($name) {
-  @if not map-has-key($-font-scales, $name) {
+  @if not map.has-key(typography.$font-scales, $name) {
     @error 'invalid font scale name';
   }
 
-  $-font-scale: map-get($-font-scales, $name);
-  letter-spacing: functions.to-rem(map-get($-font-scale, letter-spacing));
+  $-font-scale: map.get(typography.$font-scales, $name);
+  letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));
 
-  font-size: functions.to-rem(map-get($-font-scale, font-size));
-  font-weight: map-get($-font-scale, font-weight);
-  line-height: functions.to-rem(map-get($-font-scale, line-height));
+  font-size: functions.to-rem(map.get($-font-scale, font-size));
+  font-weight: map.get($-font-scale, font-weight);
+  line-height: functions.to-rem(map.get($-font-scale, line-height));
 }
 
 @function letter-spacing($name) {
-  @if not map-has-key($-font-scales, $name) {
+  @if not map.has-key(typography.$font-scales, $name) {
     @error 'invalid font scale name';
   }
 
-  @return functions.to-rem(map-get(map-get($-font-scales, $name), letter-spacing));
+  @return functions.to-rem(map.get(map.get(typography.$font-scales, $name), letter-spacing));
 }
 
 @function font-size($name) {
-  @if not map-has-key($-font-scales, $name) {
+  @if not map.has-key(typography.$font-scales, $name) {
     @error 'invalid font scale name';
   }
 
-  @return functions.to-rem(map-get(map-get($-font-scales, $name), font-size));
+  @return functions.to-rem(map.get(map.get(typography.$font-scales, $name), font-size));
 }
 
 @function font-weight($name) {
-  @if not map-has-key($-font-scales, $name) {
+  @if not map.has-key(typography.$font-scales, $name) {
     @error 'invalid font scale name';
   }
 
-  @return map-get(map-get($-font-scales, $name), font-weight);
+  @return map.get(map.get(typography.$font-scales, $name), font-weight);
 }
 
 @function line-height($name) {
-  @if not map-has-key($-font-scales, $name) {
+  @if not map.has-key(typography.$font-scales, $name) {
     @error 'invalid font scale name';
   }
 
-  @return functions.to-rem(map-get(map-get($-font-scales, $name), line-height));
+  @return functions.to-rem(map.get(map.get(typography.$font-scales, $name), line-height));
 }
 
 @mixin use-text-ellipsis {
diff --git a/yarn.lock b/yarn.lock
index d3aded7894..36a8f419bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11714,7 +11714,7 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-age-cleaner@^0.1.1:
+map-age-cleaner@^0.1.1, map-age-cleaner@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
   integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
@@ -11909,6 +11909,14 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+mem@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-6.1.0.tgz#846eca0bd4708a8f04b9c3f3cd769e194ae63c5c"
+  integrity sha512-RlbnLQgRHk5lwqTtpEkBTQ2ll/CG/iB+J4Hy2Wh97PjgZgXgWJWrFF+XXujh3UUVLvR4OOTgZzcWMMwnehlEUg==
+  dependencies:
+    map-age-cleaner "^0.1.3"
+    mimic-fn "^3.0.0"
+
 memoize-one@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@@ -12111,6 +12119,11 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.0.0.tgz#76044cfa8818bbf6999c5c9acadf2d3649b14b4b"
+  integrity sha512-PiVO95TKvhiwgSwg1IdLYlCTdul38yZxZMIcnDSFIBUm4BNZha2qpQ4GpJ++15bHoKDtrW2D69lMfFwdFYtNZQ==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"