diff --git a/masonry/README.md b/masonry/README.md
index 108c2d688..c953c4cf6 100644
--- a/masonry/README.md
+++ b/masonry/README.md
@@ -133,7 +133,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let list = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING);
 
diff --git a/masonry/examples/calc_masonry.rs b/masonry/examples/calc_masonry.rs
index be14fb0d5..12f310872 100644
--- a/masonry/examples/calc_masonry.rs
+++ b/masonry/examples/calc_masonry.rs
@@ -255,7 +255,7 @@ pub fn build_calc() -> NewWidget<impl Widget> {
     NewWidget::new(root_widget).with_props(
         PropertySet::new()
             .with(Background::Color(AlphaColor::from_str("#794869").unwrap()))
-            .with(Padding::all(2.0))
+            .with(Padding::all(2.px()))
             .with(Gap::new(1.px())),
     )
 }
@@ -274,7 +274,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(BLUE))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["op_button"]).with_active(true),
@@ -285,7 +285,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(GRAY))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["digit_button"]).with_active(true),
diff --git a/masonry/examples/gallery/badge.rs b/masonry/examples/gallery/badge.rs
index b4c1a7a3d..b1f767048 100644
--- a/masonry/examples/gallery/badge.rs
+++ b/masonry/examples/gallery/badge.rs
@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::Vec2;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::parley::style::FontWeight;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
@@ -93,7 +93,7 @@ impl DemoPage for BadgeDemo {
         let outline_badge = NewWidget::new(Badge::with_text("99+")).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::TRANSPARENT))
-                .with(BorderWidth { width: 1.0 })
+                .with(BorderWidth { width: 1.px() })
                 .with(BorderColor {
                     color: Color::from_rgb8(0x71, 0x71, 0x7a),
                 }),
@@ -155,8 +155,8 @@ impl DemoPage for BadgeDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x3f, 0x3f, 0x46)))
-                .with(CornerRadius { radius: 999.0 })
-                .with(Padding::all(0.0)),
+                .with(CornerRadius { radius: 999.px() })
+                .with(Padding::ZERO),
         );
 
         let online_dot = NewWidget::new(Badge::new(
@@ -166,9 +166,9 @@ impl DemoPage for BadgeDemo {
         ))
         .with_props(
             PropertySet::new()
-                .with(Padding::all(0.0))
-                .with(CornerRadius { radius: 999.0 })
-                .with(BorderWidth { width: 0.0 })
+                .with(Padding::ZERO)
+                .with(CornerRadius { radius: 999.px() })
+                .with(BorderWidth { width: 0.px() })
                 .with(Background::Color(Color::from_rgb8(0x22, 0xc5, 0x5e))),
         );
 
diff --git a/masonry/examples/gallery/image.rs b/masonry/examples/gallery/image.rs
index 1a3025d47..aa16d8cb3 100644
--- a/masonry/examples/gallery/image.rs
+++ b/masonry/examples/gallery/image.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::{ImageAlphaType, ImageData, ImageFormat};
 use masonry::properties::ObjectFit;
 use masonry::properties::types::CrossAxisAlignment;
@@ -54,7 +54,7 @@ impl DemoPage for ImageDemo {
                     .prepare(),
             )
             .with_fixed_spacer(CONTENT_GAP)
-            .with_fixed(SizedBox::new(image).size(420.0.px(), 280.0.px()).prepare());
+            .with_fixed(SizedBox::new(image).size(420.px(), 280.px()).prepare());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }
diff --git a/masonry/examples/gallery/kitchen_sink.rs b/masonry/examples/gallery/kitchen_sink.rs
index 6bf2ff18d..9e7a29c37 100644
--- a/masonry/examples/gallery/kitchen_sink.rs
+++ b/masonry/examples/gallery/kitchen_sink.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::{AsUnit as _, UnitPoint};
+use masonry::layout::{AsUnit, UnitPoint};
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -43,10 +43,10 @@ impl DemoPage for KitchenSinkDemo {
         let grid = NewWidget::new(SizedBox::new(grid.prepare())).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x24, 0x24, 0x24)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let bg = NewWidget::new(SizedBox::empty().size(220.0.px(), 120.0.px())).with_props(
+        let bg = NewWidget::new(SizedBox::empty().size(220.px(), 120.px())).with_props(
             PropertySet::one(Background::Color(Color::from_rgb8(0x44, 0x22, 0x66))),
         );
 
diff --git a/masonry/examples/gallery/main.rs b/masonry/examples/gallery/main.rs
index beaf20028..23c373ce4 100644
--- a/masonry/examples/gallery/main.rs
+++ b/masonry/examples/gallery/main.rs
@@ -32,6 +32,7 @@ mod transforms;
 
 use masonry::core::{ErasedAction, NewWidget, StyleProperty, Widget as _, WidgetId, WidgetTag};
 use masonry::dpi::LogicalSize;
+use masonry::layout::Length;
 use masonry::parley::style::FontWeight;
 use masonry::properties::Padding;
 use masonry::properties::types::CrossAxisAlignment;
@@ -45,11 +46,11 @@ use masonry_winit::winit::window::Window;
 use crate::demo::{DemoPage, new_demo_shell_tags};
 use crate::switch::SwitchDemo;
 
-const SIDEBAR_WIDTH: masonry::layout::Length = masonry::layout::Length::const_px(240.0);
-const SIDEBAR_SCROLLBAR_INSET: f64 = 12.0;
-const LEFT_PANE_TOP_PADDING: f64 = 12.0;
-const LEFT_PANE_LEFT_PADDING: f64 = 12.0;
-const RIGHT_PANE_PADDING: f64 = 12.0;
+const SIDEBAR_WIDTH: Length = Length::const_px(240.0);
+const SIDEBAR_SCROLLBAR_INSET: Length = Length::const_px(12.0);
+const LEFT_PANE_TOP_PADDING: Length = Length::const_px(12.0);
+const LEFT_PANE_LEFT_PADDING: Length = Length::const_px(12.0);
+const RIGHT_PANE_PADDING: Length = Length::const_px(12.0);
 
 const DEMO_TITLE_FONT_SIZE: f32 = 20.0;
 
@@ -222,7 +223,7 @@ fn main() {
     // scrollbar doesn't sit on top of the buttons.
     let list = NewWidget::new(SizedBox::new(list.prepare())).with_props(Padding {
         top: LEFT_PANE_TOP_PADDING,
-        bottom: 0.0,
+        bottom: Length::ZERO,
         left: LEFT_PANE_LEFT_PADDING,
         right: SIDEBAR_SCROLLBAR_INSET,
     });
diff --git a/masonry/examples/gallery/spinner.rs b/masonry/examples/gallery/spinner.rs
index fafe54a0f..1048362e8 100644
--- a/masonry/examples/gallery/spinner.rs
+++ b/masonry/examples/gallery/spinner.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::widgets::{Flex, SizedBox, Spinner};
 
@@ -32,7 +32,7 @@ impl DemoPage for SpinnerDemo {
             .cross_axis_alignment(CrossAxisAlignment::Center)
             .with_fixed(
                 SizedBox::new(Spinner::new().prepare())
-                    .size(80.0.px(), 80.0.px())
+                    .size(80.px(), 80.px())
                     .prepare(),
             );
 
diff --git a/masonry/examples/gallery/split.rs b/masonry/examples/gallery/split.rs
index 5a5e9ed93..142524cab 100644
--- a/masonry/examples/gallery/split.rs
+++ b/masonry/examples/gallery/split.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::{Background, Padding};
 use masonry::widgets::{Label, SizedBox, Split};
@@ -37,7 +37,7 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x1f, 0x2a, 0x44)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let right = NewWidget::new(SizedBox::new(
@@ -48,11 +48,11 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x2b, 0x3c, 0x2f)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let body = SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare())
-            .height(260.0.px());
+        let body =
+            SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare()).height(260.px());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }
diff --git a/masonry/examples/gallery/step_input.rs b/masonry/examples/gallery/step_input.rs
index 3dad7c9f6..785af4b87 100644
--- a/masonry/examples/gallery/step_input.rs
+++ b/masonry/examples/gallery/step_input.rs
@@ -72,7 +72,7 @@ impl DemoPage for StepInputDemo {
 
         stack.push(
             Selector::new(),
-            (BorderWidth::all(2.), CornerRadius::all(20.)),
+            (BorderWidth::all(2.px()), CornerRadius::all(20.px())),
         );
 
         stack.push(
diff --git a/masonry/examples/gallery/transforms.rs b/masonry/examples/gallery/transforms.rs
index 4a424f059..0dc94bed4 100644
--- a/masonry/examples/gallery/transforms.rs
+++ b/masonry/examples/gallery/transforms.rs
@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::{Affine, Vec2};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -108,13 +108,13 @@ impl DemoPage for TransformsDemo {
                     .with_style(StyleProperty::FontSize(14.0))
                     .prepare(),
             )
-            .size(160.0.px(), 160.0.px()),
+            .size(160.px(), 160.px()),
         )
         .with_tag(self.target)
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x35, 0x35, 0x35)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let body = Flex::column()
diff --git a/masonry/examples/grid_masonry.rs b/masonry/examples/grid_masonry.rs
index 92dd95b08..d287be9b1 100644
--- a/masonry/examples/grid_masonry.rs
+++ b/masonry/examples/grid_masonry.rs
@@ -11,7 +11,7 @@ use masonry::core::{
     ErasedAction, NewWidget, PointerButton, PropertySet, StyleProperty, Widget as _, WidgetId,
 };
 use masonry::dpi::LogicalSize;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::peniko::Color;
 use masonry::properties::{BorderColor, BorderWidth, Gap};
 use masonry::theme::default_property_set;
