diff --git a/crates/ui2/src/components/button.rs b/crates/ui2/src/components/button.rs
index 437daaa982..5787616832 100644
--- a/crates/ui2/src/components/button.rs
+++ b/crates/ui2/src/components/button.rs
@@ -1,9 +1,11 @@
 use std::sync::Arc;
 
-use gpui::{div, rems, DefiniteLength, Hsla, MouseButton, WindowContext};
+use gpui::{div, DefiniteLength, Hsla, MouseButton, WindowContext};
 
-use crate::{h_stack, Icon, IconColor, IconElement, Label, LabelColor, LineHeightStyle};
-use crate::{prelude::*, IconButton};
+use crate::{
+    h_stack, prelude::*, Icon, IconButton, IconColor, IconElement, Label, LabelColor,
+    LineHeightStyle,
+};
 
 /// Provides the flexibility to use either a standard
 /// button or an icon button in a given context.
@@ -167,10 +169,10 @@ impl<V: 'static> Button<V> {
         let icon_color = self.icon_color();
 
         let mut button = h_stack()
-            .relative()
             .id(SharedString::from(format!("{}", self.label)))
+            .relative()
             .p_1()
-            .text_size(rems(1.))
+            .text_ui()
             .rounded_md()
             .bg(self.variant.bg_color(cx))
             .hover(|style| style.bg(self.variant.bg_color_hover(cx)))
@@ -217,7 +219,7 @@ impl<V: 'static> ButtonGroup<V> {
     }
 
     fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
-        let mut el = h_stack().text_size(rems(1.));
+        let mut el = h_stack().text_ui();
 
         for button in self.buttons {
             el = el.child(button.render(_view, cx));
diff --git a/crates/ui2/src/components/details.rs b/crates/ui2/src/components/details.rs
index c7f6cc1839..f138290f17 100644
--- a/crates/ui2/src/components/details.rs
+++ b/crates/ui2/src/components/details.rs
@@ -31,7 +31,7 @@ impl<V: 'static> Details<V> {
         v_stack()
             .p_1()
             .gap_0p5()
-            .text_xs()
+            .text_ui_sm()
             .text_color(cx.theme().colors().text)
             .size_full()
             .child(self.text)
diff --git a/crates/ui2/src/components/icon_button.rs b/crates/ui2/src/components/icon_button.rs
index cb4fb4d7f0..f0dc85b445 100644
--- a/crates/ui2/src/components/icon_button.rs
+++ b/crates/ui2/src/components/icon_button.rs
@@ -88,6 +88,7 @@ impl<V: 'static> IconButton<V> {
             .id(self.id.clone())
             .justify_center()
             .rounded_md()
+            // todo!("Where do these numbers come from?")
             .py(rems(0.21875))
             .px(rems(0.375))
             .bg(bg_color)
diff --git a/crates/ui2/src/components/input.rs b/crates/ui2/src/components/input.rs
index e9f520346c..1a44827fe8 100644
--- a/crates/ui2/src/components/input.rs
+++ b/crates/ui2/src/components/input.rs
@@ -94,7 +94,7 @@ impl Input {
             .active(|style| style.bg(input_active_bg))
             .flex()
             .items_center()
-            .child(div().flex().items_center().text_sm().map(|this| {
+            .child(div().flex().items_center().text_ui_sm().map(|this| {
                 if self.value.is_empty() {
                     this.child(placeholder_label)
                 } else {
diff --git a/crates/ui2/src/components/keybinding.rs b/crates/ui2/src/components/keybinding.rs
index 22bbc747a2..bd02e694ed 100644
--- a/crates/ui2/src/components/keybinding.rs
+++ b/crates/ui2/src/components/keybinding.rs
@@ -64,7 +64,7 @@ impl Key {
             .px_2()
             .py_0()
             .rounded_md()
-            .text_sm()
+            .text_ui_sm()
             .text_color(cx.theme().colors().text)
             .bg(cx.theme().colors().element_background)
             .child(self.key.clone())
diff --git a/crates/ui2/src/prelude.rs b/crates/ui2/src/prelude.rs
index 0f0a22268e..545f437a9b 100644
--- a/crates/ui2/src/prelude.rs
+++ b/crates/ui2/src/prelude.rs
@@ -7,6 +7,7 @@ pub use gpui::{
 
 pub use crate::elevation::*;
 pub use crate::ButtonVariant;
+pub use crate::StyledExt;
 pub use theme2::ActiveTheme;
 
 use gpui::Hsla;
diff --git a/crates/ui2/src/to_extract/breadcrumb.rs b/crates/ui2/src/to_extract/breadcrumb.rs
index cd7df87646..782f772fa1 100644
--- a/crates/ui2/src/to_extract/breadcrumb.rs
+++ b/crates/ui2/src/to_extract/breadcrumb.rs
@@ -30,7 +30,7 @@ impl Breadcrumb {
         h_stack()
             .id("breadcrumb")
             .px_1()
-            .text_sm()
+            .text_ui_sm()
             .text_color(cx.theme().colors().text_muted)
             .rounded_md()
             .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
diff --git a/crates/ui2/src/to_extract/collab_panel.rs b/crates/ui2/src/to_extract/collab_panel.rs
index 7b785ae9e1..d56166ad2e 100644
--- a/crates/ui2/src/to_extract/collab_panel.rs
+++ b/crates/ui2/src/to_extract/collab_panel.rs
@@ -77,7 +77,7 @@ impl CollabPanel {
                     .items_center()
                     .child(
                         div()
-                            .text_sm()
+                            .text_ui_sm()
                             .text_color(cx.theme().colors().text_placeholder)
                             .child("Find..."),
                     ),