@@ -69,7 +69,7 @@ pub fn make_grid(grid_gap: f64) -> NewWidget<Grid> {
 
     let props = PropertySet::new()
         .with(BorderColor::new(Color::from_rgb8(40, 40, 80)))
-        .with(BorderWidth::all(1.0));
+        .with(BorderWidth::all(1.px()));
     let label = SizedBox::new(NewWidget::new(label).with_props(props));
 
     let button_inputs = vec![
diff --git a/masonry/examples/layers.rs b/masonry/examples/layers.rs
index 5d0e72e19..3e577ba9f 100644
--- a/masonry/examples/layers.rs
+++ b/masonry/examples/layers.rs
@@ -178,7 +178,7 @@ fn main() {
                 .with_props(PropertySet::one(ContentColor::new(Color::BLACK))),
         ))
         .with_props(PropertySet::from((
-            BorderWidth::all(1.),
+            BorderWidth::all(1.px()),
             BorderColor::new(Color::BLACK),
             Background::Color(Color::WHITE),
         )))
diff --git a/masonry/examples/to_do_list.rs b/masonry/examples/to_do_list.rs
index 5a44311d7..21947a2a5 100644
--- a/masonry/examples/to_do_list.rs
+++ b/masonry/examples/to_do_list.rs
@@ -77,7 +77,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let root = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING)
         .with(portal, 1.0);
diff --git a/masonry/src/lib.rs b/masonry/src/lib.rs
index 57e24e869..9baf3fe54 100644
--- a/masonry/src/lib.rs
+++ b/masonry/src/lib.rs
@@ -103,7 +103,7 @@
 //!     let list = Flex::column()
 //!         .with_fixed(
 //!             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-//!                 .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+//!                 .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
 //!         )
 //!         .with_fixed_spacer(WIDGET_SPACING);
 //!
diff --git a/masonry/src/properties/slider.rs b/masonry/src/properties/slider.rs
index 28f01de32..66a6eb4f6 100644
--- a/masonry/src/properties/slider.rs
+++ b/masonry/src/properties/slider.rs
@@ -4,16 +4,17 @@
 use std::any::TypeId;
 
 use crate::core::{Property, UpdateCtx};
+use crate::layout::Length;
 use crate::peniko::Color;
 use crate::theme;
 
-/// The thickness of a slider's track, in logical pixels.
+/// The thickness of a slider's track.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
-pub struct TrackThickness(pub f64);
+pub struct TrackThickness(pub Length);
 
 impl Property for TrackThickness {
     fn static_default() -> &'static Self {
-        static DEFAULT: TrackThickness = TrackThickness(4.);
+        static DEFAULT: TrackThickness = TrackThickness(Length::const_px(4.));
         &DEFAULT
     }
 }
@@ -27,13 +28,13 @@ impl TrackThickness {
     }
 }
 
-/// The radius of a slider's thumb, in logical pixels.
+/// The radius of a slider's thumb.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
-pub struct ThumbRadius(pub f64);
+pub struct ThumbRadius(pub Length);
 
 impl Property for ThumbRadius {
     fn static_default() -> &'static Self {
-        static DEFAULT: ThumbRadius = ThumbRadius(6.);
+        static DEFAULT: ThumbRadius = ThumbRadius(Length::const_px(6.));
         &DEFAULT
     }
 }
diff --git a/masonry/src/tests/layout.rs b/masonry/src/tests/layout.rs
index 1427426de..d50452314 100644
--- a/masonry/src/tests/layout.rs
+++ b/masonry/src/tests/layout.rs
@@ -274,12 +274,12 @@ fn content_box() {
     let props = (
         Dimensions::fixed(100.px(), 100.px()),
         Padding {
-            left: 1.,
-            right: 2.,
-            top: 3.,
-            bottom: 4.,
+            left: 1.px(),
+            right: 2.px(),
+            top: 3.px(),
+            bottom: 4.px(),
         },
-        BorderWidth::all(1.),
+        BorderWidth::all(1.px()),
     );
 
     let hero = NewWidget::new(Button::with_text("Hero"))
diff --git a/masonry/src/tests/paint.rs b/masonry/src/tests/paint.rs
index e25f242de..5852d5895 100644
--- a/masonry/src/tests/paint.rs
+++ b/masonry/src/tests/paint.rs
@@ -330,7 +330,7 @@ fn paint_transparency() {
         GridParams::new(13, 0, 3, 1),
     );
 
-    let props = (Padding::all(20.), Gap::new(10.px()));
+    let props = (Padding::all(20.px()), Gap::new(10.px()));
     let grid_a = grid_a.prepare().with_props(props);
     let grid_b = grid_b.prepare().with_props(props);
 
diff --git a/masonry/src/tests/properties.rs b/masonry/src/tests/properties.rs
index a82b6a081..8f2b44b9a 100644
--- a/masonry/src/tests/properties.rs
+++ b/masonry/src/tests/properties.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::core::Widget as _;
-use crate::layout::AsUnit as _;
+use crate::layout::AsUnit;
 use crate::palette::css::BLUE;
 use crate::properties::{ContentColor, Dimensions, Gap};
 use crate::widgets::Button;
diff --git a/masonry/src/tests/transforms.rs b/masonry/src/tests/transforms.rs
index b0c8dba71..bf81b52bd 100644
--- a/masonry/src/tests/transforms.rs
+++ b/masonry/src/tests/transforms.rs
@@ -21,7 +21,7 @@ fn blue_box(inner: impl Widget) -> impl Widget {
     let mut box_props = PropertySet::new();
     box_props.insert(Background::Color(palette::css::BLUE));
     box_props.insert(BorderColor::new(palette::css::TEAL));
-    box_props.insert(BorderWidth::all(2.0));
+    box_props.insert(BorderWidth::all(2.px()));
 
     WrapperWidget::new(
         SizedBox::new(inner.prepare())
diff --git a/masonry/src/theme.rs b/masonry/src/theme.rs
index b58e751db..ce8b6b47d 100644
--- a/masonry/src/theme.rs
+++ b/masonry/src/theme.rs
@@ -8,7 +8,7 @@
 use crate::core::{
     DefaultProperties, PropertySet, PropertyStack, Selector, StyleProperty, StyleSet,
 };
-use crate::layout::Length;
+use crate::layout::{AsUnit, Length};
 use crate::palette::css::DIM_GRAY;
 use crate::parley::{GenericFamily, LineHeight};
 use crate::peniko::Color;
@@ -23,7 +23,7 @@ use crate::widgets::*;
 /// it should clear with this color by default.
 pub const BACKGROUND_COLOR: Color = Color::from_rgb8(0x1D, 0x1D, 0x1D);
 
-pub const BORDER_WIDTH: f64 = 1.;
+pub const BORDER_WIDTH: Length = Length::const_px(1.);
 
 // Zync color variations from https://tailwindcss.com/docs/colors
 pub const ZYNC_900: Color = Color::from_rgb8(0x18, 0x18, 0x1b);
@@ -59,9 +59,9 @@ pub fn default_property_set() -> DefaultProperties {
     let mut properties = DefaultProperties::new();
 
     // Badge
-    properties.insert::<Badge, _>(Padding::from_vh(3., 5.));
-    properties.insert::<Badge, _>(CornerRadius { radius: 999. });
-    properties.insert::<Badge, _>(BorderWidth { width: 0. });
+    properties.insert::<Badge, _>(Padding::from_vh(3.px(), 5.px()));
+    properties.insert::<Badge, _>(CornerRadius { radius: 999.px() });
+    properties.insert::<Badge, _>(BorderWidth { width: 0.px() });
     properties.insert::<Badge, _>(Background::Color(ACCENT_COLOR));
     properties.insert::<Badge, _>(BorderColor { color: ZYNC_700 });
     {
@@ -74,8 +74,8 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // Button
-    properties.insert::<Button, _>(Padding::from_vh(6., 16.));
-    properties.insert::<Button, _>(CornerRadius { radius: 6. });
+    properties.insert::<Button, _>(Padding::from_vh(6.px(), 16.px()));
+    properties.insert::<Button, _>(CornerRadius { radius: 6.px() });
     properties.insert::<Button, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -103,7 +103,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // Checkbox
-    properties.insert::<Checkbox, _>(CornerRadius { radius: 4. });
+    properties.insert::<Checkbox, _>(CornerRadius { radius: 4.px() });
     properties.insert::<Checkbox, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -142,21 +142,21 @@ pub fn default_property_set() -> DefaultProperties {
         Length::const_px(16.),
         Length::const_px(16.),
     ));
-    properties.insert::<DisclosureButton, _>(Padding::all(4.));
+    properties.insert::<DisclosureButton, _>(Padding::all(4.px()));
 
     // Divider
     properties.insert::<Divider, _>(ContentColor::new(ZYNC_500));
 
     // Switch
-    properties.insert::<Switch, _>(CornerRadius { radius: 10. }); // Full pill shape
+    properties.insert::<Switch, _>(CornerRadius { radius: 10.px() }); // Full pill shape
     properties.insert::<Switch, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
     properties.insert::<Switch, _>(Background::Color(ZYNC_700));
     properties.insert::<Switch, _>(BorderColor { color: ZYNC_700 });
     properties.insert::<Switch, _>(ThumbColor(Color::WHITE));
-    properties.insert::<Switch, _>(ThumbRadius(8.0));
-    properties.insert::<Switch, _>(TrackThickness(20.0));
+    properties.insert::<Switch, _>(ThumbRadius(8.px()));
+    properties.insert::<Switch, _>(TrackThickness(20.px()));
     {
         let mut stack = PropertyStack::new();
         stack.push(
@@ -186,8 +186,8 @@ pub fn default_property_set() -> DefaultProperties {
     use crate::widgets::Selector as SelectorButton;
 
     // Selector
-    properties.insert::<SelectorButton, _>(Padding::from_vh(6., 16.));
-    properties.insert::<SelectorButton, _>(CornerRadius { radius: 2. });
+    properties.insert::<SelectorButton, _>(Padding::from_vh(6.px(), 16.px()));
+    properties.insert::<SelectorButton, _>(CornerRadius { radius: 2.px() });
     properties.insert::<SelectorButton, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -216,7 +216,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // SelectorItem
-    properties.insert::<SelectorItem, _>(Padding::from_vh(6., 16.));
+    properties.insert::<SelectorItem, _>(Padding::from_vh(6.px(), 16.px()));
     properties.insert::<SelectorItem, _>(Background::Color(ZYNC_900));
     {
         let mut stack = PropertyStack::new();
@@ -238,8 +238,8 @@ pub fn default_property_set() -> DefaultProperties {
     properties.insert::<Grid, _>(Gap::ZERO);
 
     // TextInput
-    properties.insert::<TextInput, _>(Padding::from_vh(6., 12.));
-    properties.insert::<TextInput, _>(CornerRadius { radius: 4. });
+    properties.insert::<TextInput, _>(Padding::from_vh(6.px(), 12.px()));
+    properties.insert::<TextInput, _>(CornerRadius { radius: 4.px() });
     properties.insert::<TextInput, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -309,7 +309,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // ProgressBar
-    properties.insert::<ProgressBar, _>(CornerRadius { radius: 2. });
+    properties.insert::<ProgressBar, _>(CornerRadius { radius: 2.px() });
     properties.insert::<ProgressBar, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -381,8 +381,8 @@ pub fn default_text_styles(styles: &mut StyleSet) {
 }
 
 fn default_step_input_style<T: Steppable>(properties: &mut DefaultProperties) {
-    properties.insert::<StepInput<T>, _>(Padding::from_vh(6., 0.));
-    properties.insert::<StepInput<T>, _>(CornerRadius { radius: 6. });
+    properties.insert::<StepInput<T>, _>(Padding::from_vh(6.px(), 0.px()));
+    properties.insert::<StepInput<T>, _>(CornerRadius { radius: 6.px() });
     properties.insert::<StepInput<T>, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
diff --git a/masonry/src/widgets/align.rs b/masonry/src/widgets/align.rs
index d1e60e1ff..bf6445f85 100644
--- a/masonry/src/widgets/align.rs
+++ b/masonry/src/widgets/align.rs
@@ -258,7 +258,7 @@ mod tests {
             .with_tag(align_tag)
             .with_props((
                 Dimensions::fixed(50.px(), 50.px()),
-                BorderWidth::all(2.),
+                BorderWidth::all(2.px()),
                 BorderColor::new(palette::css::BLACK),
             ));
         let root = Align::centered(align).prepare();
diff --git a/masonry/src/widgets/button.rs b/masonry/src/widgets/button.rs
index 16eb61e62..84c6d43fa 100644
--- a/masonry/src/widgets/button.rs
+++ b/masonry/src/widgets/button.rs
@@ -369,9 +369,9 @@ mod tests {
 
         harness.edit_root_widget(|mut button| {
             button.insert_prop(BorderColor { color: red });
-            button.insert_prop(BorderWidth { width: 5.0 });
-            button.insert_prop(CornerRadius { radius: 20.0 });
-            button.insert_prop(Padding::from_vh(3., 8.));
+            button.insert_prop(BorderWidth { width: 5.px() });
+            button.insert_prop(CornerRadius { radius: 20.px() });
+            button.insert_prop(Padding::from_vh(3.px(), 8.px()));
 
             let mut label = Button::child_mut(&mut button);
             label.insert_prop(ContentColor::new(red));
@@ -403,7 +403,7 @@ mod tests {
             );
         let root_widget = NewWidget::new(grid).with_props(
             PropertySet::new()
-                .with(Padding::all(20.0))
+                .with(Padding::all(20.px()))
                 .with(Gap::new(40.px())),
         );
 
@@ -423,19 +423,19 @@ mod tests {
             {
                 let mut button = Grid::get_mut(&mut grid, 1);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(5.px()));
             }
 
             {
                 let mut button = Grid::get_mut(&mut grid, 2);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., -10.)).blur(-5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., -10.)).blur(0.px()));
             }
 
             {
                 let mut button = Grid::get_mut(&mut grid, 3);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (0., 0.)).blur(5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (0., 0.)).blur(5.px()));
             }
         });
 
@@ -448,7 +448,7 @@ mod tests {
             {
                 let mut button = Grid::get_mut(&mut grid, 1);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(2.5));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(2.5.px()));
             }
         });
         assert_failing_render_snapshot!(harness, "button_shadows");
@@ -460,7 +460,7 @@ mod tests {
     fn validate_noninteractive_child<W: Widget>(child: NewWidget<W>) {
         let child_id = child.id();
         let mut button = Button::new(child).prepare();
-        button.properties.insert(Padding::all(10.));
+        button.properties.insert(Padding::all(10.px()));
         let button_id = button.id();
         let mut harness = TestHarness::create(test_property_set(), button);
 
diff --git a/masonry/src/widgets/checkbox.rs b/masonry/src/widgets/checkbox.rs
index dd742371e..234d5136a 100644
--- a/masonry/src/widgets/checkbox.rs
+++ b/masonry/src/widgets/checkbox.rs
@@ -297,7 +297,7 @@ impl Widget for Checkbox {
         let border_color = *props.get::<BorderColor>(cache);
 
         // Paint the checkbox box border
-        let border_stroke = Stroke::new(border_width.width).with_join(Join::Miter);
+        let border_stroke = Stroke::new(border_width.width.get()).with_join(Join::Miter);
         painter
             .stroke(border_rect, &border_stroke, border_color.color)
             .draw();
@@ -365,6 +365,7 @@ impl Widget for Checkbox {
 mod tests {
     use super::*;
     use crate::core::{PropertySet, StyleProperty};
+    use crate::layout::AsUnit;
     use crate::properties::{ContentColor, Padding};
     use crate::testing::{TestHarness, TestHarnessParams, assert_render_snapshot};
     use crate::theme::{ACCENT_COLOR, test_property_set};
@@ -425,8 +426,8 @@ mod tests {
 
     #[test]
     fn checkbox_with_padding() {
-        let checkbox =
-            NewWidget::new(Checkbox::new(true, "Padding")).with_props(Padding::from_vh(8., 16.));
+        let checkbox = NewWidget::new(Checkbox::new(true, "Padding"))
+            .with_props(Padding::from_vh(8.px(), 16.px()));
         let checkbox_id = checkbox.id();
         let params =
             TestHarnessParams::size_and_padding((180, 72), TestHarnessParams::ROOT_PADDING);
diff --git a/masonry/src/widgets/collapse_panel.rs b/masonry/src/widgets/collapse_panel.rs
index 969db31e8..d90f4e2df 100644
--- a/masonry/src/widgets/collapse_panel.rs
+++ b/masonry/src/widgets/collapse_panel.rs
@@ -18,10 +18,10 @@ use crate::{accesskit, theme};
 const BUTTON_LENGTH: Length = Length::const_px(16.);
 /// Padding around the separator line.
 const SEPARATOR_PAD: Padding = Padding {
-    top: 4.,
-    left: 1.,
-    right: 1.,
-    bottom: 0.,
+    top: Length::const_px(4.),
+    left: Length::const_px(1.),
+    right: Length::const_px(1.),
+    bottom: Length::ZERO,
 };
 
 /// A collapsible panel with a header that contains a child widget.
@@ -145,7 +145,6 @@ impl Widget for CollapsePanel {
 
         let separator_height = border
             .width
-            .px()
             .saturating_add(SEPARATOR_PAD.length(Axis::Vertical));
 
         let space: LenDef = len_req.into();
@@ -230,7 +229,8 @@ impl Widget for CollapsePanel {
         let border = props.get::<BorderWidth>(cache);
         let header_x_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING;
 
-        let separator_height = border.width + SEPARATOR_PAD.length(Axis::Vertical).get();
+        let border_width = border.width.get();
+        let separator_height = border_width + SEPARATOR_PAD.length(Axis::Vertical).get();
 
         let button_width = BUTTON_LENGTH.get();
         let header_padding_width = header_x_padding.get();
@@ -285,7 +285,8 @@ impl Widget for CollapsePanel {
             let child_origin = Point::new(0.0, header_height + separator_height);
             ctx.place_child(&mut self.child, child_origin);
 
-            self.separator_line_y = Some(header_height + SEPARATOR_PAD.top + border.width * 0.5);
+            self.separator_line_y =
+                Some(header_height + SEPARATOR_PAD.top.get() + border_width * 0.5);
         } else {
             self.separator_line_y = None;
         }
@@ -308,11 +309,15 @@ impl Widget for CollapsePanel {
 
             // Only paint the line if it would have a positive width
             if SEPARATOR_PAD.length(Axis::Horizontal).get() < border_box.width() {
-                let x1 = border_box.x0 + SEPARATOR_PAD.left;
-                let x2 = border_box.x1 - SEPARATOR_PAD.right;
+                let x1 = border_box.x0 + SEPARATOR_PAD.left.get();
+                let x2 = border_box.x1 - SEPARATOR_PAD.right.get();
                 let line = Line::new((x1, y), (x2, y));
                 painter
-                    .stroke(line, &Stroke::new(border_width.width), border_color.color)
+                    .stroke(
+                        line,
+                        &Stroke::new(border_width.width.get()),
+                        border_color.color,
+                    )
                     .draw();
             }
         }
diff --git a/masonry/src/widgets/divider.rs b/masonry/src/widgets/divider.rs
index 2c7db8a5e..d8ac4bcb0 100644
--- a/masonry/src/widgets/divider.rs
+++ b/masonry/src/widgets/divider.rs
@@ -890,7 +890,7 @@ mod tests {
                 .prepare(),
         )
         .prepare()
-        .with_props(Padding::all(10.));
+        .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 120));
 
@@ -921,7 +921,7 @@ mod tests {
                 .with_props(Background::Color(palette::css::MIDNIGHT_BLUE)),
         )
         .prepare()
-        .with_props(Padding::all(10.));
+        .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (155, 90));
 
diff --git a/masonry/src/widgets/flex.rs b/masonry/src/widgets/flex.rs
index e06ca2a8b..e4336c33e 100644
--- a/masonry/src/widgets/flex.rs
+++ b/masonry/src/widgets/flex.rs
@@ -1393,7 +1393,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with_fixed(Label::new("bar").prepare()),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1441,7 +1441,7 @@ mod tests {
                     FlexParams::new(2.0, None, CrossAxisAlignment::Start),
                 ),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1488,7 +1488,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with(Label::new("bar").prepare(), CrossAxisAlignment::Start),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1537,7 +1537,7 @@ mod tests {
                     FlexParams::new(2.0, None, CrossAxisAlignment::Start),
                 ),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1584,7 +1584,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with(Label::new("bar").prepare(), CrossAxisAlignment::Start),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1628,10 +1628,10 @@ mod tests {
                 Padding {
                     top,
                     bottom,
-                    left: 0.,
-                    right: 0.,
+                    left: Length::ZERO,
+                    right: Length::ZERO,
                 },
-                BorderWidth::all(1.),
+                BorderWidth::all(1.px()),
                 BorderColor::new(palette::css::CYAN),
             )
         };
@@ -1641,34 +1641,50 @@ mod tests {
         let flex = NewWidget::new(
             Flex::row()
                 .cross_axis_alignment(CrossAxisAlignment::Center)
-                .with_fixed(Label::new("Left").prepare().with_props(props(0., 0.)))
-                .with_fixed(Label::new("A\nB").prepare().with_props(props(30., 10.)))
-                .with_fixed(Label::new("C\nD\nE").prepare().with_props(props(20., 115.)))
+                .with_fixed(
+                    Label::new("Left")
+                        .prepare()
+                        .with_props(props(0.px(), 0.px())),
+                )
+                .with_fixed(
+                    Label::new("A\nB")
+                        .prepare()
+                        .with_props(props(30.px(), 10.px())),
+                )
+                .with_fixed(
+                    Label::new("C\nD\nE")
+                        .prepare()
+                        .with_props(props(20.px(), 115.px())),
+                )
                 .with_fixed(
                     Label::new("F\nG\nH\nI")
                         .prepare()
-                        .with_props(props(20., 20.)),
+                        .with_props(props(20.px(), 20.px())),
                 )
                 .with_fixed(
                     Label::new("J\nK\nL\nM\nN")
                         .prepare()
-                        .with_props(props(0., 30.)),
+                        .with_props(props(0.px(), 30.px())),
                 )
                 .with_fixed(
                     Label::new("Right\nToo")
                         .prepare()
-                        .with_props(props(50., 50.)),
+                        .with_props(props(50.px(), 50.px())),
                 ),
         )
         .with_tag(flex_tag)
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let root = Flex::row()
             .cross_axis_alignment(CrossAxisAlignment::FirstBaseline)
-            .with_fixed(Label::new("Out").prepare().with_props(props(10., 10.)))
+            .with_fixed(
+                Label::new("Out")
+                    .prepare()
+                    .with_props(props(10.px(), 10.px())),
+            )
             .with(flex, 1.0)
             .prepare()
-            .with_props((Gap::new(0.px()), Padding::all(20.)));
+            .with_props((Gap::new(0.px()), Padding::all(20.px())));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (240, 240));
 
@@ -1798,7 +1814,7 @@ mod tests {
 
         let props = (
             Gap::new(0.px()),
-            BorderWidth::all(1.),
+            BorderWidth::all(1.px()),
             BorderColor::new(palette::css::DARK_GRAY),
             Dimensions::height(14.px()),
         );
@@ -1808,7 +1824,7 @@ mod tests {
             .with_fixed(first.prepare().with_props(props))
             .with_fixed(last.prepare().with_props(props))
             .prepare()
-            .with_props((Gap::new(2.px()), Padding::all(10.)));
+            .with_props((Gap::new(2.px()), Padding::all(10.px())));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (450, 50));
 
diff --git a/masonry/src/widgets/grid.rs b/masonry/src/widgets/grid.rs
index e32d21a18..0675f8ba2 100644
--- a/masonry/src/widgets/grid.rs
+++ b/masonry/src/widgets/grid.rs
@@ -620,28 +620,28 @@ mod tests {
         let grid = Grid::with_dimensions(3, 3)
             .with(
                 Label::new("A\nB").prepare().with_props((
-                    Padding::from_vh(0., 0.),
+                    Padding::from_vh(0.px(), 0.px()),
                     Background::Color(palette::css::ORANGE),
                 )),
                 GridParams::new(1, 0, 1, 1),
             )
             .with(
                 Label::new("C\nD").prepare().with_props((
-                    Padding::from_vh(8., 0.),
+                    Padding::from_vh(8.px(), 0.px()),
                     Background::Color(palette::css::DARK_BLUE),
                 )),
                 GridParams::new(0, 0, 1, 2),
             )
             .with(
                 Label::new("E\nF").prepare().with_props((
-                    Padding::from_vh(16., 0.),
+                    Padding::from_vh(16.px(), 0.px()),
                     Background::Color(palette::css::DARK_SALMON),
                 )),
                 GridParams::new(2, 0, 1, 3),
             )
             .with(
                 Label::new("G\nH").prepare().with_props((
-                    Padding::from_vh(24., 0.),
+                    Padding::from_vh(24.px(), 0.px()),
                     Background::Color(palette::css::DARK_SLATE_BLUE),
                 )),
                 GridParams::new(1, 1, 1, 2),
@@ -654,7 +654,7 @@ mod tests {
             .with_fixed(Label::new("Out").prepare())
             .with_fixed(grid)
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 200));
 
diff --git a/masonry/src/widgets/progress_bar.rs b/masonry/src/widgets/progress_bar.rs
index 34a891ac1..70a479377 100644
--- a/masonry/src/widgets/progress_bar.rs
+++ b/masonry/src/widgets/progress_bar.rs
@@ -207,7 +207,7 @@ impl Widget for ProgressBar {
         let progress = self.progress.unwrap_or(1.);
         if progress > 0. {
             // The bar width is without the borders.
-            let bar_width = border_box.width() - 2. * border_width.width;
+            let bar_width = border_box.width() - 2. * border_width.width.get();
             if bar_width > 0. {
                 let bar_color = props.get::<BarColor>(cache).0;
                 // Paint with a gradient so we get a straight line slice of the rounded rect.
@@ -271,6 +271,7 @@ impl Widget for ProgressBar {
 mod tests {
     use super::*;
     use crate::core::{NewWidget, PropertySet};
+    use crate::layout::AsUnit;
     use crate::palette;
     use crate::properties::{BorderColor, CornerRadius};
     use crate::testing::{TestHarness, assert_render_snapshot};
@@ -288,8 +289,8 @@ mod tests {
     #[test]
     fn _5_percent_styled_progressbar() {
         let widget = ProgressBar::new(Some(0.05)).prepare().with_props((
-            CornerRadius::all(50.),
-            BorderWidth::all(10.),
+            CornerRadius::all(50.px()),
+            BorderWidth::all(10.px()),
             BorderColor::new(palette::css::PINK),
         ));
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (150, 60));
@@ -300,8 +301,8 @@ mod tests {
     #[test]
     fn _95_percent_styled_progressbar() {
         let widget = ProgressBar::new(Some(0.95)).prepare().with_props((
-            CornerRadius::all(50.),
-            BorderWidth::all(10.),
+            CornerRadius::all(50.px()),
+            BorderWidth::all(10.px()),
             BorderColor::new(palette::css::PINK),
         ));
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (150, 60));
diff --git a/masonry/src/widgets/radio_button.rs b/masonry/src/widgets/radio_button.rs
index 62063d56d..e033d4528 100644
--- a/masonry/src/widgets/radio_button.rs
+++ b/masonry/src/widgets/radio_button.rs
@@ -344,11 +344,11 @@ impl Widget for RadioButton {
 
         let border_circle = Circle::new(
             check_size.to_rect().center(),
-            (check_side - border_width.width) * 0.5,
+            (check_side - border_width.width.get()) * 0.5,
         );
 
         // Paint the radio button border
-        let border_stroke = Stroke::new(border_width.width);
+        let border_stroke = Stroke::new(border_width.width.get());
         painter
             .stroke(border_circle, &border_stroke, border_color.color)
             .draw();
diff --git a/masonry/src/widgets/sized_box.rs b/masonry/src/widgets/sized_box.rs
index a7f9bb338..8ffecaa76 100644
--- a/masonry/src/widgets/sized_box.rs
+++ b/masonry/src/widgets/sized_box.rs
@@ -331,8 +331,8 @@ mod tests {
     fn empty_box() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -349,8 +349,8 @@ mod tests {
     fn label_box_no_size() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .prepare()
@@ -365,8 +365,8 @@ mod tests {
     fn label_box_with_size() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .width(20.px())
@@ -383,9 +383,9 @@ mod tests {
     fn label_box_with_padding() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
-        box_props.insert(Padding::from_vh(15., 10.));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
+        box_props.insert(Padding::from_vh(15.px(), 10.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .prepare()
@@ -425,8 +425,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -452,8 +452,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -479,8 +479,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -498,8 +498,8 @@ mod tests {
         let mut box_props = PropertySet::new();
         box_props.insert(Background::Color(palette::css::PLUM));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(Padding::all(25.));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(Padding::all(25.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .width(20.px())
@@ -519,11 +519,11 @@ mod tests {
         // Copy-pasted from empty_box
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         // This is the difference
-        box_props.insert(BorderWidth::all(5.2));
+        box_props.insert(BorderWidth::all(5.2.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
diff --git a/masonry/src/widgets/slider.rs b/masonry/src/widgets/slider.rs
index eaa2a6551..f3fcbab83 100644
--- a/masonry/src/widgets/slider.rs
+++ b/masonry/src/widgets/slider.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::{Composite, GroupRef, Painter};
 use crate::kurbo::{Axis, Circle, Point, Rect, Size, Stroke};
-use crate::layout::{AsUnit, LenReq, Length};
+use crate::layout::{LenReq, Length};
 use crate::properties::{Background, BarColor, ThumbColor, ThumbRadius, TrackThickness};
 use crate::theme;
 
@@ -73,6 +73,7 @@ impl Slider {
         ThumbRadius(base_thumb_radius): ThumbRadius,
         is_focused: bool,
     ) -> bool {
+        let base_thumb_radius = base_thumb_radius.get();
         let thumb_radius = if is_focused {
             base_thumb_radius + 2.0
         } else {
@@ -348,12 +349,14 @@ impl Widget for Slider {
                 let thumb_radius = props.get::<ThumbRadius>(cache);
                 let track_thickness = props.get::<TrackThickness>(cache);
 
-                let thumb_length = thumb_radius.0 * 2.0;
+                let thumb_length = thumb_radius.0.saturating_add(thumb_radius.0);
                 let track_length = track_thickness.0;
                 // TODO: Move the padding 16. to theme or make it otherwise configurable?
-                let padding_length = 16.;
+                let padding_length = Length::const_px(16.);
 
-                (thumb_length.max(track_length) + padding_length).px()
+                thumb_length
+                    .max(track_length)
+                    .saturating_add(padding_length)
             }
         }
     }
@@ -372,8 +375,8 @@ impl Widget for Slider {
         let cache = ctx.property_cache();
         let active_track_color = props.get::<BarColor>(cache).0;
         let thumb_color = props.get::<ThumbColor>(cache).0;
-        let track_thickness = props.get::<TrackThickness>(cache).0;
-        let base_thumb_radius = props.get::<ThumbRadius>(cache).0;
+        let track_thickness = props.get::<TrackThickness>(cache).0.get();
+        let base_thumb_radius = props.get::<ThumbRadius>(cache).0.get();
         let track_color = props.get::<Background>(cache);
         let thumb_border_width = 2.0;
 
diff --git a/masonry/src/widgets/split.rs b/masonry/src/widgets/split.rs
index 35226ce2e..f41ac0a17 100644
--- a/masonry/src/widgets/split.rs
+++ b/masonry/src/widgets/split.rs
@@ -953,8 +953,8 @@ mod tests {
     #[test]
     fn fraction_clamps_when_set() {
         let widget = Split::new(
-            Label::new("Hello").prepare().with_props(Padding::all(0.)),
-            Label::new("World").prepare().with_props(Padding::all(0.)),
+            Label::new("Hello").prepare().with_props(Padding::ZERO),
+            Label::new("World").prepare().with_props(Padding::ZERO),
         )
         .prepare();
 
diff --git a/masonry/src/widgets/step_input.rs b/masonry/src/widgets/step_input.rs
index b03814044..33f01299c 100644
--- a/masonry/src/widgets/step_input.rs
+++ b/masonry/src/widgets/step_input.rs
@@ -2375,7 +2375,7 @@ mod tests {
             ))
             .with_fixed(si(500, (StepInputStyle::Flow, Dimensions::width(100.px()))))
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 525));
 
@@ -2401,7 +2401,7 @@ mod tests {
             .with_fixed(lines_backward)
             .with_fixed(lines_forward)
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (270, 200));
 
@@ -2456,7 +2456,7 @@ mod tests {
             .with_fixed(basic(1234, (Dimensions::fixed(100.px(), 200.px())).into()))
             .with_fixed(flow(1234, (Dimensions::fixed(100.px(), 200.px())).into()))
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (320, 650));
 
diff --git a/masonry/src/widgets/switch.rs b/masonry/src/widgets/switch.rs
index 6ccf0b55b..1ea04c0b2 100644
--- a/masonry/src/widgets/switch.rs
+++ b/masonry/src/widgets/switch.rs
@@ -15,7 +15,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Circle, Join, Point, Rect, Size, Stroke};
-use crate::layout::{AsUnit, LenReq, Length};
+use crate::layout::{LenReq, Length};
 use crate::properties::{
     Background, BorderColor, BorderWidth, CornerRadius, ThumbColor, ThumbRadius, TrackThickness,
 };
@@ -80,11 +80,11 @@ impl Switch {
     /// Calculates the track dimensions based on properties.
     ///
     /// Returns `(track_width, track_height)`.
-    fn track_dimensions(track_thickness: f64, thumb_radius: f64) -> (f64, f64) {
+    fn track_dimensions(track_thickness: Length, thumb_radius: Length) -> (Length, Length) {
         // The track height is the larger of track_thickness or thumb diameter
-        let track_height = track_thickness.max(thumb_radius * 2.0);
+        let track_height = track_thickness.max(thumb_radius.saturating_add(thumb_radius));
         // The track width is approximately 2x the height (pill shape)
-        let track_width = track_height * 2.0;
+        let track_width = track_height.saturating_add(track_height);
 
         (track_width, track_height)
     }
@@ -201,7 +201,6 @@ impl Widget for Switch {
             Axis::Horizontal => track_width,
             Axis::Vertical => track_height,
         }
-        .px()
     }
 
     fn layout(&mut self, _ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, _size: Size) {}
@@ -231,9 +230,11 @@ impl Widget for Switch {
         let thumb_radius_val = props.get::<ThumbRadius>(cache).0;
         let (track_width, track_height) =
             Self::track_dimensions(track_thickness_val, thumb_radius_val);
-        let thumb_radius = thumb_radius_val;
-        let border_width = props.get::<BorderWidth>(cache).width;
-        let corner_radius = props.get::<CornerRadius>(cache).radius;
+        let track_width = track_width.get();
+        let track_height = track_height.get();
+        let thumb_radius = thumb_radius_val.get();
+        let border_width = props.get::<BorderWidth>(cache).width.get();
+        let corner_radius = props.get::<CornerRadius>(cache).radius.get();
         let thumb_color = props.get::<ThumbColor>(cache).0;
 
         // Center the track within the available space
@@ -396,7 +397,7 @@ mod tests {
     #[test]
     fn measure_dimensions() {
         // Test that the switch measures to expected dimensions based on theme properties.
-        // Theme defaults: ThumbRadius(8.0), TrackThickness(20.0), BorderWidth(1.0)
+        // Theme defaults: ThumbRadius(8px), TrackThickness(20px), BorderWidth(1px)
         // Expected: track_height = max(20, 8*2) = 20, track_width = 20*2 = 40
         // With borders: width = 42, height = 22
         let switch = Switch::new(false).prepare();
diff --git a/masonry/src/widgets/zstack.rs b/masonry/src/widgets/zstack.rs
index 512d26935..d9e20f9d7 100644
--- a/masonry/src/widgets/zstack.rs
+++ b/masonry/src/widgets/zstack.rs
@@ -327,12 +327,12 @@ mod tests {
         let mut bg_props = PropertySet::new();
         bg_props.insert(Background::Color(palette::css::BLUE));
         bg_props.insert(BorderColor::new(palette::css::TEAL));
-        bg_props.insert(BorderWidth::all(2.0));
+        bg_props.insert(BorderWidth::all(2.px()));
 
         let mut fg_props = PropertySet::new();
         fg_props.insert(Background::Color(palette::css::RED));
         fg_props.insert(BorderColor::new(palette::css::PINK));
-        fg_props.insert(BorderWidth::all(2.0));
+        fg_props.insert(BorderWidth::all(2.px()));
 
         let widget = ZStack::new()
             .with(
diff --git a/masonry_core/src/core/widget_paint.rs b/masonry_core/src/core/widget_paint.rs
index 5b9684b52..60304518f 100644
--- a/masonry_core/src/core/widget_paint.rs
+++ b/masonry_core/src/core/widget_paint.rs
@@ -71,7 +71,7 @@ pub fn paint_box_shadow(
     if !box_shadow.is_visible() {
         return;
     }
-    let box_shadow_rect = border_box.to_rounded_rect(corner_radius.radius);
+    let box_shadow_rect = border_box.to_rounded_rect(corner_radius.radius.get());
     box_shadow.paint(painter, Affine::IDENTITY, box_shadow_rect);
 }
 
@@ -102,13 +102,14 @@ pub fn paint_border(
     border_width: &BorderWidth,
     corner_radius: &CornerRadius,
 ) {
-    if border_width.width == 0. || !border_color.is_visible() {
+    let border_width_value = border_width.width.get();
+    if border_width_value == 0. || !border_color.is_visible() {
         return;
     }
     let border_rect = border_width.border_rect(border_box, corner_radius);
     // Using Join::Miter avoids rounding corners when a widget has a wide border.
     let border_style = Stroke {
-        width: border_width.width,
+        width: border_width_value,
         join: Join::Miter,
         ..Default::default()
     };
diff --git a/masonry_core/src/properties/border_width.rs b/masonry_core/src/properties/border_width.rs
index 2674a7ded..787cd0d94 100644
--- a/masonry_core/src/properties/border_width.rs
+++ b/masonry_core/src/properties/border_width.rs
@@ -9,11 +9,11 @@ use crate::properties::CornerRadius;
 // Every widget has a border width.
 impl<W: Widget> UsesProperty<BorderWidth> for W {}
 
-/// The width of a widget's border, in logical pixels.
+/// The width of a widget's border.
 #[expect(missing_docs, reason = "field names are self-descriptive")]
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct BorderWidth {
-    pub width: f64,
+    pub width: Length,
 }
 
 // TODO - To match CSS, we should use a non-zero default width
@@ -21,14 +21,16 @@ pub struct BorderWidth {
 
 impl Property for BorderWidth {
     fn static_default() -> &'static Self {
-        static DEFAULT: BorderWidth = BorderWidth { width: 0. };
+        static DEFAULT: BorderWidth = BorderWidth {
+            width: Length::ZERO,
+        };
         &DEFAULT
     }
 }
 
 impl BorderWidth {
     /// Creates new `BorderWidth` with given value.
-    pub const fn all(width: f64) -> Self {
+    pub const fn all(width: Length) -> Self {
         Self { width }
     }
 
@@ -37,7 +39,7 @@ impl BorderWidth {
     /// For [`Axis::Horizontal`] it will return the sum of the left and right border width.
     /// For [`Axis::Vertical`] it will return the sum of the top and bottom border height.
     pub fn length(&self, _axis: Axis) -> Length {
-        Length::px(self.width * 2.)
+        self.width.saturating_add(self.width)
     }
 
     /// Expands the `size` by the border width.
@@ -48,8 +50,9 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn size_up(&self, size: Size) -> Size {
-        let width = size.width + self.width * 2.;
-        let height = size.height + self.width * 2.;
+        let border_width = self.width.get();
+        let width = size.width + border_width * 2.;
+        let height = size.height + border_width * 2.;
         Size::new(width, height)
     }
 
@@ -61,8 +64,9 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn size_down(&self, size: Size) -> Size {
-        let width = (size.width - self.width * 2.).max(0.);
-        let height = (size.height - self.width * 2.).max(0.);
+        let border_width = self.width.get();
+        let width = (size.width - border_width * 2.).max(0.);
+        let height = (size.height - border_width * 2.).max(0.);
         Size::new(width, height)
     }
 
@@ -72,11 +76,12 @@ impl BorderWidth {
     ///
     /// The provided `insets` must be in logical pixels.
     pub fn insets_up(&self, insets: Insets) -> Insets {
+        let border_width = self.width.get();
         Insets {
-            x0: insets.x0 + self.width,
-            y0: insets.y0 + self.width,
-            x1: insets.x1 + self.width,
-            y1: insets.y1 + self.width,
+            x0: insets.x0 + border_width,
+            y0: insets.y0 + border_width,
+            x1: insets.x1 + border_width,
+            y1: insets.y1 + border_width,
         }
     }
 
@@ -88,7 +93,7 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn baseline_up(&self, baseline: f64) -> f64 {
-        baseline + self.width
+        baseline + self.width.get()
     }
 
     /// Lowers the `baseline` by the border width.
@@ -99,7 +104,7 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn baseline_down(&self, baseline: f64) -> f64 {
-        baseline - self.width
+        baseline - self.width.get()
     }
 
     /// Lowers the position by the border width.
@@ -110,7 +115,8 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn origin_down(&self, origin: Point) -> Point {
-        origin + Vec2::new(self.width, self.width)
+        let border_width = self.width.get();
+        origin + Vec2::new(border_width, border_width)
     }
 
     /// Creates a rounded rectangle that is inset by the border width.
@@ -119,9 +125,10 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::paint`].
     pub fn bg_rect(&self, border_box: Rect, border_radius: &CornerRadius) -> RoundedRect {
+        let border_width = self.width.get();
         border_box
-            .inset(-self.width)
-            .to_rounded_rect((border_radius.radius - self.width).max(0.))
+            .inset(-border_width)
+            .to_rounded_rect(border_radius.radius.saturating_sub(self.width).get())
     }
 
     /// Creates a rounded rectangle that is inset by half the border width.
@@ -130,8 +137,9 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::paint`].
     pub fn border_rect(&self, border_box: Rect, border_radius: &CornerRadius) -> RoundedRect {
+        let border_width = self.width.get();
         border_box
-            .inset(-self.width / 2.0)
-            .to_rounded_rect(border_radius.radius)
+            .inset(-border_width / 2.0)
+            .to_rounded_rect(border_radius.radius.get())
     }
 }
diff --git a/masonry_core/src/properties/box_shadow.rs b/masonry_core/src/properties/box_shadow.rs
index 9b4d647e2..148d9bfa9 100644
--- a/masonry_core/src/properties/box_shadow.rs
+++ b/masonry_core/src/properties/box_shadow.rs
@@ -4,6 +4,7 @@
 use crate::core::{Property, UsesProperty, Widget};
 use crate::imaging::{BlurredRoundedRect, Composite, Painter};
 use crate::kurbo::{Affine, BezPath, Insets, Point, RoundedRect, Shape as _};
+use crate::layout::Length;
 use crate::peniko::color::{AlphaColor, Srgb};
 
 // TODO - This is a first implementation of box shadows. A full version would need
@@ -30,9 +31,8 @@ pub struct BoxShadow {
 
     /// The distance between the shadow's "inner edge" and the closest fully-transparent point.
     ///
-    /// A value of zero means the shadow's edge will be shard.
-    /// Negative values will be treated as zero.
-    pub blur_radius: f64,
+    /// A value of zero means the shadow's edge will be sharp.
+    pub blur_radius: Length,
 }
 
 impl Property for BoxShadow {
@@ -40,7 +40,7 @@ impl Property for BoxShadow {
         static DEFAULT: BoxShadow = BoxShadow {
             color: AlphaColor::TRANSPARENT,
             offset: Point::ZERO,
-            blur_radius: 0.,
+            blur_radius: Length::ZERO,
         };
         &DEFAULT
     }
@@ -58,12 +58,12 @@ impl BoxShadow {
         Self {
             color,
             offset: offset.into(),
-            blur_radius: 0.,
+            blur_radius: Length::ZERO,
         }
     }
 
     /// Builder method to change the shadow's blur radius.
-    pub const fn blur(self, blur_radius: f64) -> Self {
+    pub const fn blur(self, blur_radius: Length) -> Self {
         Self {
             blur_radius,
             ..self
@@ -85,7 +85,7 @@ impl BoxShadow {
         }
 
         let transform = transform.pre_translate(self.offset.to_vec2());
-        let blur_radius = self.blur_radius.max(0.);
+        let blur_radius = self.blur_radius.get();
 
         let radius = (rect.radii().bottom_left
             + rect.radii().bottom_right
@@ -120,7 +120,7 @@ impl BoxShadow {
     ///
     /// The returned [`Insets`] are guaranteed to be non-negative.
     pub fn get_insets(&self) -> Insets {
-        let blur_radius = self.blur_radius.max(0.);
+        let blur_radius = self.blur_radius.get();
         Insets {
             x0: (blur_radius - self.offset.x).max(0.),
             y0: (blur_radius - self.offset.y).max(0.),
diff --git a/masonry_core/src/properties/corner_radius.rs b/masonry_core/src/properties/corner_radius.rs
index c53f27ee9..219a7c3d4 100644
--- a/masonry_core/src/properties/corner_radius.rs
+++ b/masonry_core/src/properties/corner_radius.rs
@@ -2,27 +2,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::core::{Property, UsesProperty, Widget};
+use crate::layout::Length;
 
 // Every widget has a corner radius.
 impl<W: Widget> UsesProperty<CornerRadius> for W {}
 
-/// The radius of a widget's box corners, in logical pixels.
+/// The radius of a widget's box corners.
 #[expect(missing_docs, reason = "field names are self-descriptive")]
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct CornerRadius {
-    pub radius: f64,
+    pub radius: Length,
 }
 
 impl Property for CornerRadius {
     fn static_default() -> &'static Self {
-        static DEFAULT: CornerRadius = CornerRadius { radius: 0. };
+        static DEFAULT: CornerRadius = CornerRadius {
+            radius: Length::ZERO,
+        };
         &DEFAULT
     }
 }
 
 impl CornerRadius {
     /// Creates new `CornerRadius` with given value.
-    pub const fn all(radius: f64) -> Self {
+    pub const fn all(radius: Length) -> Self {
         Self { radius }
     }
 }
diff --git a/masonry_core/src/properties/padding.rs b/masonry_core/src/properties/padding.rs
index 0c8ceba83..bd0562379 100644
--- a/masonry_core/src/properties/padding.rs
+++ b/masonry_core/src/properties/padding.rs
@@ -11,14 +11,14 @@ impl<W: Widget> UsesProperty<Padding> for W {}
 /// The width of padding between a widget's border and its contents.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct Padding {
-    /// The amount of padding in logical pixels for the left edge.
-    pub left: f64,
-    /// The amount of padding in logical pixels for the right edge.
-    pub right: f64,
-    /// The amount of padding in logical pixels for the top edge.
-    pub top: f64,
-    /// The amount of padding in logical pixels for the bottom edge.
-    pub bottom: f64,
+    /// The amount of padding for the left edge.
+    pub left: Length,
+    /// The amount of padding for the right edge.
+    pub right: Length,
+    /// The amount of padding for the top edge.
+    pub top: Length,
+    /// The amount of padding for the bottom edge.
+    pub bottom: Length,
 }
 
 impl Property for Padding {
@@ -28,19 +28,19 @@ impl Property for Padding {
     }
 }
 
-impl From<f64> for Padding {
+impl From<Length> for Padding {
     /// Converts the value to a `Padding` object with that amount of padding on all edges.
-    fn from(value: f64) -> Self {
+    fn from(value: Length) -> Self {
         Self::all(value)
     }
 }
 
 impl Padding {
     /// A padding of zero for all edges.
-    pub const ZERO: Self = Self::all(0.);
+    pub const ZERO: Self = Self::all(Length::ZERO);
 
     /// Creates a new `Padding` with equal amount of padding for all edges.
-    pub const fn all(padding: f64) -> Self {
+    pub const fn all(padding: Length) -> Self {
         Self {
             top: padding,
             bottom: padding,
@@ -51,10 +51,10 @@ impl Padding {
 
     /// Creates a new `Padding` with the same amount of padding for the horizontal edges,
     /// and zero padding for the vertical edges.
-    pub const fn horizontal(padding: f64) -> Self {
+    pub const fn horizontal(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
             left: padding,
             right: padding,
         }
@@ -62,17 +62,17 @@ impl Padding {
 
     /// Creates a new `Padding` with the same amount of padding for the vertical edges,
     /// and zero padding for the horizontal edges.
-    pub const fn vertical(padding: f64) -> Self {
+    pub const fn vertical(padding: Length) -> Self {
         Self {
             top: padding,
             bottom: padding,
-            left: 0.,
-            right: 0.,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with the same padding from both vertical edges, then both horizontal edges.
-    pub const fn from_vh(vertical: f64, horizontal: f64) -> Self {
+    pub const fn from_vh(vertical: Length, horizontal: Length) -> Self {
         Self {
             top: vertical,
             bottom: vertical,
@@ -82,41 +82,41 @@ impl Padding {
     }
 
     /// Creates a new `Padding` with padding only at the top edge and zero padding for all other edges.
-    pub const fn top(padding: f64) -> Self {
+    pub const fn top(padding: Length) -> Self {
         Self {
             top: padding,
-            bottom: 0.,
-            left: 0.,
-            right: 0.,
+            bottom: Length::ZERO,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with padding only at the bottom edge and zero padding for all other edges.
-    pub const fn bottom(padding: f64) -> Self {
+    pub const fn bottom(padding: Length) -> Self {
         Self {
-            top: 0.,
+            top: Length::ZERO,
             bottom: padding,
-            left: 0.,
-            right: 0.,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
-    /// Creates a new `Padding` with padding only at the leleftading edge and zero padding for all other edges.
-    pub const fn left(padding: f64) -> Self {
+    /// Creates a new `Padding` with padding only at the left edge and zero padding for all other edges.
+    pub const fn left(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
             left: padding,
-            right: 0.,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with padding only at the right edge and zero padding for all other edges.
-    pub const fn right(padding: f64) -> Self {
+    pub const fn right(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
-            left: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
+            left: Length::ZERO,
             right: padding,
         }
     }
@@ -129,8 +129,8 @@ impl Padding {
     /// For [`Axis::Vertical`] it will return the sum of the top and bottom padding height.
     pub fn length(&self, axis: Axis) -> Length {
         match axis {
-            Axis::Horizontal => Length::px(self.left + self.right),
-            Axis::Vertical => Length::px(self.top + self.bottom),
+            Axis::Horizontal => self.left.saturating_add(self.right),
+            Axis::Vertical => self.top.saturating_add(self.bottom),
         }
     }
 
@@ -142,8 +142,8 @@ impl Padding {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn size_up(&self, size: Size) -> Size {
-        let width = size.width + self.left + self.right;
-        let height = size.height + self.top + self.bottom;
+        let width = size.width + self.left.get() + self.right.get();
+        let height = size.height + self.top.get() + self.bottom.get();
         Size::new(width, height)
     }
 
@@ -155,8 +155,8 @@ impl Padding {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn size_down(&self, size: Size) -> Size {
-        let width = (size.width - self.left - self.right).max(0.);
-        let height = (size.height - self.top - self.bottom).max(0.);
+        let width = (size.width - self.left.get() - self.right.get()).max(0.);
+        let height = (size.height - self.top.get() - self.bottom.get()).max(0.);
         Size::new(width, height)
     }
 
@@ -167,10 +167,10 @@ impl Padding {
     /// The provided `insets` must be in logical pixels.
     pub fn insets_up(&self, insets: Insets) -> Insets {
         Insets {
-            x0: insets.x0 + self.left,
-            y0: insets.y0 + self.top,
-            x1: insets.x1 + self.right,
-            y1: insets.y1 + self.bottom,
+            x0: insets.x0 + self.left.get(),
+            y0: insets.y0 + self.top.get(),
+            x1: insets.x1 + self.right.get(),
+            y1: insets.y1 + self.bottom.get(),
         }
     }
 
@@ -182,7 +182,7 @@ impl Padding {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn baseline_up(&self, baseline: f64) -> f64 {
-        baseline + self.bottom
+        baseline + self.bottom.get()
     }
 
     /// Lowers the `baseline` by the padding amount.
@@ -193,7 +193,7 @@ impl Padding {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn baseline_down(&self, baseline: f64) -> f64 {
-        baseline - self.bottom
+        baseline - self.bottom.get()
     }
 
     /// Lowers the position by the padding amount.
@@ -204,6 +204,6 @@ impl Padding {
     ///
     /// Helper function to be called in [`Widget::layout`].
     pub fn origin_down(&self, origin: Point) -> Point {
-        origin + Vec2::new(self.left, self.top)
+        origin + Vec2::new(self.left.get(), self.top.get())
     }
 }
diff --git a/masonry_core/src/properties/types/gradient.rs b/masonry_core/src/properties/types/gradient.rs
index e5df729c9..26baea909 100644
--- a/masonry_core/src/properties/types/gradient.rs
+++ b/masonry_core/src/properties/types/gradient.rs
@@ -4,7 +4,7 @@
 use std::f64::consts::TAU;
 
 use crate::kurbo::{Point, Rect};
-use crate::layout::UnitPoint;
+use crate::layout::{Length, UnitPoint};
 use crate::peniko::color::{ColorSpaceTag, HueDirection};
 use crate::peniko::{ColorStops, ColorStopsSource, Extend};
 use crate::peniko::{
@@ -101,8 +101,8 @@ pub struct Gradient {
 pub enum RadialGradientShape {
     /// A circle defined based on the box size.
     CircleTo(RadialGradientExtent),
-    /// A circle with a fixed radius in logical pixels.
-    FixedCircle(f64),
+    /// A circle with a fixed radius.
+    FixedCircle(Length),
     // TODO - Add following and remove #[non_exhaustive]:
     // EllipseTo(RadialGradientExtent),
     // FixedEllipse(f64),
@@ -318,7 +318,7 @@ impl GradientShape {
             RadialGradientShape::CircleTo(RadialGradientExtent::FarthestCorner) => {
                 dist_to_corners.into_iter().reduce(f64::max).unwrap()
             }
-            RadialGradientShape::FixedCircle(radius) => radius,
+            RadialGradientShape::FixedCircle(radius) => radius.get(),
         }
     }
 
diff --git a/placehero/src/avatars.rs b/placehero/src/avatars.rs
index 855eeefae..a7db0120c 100644
--- a/placehero/src/avatars.rs
+++ b/placehero/src/avatars.rs
@@ -73,7 +73,7 @@ impl Avatars {
                         )
                         .with_stops([css::YELLOW, css::LIME]),
                     )
-                    .padding(4.0),
+                    .padding(4.px()),
             )
         })
     }
diff --git a/placehero/src/components/thread.rs b/placehero/src/components/thread.rs
index 3e2b02469..5c60dbeef 100644
--- a/placehero/src/components/thread.rs
+++ b/placehero/src/components/thread.rs
@@ -61,8 +61,8 @@ pub(crate) fn thread(
         ))
         .padding(Padding {
             // Leave room for scrollbar
-            right: 20.,
-            ..Padding::all(5.0)
+            right: 20.px(),
+            ..Padding::all(5.px())
         }),
     )
 }
diff --git a/placehero/src/components/timeline.rs b/placehero/src/components/timeline.rs
index 91c3e9b07..f0288fc5c 100644
--- a/placehero/src/components/timeline.rs
+++ b/placehero/src/components/timeline.rs
@@ -192,9 +192,9 @@ pub(crate) fn timeline_status(status: &Status) -> impl WidgetView<Timeline, Navi
     // Use a wrapping sized box for margin
     sized_box(
         sized_box(flex_col((info_line, base_status(primary_status))))
-            .border(css::WHITE, 2.0)
-            .padding(10.0)
-            .corner_radius(5.),
+            .border(css::WHITE, 2.px())
+            .padding(10.px())
+            .corner_radius(5.px()),
     )
-    .padding(Padding::from_vh(5., 4.))
+    .padding(Padding::from_vh(5.px(), 4.px()))
 }
diff --git a/xilem/examples/calc.rs b/xilem/examples/calc.rs
index 166cc6c8d..7081d1337 100644
--- a/xilem/examples/calc.rs
+++ b/xilem/examples/calc.rs
@@ -277,7 +277,7 @@ fn one_button(
     const BLUE: Color = Color::from_rgb8(0x00, 0x8d, 0xdd);
     button(content, callback)
         .background_color(BLUE)
-        .corner_radius(10.)
+        .corner_radius(10.px())
 }
 
 /// Returns a button that triggers the calculator's operator handler,
@@ -299,7 +299,7 @@ fn digit_button(digit: &'static str) -> impl WidgetView<Calculator> {
         data.on_entered_digit(digit);
     })
     .background_color(GRAY)
-    .corner_radius(10.)
+    .corner_radius(10.px())
 }
 
 pub(crate) fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs
index 4390f9d3a..42e354d00 100644
--- a/xilem/examples/emoji_picker.rs
+++ b/xilem/examples/emoji_picker.rs
@@ -87,7 +87,7 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView<EmojiPagination> + use<
         data.size.try_into().unwrap(),
     )
     .gap(10.px())
-    .padding(20.0)
+    .padding(20.px())
 }
 
 fn paginate(
diff --git a/xilem/examples/http_cats.rs b/xilem/examples/http_cats.rs
index 586388b0b..79574468b 100644
--- a/xilem/examples/http_cats.rs
+++ b/xilem/examples/http_cats.rs
@@ -57,7 +57,7 @@ impl HttpCats {
                 .map(Status::list_view)
                 .collect::<Vec<_>>(),
         ))
-        .padding(Padding::left(5.));
+        .padding(Padding::left(5.px()));
 
         let info_area = if let Some(selected_code) = self.selected_code {
             if let Some(selected_status) =
@@ -187,15 +187,15 @@ impl Status {
                             .line_break_mode(LineBreaking::Clip)
                             .text_alignment(TextAlign::End),
                     )
-                    .padding(4.)
-                    .corner_radius(4.)
+                    .padding(4.px())
+                    .corner_radius(4.px())
                     .background_color(palette::css::BLACK.multiply_alpha(0.5)),
                 )
                 .padding(Padding {
-                    left: 0.,
-                    right: 42.,
-                    top: 30.,
-                    bottom: 0.,
+                    left: 0.px(),
+                    right: 42.px(),
+                    top: 30.px(),
+                    bottom: 0.px(),
                 });
                 OneOf3::C(zstack((
                     image(image_data.clone()),
diff --git a/xilem/examples/mason.rs b/xilem/examples/mason.rs
index c5ee9c2b4..3a3a30c29 100644
--- a/xilem/examples/mason.rs
+++ b/xilem/examples/mason.rs
@@ -5,7 +5,7 @@
 
 use std::time::Duration;
 
-use masonry::layout::{Dim, Length};
+use masonry::layout::{AsUnit, Dim, Length};
 use winit::error::EventLoopError;
 use xilem::core::{Resource, fork, provides, run_once, with_context, without_elements};
 use xilem::kurbo::{Axis, Size};
@@ -144,7 +144,7 @@ fn app_logic(data: &mut AppData) -> impl WidgetView<AppData> + use<> {
                 text_button("Reset", |data: &mut AppData| data.count = 0),
                 flex(axis, (fizz_buzz_flex_sequence, flex_sequence)),
             ))
-            .padding(8.0),
+            .padding(8.px()),
             // The following `task` view only exists whilst the example is in the "active" state, so
             // the updates it performs will only be running whilst we are in that state.
             data.active.then(|| {
diff --git a/xilem/examples/slider_demo.rs b/xilem/examples/slider_demo.rs
index 9f8c477f8..e7b0361d5 100644
--- a/xilem/examples/slider_demo.rs
+++ b/xilem/examples/slider_demo.rs
@@ -74,7 +74,7 @@ where
         label(format!("{:.0}% [{}]", value, u_value)).width(60.px()),
     ))
     .cross_axis_alignment(CrossAxisAlignment::Center)
-    .gap(10.0.px())
+    .gap(10.px())
 }
 
 /// Convert 0-100 to 0-255 u8 value.
@@ -118,11 +118,11 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
                 .width(200.px())
                 .prop(BarColor(Color::from_rgb8(0x78, 0x71, 0x6c)))
                 .prop(ThumbColor(Color::WHITE))
-                .prop(ThumbRadius(10.0)),
+                .prop(ThumbRadius(10.px())),
                 label(format!("{:.0}% [{}]", state.alpha, color_alpha)).width(60.px()),
             ))
             .cross_axis_alignment(CrossAxisAlignment::Center)
-            .gap(10.0.px()),
+            .gap(10.px()),
             flex(
                 Axis::Horizontal,
                 (
@@ -143,10 +143,10 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
                 ),
             )
             .main_axis_alignment(MainAxisAlignment::Center)
-            .gap(20.0.px()),
+            .gap(20.px()),
             FlexSpacer::Flex(1.0),
         ))
-        .gap(15.0.px()),
+        .gap(15.px()),
         FlexSpacer::Fixed(10.px()),
         // Color preview box
         sized_box(
@@ -155,11 +155,11 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
         )
         .dims(Dim::Stretch)
         .background(final_color)
-        .corner_radius(8.0)
+        .corner_radius(8.px())
         .flex(1.0),
     ))
-    .gap(20.0.px())
-    .padding(20.0)
+    .gap(20.px())
+    .padding(20.px())
 }
 
 // --- Application Entry Point ---
diff --git a/xilem/examples/state_machine.rs b/xilem/examples/state_machine.rs
index 397ef60e9..3202492b5 100644
--- a/xilem/examples/state_machine.rs
+++ b/xilem/examples/state_machine.rs
@@ -71,7 +71,7 @@ fn app_logic(app_data: &mut StateMachine) -> impl WidgetView<StateMachine> + use
         state_machine(app_data),
         // TODO: When we have a canvas widget, visualise the entire state machine here.
     ))
-    .padding(15.0)
+    .padding(15.px())
 }
 
 fn main() -> Result<(), EventLoopError> {
diff --git a/xilem/examples/to_do_mvc.rs b/xilem/examples/to_do_mvc.rs
index 811cf83b4..e77f77d05 100644
--- a/xilem/examples/to_do_mvc.rs
+++ b/xilem/examples/to_do_mvc.rs
@@ -91,11 +91,11 @@ fn app_logic(task_list: &mut TaskList) -> impl WidgetView<TaskList> + use<> {
                 let delete_button = text_button("Delete", move |data: &mut TaskList| {
                     data.tasks.remove(i);
                 })
-                .padding(5.0);
+                .padding(5.px());
                 Some(
                     flex_row((checkbox, FlexSpacer::Flex(1.), delete_button))
-                        .padding(DEFAULT_GAP.get())
-                        .border(ZYNC_800, 1.0),
+                        .padding(DEFAULT_GAP)
+                        .border(ZYNC_800, 1.px()),
                 )
             }
         })
@@ -134,7 +134,7 @@ fn app_logic(task_list: &mut TaskList) -> impl WidgetView<TaskList> + use<> {
         footer,
     ))
     .gap(Length::px(4.))
-    .padding(50.0)
+    .padding(50.px())
 }
 
 pub(crate) fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/examples/transparent_window.rs b/xilem/examples/transparent_window.rs
index 85c637620..555a27992 100644
--- a/xilem/examples/transparent_window.rs
+++ b/xilem/examples/transparent_window.rs
@@ -40,7 +40,7 @@ fn app_logic(state: &mut AppState) -> impl Iterator<Item = WindowView<AppState>>
         .gap(10.px()),
         FlexSpacer::Flex(1.),
     ))
-    .padding(20.);
+    .padding(20.px());
 
     std::iter::once(
         xilem::window(state.window_id, "Transparency Demo", root_view)
diff --git a/xilem/examples/variable_clock.rs b/xilem/examples/variable_clock.rs
index 3d22a6716..c3ec8810f 100644
--- a/xilem/examples/variable_clock.rs
+++ b/xilem/examples/variable_clock.rs
@@ -54,7 +54,7 @@ fn app_logic(data: &mut Clocks) -> impl WidgetView<Clocks> + use<> {
         )
         .flex(1.),
     ))
-    .padding(10.0);
+    .padding(10.px());
     fork(
         view,
         task(
diff --git a/xilem/examples/virtual_cats.rs b/xilem/examples/virtual_cats.rs
index ccb9ad568..77c1c78e3 100644
--- a/xilem/examples/virtual_cats.rs
+++ b/xilem/examples/virtual_cats.rs
@@ -96,15 +96,15 @@ impl VirtualCats {
                             .line_break_mode(LineBreaking::Clip)
                             .text_alignment(TextAlign::End),
                     )
-                    .padding(4.)
-                    .corner_radius(4.)
+                    .padding(4.px())
+                    .corner_radius(4.px())
                     .background_color(BLACK.multiply_alpha(0.5)),
                 )
                 .padding(Padding {
-                    left: 0.,
-                    right: 42.,
-                    top: 30.,
-                    bottom: 0.,
+                    left: 0.px(),
+                    right: 42.px(),
+                    top: 30.px(),
+                    bottom: 0.px(),
                 });
                 let imgview = zstack((
                     image(img.clone()).fit(ObjectFit::FitWidth),
@@ -125,8 +125,8 @@ impl VirtualCats {
                 let view = flex_col((errorstring, emojicat))
                     .cross_axis_alignment(xilem::view::CrossAxisAlignment::Start)
                     .background_color(WHITE)
-                    .padding(16.0)
-                    .corner_radius(8.0);
+                    .padding(16.px())
+                    .corner_radius(8.px());
                 OneOf::C(view)
             }
         };
@@ -141,7 +141,7 @@ impl VirtualCats {
             0..i64::try_from(self.statuses.len()).unwrap(),
             Self::virtual_item,
         ))
-        .padding(Padding::horizontal(10.0))
+        .padding(Padding::horizontal(10.px()))
     }
 }
 
diff --git a/xilem/examples/widgets.rs b/xilem/examples/widgets.rs
index 19ad5a1c8..473208744 100644
--- a/xilem/examples/widgets.rs
+++ b/xilem/examples/widgets.rs
@@ -80,7 +80,7 @@ fn border_box<State: 'static, Action: 'static>(
         FlexSpacer::Flex(1.),
     ))
     .dims((450.px(), 200.px()))
-    .border(Color::WHITE, 2.)
+    .border(Color::WHITE, 2.px())
 }
 
 /// Top-level view
@@ -121,7 +121,7 @@ fn app_logic(data: &mut WidgetGallery) -> impl WidgetView<WidgetGallery> + use<>
         ))
         .gap(SPACER_WIDTH),
     )
-    .padding(SPACER_WIDTH.get())
+    .padding(SPACER_WIDTH)
 }
 
 fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/stress_tests/property_stack.rs b/xilem/stress_tests/property_stack.rs
index b22ec726c..3fc562bee 100644
--- a/xilem/stress_tests/property_stack.rs
+++ b/xilem/stress_tests/property_stack.rs
@@ -6,28 +6,29 @@
 use std::hint::black_box;
 
 use xilem::WidgetView;
+use xilem::masonry::layout::AsUnit;
 use xilem::style::Style as _;
 use xilem::view::prose;
 
 #[cfg(compile_stress_test)]
 fn prop_stack() -> impl WidgetView<()> + use<> {
     prose("")
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
 }
 
 #[cfg(not(compile_stress_test))]
 fn prop_stack() -> impl WidgetView<()> + use<> {
     prose("")
         // We use only one to check it compiles
-        .border_width(0.5)
+        .border_width(0.5.px())
 }
 
 #[test]
diff --git a/xilem_masonry/src/style.rs b/xilem_masonry/src/style.rs
index 891799c88..8dcdc1f8f 100644
--- a/xilem_masonry/src/style.rs
+++ b/xilem_masonry/src/style.rs
@@ -4,7 +4,7 @@
 //! Traits used to set custom styles on views.
 
 use masonry::core::UsesProperty;
-use masonry::layout::Dim;
+use masonry::layout::{Dim, Length};
 use masonry::peniko::Color;
 pub use masonry::properties::types::{Gradient, GradientShape};
 pub use masonry::properties::{
@@ -90,7 +90,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     fn border(
         self,
         color: Color,
-        width: f64,
+        width: Length,
     ) -> Prop<BorderWidth, Prop<BorderColor, Self, State, Action>, State, Action>
     where
         Self::Widget: UsesProperty<BorderColor> + UsesProperty<BorderWidth>,
@@ -107,7 +107,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     }
 
     /// Sets the element's border width.
-    fn border_width(self, width: f64) -> Prop<BorderWidth, Self, State, Action>
+    fn border_width(self, width: Length) -> Prop<BorderWidth, Self, State, Action>
     where
         Self::Widget: UsesProperty<BorderWidth>,
     {
@@ -123,7 +123,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     }
 
     /// Sets the element's corner radius.
-    fn corner_radius(self, radius: f64) -> Prop<CornerRadius, Self, State, Action>
+    fn corner_radius(self, radius: Length) -> Prop<CornerRadius, Self, State, Action>
     where
         Self::Widget: UsesProperty<CornerRadius>,
     {
diff --git a/xilem_masonry/src/view/sized_box.rs b/xilem_masonry/src/view/sized_box.rs
index ad18e301c..7d0dc98f2 100644
--- a/xilem_masonry/src/view/sized_box.rs
+++ b/xilem_masonry/src/view/sized_box.rs
@@ -22,13 +22,14 @@ use crate::{Pod, ViewCtx, WidgetView};
 /// use xilem::view::{sized_box, button};
 /// use xilem::palette;
 /// use kurbo::RoundedRectRadii;
+/// use masonry::layout::AsUnit;
 /// use masonry::properties::Padding;
 ///
 /// sized_box(button("Button", |data: &mut i32| *data+=1))
 ///     .background(palette::css::RED)
-///     .border(palette::css::YELLOW, 20.)
+///     .border(palette::css::YELLOW, 20.px())
 ///     .rounded(RoundedRectRadii::from_single_radius(5.))
-///     .padding(Padding::from(5.))
+///     .padding(Padding::from(5.px()))
 /// ```
 pub fn sized_box<State, Action, V>(inner: V) -> SizedBox<V, State, Action>
 where
diff --git a/xilem_masonry/src/widget_view.rs b/xilem_masonry/src/widget_view.rs
index 40d5e0611..59f1abf0d 100644
--- a/xilem_masonry/src/widget_view.rs
+++ b/xilem_masonry/src/widget_view.rs
@@ -60,13 +60,13 @@ pub trait WidgetView<State: 'static, Action = ()>:
     /// # Examples
     /// ```
     /// # use xilem_masonry as xilem;
-    /// use xilem::{masonry::properties::CornerRadius, view::{text_button, label}, WidgetView};
+    /// use xilem::{masonry::{layout::AsUnit, properties::CornerRadius}, view::{text_button, label}, WidgetView};
     ///
     /// # fn view<State: 'static>() -> impl WidgetView<State> + use<State> {
     /// text_button("click me", |_| {})
-    ///     .prop(CornerRadius { radius: 20.0 })
-    ///     .prop(CornerRadius { radius: 5.0 })
-    /// // The corner radius of this button will be 5.0
+    ///     .prop(CornerRadius { radius: 20.px() })
+    ///     .prop(CornerRadius { radius: 5.px() })
+    /// // The corner radius of this button will be 5px.
     /// # }
     ///
     /// ```