From 015f2c69ca2a2c009fd04eadada282482deaf469 Mon Sep 17 00:00:00 2001
From: Carter Anderson <mcanders1@gmail.com>
Date: Fri, 18 Oct 2024 17:25:33 -0500
Subject: [PATCH] Merge Style properties into Node. Use ComputedNode for
 computed properties. (#15975)

# Objective

Continue improving the user experience of our UI Node API in the
direction specified by [Bevy's Next Generation Scene / UI
System](https://github.com/bevyengine/bevy/discussions/14437)

## Solution

As specified in the document above, merge `Style` fields into `Node`,
and move "computed Node fields" into `ComputedNode` (I chose this name
over something like `ComputedNodeLayout` because it currently contains
more than just layout info. If we want to break this up / rename these
concepts, lets do that in a separate PR). `Style` has been removed.

This accomplishes a number of goals:

## Ergonomics wins

Specifying both `Node` and `Style` is now no longer required for
non-default styles

Before:
```rust
commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));
```

After:

```rust
commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});
```

## Conceptual clarity

`Style` was never a comprehensive "style sheet". It only defined "core"
style properties that all `Nodes` shared. Any "styled property" that
couldn't fit that mold had to be in a separate component. A "real" style
system would style properties _across_ components (`Node`, `Button`,
etc). We have plans to build a true style system (see the doc linked
above).

By moving the `Style` fields to `Node`, we fully embrace `Node` as the
driving concept and remove the "style system" confusion.

## Next Steps

* Consider identifying and splitting out "style properties that aren't
core to Node". This should not happen for Bevy 0.15.

---

## Migration Guide

Move any fields set on `Style` into `Node` and replace all `Style`
component usage with `Node`.

Before:
```rust
commands.spawn((
    Node::default(),
    Style {
        width:  Val::Px(100.),
        ..default()
    },
));
```

After:

```rust
commands.spawn(Node {
    width:  Val::Px(100.),
    ..default()
});
```

For any usage of the "computed node properties" that used to live on
`Node`, use `ComputedNode` instead:

Before:
```rust
fn system(nodes: Query<&Node>) {
    for node in &nodes {
        let computed_size = node.size();
    }
}
```

After:
```rust
fn system(computed_nodes: Query<&ComputedNode>) {
    for computed_node in &computed_nodes {
        let computed_size = computed_node.size();
    }
}
```
---
 crates/bevy_dev_tools/src/fps_overlay.rs      |   6 +-
 .../src/ui_debug_overlay/mod.rs               |  14 +-
 crates/bevy_ecs/src/query/filter.rs           |   4 +-
 crates/bevy_text/src/text_access.rs           |   8 +-
 crates/bevy_ui/src/accessibility.rs           |   8 +-
 crates/bevy_ui/src/focus.rs                   |   7 +-
 crates/bevy_ui/src/geometry.rs                |   6 +-
 crates/bevy_ui/src/layout/convert.rs          |  91 +++---
 crates/bevy_ui/src/layout/mod.rs              | 223 +++++++-------
 crates/bevy_ui/src/layout/ui_surface.rs       |  51 ++--
 crates/bevy_ui/src/lib.rs                     |   8 +-
 crates/bevy_ui/src/node_bundles.rs            |  48 ++--
 crates/bevy_ui/src/picking_backend.rs         |   2 +-
 crates/bevy_ui/src/render/box_shadow.rs       |   4 +-
 crates/bevy_ui/src/render/mod.rs              |  10 +-
 .../src/render/ui_material_pipeline.rs        |   2 +-
 .../src/render/ui_texture_slice_pipeline.rs   |   2 +-
 crates/bevy_ui/src/stack.rs                   |  10 +-
 crates/bevy_ui/src/ui_material.rs             |   5 +-
 crates/bevy_ui/src/ui_node.rs                 |  74 +++--
 crates/bevy_ui/src/update.rs                  |  45 +--
 crates/bevy_ui/src/widget/text.rs             |  10 +-
 examples/2d/2d_shapes.rs                      |   2 +-
 examples/2d/bloom_2d.rs                       |   2 +-
 examples/2d/bounding_2d.rs                    |   2 +-
 examples/2d/sprite_animation.rs               |   2 +-
 examples/2d/wireframe_2d.rs                   |   2 +-
 examples/3d/3d_shapes.rs                      |   2 +-
 examples/3d/anisotropy.rs                     |   2 +-
 examples/3d/anti_aliasing.rs                  |   2 +-
 examples/3d/atmospheric_fog.rs                |   2 +-
 examples/3d/auto_exposure.rs                  |  12 +-
 examples/3d/blend_modes.rs                    |  17 +-
 examples/3d/bloom_3d.rs                       |   2 +-
 examples/3d/clearcoat.rs                      |   2 +-
 examples/3d/color_grading.rs                  |  58 ++--
 examples/3d/deferred_rendering.rs             |   2 +-
 examples/3d/depth_of_field.rs                 |   2 +-
 examples/3d/fog.rs                            |   2 +-
 examples/3d/generate_custom_mesh.rs           |   2 +-
 examples/3d/irradiance_volumes.rs             |   2 +-
 examples/3d/lighting.rs                       |   2 +-
 examples/3d/load_gltf_extras.rs               |   2 +-
 examples/3d/motion_blur.rs                    |   2 +-
 examples/3d/order_independent_transparency.rs |   2 +-
 examples/3d/parallax_mapping.rs               |   2 +-
 examples/3d/pbr.rs                            |   6 +-
 examples/3d/pcss.rs                           |   2 +-
 examples/3d/post_processing.rs                |   2 +-
 examples/3d/reflection_probes.rs              |   2 +-
 examples/3d/shadow_biases.rs                  |   3 +-
 examples/3d/split_screen.rs                   |  32 +--
 examples/3d/spotlight.rs                      |   2 +-
 examples/3d/ssao.rs                           |   2 +-
 examples/3d/ssr.rs                            |   2 +-
 examples/3d/tonemapping.rs                    |   4 +-
 examples/3d/transmission.rs                   |   2 +-
 examples/3d/visibility_range.rs               |   2 +-
 examples/3d/volumetric_fog.rs                 |   2 +-
 examples/3d/wireframe.rs                      |   2 +-
 examples/animation/animated_ui.rs             |   7 +-
 examples/animation/animation_graph.rs         |  20 +-
 examples/animation/animation_masks.rs         |  98 +++----
 examples/animation/easing_functions.rs        |   2 +-
 examples/app/log_layers_ecs.rs                |   3 +-
 examples/app/logs.rs                          |   2 +-
 examples/asset/alter_mesh.rs                  |   2 +-
 examples/asset/alter_sprite.rs                |   2 +-
 examples/asset/multi_asset_sync.rs            |   2 +-
 examples/audio/spatial_audio_2d.rs            |   2 +-
 examples/audio/spatial_audio_3d.rs            |   2 +-
 examples/camera/2d_screen_shake.rs            |   2 +-
 examples/camera/2d_top_down_camera.rs         |   2 +-
 examples/camera/camera_orbit.rs               |   2 +-
 examples/camera/first_person_view_model.rs    |  15 +-
 examples/camera/projection_zoom.rs            |   2 +-
 examples/dev_tools/fps_overlay.rs             |   2 +-
 examples/ecs/observers.rs                     |   2 +-
 examples/ecs/one_shot_systems.rs              |   2 +-
 examples/games/alien_cake_addict.rs           |  17 +-
 examples/games/breakout.rs                    |   2 +-
 examples/games/contributors.rs                |   2 +-
 examples/games/game_menu.rs                   |  87 +++---
 examples/games/loading_screen.rs              |  10 +-
 examples/games/stepping.rs                    |   4 +-
 examples/gizmos/2d_gizmos.rs                  |   2 +-
 examples/gizmos/3d_gizmos.rs                  |   2 +-
 examples/gizmos/light_gizmos.rs               |   4 +-
 examples/helpers/widgets.rs                   |  21 +-
 examples/input/text_input.rs                  |   2 +-
 examples/math/cubic_splines.rs                |  19 +-
 examples/math/custom_primitives.rs            |   8 +-
 examples/math/random_sampling.rs              |   2 +-
 examples/math/render_primitives.rs            |   3 +-
 examples/math/sampling_primitives.rs          |   2 +-
 examples/mobile/src/lib.rs                    |   2 +-
 .../movement/physics_in_fixed_timestep.rs     |  15 +-
 examples/picking/mesh_picking.rs              |   2 +-
 examples/picking/simple_picking.rs            |   2 +-
 examples/scene/scene.rs                       |   2 +-
 examples/shader/shader_prepass.rs             |   2 +-
 examples/state/computed_states.rs             |  42 ++-
 examples/state/custom_transitions.rs          |  21 +-
 examples/state/states.rs                      |  21 +-
 examples/state/sub_states.rs                  |  27 +-
 examples/stress_tests/bevymark.rs             |   3 +-
 examples/stress_tests/many_buttons.rs         |  46 ++-
 examples/stress_tests/many_gizmos.rs          |   2 +-
 examples/stress_tests/many_glyphs.rs          |  26 +-
 examples/time/virtual_time.rs                 |  21 +-
 examples/tools/gamepad_viewer.rs              |   2 +-
 .../tools/scene_viewer/morph_viewer_plugin.rs |   2 +-
 examples/transforms/align.rs                  |   2 +-
 examples/ui/borders.rs                        |  53 ++--
 examples/ui/box_shadow.rs                     |   6 +-
 examples/ui/button.rs                         |  19 +-
 examples/ui/display_and_visibility.rs         | 220 +++++++-------
 examples/ui/flex_layout.rs                    |  54 ++--
 examples/ui/font_atlas_debug.rs               |   7 +-
 examples/ui/ghost_nodes.rs                    |  19 +-
 examples/ui/grid.rs                           |  27 +-
 examples/ui/overflow.rs                       |  26 +-
 examples/ui/overflow_clip_margin.rs           |  27 +-
 examples/ui/overflow_debug.rs                 |  70 ++---
 examples/ui/relative_cursor_position.rs       |  22 +-
 examples/ui/render_ui_to_texture.rs           |   3 +-
 examples/ui/scroll.rs                         | 139 ++++-----
 examples/ui/size_constraints.rs               |  79 +++--
 examples/ui/text.rs                           |   6 +-
 examples/ui/text_debug.rs                     | 271 +++++++++---------
 examples/ui/text_wrap_debug.rs                |  25 +-
 examples/ui/transparency_ui.rs                |  21 +-
 examples/ui/ui.rs                             | 103 +++----
 examples/ui/ui_material.rs                    |  19 +-
 examples/ui/ui_scaling.rs                     |  11 +-
 examples/ui/ui_texture_atlas.rs               |  23 +-
 examples/ui/ui_texture_atlas_slice.rs         |  19 +-
 examples/ui/ui_texture_slice.rs               |  19 +-
 examples/ui/ui_texture_slice_flip_and_tile.rs |  25 +-
 examples/ui/viewport_debug.rs                 |  48 ++--
 examples/ui/window_fallthrough.rs             |   2 +-
 examples/ui/z_index.rs                        |  35 +--
 examples/window/low_power.rs                  |   2 +-
 examples/window/monitor_info.rs               |   2 +-
 examples/window/multiple_windows.rs           |   6 +-
 examples/window/scale_factor_override.rs      |  20 +-
 examples/window/screenshot.rs                 |   2 +-
 examples/window/window_drag_move.rs           |   3 +-
 examples/window/window_resizing.rs            |  11 +-
 149 files changed, 1258 insertions(+), 1616 deletions(-)

diff --git a/crates/bevy_dev_tools/src/fps_overlay.rs b/crates/bevy_dev_tools/src/fps_overlay.rs
index efba70a210..f970fc8f43 100644
--- a/crates/bevy_dev_tools/src/fps_overlay.rs
+++ b/crates/bevy_dev_tools/src/fps_overlay.rs
@@ -15,10 +15,9 @@ use bevy_ecs::{
 use bevy_hierarchy::{BuildChildren, ChildBuild};
 use bevy_render::view::Visibility;
 use bevy_text::{Font, TextColor, TextFont, TextSpan};
-use bevy_ui::Node;
 use bevy_ui::{
     widget::{Text, TextUiWriter},
-    GlobalZIndex, PositionType, Style,
+    GlobalZIndex, Node, PositionType,
 };
 use bevy_utils::default;
 
@@ -89,8 +88,7 @@ struct FpsText;
 fn setup(mut commands: Commands, overlay_config: Res<FpsOverlayConfig>) {
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 // We need to make sure the overlay doesn't affect the position of other UI nodes
                 position_type: PositionType::Absolute,
                 ..default()
diff --git a/crates/bevy_dev_tools/src/ui_debug_overlay/mod.rs b/crates/bevy_dev_tools/src/ui_debug_overlay/mod.rs
index 550cd1c29d..4e72778f15 100644
--- a/crates/bevy_dev_tools/src/ui_debug_overlay/mod.rs
+++ b/crates/bevy_dev_tools/src/ui_debug_overlay/mod.rs
@@ -15,7 +15,7 @@ use bevy_render::{
     view::{RenderLayers, VisibilitySystems},
 };
 use bevy_transform::{prelude::GlobalTransform, TransformSystem};
-use bevy_ui::{DefaultUiCamera, Display, Node, Style, TargetCamera, UiScale};
+use bevy_ui::{ComputedNode, DefaultUiCamera, Display, Node, TargetCamera, UiScale};
 use bevy_utils::{default, warn_once};
 use bevy_window::{PrimaryWindow, Window, WindowRef};
 
@@ -37,7 +37,7 @@ struct LayoutRect {
 }
 
 impl LayoutRect {
-    fn new(trans: &GlobalTransform, node: &Node, scale: f32) -> Self {
+    fn new(trans: &GlobalTransform, node: &ComputedNode, scale: f32) -> Self {
         let mut this = Self {
             pos: trans.translation().xy() * scale,
             size: node.size() * scale,
@@ -123,8 +123,8 @@ fn outline_nodes(outline: &OutlineParam, draw: &mut InsetGizmo, this_entity: Ent
         return;
     };
 
-    for (entity, trans, node, style, children) in outline.nodes.iter_many(to_iter) {
-        if style.is_none() || style.is_some_and(|s| matches!(s.display, Display::None)) {
+    for (entity, trans, node, computed_node, children) in outline.nodes.iter_many(to_iter) {
+        if matches!(node.display, Display::None) {
             continue;
         }
 
@@ -133,7 +133,7 @@ fn outline_nodes(outline: &OutlineParam, draw: &mut InsetGizmo, this_entity: Ent
                 continue;
             }
         }
-        let rect = LayoutRect::new(trans, node, scale);
+        let rect = LayoutRect::new(trans, computed_node, scale);
         outline_node(entity, rect, draw);
         if children.is_some() {
             outline_nodes(outline, draw, entity, scale);
@@ -146,7 +146,7 @@ type NodesQuery = (
     Entity,
     &'static GlobalTransform,
     &'static Node,
-    Option<&'static Style>,
+    &'static ComputedNode,
     Option<&'static Children>,
 );
 
@@ -178,7 +178,7 @@ fn outline_roots(
         (
             Entity,
             &GlobalTransform,
-            &Node,
+            &ComputedNode,
             Option<&ViewVisibility>,
             Option<&TargetCamera>,
         ),
diff --git a/crates/bevy_ecs/src/query/filter.rs b/crates/bevy_ecs/src/query/filter.rs
index e75f506039..024332b914 100644
--- a/crates/bevy_ecs/src/query/filter.rs
+++ b/crates/bevy_ecs/src/query/filter.rs
@@ -352,9 +352,9 @@ unsafe impl<T: Component> QueryFilter for Without<T> {
 /// # #[derive(Component, Debug)]
 /// # struct Color {};
 /// # #[derive(Component)]
-/// # struct Style {};
+/// # struct Node {};
 /// #
-/// fn print_cool_entity_system(query: Query<Entity, Or<(Changed<Color>, Changed<Style>)>>) {
+/// fn print_cool_entity_system(query: Query<Entity, Or<(Changed<Color>, Changed<Node>)>>) {
 ///     for entity in &query {
 ///         println!("Entity {:?} got a new style or color", entity);
 ///     }
diff --git a/crates/bevy_text/src/text_access.rs b/crates/bevy_text/src/text_access.rs
index a0c3409282..2d0c7dcfe5 100644
--- a/crates/bevy_text/src/text_access.rs
+++ b/crates/bevy_text/src/text_access.rs
@@ -171,11 +171,11 @@ impl<'a, R: TextRoot> Iterator for TextSpanIter<'a, R> {
     fn next(&mut self) -> Option<Self::Item> {
         // Root
         if let Some(root_entity) = self.root_entity.take() {
-            if let Ok((text, style, color, maybe_children)) = self.roots.get(root_entity) {
+            if let Ok((text, text_font, color, maybe_children)) = self.roots.get(root_entity) {
                 if let Some(children) = maybe_children {
                     self.stack.push((children, 0));
                 }
-                return Some((root_entity, 0, text.read_span(), style, color.0));
+                return Some((root_entity, 0, text.read_span(), text_font, color.0));
             }
             return None;
         }
@@ -193,7 +193,7 @@ impl<'a, R: TextRoot> Iterator for TextSpanIter<'a, R> {
                 *idx += 1;
 
                 let entity = *child;
-                let Ok((span, style, color, maybe_children)) = self.spans.get(entity) else {
+                let Ok((span, text_font, color, maybe_children)) = self.spans.get(entity) else {
                     continue;
                 };
 
@@ -201,7 +201,7 @@ impl<'a, R: TextRoot> Iterator for TextSpanIter<'a, R> {
                 if let Some(children) = maybe_children {
                     self.stack.push((children, 0));
                 }
-                return Some((entity, depth, span.read_span(), style, color.0));
+                return Some((entity, depth, span.read_span(), text_font, color.0));
             }
 
             // All children at this stack entry have been iterated.
diff --git a/crates/bevy_ui/src/accessibility.rs b/crates/bevy_ui/src/accessibility.rs
index 0e6b1780aa..85a8f0c547 100644
--- a/crates/bevy_ui/src/accessibility.rs
+++ b/crates/bevy_ui/src/accessibility.rs
@@ -2,7 +2,7 @@ use crate::{
     experimental::UiChildren,
     prelude::{Button, Label},
     widget::TextUiReader,
-    Node, UiImage,
+    ComputedNode, UiImage,
 };
 use bevy_a11y::{
     accesskit::{NodeBuilder, Rect, Role},
@@ -38,7 +38,11 @@ fn calc_name(
 
 fn calc_bounds(
     camera: Query<(&Camera, &GlobalTransform)>,
-    mut nodes: Query<(&mut AccessibilityNode, Ref<Node>, Ref<GlobalTransform>)>,
+    mut nodes: Query<(
+        &mut AccessibilityNode,
+        Ref<ComputedNode>,
+        Ref<GlobalTransform>,
+    )>,
 ) {
     if let Ok((camera, camera_transform)) = camera.get_single() {
         for (mut accessible, node, transform) in &mut nodes {
diff --git a/crates/bevy_ui/src/focus.rs b/crates/bevy_ui/src/focus.rs
index 823fa36e74..763c6e00f0 100644
--- a/crates/bevy_ui/src/focus.rs
+++ b/crates/bevy_ui/src/focus.rs
@@ -1,5 +1,6 @@
 use crate::{
-    CalculatedClip, DefaultUiCamera, Node, ResolvedBorderRadius, TargetCamera, UiScale, UiStack,
+    CalculatedClip, ComputedNode, DefaultUiCamera, ResolvedBorderRadius, TargetCamera, UiScale,
+    UiStack,
 };
 use bevy_ecs::{
     change_detection::DetectChangesMut,
@@ -74,7 +75,7 @@ impl Default for Interaction {
 ///
 /// It can be used alongside [`Interaction`] to get the position of the press.
 ///
-/// The component is updated when it is in the same entity with [`Node`].
+/// The component is updated when it is in the same entity with [`Node`](crate::Node).
 #[derive(Component, Copy, Clone, Default, PartialEq, Debug, Reflect)]
 #[reflect(Component, Default, PartialEq, Debug)]
 #[cfg_attr(
@@ -135,7 +136,7 @@ pub struct State {
 #[query_data(mutable)]
 pub struct NodeQuery {
     entity: Entity,
-    node: &'static Node,
+    node: &'static ComputedNode,
     global_transform: &'static GlobalTransform,
     interaction: Option<&'static mut Interaction>,
     relative_cursor_position: Option<&'static mut RelativeCursorPosition>,
diff --git a/crates/bevy_ui/src/geometry.rs b/crates/bevy_ui/src/geometry.rs
index 32cf44745a..391085d0dc 100644
--- a/crates/bevy_ui/src/geometry.rs
+++ b/crates/bevy_ui/src/geometry.rs
@@ -8,7 +8,7 @@ use bevy_reflect::{ReflectDeserialize, ReflectSerialize};
 
 /// Represents the possible value types for layout properties.
 ///
-/// This enum allows specifying values for various [`Style`](crate::Style) properties in different units,
+/// This enum allows specifying values for various [`Node`](crate::Node) properties in different units,
 /// such as logical pixels, percentages, or automatically determined values.
 #[derive(Copy, Clone, Debug, Reflect)]
 #[reflect(Default, PartialEq, Debug)]
@@ -18,7 +18,7 @@ use bevy_reflect::{ReflectDeserialize, ReflectSerialize};
     reflect(Serialize, Deserialize)
 )]
 pub enum Val {
-    /// Automatically determine the value based on the context and other [`Style`](crate::Style) properties.
+    /// Automatically determine the value based on the context and other [`Node`](crate::Node) properties.
     Auto,
     /// Set this value in logical pixels.
     Px(f32),
@@ -27,7 +27,7 @@ pub enum Val {
     /// If the UI node has no parent, the percentage is calculated based on the window's length
     /// along the corresponding axis.
     ///
-    /// The chosen axis depends on the [`Style`](crate::Style) field set:
+    /// The chosen axis depends on the [`Node`](crate::Node) field set:
     /// * For `flex_basis`, the percentage is relative to the main-axis length determined by the `flex_direction`.
     /// * For `gap`, `min_size`, `size`, and `max_size`:
     ///   - `width` is relative to the parent's width.
diff --git a/crates/bevy_ui/src/layout/convert.rs b/crates/bevy_ui/src/layout/convert.rs
index 6ee10ae0bf..cbe790f3f5 100644
--- a/crates/bevy_ui/src/layout/convert.rs
+++ b/crates/bevy_ui/src/layout/convert.rs
@@ -3,8 +3,8 @@ use taffy::style_helpers;
 use crate::{
     AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
     GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
-    MaxTrackSizingFunction, MinTrackSizingFunction, OverflowAxis, PositionType, RepeatedGridTrack,
-    Style, UiRect, Val,
+    MaxTrackSizingFunction, MinTrackSizingFunction, Node, OverflowAxis, PositionType,
+    RepeatedGridTrack, UiRect, Val,
 };
 
 use super::LayoutContext;
@@ -63,37 +63,33 @@ impl UiRect {
     }
 }
 
-pub fn from_style(
-    context: &LayoutContext,
-    style: &Style,
-    ignore_border: bool,
-) -> taffy::style::Style {
+pub fn from_node(node: &Node, context: &LayoutContext, ignore_border: bool) -> taffy::style::Style {
     taffy::style::Style {
-        display: style.display.into(),
+        display: node.display.into(),
         overflow: taffy::Point {
-            x: style.overflow.x.into(),
-            y: style.overflow.y.into(),
+            x: node.overflow.x.into(),
+            y: node.overflow.y.into(),
         },
         scrollbar_width: 0.0,
-        position: style.position_type.into(),
-        flex_direction: style.flex_direction.into(),
-        flex_wrap: style.flex_wrap.into(),
-        align_items: style.align_items.into(),
-        justify_items: style.justify_items.into(),
-        align_self: style.align_self.into(),
-        justify_self: style.justify_self.into(),
-        align_content: style.align_content.into(),
-        justify_content: style.justify_content.into(),
+        position: node.position_type.into(),
+        flex_direction: node.flex_direction.into(),
+        flex_wrap: node.flex_wrap.into(),
+        align_items: node.align_items.into(),
+        justify_items: node.justify_items.into(),
+        align_self: node.align_self.into(),
+        justify_self: node.justify_self.into(),
+        align_content: node.align_content.into(),
+        justify_content: node.justify_content.into(),
         inset: taffy::Rect {
-            left: style.left.into_length_percentage_auto(context),
-            right: style.right.into_length_percentage_auto(context),
-            top: style.top.into_length_percentage_auto(context),
-            bottom: style.bottom.into_length_percentage_auto(context),
+            left: node.left.into_length_percentage_auto(context),
+            right: node.right.into_length_percentage_auto(context),
+            top: node.top.into_length_percentage_auto(context),
+            bottom: node.bottom.into_length_percentage_auto(context),
         },
-        margin: style
+        margin: node
             .margin
             .map_to_taffy_rect(|m| m.into_length_percentage_auto(context)),
-        padding: style
+        padding: node
             .padding
             .map_to_taffy_rect(|m| m.into_length_percentage(context)),
         // Ignore border for leaf nodes as it isn't implemented in the rendering engine.
@@ -101,53 +97,52 @@ pub fn from_style(
         border: if ignore_border {
             taffy::Rect::zero()
         } else {
-            style
-                .border
+            node.border
                 .map_to_taffy_rect(|m| m.into_length_percentage(context))
         },
-        flex_grow: style.flex_grow,
-        flex_shrink: style.flex_shrink,
-        flex_basis: style.flex_basis.into_dimension(context),
+        flex_grow: node.flex_grow,
+        flex_shrink: node.flex_shrink,
+        flex_basis: node.flex_basis.into_dimension(context),
         size: taffy::Size {
-            width: style.width.into_dimension(context),
-            height: style.height.into_dimension(context),
+            width: node.width.into_dimension(context),
+            height: node.height.into_dimension(context),
         },
         min_size: taffy::Size {
-            width: style.min_width.into_dimension(context),
-            height: style.min_height.into_dimension(context),
+            width: node.min_width.into_dimension(context),
+            height: node.min_height.into_dimension(context),
         },
         max_size: taffy::Size {
-            width: style.max_width.into_dimension(context),
-            height: style.max_height.into_dimension(context),
+            width: node.max_width.into_dimension(context),
+            height: node.max_height.into_dimension(context),
         },
-        aspect_ratio: style.aspect_ratio,
+        aspect_ratio: node.aspect_ratio,
         gap: taffy::Size {
-            width: style.column_gap.into_length_percentage(context),
-            height: style.row_gap.into_length_percentage(context),
+            width: node.column_gap.into_length_percentage(context),
+            height: node.row_gap.into_length_percentage(context),
         },
-        grid_auto_flow: style.grid_auto_flow.into(),
-        grid_template_rows: style
+        grid_auto_flow: node.grid_auto_flow.into(),
+        grid_template_rows: node
             .grid_template_rows
             .iter()
             .map(|track| track.clone_into_repeated_taffy_track(context))
             .collect::<Vec<_>>(),
-        grid_template_columns: style
+        grid_template_columns: node
             .grid_template_columns
             .iter()
             .map(|track| track.clone_into_repeated_taffy_track(context))
             .collect::<Vec<_>>(),
-        grid_auto_rows: style
+        grid_auto_rows: node
             .grid_auto_rows
             .iter()
             .map(|track| track.into_taffy_track(context))
             .collect::<Vec<_>>(),
-        grid_auto_columns: style
+        grid_auto_columns: node
             .grid_auto_columns
             .iter()
             .map(|track| track.into_taffy_track(context))
             .collect::<Vec<_>>(),
-        grid_row: style.grid_row.into(),
-        grid_column: style.grid_column.into(),
+        grid_row: node.grid_row.into(),
+        grid_column: node.grid_column.into(),
     }
 }
 
@@ -448,7 +443,7 @@ mod tests {
         use sh::TaffyZero;
         use taffy::style_helpers as sh;
 
-        let bevy_style = Style {
+        let node = Node {
             display: Display::Flex,
             position_type: PositionType::Absolute,
             left: Val::ZERO,
@@ -516,7 +511,7 @@ mod tests {
             grid_row: GridPlacement::span(3),
         };
         let viewport_values = LayoutContext::new(1.0, bevy_math::Vec2::new(800., 600.));
-        let taffy_style = from_style(&viewport_values, &bevy_style, false);
+        let taffy_style = from_node(&node, &viewport_values, false);
         assert_eq!(taffy_style.display, taffy::style::Display::Flex);
         assert_eq!(taffy_style.position, taffy::style::Position::Absolute);
         assert_eq!(
diff --git a/crates/bevy_ui/src/layout/mod.rs b/crates/bevy_ui/src/layout/mod.rs
index 0a4c748051..3cb680e15e 100644
--- a/crates/bevy_ui/src/layout/mod.rs
+++ b/crates/bevy_ui/src/layout/mod.rs
@@ -1,7 +1,7 @@
 use crate::{
     experimental::{UiChildren, UiRootNodes},
-    BorderRadius, ContentSize, DefaultUiCamera, Display, Node, Outline, OverflowAxis,
-    ScrollPosition, Style, TargetCamera, UiScale,
+    BorderRadius, ComputedNode, ContentSize, DefaultUiCamera, Display, Node, Outline, OverflowAxis,
+    ScrollPosition, TargetCamera, UiScale,
 };
 use bevy_ecs::{
     change_detection::{DetectChanges, DetectChangesMut},
@@ -115,22 +115,19 @@ pub fn ui_layout_system(
     mut resize_events: EventReader<bevy_window::WindowResized>,
     mut ui_surface: ResMut<UiSurface>,
     root_nodes: UiRootNodes,
-    mut style_query: Query<
-        (
-            Entity,
-            Ref<Style>,
-            Option<&mut ContentSize>,
-            Option<&TargetCamera>,
-        ),
-        With<Node>,
-    >,
-    node_query: Query<(Entity, Option<Ref<Parent>>), With<Node>>,
+    mut node_query: Query<(
+        Entity,
+        Ref<Node>,
+        Option<&mut ContentSize>,
+        Option<&TargetCamera>,
+    )>,
+    computed_node_query: Query<(Entity, Option<Ref<Parent>>), With<ComputedNode>>,
     ui_children: UiChildren,
     mut removed_components: UiLayoutSystemRemovedComponentParam,
     mut node_transform_query: Query<(
-        &mut Node,
+        &mut ComputedNode,
         &mut Transform,
-        &Style,
+        &Node,
         Option<&BorderRadius>,
         Option<&Outline>,
         Option<&ScrollPosition>,
@@ -173,7 +170,7 @@ pub fn ui_layout_system(
     // Precalculate the layout info for each camera, so we have fast access to it for each node
     camera_layout_info.clear();
 
-    style_query
+    node_query
         .iter_many(root_nodes.iter())
         .for_each(|(entity, _, _, target_camera)| {
             match camera_with_default(target_camera) {
@@ -211,17 +208,17 @@ pub fn ui_layout_system(
         ui_surface.try_remove_node_context(entity);
     }
 
-    // Sync Style and ContentSize to Taffy for all nodes
-    style_query
+    // Sync Node and ContentSize to Taffy for all nodes
+    node_query
         .iter_mut()
-        .for_each(|(entity, style, content_size, target_camera)| {
+        .for_each(|(entity, node, content_size, target_camera)| {
             if let Some(camera) =
                 camera_with_default(target_camera).and_then(|c| camera_layout_info.get(&c))
             {
                 if camera.resized
                     || !scale_factor_events.is_empty()
                     || ui_scale.is_changed()
-                    || style.is_changed()
+                    || node.is_changed()
                     || content_size
                         .as_ref()
                         .map(|c| c.measure.is_some())
@@ -232,10 +229,10 @@ pub fn ui_layout_system(
                         [camera.size.x as f32, camera.size.y as f32].into(),
                     );
                     let measure = content_size.and_then(|mut c| c.measure.take());
-                    ui_surface.upsert_node(&layout_context, entity, &style, measure);
+                    ui_surface.upsert_node(&layout_context, entity, &node, measure);
                 }
             } else {
-                ui_surface.upsert_node(&LayoutContext::DEFAULT, entity, &Style::default(), None);
+                ui_surface.upsert_node(&LayoutContext::DEFAULT, entity, &Node::default(), None);
             }
         });
     scale_factor_events.clear();
@@ -259,30 +256,32 @@ pub fn ui_layout_system(
         ui_surface.try_remove_children(entity);
     }
 
-    node_query.iter().for_each(|(entity, maybe_parent)| {
-        if let Some(parent) = maybe_parent {
-            // Note: This does not cover the case where a parent's Node component was removed.
-            // Users are responsible for fixing hierarchies if they do that (it is not recommended).
-            // Detecting it here would be a permanent perf burden on the hot path.
-            if parent.is_changed() && !ui_children.is_ui_node(parent.get()) {
-                warn!(
-                    "Styled child ({entity}) in a non-UI entity hierarchy. You are using an entity \
+    computed_node_query
+        .iter()
+        .for_each(|(entity, maybe_parent)| {
+            if let Some(parent) = maybe_parent {
+                // Note: This does not cover the case where a parent's Node component was removed.
+                // Users are responsible for fixing hierarchies if they do that (it is not recommended).
+                // Detecting it here would be a permanent perf burden on the hot path.
+                if parent.is_changed() && !ui_children.is_ui_node(parent.get()) {
+                    warn!(
+                        "Node ({entity}) is in a non-UI entity hierarchy. You are using an entity \
 with UI components as a child of an entity without UI components, your UI layout may be broken."
-                );
+                    );
+                }
             }
-        }
 
-        if ui_children.is_changed(entity) {
-            ui_surface.update_children(entity, ui_children.iter_ui_children(entity));
-        }
-    });
+            if ui_children.is_changed(entity) {
+                ui_surface.update_children(entity, ui_children.iter_ui_children(entity));
+            }
+        });
 
     let text_buffers = &mut buffer_query;
     // clean up removed nodes after syncing children to avoid potential panic (invalid SlotMap key used)
     ui_surface.remove_entities(removed_components.removed_nodes.read());
 
     // Re-sync changed children: avoid layout glitches caused by removed nodes that are still set as a child of another node
-    node_query.iter().for_each(|(entity, _)| {
+    computed_node_query.iter().for_each(|(entity, _)| {
         if ui_children.is_changed(entity) {
             ui_surface.update_children(entity, ui_children.iter_ui_children(entity));
         }
@@ -319,9 +318,9 @@ with UI components as a child of an entity without UI components, your UI layout
         ui_surface: &UiSurface,
         root_size: Option<Vec2>,
         node_transform_query: &mut Query<(
-            &mut Node,
+            &mut ComputedNode,
             &mut Transform,
-            &Style,
+            &Node,
             Option<&BorderRadius>,
             Option<&Outline>,
             Option<&ScrollPosition>,
@@ -581,25 +580,19 @@ mod tests {
 
         // spawn a root entity with width and height set to fill 100% of its parent
         let ui_root = world
-            .spawn((
-                Node::default(),
-                Style {
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                ..default()
+            })
             .id();
 
         let ui_child = world
-            .spawn((
-                Node::default(),
-                Style {
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                ..default()
+            })
             .id();
 
         world.entity_mut(ui_root).add_child(ui_child);
@@ -828,45 +821,36 @@ mod tests {
 
         let mut size = 150.;
 
-        world.spawn((
-            Node::default(),
-            Style {
-                // test should pass without explicitly requiring position_type to be set to Absolute
-                // position_type: PositionType::Absolute,
-                width: Val::Px(size),
-                height: Val::Px(size),
-                ..default()
-            },
-        ));
+        world.spawn(Node {
+            // test should pass without explicitly requiring position_type to be set to Absolute
+            // position_type: PositionType::Absolute,
+            width: Val::Px(size),
+            height: Val::Px(size),
+            ..default()
+        });
 
         size -= 50.;
 
-        world.spawn((
-            Node::default(),
-            Style {
-                // position_type: PositionType::Absolute,
-                width: Val::Px(size),
-                height: Val::Px(size),
-                ..default()
-            },
-        ));
+        world.spawn(Node {
+            // position_type: PositionType::Absolute,
+            width: Val::Px(size),
+            height: Val::Px(size),
+            ..default()
+        });
 
         size -= 50.;
 
-        world.spawn((
-            Node::default(),
-            Style {
-                // position_type: PositionType::Absolute,
-                width: Val::Px(size),
-                height: Val::Px(size),
-                ..default()
-            },
-        ));
+        world.spawn(Node {
+            // position_type: PositionType::Absolute,
+            width: Val::Px(size),
+            height: Val::Px(size),
+            ..default()
+        });
 
         ui_schedule.run(&mut world);
 
         let overlap_check = world
-            .query_filtered::<(Entity, &Node, &GlobalTransform), Without<Parent>>()
+            .query_filtered::<(Entity, &ComputedNode, &GlobalTransform), Without<Parent>>()
             .iter(&world)
             .fold(
                 Option::<(Rect, bool)>::None,
@@ -949,7 +933,7 @@ mod tests {
                 commands
                     .entity(moving_ui_entity)
                     .insert(TargetCamera(target_camera_entity))
-                    .insert(Style {
+                    .insert(Node {
                         position_type: PositionType::Absolute,
                         top: Val::Px(pos.y),
                         left: Val::Px(pos.x),
@@ -996,8 +980,7 @@ mod tests {
         ));
 
         world.spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(0.),
                 left: Val::Px(0.),
@@ -1050,8 +1033,7 @@ mod tests {
 
         let ui_entity = world
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     align_self: AlignSelf::Start,
                     ..default()
                 },
@@ -1076,8 +1058,7 @@ mod tests {
         let content_size = Vec2::new(50., 25.);
         let ui_entity = world
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     align_self: AlignSelf::Start,
                     ..Default::default()
                 },
@@ -1115,26 +1096,20 @@ mod tests {
         let (mut world, mut ui_schedule) = setup_ui_test_world();
 
         let parent = world
-            .spawn((
-                Node::default(),
-                Style {
-                    display: Display::Grid,
-                    grid_template_columns: RepeatedGridTrack::min_content(2),
-                    margin: UiRect::all(Val::Px(4.0)),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                display: Display::Grid,
+                grid_template_columns: RepeatedGridTrack::min_content(2),
+                margin: UiRect::all(Val::Px(4.0)),
+                ..default()
+            })
             .with_children(|commands| {
                 for _ in 0..2 {
-                    commands.spawn((
-                        Node::default(),
-                        Style {
-                            display: Display::Grid,
-                            width: Val::Px(160.),
-                            height: Val::Px(160.),
-                            ..default()
-                        },
-                    ));
+                    commands.spawn(Node {
+                        display: Display::Grid,
+                        width: Val::Px(160.),
+                        height: Val::Px(160.),
+                        ..default()
+                    });
                 }
             })
             .id();
@@ -1154,9 +1129,9 @@ mod tests {
                 ui_schedule.run(&mut world);
                 let width_sum: f32 = children
                     .iter()
-                    .map(|child| world.get::<Node>(*child).unwrap().calculated_size.x)
+                    .map(|child| world.get::<ComputedNode>(*child).unwrap().calculated_size.x)
                     .sum();
-                let parent_width = world.get::<Node>(parent).unwrap().calculated_size.x;
+                let parent_width = world.get::<ComputedNode>(parent).unwrap().calculated_size.x;
                 assert!((width_sum - parent_width).abs() < 0.001);
                 assert!((width_sum - 320.).abs() <= 1.);
                 s += r;
@@ -1205,25 +1180,19 @@ mod tests {
         );
 
         let ui_root = world
-            .spawn((
-                Node::default(),
-                Style {
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                ..default()
+            })
             .id();
 
         let ui_child = world
-            .spawn((
-                Node::default(),
-                Style {
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                ..default()
+            })
             .id();
 
         world.entity_mut(ui_root).add_child(ui_child);
@@ -1254,7 +1223,7 @@ mod tests {
             ui_surface.upsert_node(
                 &LayoutContext::TEST_CONTEXT,
                 params.root_node_entity,
-                &Style::default(),
+                &Node::default(),
                 None,
             );
 
diff --git a/crates/bevy_ui/src/layout/ui_surface.rs b/crates/bevy_ui/src/layout/ui_surface.rs
index 944f24d0bb..7bd6691129 100644
--- a/crates/bevy_ui/src/layout/ui_surface.rs
+++ b/crates/bevy_ui/src/layout/ui_surface.rs
@@ -9,9 +9,7 @@ use bevy_ecs::{
 use bevy_math::UVec2;
 use bevy_utils::default;
 
-use crate::{
-    layout::convert, LayoutContext, LayoutError, Measure, MeasureArgs, NodeMeasure, Style,
-};
+use crate::{layout::convert, LayoutContext, LayoutError, Measure, MeasureArgs, Node, NodeMeasure};
 
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct RootNodePair {
@@ -71,7 +69,7 @@ impl UiSurface {
         &mut self,
         layout_context: &LayoutContext,
         entity: Entity,
-        style: &Style,
+        node: &Node,
         mut new_node_context: Option<NodeMeasure>,
     ) {
         let taffy = &mut self.taffy;
@@ -81,14 +79,11 @@ impl UiSurface {
             added = true;
             if let Some(measure) = new_node_context.take() {
                 taffy
-                    .new_leaf_with_context(
-                        convert::from_style(layout_context, style, true),
-                        measure,
-                    )
+                    .new_leaf_with_context(convert::from_node(node, layout_context, true), measure)
                     .unwrap()
             } else {
                 taffy
-                    .new_leaf(convert::from_style(layout_context, style, false))
+                    .new_leaf(convert::from_node(node, layout_context, false))
                     .unwrap()
             }
         });
@@ -106,7 +101,7 @@ impl UiSurface {
             taffy
                 .set_style(
                     taffy_node_id,
-                    convert::from_style(layout_context, style, has_measure),
+                    convert::from_node(node, layout_context, has_measure),
                 )
                 .unwrap();
         }
@@ -353,17 +348,17 @@ mod tests {
         let mut ui_surface = UiSurface::default();
         let camera_entity = Entity::from_raw(0);
         let root_node_entity = Entity::from_raw(1);
-        let style = Style::default();
+        let node = Node::default();
 
         // standard upsert
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         // should be inserted into taffy
         assert_eq!(ui_surface.taffy.total_node_count(), 1);
         assert!(ui_surface.entity_to_taffy.contains_key(&root_node_entity));
 
         // test duplicate insert 1
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         // node count should not have increased
         assert_eq!(ui_surface.taffy.total_node_count(), 1);
@@ -380,7 +375,7 @@ mod tests {
         assert!(is_root_node_pair_valid(&ui_surface.taffy, root_node_pair));
 
         // test duplicate insert 2
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         // node count should not have increased
         assert_eq!(ui_surface.taffy.total_node_count(), 2);
@@ -418,9 +413,9 @@ mod tests {
         let mut ui_surface = UiSurface::default();
         let camera_entity = Entity::from_raw(0);
         let root_node_entity = Entity::from_raw(1);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         // assign root node to camera
         ui_surface.set_camera_children(camera_entity, [root_node_entity].into_iter());
@@ -453,9 +448,9 @@ mod tests {
         let mut ui_surface = UiSurface::default();
         let camera_entity = Entity::from_raw(0);
         let root_node_entity = Entity::from_raw(1);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         // assign root node to camera
         ui_surface.set_camera_children(camera_entity, [root_node_entity].into_iter());
@@ -502,9 +497,9 @@ mod tests {
         let mut ui_surface = UiSurface::default();
         let camera_entity = Entity::from_raw(0);
         let root_node_entity = Entity::from_raw(1);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
 
         ui_surface.set_camera_children(camera_entity, [root_node_entity].into_iter());
 
@@ -548,9 +543,9 @@ mod tests {
     fn test_try_update_measure() {
         let mut ui_surface = UiSurface::default();
         let root_node_entity = Entity::from_raw(1);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
         let mut content_size = ContentSize::default();
         content_size.set(NodeMeasure::Fixed(FixedMeasure { size: Vec2::ONE }));
         let measure_func = content_size.measure.take().unwrap();
@@ -564,10 +559,10 @@ mod tests {
         let mut ui_surface = UiSurface::default();
         let root_node_entity = Entity::from_raw(1);
         let child_entity = Entity::from_raw(2);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, child_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, child_entity, &node, None);
 
         ui_surface.update_children(root_node_entity, vec![child_entity].into_iter());
 
@@ -583,10 +578,10 @@ mod tests {
         let camera_entity = Entity::from_raw(0);
         let root_node_entity = Entity::from_raw(1);
         let child_entity = Entity::from_raw(2);
-        let style = Style::default();
+        let node = Node::default();
 
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &style, None);
-        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, child_entity, &style, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, root_node_entity, &node, None);
+        ui_surface.upsert_node(&LayoutContext::TEST_CONTEXT, child_entity, &node, None);
 
         let root_taffy_node = *ui_surface.entity_to_taffy.get(&root_node_entity).unwrap();
         let child_taffy = *ui_surface.entity_to_taffy.get(&child_entity).unwrap();
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 1493090be9..0e19e475f6 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -129,10 +129,6 @@ struct AmbiguousWithTextSystem;
 #[derive(SystemSet, Debug, Hash, PartialEq, Eq, Clone)]
 struct AmbiguousWithUpdateText2DLayout;
 
-/// A convenient alias for `With<Node>`, for use with
-/// [`bevy_render::view::VisibleEntities`].
-pub type WithNode = With<Node>;
-
 impl Plugin for UiPlugin {
     fn build(&self, app: &mut App) {
         app.init_resource::<UiSurface>()
@@ -140,13 +136,13 @@ impl Plugin for UiPlugin {
             .init_resource::<UiStack>()
             .register_type::<BackgroundColor>()
             .register_type::<CalculatedClip>()
+            .register_type::<ComputedNode>()
             .register_type::<ContentSize>()
             .register_type::<FocusPolicy>()
             .register_type::<Interaction>()
             .register_type::<Node>()
             .register_type::<RelativeCursorPosition>()
             .register_type::<ScrollPosition>()
-            .register_type::<Style>()
             .register_type::<TargetCamera>()
             .register_type::<UiImage>()
             .register_type::<UiImageSize>()
@@ -189,7 +185,7 @@ impl Plugin for UiPlugin {
         app.add_systems(
             PostUpdate,
             (
-                check_visibility::<WithNode>.in_set(VisibilitySystems::CheckVisibility),
+                check_visibility::<With<Node>>.in_set(VisibilitySystems::CheckVisibility),
                 update_target_camera_system.in_set(UiSystem::Prepare),
                 ui_layout_system_config,
                 ui_stack_system
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 7d768274f6..41da0e41b8 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -3,8 +3,8 @@
 
 use crate::{
     widget::{Button, UiImageSize},
-    BackgroundColor, BorderColor, BorderRadius, ContentSize, FocusPolicy, Interaction,
-    MaterialNode, Node, ScrollPosition, Style, UiImage, UiMaterial, ZIndex,
+    BackgroundColor, BorderColor, BorderRadius, ComputedNode, ContentSize, FocusPolicy,
+    Interaction, MaterialNode, Node, ScrollPosition, UiImage, UiMaterial, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::view::{InheritedVisibility, ViewVisibility, Visibility};
@@ -21,11 +21,11 @@ use bevy_transform::prelude::{GlobalTransform, Transform};
     note = "Use the `Node` component instead. Inserting `Node` will also insert the other components required automatically."
 )]
 pub struct NodeBundle {
-    /// Describes the logical size of the node
+    /// Controls the layout (size and position) of the node and its children
+    /// This also affect how the node is drawn/painted.
     pub node: Node,
-    /// Styles which control the layout (size and position) of the node and its children
-    /// In some cases these styles also affect how the node drawn/painted.
-    pub style: Style,
+    /// Describes the logical size of the node
+    pub computed_node: ComputedNode,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
     /// The color of the Node's border
@@ -39,12 +39,12 @@ pub struct NodeBundle {
     /// The transform of the node
     ///
     /// This component is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Node`] component.
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This component is automatically updated by the [`TransformPropagate`](`bevy_transform::TransformSystem::TransformPropagate`) systems.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Node`] component.
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -70,10 +70,10 @@ pub struct NodeBundle {
 )]
 pub struct ImageBundle {
     /// Describes the logical size of the node
+    pub computed_node: ComputedNode,
+    /// Controls the layout (size and position) of the node and its children
+    /// This also affects how the node is drawn/painted.
     pub node: Node,
-    /// Styles which control the layout (size and position) of the node and its children
-    /// In some cases these styles also affect how the node drawn/painted.
-    pub style: Style,
     /// The calculated size based on the given image
     pub calculated_size: ContentSize,
     /// The image of the node.
@@ -93,7 +93,7 @@ pub struct ImageBundle {
     /// The transform of the node
     ///
     /// This component is automatically managed by the UI layout system.
-    /// To alter the position of the `ImageBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `ImageBundle`, use the properties of the [`Node`] component.
     pub transform: Transform,
     /// The global transform of the node
     ///
@@ -123,12 +123,12 @@ pub struct ImageBundle {
 )]
 pub struct ButtonBundle {
     /// Describes the logical size of the node
-    pub node: Node,
+    pub computed_node: ComputedNode,
     /// Marker component that signals this node is a button
     pub button: Button,
-    /// Styles which control the layout (size and position) of the node and its children
-    /// In some cases these styles also affect how the node drawn/painted.
-    pub style: Style,
+    /// Controls the layout (size and position) of the node and its children
+    /// Also affect how the node is drawn/painted.
+    pub node: Node,
     /// Describes whether and how the button has been interacted with by the input
     pub interaction: Interaction,
     /// Whether this node should block interaction with lower nodes
@@ -144,7 +144,7 @@ pub struct ButtonBundle {
     /// The transform of the node
     ///
     /// This component is automatically managed by the UI layout system.
-    /// To alter the position of the `ButtonBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `ButtonBundle`, use the properties of the [`Node`] component.
     pub transform: Transform,
     /// The global transform of the node
     ///
@@ -164,8 +164,8 @@ impl Default for ButtonBundle {
     fn default() -> Self {
         Self {
             node: Default::default(),
+            computed_node: Default::default(),
             button: Default::default(),
-            style: Default::default(),
             interaction: Default::default(),
             focus_policy: FocusPolicy::Block,
             border_color: Default::default(),
@@ -193,10 +193,10 @@ impl Default for ButtonBundle {
 )]
 pub struct MaterialNodeBundle<M: UiMaterial> {
     /// Describes the logical size of the node
+    pub computed_node: ComputedNode,
+    /// Controls the layout (size and position) of the node and its children
+    /// Also affects how the node is drawn/painted.
     pub node: Node,
-    /// Styles which control the layout (size and position) of the node and its children
-    /// In some cases these styles also affect how the node drawn/painted.
-    pub style: Style,
     /// The [`UiMaterial`] used to render the node.
     pub material: MaterialNode<M>,
     /// Whether this node should block interaction with lower nodes
@@ -204,12 +204,12 @@ pub struct MaterialNodeBundle<M: UiMaterial> {
     /// The transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Node`] component.
     pub transform: Transform,
     /// The global transform of the node
     ///
     /// This field is automatically managed by the UI layout system.
-    /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component.
+    /// To alter the position of the `NodeBundle`, use the properties of the [`Node`] component.
     pub global_transform: GlobalTransform,
     /// Describes the visibility properties of the node
     pub visibility: Visibility,
@@ -225,7 +225,7 @@ impl<M: UiMaterial> Default for MaterialNodeBundle<M> {
     fn default() -> Self {
         Self {
             node: Default::default(),
-            style: Default::default(),
+            computed_node: Default::default(),
             material: Default::default(),
             focus_policy: Default::default(),
             transform: Default::default(),
diff --git a/crates/bevy_ui/src/picking_backend.rs b/crates/bevy_ui/src/picking_backend.rs
index 500fea213b..cc41fb20b0 100644
--- a/crates/bevy_ui/src/picking_backend.rs
+++ b/crates/bevy_ui/src/picking_backend.rs
@@ -48,7 +48,7 @@ impl Plugin for UiPickingBackendPlugin {
 #[query_data(mutable)]
 pub struct NodeQuery {
     entity: Entity,
-    node: &'static Node,
+    node: &'static ComputedNode,
     global_transform: &'static GlobalTransform,
     picking_behavior: Option<&'static PickingBehavior>,
     calculated_clip: Option<&'static CalculatedClip>,
diff --git a/crates/bevy_ui/src/render/box_shadow.rs b/crates/bevy_ui/src/render/box_shadow.rs
index 0f7f3fb958..7727567a09 100644
--- a/crates/bevy_ui/src/render/box_shadow.rs
+++ b/crates/bevy_ui/src/render/box_shadow.rs
@@ -1,7 +1,7 @@
 use core::{hash::Hash, ops::Range};
 
 use crate::{
-    BoxShadow, CalculatedClip, DefaultUiCamera, Node, RenderUiSystem, ResolvedBorderRadius,
+    BoxShadow, CalculatedClip, ComputedNode, DefaultUiCamera, RenderUiSystem, ResolvedBorderRadius,
     TargetCamera, TransparentUi, UiBoxShadowSamples, UiScale, Val,
 };
 use bevy_app::prelude::*;
@@ -239,7 +239,7 @@ pub fn extract_shadows(
     box_shadow_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &ViewVisibility,
             &BoxShadow,
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index ab86e7b51d..b56e3ce13e 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -5,7 +5,7 @@ mod ui_material_pipeline;
 pub mod ui_texture_slice_pipeline;
 
 use crate::{
-    BackgroundColor, BorderColor, CalculatedClip, DefaultUiCamera, Node, Outline,
+    BackgroundColor, BorderColor, CalculatedClip, ComputedNode, DefaultUiCamera, Outline,
     ResolvedBorderRadius, TargetCamera, UiAntiAlias, UiBoxShadowSamples, UiImage, UiScale,
 };
 use bevy_app::prelude::*;
@@ -245,7 +245,7 @@ pub fn extract_uinode_background_colors(
     uinode_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &ViewVisibility,
             Option<&CalculatedClip>,
@@ -309,7 +309,7 @@ pub fn extract_uinode_images(
         Query<
             (
                 Entity,
-                &Node,
+                &ComputedNode,
                 &GlobalTransform,
                 &ViewVisibility,
                 Option<&CalculatedClip>,
@@ -398,7 +398,7 @@ pub fn extract_uinode_borders(
     uinode_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &ViewVisibility,
             Option<&CalculatedClip>,
@@ -613,7 +613,7 @@ pub fn extract_text_sections(
     uinode_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &ViewVisibility,
             Option<&CalculatedClip>,
diff --git a/crates/bevy_ui/src/render/ui_material_pipeline.rs b/crates/bevy_ui/src/render/ui_material_pipeline.rs
index bbd4d9e4de..b669e4aaf4 100644
--- a/crates/bevy_ui/src/render/ui_material_pipeline.rs
+++ b/crates/bevy_ui/src/render/ui_material_pipeline.rs
@@ -365,7 +365,7 @@ pub fn extract_ui_material_nodes<M: UiMaterial>(
     uinode_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &MaterialNode<M>,
             &ViewVisibility,
diff --git a/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs b/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
index b9d5cbb61f..a08bedc417 100644
--- a/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
+++ b/crates/bevy_ui/src/render/ui_texture_slice_pipeline.rs
@@ -251,7 +251,7 @@ pub fn extract_ui_texture_slices(
     slicers_query: Extract<
         Query<(
             Entity,
-            &Node,
+            &ComputedNode,
             &GlobalTransform,
             &ViewVisibility,
             Option<&CalculatedClip>,
diff --git a/crates/bevy_ui/src/stack.rs b/crates/bevy_ui/src/stack.rs
index a89add3d6f..e419ce67fd 100644
--- a/crates/bevy_ui/src/stack.rs
+++ b/crates/bevy_ui/src/stack.rs
@@ -5,7 +5,7 @@ use bevy_utils::HashSet;
 
 use crate::{
     experimental::{UiChildren, UiRootNodes},
-    GlobalZIndex, Node, ZIndex,
+    ComputedNode, GlobalZIndex, ZIndex,
 };
 
 /// The current UI stack, which contains all UI nodes ordered by their depth (back-to-front).
@@ -46,10 +46,10 @@ pub fn ui_stack_system(
     mut ui_stack: ResMut<UiStack>,
     ui_root_nodes: UiRootNodes,
     root_node_query: Query<(Entity, Option<&GlobalZIndex>, Option<&ZIndex>)>,
-    zindex_global_node_query: Query<(Entity, &GlobalZIndex, Option<&ZIndex>), With<Node>>,
+    zindex_global_node_query: Query<(Entity, &GlobalZIndex, Option<&ZIndex>), With<ComputedNode>>,
     ui_children: UiChildren,
-    zindex_query: Query<Option<&ZIndex>, (With<Node>, Without<GlobalZIndex>)>,
-    mut update_query: Query<&mut Node>,
+    zindex_query: Query<Option<&ZIndex>, (With<ComputedNode>, Without<GlobalZIndex>)>,
+    mut update_query: Query<&mut ComputedNode>,
 ) {
     ui_stack.uinodes.clear();
     visited_root_nodes.clear();
@@ -102,7 +102,7 @@ fn update_uistack_recursive(
     cache: &mut ChildBufferCache,
     node_entity: Entity,
     ui_children: &UiChildren,
-    zindex_query: &Query<Option<&ZIndex>, (With<Node>, Without<GlobalZIndex>)>,
+    zindex_query: &Query<Option<&ZIndex>, (With<ComputedNode>, Without<GlobalZIndex>)>,
     ui_stack: &mut Vec<Entity>,
 ) {
     ui_stack.push(node_entity);
diff --git a/crates/bevy_ui/src/ui_material.rs b/crates/bevy_ui/src/ui_material.rs
index 56bf58f371..9c26f242e4 100644
--- a/crates/bevy_ui/src/ui_material.rs
+++ b/crates/bevy_ui/src/ui_material.rs
@@ -1,5 +1,3 @@
-use core::hash::Hash;
-
 use crate::Node;
 use bevy_asset::{Asset, AssetId, Handle};
 use bevy_derive::{Deref, DerefMut};
@@ -9,6 +7,7 @@ use bevy_render::{
     extract_component::ExtractComponent,
     render_resource::{AsBindGroup, RenderPipelineDescriptor, ShaderRef},
 };
+use core::hash::Hash;
 use derive_more::derive::From;
 
 /// Materials are used alongside [`UiMaterialPlugin`](crate::UiMaterialPlugin) and [`MaterialNode`]
@@ -64,7 +63,7 @@ use derive_more::derive::From;
 ///             color: LinearRgba::RED,
 ///             color_texture: asset_server.load("some_image.png"),
 ///         })),
-///         Style {
+///         Node {
 ///             width: Val::Percent(100.0),
 ///             ..Default::default()
 ///         },
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 2b95bf118a..c0d6e6b601 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -17,29 +17,10 @@ use core::num::NonZero;
 use derive_more::derive::{Display, Error, From};
 use smallvec::SmallVec;
 
-/// Base component for a UI node, which also provides the computed size of the node.
-///
-/// # See also
-///
-/// - [`node_bundles`](crate::node_bundles) for the list of built-in bundles that set up UI node
-/// - [`RelativeCursorPosition`](crate::RelativeCursorPosition)
-///   to obtain the cursor position relative to this node
-/// - [`Interaction`](crate::Interaction) to obtain the interaction state of this node
+/// Provides the computed size and layout properties of the node.
 #[derive(Component, Debug, Copy, Clone, PartialEq, Reflect)]
 #[reflect(Component, Default, Debug)]
-#[require(
-    Style,
-    BackgroundColor,
-    BorderColor,
-    BorderRadius,
-    ContentSize,
-    FocusPolicy,
-    ScrollPosition,
-    Transform,
-    Visibility,
-    ZIndex
-)]
-pub struct Node {
+pub struct ComputedNode {
     /// The order of the node in the UI layout.
     /// Nodes with a higher stack index are drawn on top of and receive interactions before nodes with lower stack indices.
     pub(crate) stack_index: u32,
@@ -79,7 +60,7 @@ pub struct Node {
     pub(crate) padding: BorderRect,
 }
 
-impl Node {
+impl ComputedNode {
     /// The calculated node size as width and height in logical pixels.
     ///
     /// Automatically calculated by [`super::layout::ui_layout_system`].
@@ -215,7 +196,7 @@ impl Node {
     }
 }
 
-impl Node {
+impl ComputedNode {
     pub const DEFAULT: Self = Self {
         stack_index: 0,
         calculated_size: Vec2::ZERO,
@@ -228,7 +209,7 @@ impl Node {
     };
 }
 
-impl Default for Node {
+impl Default for ComputedNode {
     fn default() -> Self {
         Self::DEFAULT
     }
@@ -238,7 +219,7 @@ impl Default for Node {
 ///
 /// Updating the values of `ScrollPosition` will reposition the children of the node by the offset amount.
 /// `ScrollPosition` may be updated by the layout system when a layout change makes a previously valid `ScrollPosition` invalid.
-/// Changing this does nothing on a `Node` without a `Style` setting at least one `OverflowAxis` to `OverflowAxis::Scroll`.
+/// Changing this does nothing on a `Node` without setting at least one `OverflowAxis` to `OverflowAxis::Scroll`.
 #[derive(Component, Debug, Clone, Reflect)]
 #[reflect(Component, Default)]
 pub struct ScrollPosition {
@@ -276,7 +257,9 @@ impl From<&Vec2> for ScrollPosition {
     }
 }
 
-/// Describes the style of a UI container node
+/// The base component for UI entities. It describes UI layout and style properties.
+///
+/// When defining new types of UI entities, require [`Node`] to make them behave like UI nodes.
 ///
 /// Nodes can be laid out using either Flexbox or CSS Grid Layout.
 ///
@@ -293,15 +276,32 @@ impl From<&Vec2> for ScrollPosition {
 /// - [MDN: Basic Concepts of Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
 /// - [A Complete Guide To CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) by CSS Tricks. This is detailed guide with illustrations and comprehensive written explanation of the different CSS Grid properties and how they work.
 /// - [CSS Grid Garden](https://cssgridgarden.com/). An interactive tutorial/game that teaches the essential parts of CSS Grid in a fun engaging way.
+///
+/// # See also
+///
+/// - [`RelativeCursorPosition`](crate::RelativeCursorPosition) to obtain the cursor position relative to this node
+/// - [`Interaction`](crate::Interaction) to obtain the interaction state of this node
 
 #[derive(Component, Clone, PartialEq, Debug, Reflect)]
+#[require(
+    ComputedNode,
+    BackgroundColor,
+    BorderColor,
+    BorderRadius,
+    ContentSize,
+    FocusPolicy,
+    ScrollPosition,
+    Transform,
+    Visibility,
+    ZIndex
+)]
 #[reflect(Component, Default, PartialEq, Debug)]
 #[cfg_attr(
     feature = "serialize",
     derive(serde::Serialize, serde::Deserialize),
     reflect(Serialize, Deserialize)
 )]
-pub struct Style {
+pub struct Node {
     /// Which layout algorithm to use when laying out this node's contents:
     ///   - [`Display::Flex`]: Use the Flexbox layout algorithm
     ///   - [`Display::Grid`]: Use the CSS Grid layout algorithm
@@ -446,8 +446,8 @@ pub struct Style {
     ///
     /// # Example
     /// ```
-    /// # use bevy_ui::{Style, UiRect, Val};
-    /// let style = Style {
+    /// # use bevy_ui::{Node, UiRect, Val};
+    /// let node = Node {
     ///     margin: UiRect {
     ///         left: Val::Percent(10.),
     ///         right: Val::Percent(10.),
@@ -468,8 +468,8 @@ pub struct Style {
     ///
     /// # Example
     /// ```
-    /// # use bevy_ui::{Style, UiRect, Val};
-    /// let style = Style {
+    /// # use bevy_ui::{Node, UiRect, Val};
+    /// let node = Node {
     ///     padding: UiRect {
     ///         left: Val::Percent(1.),
     ///         right: Val::Percent(2.),
@@ -574,7 +574,7 @@ pub struct Style {
     pub grid_column: GridPlacement,
 }
 
-impl Style {
+impl Node {
     pub const DEFAULT: Self = Self {
         display: Display::DEFAULT,
         position_type: PositionType::DEFAULT,
@@ -617,7 +617,7 @@ impl Style {
     };
 }
 
-impl Default for Style {
+impl Default for Node {
     fn default() -> Self {
         Self::DEFAULT
     }
@@ -879,7 +879,7 @@ impl Default for JustifyContent {
 
 /// Defines the layout model used by this node.
 ///
-/// Part of the [`Style`] component.
+/// Part of the [`Node`] component.
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect)]
 #[reflect(Default, PartialEq)]
 #[cfg_attr(
@@ -1976,8 +1976,7 @@ impl Default for BorderColor {
 /// # use bevy_color::palettes::basic::{RED, BLUE};
 /// fn setup_ui(mut commands: Commands) {
 ///     commands.spawn((
-///         Node::default(),
-///         Style {
+///         Node {
 ///             width: Val::Px(100.),
 ///             height: Val::Px(100.),
 ///             ..Default::default()
@@ -2192,8 +2191,7 @@ pub struct GlobalZIndex(pub i32);
 /// # use bevy_color::palettes::basic::{BLUE};
 /// fn setup_ui(mut commands: Commands) {
 ///     commands.spawn((
-///         Node::default(),
-///         Style {
+///         Node {
 ///             width: Val::Px(100.),
 ///             height: Val::Px(100.),
 ///             border: UiRect::all(Val::Px(2.)),
diff --git a/crates/bevy_ui/src/update.rs b/crates/bevy_ui/src/update.rs
index e2d878d39e..428f0a6c30 100644
--- a/crates/bevy_ui/src/update.rs
+++ b/crates/bevy_ui/src/update.rs
@@ -2,10 +2,10 @@
 
 use crate::{
     experimental::{UiChildren, UiRootNodes},
-    CalculatedClip, Display, OverflowAxis, Style, TargetCamera,
+    CalculatedClip, Display, Node, OverflowAxis, TargetCamera,
 };
 
-use super::Node;
+use super::ComputedNode;
 use bevy_ecs::{
     entity::Entity,
     query::{Changed, With},
@@ -20,7 +20,12 @@ use bevy_utils::HashSet;
 pub fn update_clipping_system(
     mut commands: Commands,
     root_nodes: UiRootNodes,
-    mut node_query: Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>,
+    mut node_query: Query<(
+        &Node,
+        &ComputedNode,
+        &GlobalTransform,
+        Option<&mut CalculatedClip>,
+    )>,
     ui_children: UiChildren,
 ) {
     for root_node in root_nodes.iter() {
@@ -37,17 +42,23 @@ pub fn update_clipping_system(
 fn update_clipping(
     commands: &mut Commands,
     ui_children: &UiChildren,
-    node_query: &mut Query<(&Node, &GlobalTransform, &Style, Option<&mut CalculatedClip>)>,
+    node_query: &mut Query<(
+        &Node,
+        &ComputedNode,
+        &GlobalTransform,
+        Option<&mut CalculatedClip>,
+    )>,
     entity: Entity,
     mut maybe_inherited_clip: Option<Rect>,
 ) {
-    let Ok((node, global_transform, style, maybe_calculated_clip)) = node_query.get_mut(entity)
+    let Ok((node, computed_node, global_transform, maybe_calculated_clip)) =
+        node_query.get_mut(entity)
     else {
         return;
     };
 
     // If `display` is None, clip the entire node and all its descendants by replacing the inherited clip with a default rect (which is empty)
-    if style.display == Display::None {
+    if node.display == Display::None {
         maybe_inherited_clip = Some(Rect::default());
     }
 
@@ -72,7 +83,7 @@ fn update_clipping(
     }
 
     // Calculate new clip rectangle for children nodes
-    let children_clip = if style.overflow.is_visible() {
+    let children_clip = if node.overflow.is_visible() {
         // When `Visible`, children might be visible even when they are outside
         // the current node's boundaries. In this case they inherit the current
         // node's parent clip. If an ancestor is set as `Hidden`, that clip will
@@ -84,17 +95,19 @@ fn update_clipping(
         // of nested `Overflow::Hidden` nodes. If parent `clip` is not
         // defined, use the current node's clip.
 
-        let mut clip_rect =
-            Rect::from_center_size(global_transform.translation().truncate(), node.size());
+        let mut clip_rect = Rect::from_center_size(
+            global_transform.translation().truncate(),
+            computed_node.size(),
+        );
 
-        // Content isn't clipped at the edges of the node but at the edges of the region specified by [`Style::overflow_clip_margin`].
+        // Content isn't clipped at the edges of the node but at the edges of the region specified by [`Node::overflow_clip_margin`].
         //
         // `clip_inset` should always fit inside `node_rect`.
         // Even if `clip_inset` were to overflow, we won't return a degenerate result as `Rect::intersect` will clamp the intersection, leaving it empty.
-        let clip_inset = match style.overflow_clip_margin.visual_box {
+        let clip_inset = match node.overflow_clip_margin.visual_box {
             crate::OverflowClipBox::BorderBox => BorderRect::ZERO,
-            crate::OverflowClipBox::ContentBox => node.content_inset(),
-            crate::OverflowClipBox::PaddingBox => node.border(),
+            crate::OverflowClipBox::ContentBox => computed_node.content_inset(),
+            crate::OverflowClipBox::PaddingBox => computed_node.border(),
         };
 
         clip_rect.min.x += clip_inset.left;
@@ -102,13 +115,13 @@ fn update_clipping(
         clip_rect.max.x -= clip_inset.right;
         clip_rect.max.y -= clip_inset.bottom;
 
-        clip_rect = clip_rect.inflate(style.overflow_clip_margin.margin.max(0.));
+        clip_rect = clip_rect.inflate(node.overflow_clip_margin.margin.max(0.));
 
-        if style.overflow.x == OverflowAxis::Visible {
+        if node.overflow.x == OverflowAxis::Visible {
             clip_rect.min.x = -f32::INFINITY;
             clip_rect.max.x = f32::INFINITY;
         }
-        if style.overflow.y == OverflowAxis::Visible {
+        if node.overflow.y == OverflowAxis::Visible {
             clip_rect.min.y = -f32::INFINITY;
             clip_rect.max.y = f32::INFINITY;
         }
diff --git a/crates/bevy_ui/src/widget/text.rs b/crates/bevy_ui/src/widget/text.rs
index 5002eff8de..90222ef5cd 100644
--- a/crates/bevy_ui/src/widget/text.rs
+++ b/crates/bevy_ui/src/widget/text.rs
@@ -1,6 +1,6 @@
 use crate::{
-    ContentSize, DefaultUiCamera, FixedMeasure, Measure, MeasureArgs, Node, NodeMeasure,
-    TargetCamera, UiScale,
+    ComputedNode, ContentSize, DefaultUiCamera, FixedMeasure, Measure, MeasureArgs, Node,
+    NodeMeasure, TargetCamera, UiScale,
 };
 use bevy_asset::Assets;
 use bevy_color::Color;
@@ -102,7 +102,7 @@ pub struct TextBundle {}
 /// ```
 #[derive(Component, Debug, Default, Clone, Deref, DerefMut, Reflect)]
 #[reflect(Component, Default, Debug)]
-#[require(TextLayout, TextFont, TextColor, TextNodeFlags, Node)]
+#[require(Node, TextLayout, TextFont, TextColor, TextNodeFlags)]
 pub struct Text(pub String);
 
 impl Text {
@@ -331,7 +331,7 @@ fn queue_text(
     scale_factor: f32,
     inverse_scale_factor: f32,
     block: &TextLayout,
-    node: Ref<Node>,
+    node: Ref<ComputedNode>,
     mut text_flags: Mut<TextNodeFlags>,
     text_layout_info: Mut<TextLayoutInfo>,
     computed: &mut ComputedTextBlock,
@@ -408,7 +408,7 @@ pub fn text_system(
     mut text_pipeline: ResMut<TextPipeline>,
     mut text_query: Query<(
         Entity,
-        Ref<Node>,
+        Ref<ComputedNode>,
         &TextLayout,
         &mut TextLayoutInfo,
         &mut TextNodeFlags,
diff --git a/examples/2d/2d_shapes.rs b/examples/2d/2d_shapes.rs
index e5bb960a98..bde8e7bb8c 100644
--- a/examples/2d/2d_shapes.rs
+++ b/examples/2d/2d_shapes.rs
@@ -66,7 +66,7 @@ fn setup(
     #[cfg(not(target_arch = "wasm32"))]
     commands.spawn((
         Text::new("Press space to toggle wireframes"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/2d/bloom_2d.rs b/examples/2d/bloom_2d.rs
index 7613728baa..d4c2db3698 100644
--- a/examples/2d/bloom_2d.rs
+++ b/examples/2d/bloom_2d.rs
@@ -59,7 +59,7 @@ fn setup(
     // UI
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/2d/bounding_2d.rs b/examples/2d/bounding_2d.rs
index ff4d371d93..f4c24e7394 100644
--- a/examples/2d/bounding_2d.rs
+++ b/examples/2d/bounding_2d.rs
@@ -254,7 +254,7 @@ fn setup(mut commands: Commands) {
 
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/2d/sprite_animation.rs b/examples/2d/sprite_animation.rs
index 2c893f784c..712865af56 100644
--- a/examples/2d/sprite_animation.rs
+++ b/examples/2d/sprite_animation.rs
@@ -135,7 +135,7 @@ fn setup(
     // create a minimal UI explaining how to interact with the example
     commands.spawn((
         Text::new("Left Arrow Key: Animate Left Sprite\nRight Arrow Key: Animate Right Sprite"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/2d/wireframe_2d.rs b/examples/2d/wireframe_2d.rs
index 8475d3118a..8b194855d4 100644
--- a/examples/2d/wireframe_2d.rs
+++ b/examples/2d/wireframe_2d.rs
@@ -90,7 +90,7 @@ fn setup(
     // Text used to show controls
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/3d_shapes.rs b/examples/3d/3d_shapes.rs
index 30ce9652fc..0346abd352 100644
--- a/examples/3d/3d_shapes.rs
+++ b/examples/3d/3d_shapes.rs
@@ -135,7 +135,7 @@ fn setup(
     #[cfg(not(target_arch = "wasm32"))]
     commands.spawn((
         Text::new("Press space to toggle wireframes"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/anisotropy.rs b/examples/3d/anisotropy.rs
index a8fc970f5d..736e0563da 100644
--- a/examples/3d/anisotropy.rs
+++ b/examples/3d/anisotropy.rs
@@ -83,7 +83,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, app_status: Res
 fn spawn_text(commands: &mut Commands, app_status: &AppStatus) {
     commands.spawn((
         app_status.create_help_text(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/anti_aliasing.rs b/examples/3d/anti_aliasing.rs
index 2bdb84472c..19659ac3a5 100644
--- a/examples/3d/anti_aliasing.rs
+++ b/examples/3d/anti_aliasing.rs
@@ -328,7 +328,7 @@ fn setup(
     // example instructions
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/atmospheric_fog.rs b/examples/3d/atmospheric_fog.rs
index ad6342a31c..e24736cdd1 100644
--- a/examples/3d/atmospheric_fog.rs
+++ b/examples/3d/atmospheric_fog.rs
@@ -86,7 +86,7 @@ fn setup_terrain_scene(
 
 fn setup_instructions(mut commands: Commands) {
     commands.spawn((Text::new("Press Spacebar to Toggle Atmospheric Fog.\nPress S to Toggle Directional Light Fog Influence."),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/auto_exposure.rs b/examples/3d/auto_exposure.rs
index d7b8b30e29..ecd09bbf31 100644
--- a/examples/3d/auto_exposure.rs
+++ b/examples/3d/auto_exposure.rs
@@ -119,17 +119,17 @@ fn setup(
             texture: metering_mask,
             ..default()
         },
-        Style {
+        Node {
             width: Val::Percent(100.0),
             height: Val::Percent(100.0),
             ..default()
         },
     ));
 
-    let text_style = TextFont::default();
+    let text_font = TextFont::default();
 
     commands.spawn((Text::new("Left / Right - Rotate Camera\nC - Toggle Compensation Curve\nM - Toggle Metering Mask\nV - Visualize Metering Mask"),
-            text_style.clone(), Style {
+            text_font.clone(), Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
@@ -139,8 +139,8 @@ fn setup(
 
     commands.spawn((
         Text::default(),
-        text_style,
-        Style {
+        text_font,
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             right: Val::Px(12.0),
@@ -162,7 +162,7 @@ struct ExampleResources {
 fn example_control_system(
     camera: Single<(&mut Transform, &mut AutoExposure), With<Camera3d>>,
     mut display: Single<&mut Text, With<ExampleDisplay>>,
-    mut mask_image: Single<&mut Style, With<UiImage>>,
+    mut mask_image: Single<&mut Node, With<UiImage>>,
     time: Res<Time>,
     input: Res<ButtonInput<KeyCode>>,
     resources: Res<ExampleResources>,
diff --git a/examples/3d/blend_modes.rs b/examples/3d/blend_modes.rs
index 797e35c0dd..3e3ed83747 100644
--- a/examples/3d/blend_modes.rs
+++ b/examples/3d/blend_modes.rs
@@ -169,7 +169,7 @@ fn setup(
 
     commands.spawn((Text::new("Up / Down — Increase / Decrease Alpha\nLeft / Right — Rotate Camera\nH - Toggle HDR\nSpacebar — Toggle Unlit\nC — Randomize Colors"),
             text_style.clone(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
@@ -180,7 +180,7 @@ fn setup(
     commands.spawn((
         Text::default(),
         text_style,
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             right: Val::Px(12.0),
@@ -192,8 +192,7 @@ fn setup(
     let mut label = |entity: Entity, label: &str| {
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     ..default()
                 },
@@ -203,7 +202,7 @@ fn setup(
                 parent.spawn((
                     Text::new(label),
                     label_text_style.clone(),
-                    Style {
+                    Node {
                         position_type: PositionType::Absolute,
                         bottom: Val::ZERO,
                         ..default()
@@ -253,7 +252,7 @@ fn example_control_system(
     mut materials: ResMut<Assets<StandardMaterial>>,
     controllable: Query<(&MeshMaterial3d<StandardMaterial>, &ExampleControls)>,
     camera: Single<(&mut Camera, &mut Transform, &GlobalTransform), With<Camera3d>>,
-    mut labels: Query<(&mut Style, &ExampleLabel)>,
+    mut labels: Query<(&mut Node, &ExampleLabel)>,
     mut display: Single<&mut Text, With<ExampleDisplay>>,
     labelled: Query<&GlobalTransform>,
     mut state: Local<ExampleState>,
@@ -308,15 +307,15 @@ fn example_control_system(
 
     camera_transform.rotate_around(Vec3::ZERO, Quat::from_rotation_y(rotation));
 
-    for (mut style, label) in &mut labels {
+    for (mut node, label) in &mut labels {
         let world_position = labelled.get(label.entity).unwrap().translation() + Vec3::Y;
 
         let viewport_position = camera
             .world_to_viewport(camera_global_transform, world_position)
             .unwrap();
 
-        style.top = Val::Px(viewport_position.y);
-        style.left = Val::Px(viewport_position.x);
+        node.top = Val::Px(viewport_position.y);
+        node.left = Val::Px(viewport_position.x);
     }
 
     display.0 = format!(
diff --git a/examples/3d/bloom_3d.rs b/examples/3d/bloom_3d.rs
index c72f8f07b3..fa58400eda 100644
--- a/examples/3d/bloom_3d.rs
+++ b/examples/3d/bloom_3d.rs
@@ -86,7 +86,7 @@ fn setup_scene(
     // example instructions
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/clearcoat.rs b/examples/3d/clearcoat.rs
index 90c2bb3830..1cd825285a 100644
--- a/examples/3d/clearcoat.rs
+++ b/examples/3d/clearcoat.rs
@@ -219,7 +219,7 @@ fn spawn_camera(commands: &mut Commands, asset_server: &AssetServer) {
 fn spawn_text(commands: &mut Commands, light_mode: &LightMode) {
     commands.spawn((
         light_mode.create_help_text(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/color_grading.rs b/examples/3d/color_grading.rs
index 024c64246d..60195426e8 100644
--- a/examples/3d/color_grading.rs
+++ b/examples/3d/color_grading.rs
@@ -138,17 +138,14 @@ fn setup(
 fn add_buttons(commands: &mut Commands, font: &Handle<Font>, color_grading: &ColorGrading) {
     // Spawn the parent node that contains all the buttons.
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                flex_direction: FlexDirection::Column,
-                position_type: PositionType::Absolute,
-                row_gap: Val::Px(6.0),
-                left: Val::Px(12.0),
-                bottom: Val::Px(12.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            position_type: PositionType::Absolute,
+            row_gap: Val::Px(6.0),
+            left: Val::Px(12.0),
+            bottom: Val::Px(12.0),
+            ..default()
+        })
         .with_children(|parent| {
             // Create the first row, which contains the global controls.
             add_buttons_for_global_controls(parent, color_grading, font);
@@ -174,13 +171,10 @@ fn add_buttons_for_global_controls(
     // Add the parent node for the row.
     parent.spawn(Node::default()).with_children(|parent| {
         // Add some placeholder text to fill this column.
-        parent.spawn((
-            Node::default(),
-            Style {
-                width: Val::Px(125.0),
-                ..default()
-            },
-        ));
+        parent.spawn(Node {
+            width: Val::Px(125.0),
+            ..default()
+        });
 
         // Add each global color grading option button.
         for option in [
@@ -209,16 +203,13 @@ fn add_buttons_for_section(
 ) {
     // Spawn the row container.
     parent
-        .spawn((
-            Node::default(),
-            Style {
-                align_items: AlignItems::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            align_items: AlignItems::Center,
+            ..default()
+        })
         .with_children(|parent| {
             // Spawn the label ("Highlights", etc.)
-            add_text(parent, &section.to_string(), font, Color::WHITE).insert(Style {
+            add_text(parent, &section.to_string(), font, Color::WHITE).insert(Node {
                 width: Val::Px(125.0),
                 ..default()
             });
@@ -252,7 +243,7 @@ fn add_button_for_value(
     parent
         .spawn((
             Button,
-            Style {
+            Node {
                 border: UiRect::all(Val::Px(1.0)),
                 width: Val::Px(200.0),
                 justify_content: JustifyContent::Center,
@@ -281,13 +272,10 @@ fn add_button_for_value(
             });
 
             // Add a spacer.
-            parent.spawn((
-                Node::default(),
-                Style {
-                    flex_grow: 1.0,
-                    ..default()
-                },
-            ));
+            parent.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
 
             // Add the value text.
             add_text(
@@ -315,7 +303,7 @@ fn add_help_text(
             font: font.clone(),
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             left: Val::Px(12.0),
             top: Val::Px(12.0),
diff --git a/examples/3d/deferred_rendering.rs b/examples/3d/deferred_rendering.rs
index d573abf8b6..769d617495 100644
--- a/examples/3d/deferred_rendering.rs
+++ b/examples/3d/deferred_rendering.rs
@@ -190,7 +190,7 @@ fn setup(
     // Example instructions
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/depth_of_field.rs b/examples/3d/depth_of_field.rs
index 22fd5a0d1a..d6ca77bbde 100644
--- a/examples/3d/depth_of_field.rs
+++ b/examples/3d/depth_of_field.rs
@@ -94,7 +94,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, app_settings: R
     // Spawn the help text.
     commands.spawn((
         create_text(&app_settings),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/fog.rs b/examples/3d/fog.rs
index cb962c9244..1df8c3ce4f 100644
--- a/examples/3d/fog.rs
+++ b/examples/3d/fog.rs
@@ -118,7 +118,7 @@ fn setup_pyramid_scene(
 fn setup_instructions(mut commands: Commands) {
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/generate_custom_mesh.rs b/examples/3d/generate_custom_mesh.rs
index 5ca61baf6a..2222486ba1 100644
--- a/examples/3d/generate_custom_mesh.rs
+++ b/examples/3d/generate_custom_mesh.rs
@@ -59,7 +59,7 @@ fn setup(
     // Text to describe the controls.
     commands.spawn((
         Text::new("Controls:\nSpace: Change UVs\nX/Y/Z: Rotate\nR: Reset orientation"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/irradiance_volumes.rs b/examples/3d/irradiance_volumes.rs
index 039c8ecda5..b3da971e36 100644
--- a/examples/3d/irradiance_volumes.rs
+++ b/examples/3d/irradiance_volumes.rs
@@ -290,7 +290,7 @@ fn spawn_fox(commands: &mut Commands, assets: &ExampleAssets) {
 fn spawn_text(commands: &mut Commands, app_status: &AppStatus) {
     commands.spawn((
         app_status.create_text(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/lighting.rs b/examples/3d/lighting.rs
index 69e53f26a4..0f862b2aa6 100644
--- a/examples/3d/lighting.rs
+++ b/examples/3d/lighting.rs
@@ -211,7 +211,7 @@ fn setup(
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/3d/load_gltf_extras.rs b/examples/3d/load_gltf_extras.rs
index d0d70ff732..e787b121ef 100644
--- a/examples/3d/load_gltf_extras.rs
+++ b/examples/3d/load_gltf_extras.rs
@@ -39,7 +39,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             font_size: 15.,
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/motion_blur.rs b/examples/3d/motion_blur.rs
index 7694d56ca6..caea6835ac 100644
--- a/examples/3d/motion_blur.rs
+++ b/examples/3d/motion_blur.rs
@@ -234,7 +234,7 @@ fn setup_ui(mut commands: Commands) {
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/3d/order_independent_transparency.rs b/examples/3d/order_independent_transparency.rs
index a15dfd9593..c1448173e8 100644
--- a/examples/3d/order_independent_transparency.rs
+++ b/examples/3d/order_independent_transparency.rs
@@ -53,7 +53,7 @@ fn setup(
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/3d/parallax_mapping.rs b/examples/3d/parallax_mapping.rs
index b5cdc84357..1d4daad5db 100644
--- a/examples/3d/parallax_mapping.rs
+++ b/examples/3d/parallax_mapping.rs
@@ -298,7 +298,7 @@ fn setup(
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/3d/pbr.rs b/examples/3d/pbr.rs
index fad4e1166c..46f82bcc65 100644
--- a/examples/3d/pbr.rs
+++ b/examples/3d/pbr.rs
@@ -65,7 +65,7 @@ fn setup(
             font_size: 30.0,
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(20.0),
             left: Val::Px(100.0),
@@ -79,7 +79,7 @@ fn setup(
             font_size: 30.0,
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(130.0),
             right: Val::ZERO,
@@ -97,7 +97,7 @@ fn setup(
             font_size: 30.0,
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(20.0),
             right: Val::Px(20.0),
diff --git a/examples/3d/pcss.rs b/examples/3d/pcss.rs
index 49b3c93863..0f96396cb0 100644
--- a/examples/3d/pcss.rs
+++ b/examples/3d/pcss.rs
@@ -209,7 +209,7 @@ fn spawn_gltf_scene(commands: &mut Commands, asset_server: &AssetServer) {
 /// Spawns all the buttons at the bottom of the screen.
 fn spawn_buttons(commands: &mut Commands) {
     commands
-        .spawn((Node::default(), widgets::main_ui_style()))
+        .spawn(widgets::main_ui_node())
         .with_children(|parent| {
             widgets::spawn_option_buttons(
                 parent,
diff --git a/examples/3d/post_processing.rs b/examples/3d/post_processing.rs
index d6bf1a7d28..54a9e9089f 100644
--- a/examples/3d/post_processing.rs
+++ b/examples/3d/post_processing.rs
@@ -124,7 +124,7 @@ fn spawn_scene(commands: &mut Commands, asset_server: &AssetServer) {
 fn spawn_text(commands: &mut Commands, app_settings: &AppSettings) {
     commands.spawn((
         create_help_text(app_settings),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/reflection_probes.rs b/examples/3d/reflection_probes.rs
index 1375ece231..e2e3ea60b4 100644
--- a/examples/3d/reflection_probes.rs
+++ b/examples/3d/reflection_probes.rs
@@ -154,7 +154,7 @@ fn spawn_text(commands: &mut Commands, app_status: &AppStatus) {
     // Create the text.
     commands.spawn((
         app_status.create_text(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/shadow_biases.rs b/examples/3d/shadow_biases.rs
index 640a15c14c..10fe6cffec 100644
--- a/examples/3d/shadow_biases.rs
+++ b/examples/3d/shadow_biases.rs
@@ -98,8 +98,7 @@ fn setup(
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 padding: UiRect::all(Val::Px(5.0)),
                 ..default()
diff --git a/examples/3d/split_screen.rs b/examples/3d/split_screen.rs
index c4a0504362..69f150368e 100644
--- a/examples/3d/split_screen.rs
+++ b/examples/3d/split_screen.rs
@@ -85,8 +85,7 @@ fn setup(
         commands
             .spawn((
                 TargetCamera(camera),
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
                     ..default()
@@ -95,7 +94,7 @@ fn setup(
             .with_children(|parent| {
                 parent.spawn((
                     Text::new(*camera_name),
-                    Style {
+                    Node {
                         position_type: PositionType::Absolute,
                         top: Val::Px(12.),
                         left: Val::Px(12.),
@@ -108,20 +107,17 @@ fn setup(
 
     fn buttons_panel(parent: &mut ChildBuilder) {
         parent
-            .spawn((
-                Node::default(),
-                Style {
-                    position_type: PositionType::Absolute,
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    display: Display::Flex,
-                    flex_direction: FlexDirection::Row,
-                    justify_content: JustifyContent::SpaceBetween,
-                    align_items: AlignItems::Center,
-                    padding: UiRect::all(Val::Px(20.)),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                position_type: PositionType::Absolute,
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                display: Display::Flex,
+                flex_direction: FlexDirection::Row,
+                justify_content: JustifyContent::SpaceBetween,
+                align_items: AlignItems::Center,
+                padding: UiRect::all(Val::Px(20.)),
+                ..default()
+            })
             .with_children(|parent| {
                 rotate_button(parent, "<", Direction::Left);
                 rotate_button(parent, ">", Direction::Right);
@@ -133,7 +129,7 @@ fn setup(
             .spawn((
                 RotateCamera(direction),
                 Button,
-                Style {
+                Node {
                     width: Val::Px(40.),
                     height: Val::Px(40.),
                     border: UiRect::all(Val::Px(2.)),
diff --git a/examples/3d/spotlight.rs b/examples/3d/spotlight.rs
index db05504568..c92843404e 100644
--- a/examples/3d/spotlight.rs
+++ b/examples/3d/spotlight.rs
@@ -128,7 +128,7 @@ fn setup(
 
     commands.spawn((
         Text::new(INSTRUCTIONS),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/ssao.rs b/examples/3d/ssao.rs
index ddef0dcf50..17c54db633 100644
--- a/examples/3d/ssao.rs
+++ b/examples/3d/ssao.rs
@@ -80,7 +80,7 @@ fn setup(
 
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/ssr.rs b/examples/3d/ssr.rs
index fb7e5520db..8f4ae85fe1 100644
--- a/examples/3d/ssr.rs
+++ b/examples/3d/ssr.rs
@@ -253,7 +253,7 @@ fn spawn_camera(commands: &mut Commands, asset_server: &AssetServer) {
 fn spawn_text(commands: &mut Commands, app_settings: &AppSettings) {
     commands.spawn((
         create_text(app_settings),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/tonemapping.rs b/examples/3d/tonemapping.rs
index 8dc4e5d075..f802154cb3 100644
--- a/examples/3d/tonemapping.rs
+++ b/examples/3d/tonemapping.rs
@@ -83,7 +83,7 @@ fn setup(
     // ui
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
@@ -178,7 +178,7 @@ fn setup_image_viewer_scene(
         },
         TextColor(Color::BLACK),
         TextLayout::new_with_justify(JustifyText::Center),
-        Style {
+        Node {
             align_self: AlignSelf::Center,
             margin: UiRect::all(Val::Auto),
             ..default()
diff --git a/examples/3d/transmission.rs b/examples/3d/transmission.rs
index 106aabd653..b6a6425baf 100644
--- a/examples/3d/transmission.rs
+++ b/examples/3d/transmission.rs
@@ -333,7 +333,7 @@ fn setup(
     // Controls Text
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/visibility_range.rs b/examples/3d/visibility_range.rs
index 2e2078d07c..64c368655f 100644
--- a/examples/3d/visibility_range.rs
+++ b/examples/3d/visibility_range.rs
@@ -151,7 +151,7 @@ fn setup(
     // Create the text.
     commands.spawn((
         app_status.create_text(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/volumetric_fog.rs b/examples/3d/volumetric_fog.rs
index 7035b63a18..9cfef624c6 100644
--- a/examples/3d/volumetric_fog.rs
+++ b/examples/3d/volumetric_fog.rs
@@ -125,7 +125,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, app_settings: R
     // Add the help text.
     commands.spawn((
         create_text(&app_settings),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/3d/wireframe.rs b/examples/3d/wireframe.rs
index 984162e858..e62e9f0029 100644
--- a/examples/3d/wireframe.rs
+++ b/examples/3d/wireframe.rs
@@ -101,7 +101,7 @@ fn setup(
     // Text used to show controls
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/animation/animated_ui.rs b/examples/animation/animated_ui.rs
index 4d66c1e2c3..e40afed616 100644
--- a/examples/animation/animated_ui.rs
+++ b/examples/animation/animated_ui.rs
@@ -151,9 +151,8 @@ fn setup(
     // text to be animated.
     commands
         .spawn((
-            Node::default(),
             // Cover the whole screen, and center contents.
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(0.0),
                 left: Val::Px(0.0),
@@ -163,9 +162,9 @@ fn setup(
                 align_items: AlignItems::Center,
                 ..default()
             },
+            animation_player,
+            AnimationGraphHandle(animation_graph),
         ))
-        .insert(animation_player)
-        .insert(AnimationGraphHandle(animation_graph))
         .with_children(|builder| {
             // Build the text node.
             let player = builder.parent_entity();
diff --git a/examples/animation/animation_graph.rs b/examples/animation/animation_graph.rs
index 4d181608f5..9c2fe1979e 100644
--- a/examples/animation/animation_graph.rs
+++ b/examples/animation/animation_graph.rs
@@ -252,7 +252,7 @@ fn setup_scene(
 fn setup_help_text(commands: &mut Commands) {
     commands.spawn((
         Text::new(HELP_TEXT),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
@@ -283,8 +283,7 @@ fn setup_node_rects(commands: &mut Commands) {
 
         let container = {
             let mut container = commands.spawn((
-                Node::default(),
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     bottom: Val::Px(node_rect.bottom),
                     left: Val::Px(node_rect.left),
@@ -315,8 +314,7 @@ fn setup_node_rects(commands: &mut Commands) {
         if let NodeType::Clip(_) = node_type {
             let background = commands
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         position_type: PositionType::Absolute,
                         top: Val::Px(0.),
                         left: Val::Px(0.),
@@ -342,8 +340,7 @@ fn setup_node_rects(commands: &mut Commands) {
 fn setup_node_lines(commands: &mut Commands) {
     for line in &HORIZONTAL_LINES {
         commands.spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 bottom: Val::Px(line.bottom),
                 left: Val::Px(line.left),
@@ -358,8 +355,7 @@ fn setup_node_lines(commands: &mut Commands) {
 
     for line in &VERTICAL_LINES {
         commands.spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 bottom: Val::Px(line.bottom),
                 left: Val::Px(line.left),
@@ -421,7 +417,7 @@ fn handle_weight_drag(
 // Updates the UI based on the weights that the user has chosen.
 fn update_ui(
     mut text_query: Query<&mut Text>,
-    mut background_query: Query<&mut Style, Without<Text>>,
+    mut background_query: Query<&mut Node, Without<Text>>,
     container_query: Query<(&Children, &ClipNode)>,
     animation_weights_query: Query<&ExampleAnimationWeights, Changed<ExampleAnimationWeights>>,
 ) {
@@ -429,9 +425,9 @@ fn update_ui(
         for (children, clip_node) in &container_query {
             // Draw the green background color to visually indicate the weight.
             let mut bg_iter = background_query.iter_many_mut(children);
-            if let Some(mut style) = bg_iter.fetch_next() {
+            if let Some(mut node) = bg_iter.fetch_next() {
                 // All nodes are the same width, so `NODE_RECTS[0]` is as good as any other.
-                style.width =
+                node.width =
                     Val::Px(NODE_RECTS[0].width * animation_weights.weights[clip_node.index]);
             }
 
diff --git a/examples/animation/animation_masks.rs b/examples/animation/animation_masks.rs
index 1b634142ec..1382a8f031 100644
--- a/examples/animation/animation_masks.rs
+++ b/examples/animation/animation_masks.rs
@@ -158,7 +158,7 @@ fn setup_ui(mut commands: Commands) {
     // Add help text.
     commands.spawn((
         Text::new("Click on a button to toggle animations for its associated bones"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             left: Val::Px(12.0),
             top: Val::Px(12.0),
@@ -168,19 +168,16 @@ fn setup_ui(mut commands: Commands) {
 
     // Add the buttons that allow the user to toggle mask groups on and off.
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                flex_direction: FlexDirection::Column,
-                position_type: PositionType::Absolute,
-                row_gap: Val::Px(6.0),
-                left: Val::Px(12.0),
-                bottom: Val::Px(12.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            position_type: PositionType::Absolute,
+            row_gap: Val::Px(6.0),
+            left: Val::Px(12.0),
+            bottom: Val::Px(12.0),
+            ..default()
+        })
         .with_children(|parent| {
-            let row_style = Style {
+            let row_node = Node {
                 flex_direction: FlexDirection::Row,
                 column_gap: Val::Px(6.0),
                 ..default()
@@ -188,39 +185,35 @@ fn setup_ui(mut commands: Commands) {
 
             add_mask_group_control(parent, "Head", Val::Auto, MASK_GROUP_HEAD);
 
-            parent
-                .spawn((Node::default(), row_style.clone()))
-                .with_children(|parent| {
-                    add_mask_group_control(
-                        parent,
-                        "Left Front Leg",
-                        Val::Px(MASK_GROUP_BUTTON_WIDTH),
-                        MASK_GROUP_LEFT_FRONT_LEG,
-                    );
-                    add_mask_group_control(
-                        parent,
-                        "Right Front Leg",
-                        Val::Px(MASK_GROUP_BUTTON_WIDTH),
-                        MASK_GROUP_RIGHT_FRONT_LEG,
-                    );
-                });
+            parent.spawn(row_node.clone()).with_children(|parent| {
+                add_mask_group_control(
+                    parent,
+                    "Left Front Leg",
+                    Val::Px(MASK_GROUP_BUTTON_WIDTH),
+                    MASK_GROUP_LEFT_FRONT_LEG,
+                );
+                add_mask_group_control(
+                    parent,
+                    "Right Front Leg",
+                    Val::Px(MASK_GROUP_BUTTON_WIDTH),
+                    MASK_GROUP_RIGHT_FRONT_LEG,
+                );
+            });
 
-            parent
-                .spawn((Node::default(), row_style))
-                .with_children(|parent| {
-                    add_mask_group_control(
-                        parent,
-                        "Left Hind Leg",
-                        Val::Px(MASK_GROUP_BUTTON_WIDTH),
-                        MASK_GROUP_LEFT_HIND_LEG,
-                    );
-                    add_mask_group_control(
-                        parent,
-                        "Right Hind Leg",
-                        Val::Px(MASK_GROUP_BUTTON_WIDTH),
-                        MASK_GROUP_RIGHT_HIND_LEG,
-                    );
-                });
+            parent.spawn(row_node).with_children(|parent| {
+                add_mask_group_control(
+                    parent,
+                    "Left Hind Leg",
+                    Val::Px(MASK_GROUP_BUTTON_WIDTH),
+                    MASK_GROUP_LEFT_HIND_LEG,
+                );
+                add_mask_group_control(
+                    parent,
+                    "Right Hind Leg",
+                    Val::Px(MASK_GROUP_BUTTON_WIDTH),
+                    MASK_GROUP_RIGHT_HIND_LEG,
+                );
+            });
 
             add_mask_group_control(parent, "Tail", Val::Auto, MASK_GROUP_TAIL);
         });
@@ -246,8 +239,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
 
     parent
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 border: UiRect::all(Val::Px(1.0)),
                 width,
                 flex_direction: FlexDirection::Column,
@@ -264,8 +256,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
         .with_children(|builder| {
             builder
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         border: UiRect::ZERO,
                         width: Val::Percent(100.0),
                         justify_content: JustifyContent::Center,
@@ -279,7 +270,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
                 .with_child((
                     Text::new(label),
                     label_text_style.clone(),
-                    Style {
+                    Node {
                         margin: UiRect::vertical(Val::Px(3.0)),
                         ..default()
                     },
@@ -287,8 +278,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
 
             builder
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Percent(100.0),
                         flex_direction: FlexDirection::Row,
                         justify_content: JustifyContent::Center,
@@ -316,7 +306,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
                                 } else {
                                     Color::WHITE
                                 }),
-                                Style {
+                                Node {
                                     flex_grow: 1.0,
                                     border: if index > 0 {
                                         UiRect::left(Val::Px(1.0))
@@ -335,7 +325,7 @@ fn add_mask_group_control(parent: &mut ChildBuilder, label: &str, width: Val, ma
                                     selected_button_text_style.clone()
                                 },
                                 TextLayout::new_with_justify(JustifyText::Center),
-                                Style {
+                                Node {
                                     flex_grow: 1.0,
                                     margin: UiRect::vertical(Val::Px(3.0)),
                                     ..default()
diff --git a/examples/animation/easing_functions.rs b/examples/animation/easing_functions.rs
index 50e85f1bf5..668c741c89 100644
--- a/examples/animation/easing_functions.rs
+++ b/examples/animation/easing_functions.rs
@@ -88,7 +88,7 @@ fn setup(mut commands: Commands) {
     }
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/app/log_layers_ecs.rs b/examples/app/log_layers_ecs.rs
index 883efde69d..0ea064200a 100644
--- a/examples/app/log_layers_ecs.rs
+++ b/examples/app/log_layers_ecs.rs
@@ -126,8 +126,7 @@ fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
 
     commands.spawn((
-        Node::default(),
-        Style {
+        Node {
             width: Val::Vw(100.0),
             height: Val::Vh(100.0),
             flex_direction: FlexDirection::Column,
diff --git a/examples/app/logs.rs b/examples/app/logs.rs
index 3433d28efb..025c2e80dd 100644
--- a/examples/app/logs.rs
+++ b/examples/app/logs.rs
@@ -21,7 +21,7 @@ fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
     commands.spawn((
         Text::new("Press P to panic"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/asset/alter_mesh.rs b/examples/asset/alter_mesh.rs
index 224e286a1e..005a76dc93 100644
--- a/examples/asset/alter_mesh.rs
+++ b/examples/asset/alter_mesh.rs
@@ -138,7 +138,7 @@ fn spawn_text(mut commands: Commands) {
             "Space: swap meshes by mutating a Handle<Mesh>\n\
             Return: mutate the mesh itself, changing all copies of it",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/asset/alter_sprite.rs b/examples/asset/alter_sprite.rs
index 52fe7d0341..76a1d88a4a 100644
--- a/examples/asset/alter_sprite.rs
+++ b/examples/asset/alter_sprite.rs
@@ -96,7 +96,7 @@ fn spawn_text(mut commands: Commands) {
             "Space: swap the right sprite's image handle\n\
             Return: modify the image Asset of the left sprite, affecting all uses of it",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/asset/multi_asset_sync.rs b/examples/asset/multi_asset_sync.rs
index 11015b2e42..2e21f8fe32 100644
--- a/examples/asset/multi_asset_sync.rs
+++ b/examples/asset/multi_asset_sync.rs
@@ -172,7 +172,7 @@ fn setup_ui(mut commands: Commands) {
     commands.spawn((
         LoadingText,
         Text::new("Loading...".to_owned()),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             left: Val::Px(12.0),
             top: Val::Px(12.0),
diff --git a/examples/audio/spatial_audio_2d.rs b/examples/audio/spatial_audio_2d.rs
index 139d4bd0e7..887a4d70cd 100644
--- a/examples/audio/spatial_audio_2d.rs
+++ b/examples/audio/spatial_audio_2d.rs
@@ -66,7 +66,7 @@ fn setup(
     // example instructions
     commands.spawn((
         Text::new("Up/Down/Left/Right: Move Listener\nSpace: Toggle Emitter Movement"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/audio/spatial_audio_3d.rs b/examples/audio/spatial_audio_3d.rs
index 004d4ba66b..6695a01bcf 100644
--- a/examples/audio/spatial_audio_3d.rs
+++ b/examples/audio/spatial_audio_3d.rs
@@ -65,7 +65,7 @@ fn setup(
     // example instructions
     commands.spawn((
         Text::new("Up/Down/Left/Right: Move Listener\nSpace: Toggle Emitter Movement"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/camera/2d_screen_shake.rs b/examples/camera/2d_screen_shake.rs
index 2c4f164c32..29f5cfc241 100644
--- a/examples/camera/2d_screen_shake.rs
+++ b/examples/camera/2d_screen_shake.rs
@@ -65,7 +65,7 @@ fn setup_scene(
 fn setup_instructions(mut commands: Commands) {
     commands.spawn((
         Text::new("Hold space to trigger a screen shake"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/camera/2d_top_down_camera.rs b/examples/camera/2d_top_down_camera.rs
index fd79f5006e..74f2e04689 100644
--- a/examples/camera/2d_top_down_camera.rs
+++ b/examples/camera/2d_top_down_camera.rs
@@ -51,7 +51,7 @@ fn setup_scene(
 fn setup_instructions(mut commands: Commands) {
     commands.spawn((
         Text::new("Move the light with WASD.\nThe camera will smoothly track the light."),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/camera/camera_orbit.rs b/examples/camera/camera_orbit.rs
index 061c5d2e23..4f3cd316d5 100644
--- a/examples/camera/camera_orbit.rs
+++ b/examples/camera/camera_orbit.rs
@@ -87,7 +87,7 @@ fn instructions(mut commands: Commands) {
             Mouse left or right: yaw\n\
             Mouse buttons: roll",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/camera/first_person_view_model.rs b/examples/camera/first_person_view_model.rs
index f46d518cef..c8de4c3aeb 100644
--- a/examples/camera/first_person_view_model.rs
+++ b/examples/camera/first_person_view_model.rs
@@ -192,15 +192,12 @@ fn spawn_lights(mut commands: Commands) {
 
 fn spawn_text(mut commands: Commands) {
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                position_type: PositionType::Absolute,
-                bottom: Val::Px(12.0),
-                left: Val::Px(12.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(12.0),
+            left: Val::Px(12.0),
+            ..default()
+        })
         .with_child(Text::new(concat!(
             "Move the camera with your mouse.\n",
             "Press arrow up to decrease the FOV of the world model.\n",
diff --git a/examples/camera/projection_zoom.rs b/examples/camera/projection_zoom.rs
index 8776c41618..1fdddce0b8 100644
--- a/examples/camera/projection_zoom.rs
+++ b/examples/camera/projection_zoom.rs
@@ -99,7 +99,7 @@ fn instructions(mut commands: Commands) {
             "Scroll mouse wheel to zoom in/out\n\
             Space: switch between orthographic and perspective projections",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/dev_tools/fps_overlay.rs b/examples/dev_tools/fps_overlay.rs
index 5c159e3348..0dcc5e5218 100644
--- a/examples/dev_tools/fps_overlay.rs
+++ b/examples/dev_tools/fps_overlay.rs
@@ -51,7 +51,7 @@ fn setup(mut commands: Commands) {
             "Press 3 to increase the overlay size.\n",
             "Press 4 to toggle the overlay visibility."
         )),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/ecs/observers.rs b/examples/ecs/observers.rs
index 671a863478..6c9b7d478c 100644
--- a/examples/ecs/observers.rs
+++ b/examples/ecs/observers.rs
@@ -76,7 +76,7 @@ fn setup(mut commands: Commands) {
             "Click on a \"Mine\" to trigger it.\n\
             When it explodes it will trigger all overlapping mines.",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/ecs/one_shot_systems.rs b/examples/ecs/one_shot_systems.rs
index 8432aea80f..8dfb90f175 100644
--- a/examples/ecs/one_shot_systems.rs
+++ b/examples/ecs/one_shot_systems.rs
@@ -95,7 +95,7 @@ fn setup_ui(mut commands: Commands) {
         .spawn((
             Text::default(),
             TextLayout::new_with_justify(JustifyText::Center),
-            Style {
+            Node {
                 align_self: AlignSelf::Center,
                 justify_self: JustifySelf::Center,
                 ..default()
diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs
index 35b3cdce57..e6e6c55791 100644
--- a/examples/games/alien_cake_addict.rs
+++ b/examples/games/alien_cake_addict.rs
@@ -182,7 +182,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut game: ResMu
             ..default()
         },
         TextColor(Color::srgb(0.5, 0.5, 1.0)),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(5.0),
             left: Val::Px(5.0),
@@ -393,15 +393,12 @@ fn gameover_keyboard(
 // display the number of cake eaten before losing
 fn display_score(mut commands: Commands, game: Res<Game>) {
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_child((
             Text::new(format!("Cake eaten: {}", game.cake_eaten)),
             TextFont {
diff --git a/examples/games/breakout.rs b/examples/games/breakout.rs
index 19f6692bba..dc1fd1a928 100644
--- a/examples/games/breakout.rs
+++ b/examples/games/breakout.rs
@@ -225,7 +225,7 @@ fn setup(
             },
             TextColor(TEXT_COLOR),
             ScoreboardUi,
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: SCOREBOARD_TEXT_PADDING,
                 left: SCOREBOARD_TEXT_PADDING,
diff --git a/examples/games/contributors.rs b/examples/games/contributors.rs
index fff7ab27cd..bbaf58fb35 100644
--- a/examples/games/contributors.rs
+++ b/examples/games/contributors.rs
@@ -148,7 +148,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             Text::new("Contributor showcase"),
             text_style.clone(),
             ContributorDisplay,
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.),
                 left: Val::Px(12.),
diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index d1ba83b9d9..223b9d049c 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -75,8 +75,7 @@ mod splash {
         // Display the logo
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     align_items: AlignItems::Center,
                     justify_content: JustifyContent::Center,
                     width: Val::Percent(100.0),
@@ -88,7 +87,7 @@ mod splash {
             .with_children(|parent| {
                 parent.spawn((
                     UiImage::new(icon),
-                    Style {
+                    Node {
                         // This will set the logo to be 200px wide, and auto adjust its height
                         width: Val::Px(200.0),
                         ..default()
@@ -141,8 +140,7 @@ mod game {
     ) {
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
                     // center children
@@ -153,11 +151,10 @@ mod game {
                 OnGameScreen,
             ))
             .with_children(|parent| {
-                // First create a `Node` and `Style` for centering what we want to display
+                // First create a `Node` for centering what we want to display
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             // This will display its children in a column, from top to bottom
                             flex_direction: FlexDirection::Column,
                             // `align_items` will align children on the cross axis. Here the main axis is
@@ -176,14 +173,14 @@ mod game {
                                 ..default()
                             },
                             TextColor(TEXT_COLOR),
-                            Style {
+                            Node {
                                 margin: UiRect::all(Val::Px(50.0)),
                                 ..default()
                             },
                         ));
                         p.spawn((
                             Text::default(),
-                            Style {
+                            Node {
                                 margin: UiRect::all(Val::Px(50.0)),
                                 ..default()
                             },
@@ -377,7 +374,7 @@ mod menu {
 
     fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         // Common style for all buttons on the screen
-        let button_style = Style {
+        let button_node = Node {
             width: Val::Px(300.0),
             height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
@@ -385,7 +382,7 @@ mod menu {
             align_items: AlignItems::Center,
             ..default()
         };
-        let button_icon_style = Style {
+        let button_icon_node = Node {
             width: Val::Px(30.0),
             // This takes the icons out of the flexbox flow, to be positioned exactly
             position_type: PositionType::Absolute,
@@ -400,8 +397,7 @@ mod menu {
 
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
                     align_items: AlignItems::Center,
@@ -413,8 +409,7 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             flex_direction: FlexDirection::Column,
                             align_items: AlignItems::Center,
                             ..default()
@@ -430,7 +425,7 @@ mod menu {
                                 ..default()
                             },
                             TextColor(TEXT_COLOR),
-                            Style {
+                            Node {
                                 margin: UiRect::all(Val::Px(50.0)),
                                 ..default()
                             },
@@ -443,13 +438,13 @@ mod menu {
                         parent
                             .spawn((
                                 Button,
-                                button_style.clone(),
+                                button_node.clone(),
                                 BackgroundColor(NORMAL_BUTTON),
                                 MenuButtonAction::Play,
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/right.png");
-                                parent.spawn((UiImage::new(icon), button_icon_style.clone()));
+                                parent.spawn((UiImage::new(icon), button_icon_node.clone()));
                                 parent.spawn((
                                     Text::new("New Game"),
                                     button_text_font.clone(),
@@ -459,13 +454,13 @@ mod menu {
                         parent
                             .spawn((
                                 Button,
-                                button_style.clone(),
+                                button_node.clone(),
                                 BackgroundColor(NORMAL_BUTTON),
                                 MenuButtonAction::Settings,
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/wrench.png");
-                                parent.spawn((UiImage::new(icon), button_icon_style.clone()));
+                                parent.spawn((UiImage::new(icon), button_icon_node.clone()));
                                 parent.spawn((
                                     Text::new("Settings"),
                                     button_text_font.clone(),
@@ -475,13 +470,13 @@ mod menu {
                         parent
                             .spawn((
                                 Button,
-                                button_style,
+                                button_node,
                                 BackgroundColor(NORMAL_BUTTON),
                                 MenuButtonAction::Quit,
                             ))
                             .with_children(|parent| {
                                 let icon = asset_server.load("textures/Game Icons/exitRight.png");
-                                parent.spawn((UiImage::new(icon), button_icon_style));
+                                parent.spawn((UiImage::new(icon), button_icon_node));
                                 parent.spawn((
                                     Text::new("Quit"),
                                     button_text_font,
@@ -493,7 +488,7 @@ mod menu {
     }
 
     fn settings_menu_setup(mut commands: Commands) {
-        let button_style = Style {
+        let button_node = Node {
             width: Val::Px(200.0),
             height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
@@ -512,8 +507,7 @@ mod menu {
 
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
                     align_items: AlignItems::Center,
@@ -525,8 +519,7 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             flex_direction: FlexDirection::Column,
                             align_items: AlignItems::Center,
                             ..default()
@@ -542,7 +535,7 @@ mod menu {
                             parent
                                 .spawn((
                                     Button,
-                                    button_style.clone(),
+                                    button_node.clone(),
                                     BackgroundColor(NORMAL_BUTTON),
                                     action,
                                 ))
@@ -555,7 +548,7 @@ mod menu {
     }
 
     fn display_settings_menu_setup(mut commands: Commands, display_quality: Res<DisplayQuality>) {
-        let button_style = Style {
+        let button_node = Node {
             width: Val::Px(200.0),
             height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
@@ -573,8 +566,7 @@ mod menu {
 
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
                     align_items: AlignItems::Center,
@@ -586,8 +578,7 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             flex_direction: FlexDirection::Column,
                             align_items: AlignItems::Center,
                             ..default()
@@ -595,12 +586,11 @@ mod menu {
                         BackgroundColor(CRIMSON.into()),
                     ))
                     .with_children(|parent| {
-                        // Create a new `Node` and `Style` , this time not setting its `flex_direction`. It will
+                        // Create a new `Node`, this time not setting its `flex_direction`. It will
                         // use the default value, `FlexDirection::Row`, from left to right.
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     align_items: AlignItems::Center,
                                     ..default()
                                 },
@@ -620,10 +610,10 @@ mod menu {
                                 ] {
                                     let mut entity = parent.spawn((
                                         Button,
-                                        Style {
+                                        Node {
                                             width: Val::Px(150.0),
                                             height: Val::Px(65.0),
-                                            ..button_style.clone()
+                                            ..button_node.clone()
                                         },
                                         BackgroundColor(NORMAL_BUTTON),
                                         quality_setting,
@@ -643,7 +633,7 @@ mod menu {
                         parent
                             .spawn((
                                 Button,
-                                button_style,
+                                button_node,
                                 BackgroundColor(NORMAL_BUTTON),
                                 MenuButtonAction::BackToSettings,
                             ))
@@ -655,7 +645,7 @@ mod menu {
     }
 
     fn sound_settings_menu_setup(mut commands: Commands, volume: Res<Volume>) {
-        let button_style = Style {
+        let button_node = Node {
             width: Val::Px(200.0),
             height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
@@ -673,8 +663,7 @@ mod menu {
 
         commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(100.0),
                     height: Val::Percent(100.0),
                     align_items: AlignItems::Center,
@@ -686,8 +675,7 @@ mod menu {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             flex_direction: FlexDirection::Column,
                             align_items: AlignItems::Center,
                             ..default()
@@ -697,8 +685,7 @@ mod menu {
                     .with_children(|parent| {
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     align_items: AlignItems::Center,
                                     ..default()
                                 },
@@ -709,10 +696,10 @@ mod menu {
                                 for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
                                     let mut entity = parent.spawn((
                                         Button,
-                                        Style {
+                                        Node {
                                             width: Val::Px(30.0),
                                             height: Val::Px(65.0),
-                                            ..button_style.clone()
+                                            ..button_node.clone()
                                         },
                                         BackgroundColor(NORMAL_BUTTON),
                                         Volume(volume_setting),
@@ -725,7 +712,7 @@ mod menu {
                         parent
                             .spawn((
                                 Button,
-                                button_style,
+                                button_node,
                                 BackgroundColor(NORMAL_BUTTON),
                                 MenuButtonAction::BackToSettings,
                             ))
diff --git a/examples/games/loading_screen.rs b/examples/games/loading_screen.rs
index 6fa7881eb3..a24043c1b4 100644
--- a/examples/games/loading_screen.rs
+++ b/examples/games/loading_screen.rs
@@ -83,13 +83,12 @@ fn setup(mut commands: Commands) {
     };
     commands
         .spawn((
-            Node::default(),
-            BackgroundColor(Color::NONE),
-            Style {
+            Node {
                 justify_self: JustifySelf::Center,
                 align_self: AlignSelf::FlexEnd,
                 ..default()
             },
+            BackgroundColor(Color::NONE),
         ))
         .with_child((Text::new("Press 1 or 2 to load a new scene."), text_style));
 }
@@ -257,15 +256,14 @@ fn load_loading_screen(mut commands: Commands) {
     // Spawn the UI that will make up the loading screen.
     commands
         .spawn((
-            Node::default(),
-            BackgroundColor(Color::BLACK),
-            Style {
+            Node {
                 height: Val::Percent(100.0),
                 width: Val::Percent(100.0),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..default()
             },
+            BackgroundColor(Color::BLACK),
             LoadingScreen,
         ))
         .with_child((Text::new("Loading..."), text_style.clone()));
diff --git a/examples/games/stepping.rs b/examples/games/stepping.rs
index 6dea5d6ed0..543188d4eb 100644
--- a/examples/games/stepping.rs
+++ b/examples/games/stepping.rs
@@ -165,7 +165,7 @@ fn build_ui(
         .spawn((
             Text::default(),
             SteppingUi,
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: state.ui_top,
                 left: state.ui_left,
@@ -197,7 +197,7 @@ fn build_stepping_hint(mut commands: Commands) {
             ..default()
         },
         TextColor(FONT_COLOR),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.0),
             left: Val::Px(5.0),
diff --git a/examples/gizmos/2d_gizmos.rs b/examples/gizmos/2d_gizmos.rs
index f521ce10af..fa14904b2a 100644
--- a/examples/gizmos/2d_gizmos.rs
+++ b/examples/gizmos/2d_gizmos.rs
@@ -28,7 +28,7 @@ fn setup(mut commands: Commands) {
         Press 'U' / 'I' to cycle through line styles\n\
         Press 'J' / 'K' to cycle through line joins",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.),
             left: Val::Px(12.),
diff --git a/examples/gizmos/3d_gizmos.rs b/examples/gizmos/3d_gizmos.rs
index f8bb6b4ccb..490714b59a 100644
--- a/examples/gizmos/3d_gizmos.rs
+++ b/examples/gizmos/3d_gizmos.rs
@@ -62,7 +62,7 @@ fn setup(
             Press 'U' or 'I' to cycle through line styles for straight or round gizmos\n\
             Press 'J' or 'K' to cycle through line joins for straight or round gizmos",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/gizmos/light_gizmos.rs b/examples/gizmos/light_gizmos.rs
index 88b4f8cc27..2fb739b56a 100644
--- a/examples/gizmos/light_gizmos.rs
+++ b/examples/gizmos/light_gizmos.rs
@@ -109,7 +109,7 @@ fn setup(
             Press 'A' to toggle drawing of the light gizmos\n\
             Press 'C' to cycle between the light gizmos coloring modes",
             ),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
@@ -125,7 +125,7 @@ fn setup(
             .spawn((
                 Text::new("Gizmo color mode: "),
                 GizmoColorText,
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     bottom: Val::Px(12.0),
                     left: Val::Px(12.0),
diff --git a/examples/helpers/widgets.rs b/examples/helpers/widgets.rs
index aba8d95446..ae8e5626af 100644
--- a/examples/helpers/widgets.rs
+++ b/examples/helpers/widgets.rs
@@ -22,11 +22,11 @@ pub struct RadioButton;
 #[derive(Clone, Copy, Component)]
 pub struct RadioButtonText;
 
-/// Returns a [`Style`] appropriate for the outer main UI node.
+/// Returns a [`Node`] appropriate for the outer main UI node.
 ///
 /// This UI is in the bottom left corner and has flex column support
-pub fn main_ui_style() -> Style {
-    Style {
+pub fn main_ui_node() -> Node {
+    Node {
         flex_direction: FlexDirection::Column,
         position_type: PositionType::Absolute,
         row_gap: Val::Px(6.0),
@@ -60,7 +60,7 @@ pub fn spawn_option_button<T>(
     parent
         .spawn((
             Button,
-            Style {
+            Node {
                 border: UiRect::all(Val::Px(1.0)).with_left(if is_first {
                     Val::Px(1.0)
                 } else {
@@ -97,15 +97,12 @@ where
 {
     // Add the parent node for the row.
     parent
-        .spawn((
-            Node::default(),
-            Style {
-                align_items: AlignItems::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            align_items: AlignItems::Center,
+            ..default()
+        })
         .with_children(|parent| {
-            spawn_ui_text(parent, title, Color::BLACK).insert(Style {
+            spawn_ui_text(parent, title, Color::BLACK).insert(Node {
                 width: Val::Px(125.0),
                 ..default()
             });
diff --git a/examples/input/text_input.rs b/examples/input/text_input.rs
index 7e64e28f22..bfa170e8f7 100644
--- a/examples/input/text_input.rs
+++ b/examples/input/text_input.rs
@@ -37,7 +37,7 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/math/cubic_splines.rs b/examples/math/cubic_splines.rs
index d8c87dba50..6ff1b5808d 100644
--- a/examples/math/cubic_splines.rs
+++ b/examples/math/cubic_splines.rs
@@ -78,17 +78,14 @@ fn setup(mut commands: Commands) {
     let style = TextFont::default();
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                position_type: PositionType::Absolute,
-                top: Val::Px(12.0),
-                left: Val::Px(12.0),
-                flex_direction: FlexDirection::Column,
-                row_gap: Val::Px(20.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
+            flex_direction: FlexDirection::Column,
+            row_gap: Val::Px(20.0),
+            ..default()
+        })
         .with_children(|parent| {
             parent.spawn((Text::new(instructions_text), style.clone()));
             parent.spawn((SplineModeText, Text(spline_mode_text), style.clone()));
diff --git a/examples/math/custom_primitives.rs b/examples/math/custom_primitives.rs
index 69890ba0d9..a072b44764 100644
--- a/examples/math/custom_primitives.rs
+++ b/examples/math/custom_primitives.rs
@@ -157,14 +157,16 @@ fn setup(
     ));
 
     // Example instructions
-    commands.spawn((Text::new("Press 'B' to toggle between no bounding shapes, bounding boxes (AABBs) and bounding spheres / circles\n\
+    commands.spawn((
+        Text::new("Press 'B' to toggle between no bounding shapes, bounding boxes (AABBs) and bounding spheres / circles\n\
             Press 'Space' to switch between 3D and 2D"),
-            Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
             ..default()
-        }));
+        },
+    ));
 }
 
 // Rotate the 2D shapes.
diff --git a/examples/math/random_sampling.rs b/examples/math/random_sampling.rs
index 1cb25cf647..710678e208 100644
--- a/examples/math/random_sampling.rs
+++ b/examples/math/random_sampling.rs
@@ -118,7 +118,7 @@ fn setup(
             D: Add 100 random samples.\n\
             Rotate camera by holding left mouse and panning left/right.",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/math/render_primitives.rs b/examples/math/render_primitives.rs
index e652240b34..a87caa9d80 100644
--- a/examples/math/render_primitives.rs
+++ b/examples/math/render_primitives.rs
@@ -370,8 +370,7 @@ fn setup_text(mut commands: Commands, cameras: Query<(Entity, &Camera)>) {
     commands
         .spawn((
             HeaderNode,
-            Node::default(),
-            Style {
+            Node {
                 justify_self: JustifySelf::Center,
                 top: Val::Px(5.0),
                 ..Default::default()
diff --git a/examples/math/sampling_primitives.rs b/examples/math/sampling_primitives.rs
index 444b2c8358..1591291ee4 100644
--- a/examples/math/sampling_primitives.rs
+++ b/examples/math/sampling_primitives.rs
@@ -388,7 +388,7 @@ fn setup(
             Move camera by L/R arrow keys.\n\
             Tab: Toggle this text",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/mobile/src/lib.rs b/examples/mobile/src/lib.rs
index 93a905c647..4756a027b9 100644
--- a/examples/mobile/src/lib.rs
+++ b/examples/mobile/src/lib.rs
@@ -116,7 +116,7 @@ fn setup_scene(
     commands
         .spawn((
             Button,
-            Style {
+            Node {
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 position_type: PositionType::Absolute,
diff --git a/examples/movement/physics_in_fixed_timestep.rs b/examples/movement/physics_in_fixed_timestep.rs
index 2b572e5962..b477c3c867 100644
--- a/examples/movement/physics_in_fixed_timestep.rs
+++ b/examples/movement/physics_in_fixed_timestep.rs
@@ -145,15 +145,12 @@ fn spawn_player(mut commands: Commands, asset_server: Res<AssetServer>) {
 /// Spawn a bit of UI text to explain how to move the player.
 fn spawn_text(mut commands: Commands) {
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                position_type: PositionType::Absolute,
-                bottom: Val::Px(12.0),
-                left: Val::Px(12.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(12.0),
+            left: Val::Px(12.0),
+            ..default()
+        })
         .with_child((
             Text::new("Move the player with WASD"),
             TextFont {
diff --git a/examples/picking/mesh_picking.rs b/examples/picking/mesh_picking.rs
index 58ffec893d..d4636fea4c 100644
--- a/examples/picking/mesh_picking.rs
+++ b/examples/picking/mesh_picking.rs
@@ -149,7 +149,7 @@ fn setup(
     // Instructions
     commands.spawn((
         Text::new("Hover over the shapes to pick them"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/picking/simple_picking.rs b/examples/picking/simple_picking.rs
index 4d8bbe12e8..d3e3ce2b3f 100644
--- a/examples/picking/simple_picking.rs
+++ b/examples/picking/simple_picking.rs
@@ -20,7 +20,7 @@ fn setup(
     commands
         .spawn((
             Text::new("Click Me to get a box"),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Percent(12.0),
                 left: Val::Percent(12.0),
diff --git a/examples/scene/scene.rs b/examples/scene/scene.rs
index 1a68eda278..74f9beaeb9 100644
--- a/examples/scene/scene.rs
+++ b/examples/scene/scene.rs
@@ -152,7 +152,7 @@ fn infotext_system(mut commands: Commands) {
             font_size: 42.0,
             ..default()
         },
-        Style {
+        Node {
             align_self: AlignSelf::FlexEnd,
             ..default()
         },
diff --git a/examples/shader/shader_prepass.rs b/examples/shader/shader_prepass.rs
index 65eba809c4..b53f9fe941 100644
--- a/examples/shader/shader_prepass.rs
+++ b/examples/shader/shader_prepass.rs
@@ -126,7 +126,7 @@ fn setup(
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
diff --git a/examples/state/computed_states.rs b/examples/state/computed_states.rs
index 96101650d7..0c0671f3f4 100644
--- a/examples/state/computed_states.rs
+++ b/examples/state/computed_states.rs
@@ -336,24 +336,21 @@ mod ui {
 
     pub fn setup_menu(mut commands: Commands, tutorial_state: Res<State<TutorialState>>) {
         let button_entity = commands
-            .spawn((
-                Node::default(),
-                Style {
-                    // center button
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    justify_content: JustifyContent::Center,
-                    align_items: AlignItems::Center,
-                    flex_direction: FlexDirection::Column,
-                    row_gap: Val::Px(10.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                // center button
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                flex_direction: FlexDirection::Column,
+                row_gap: Val::Px(10.),
+                ..default()
+            })
             .with_children(|parent| {
                 parent
                     .spawn((
                         Button,
-                        Style {
+                        Node {
                             width: Val::Px(200.),
                             height: Val::Px(65.),
                             // horizontally center child text
@@ -379,7 +376,7 @@ mod ui {
                 parent
                     .spawn((
                         Button,
-                        Style {
+                        Node {
                             width: Val::Px(200.),
                             height: Val::Px(65.),
                             // horizontally center child text
@@ -459,8 +456,7 @@ mod ui {
         commands
             .spawn((
                 StateScoped(IsPaused::Paused),
-                Node::default(),
-                Style {
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
@@ -475,8 +471,7 @@ mod ui {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             width: Val::Px(400.),
                             height: Val::Px(400.),
                             // horizontally center child text
@@ -505,8 +500,7 @@ mod ui {
         commands
             .spawn((
                 StateScoped(TurboMode),
-                Node::default(),
-                Style {
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
@@ -545,8 +539,7 @@ mod ui {
         commands
             .spawn((
                 StateScoped(Tutorial::MovementInstructions),
-                Node::default(),
-                Style {
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
@@ -600,8 +593,7 @@ mod ui {
         commands
             .spawn((
                 StateScoped(Tutorial::PauseInstructions),
-                Node::default(),
-                Style {
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
diff --git a/examples/state/custom_transitions.rs b/examples/state/custom_transitions.rs
index c52b85f7a9..820c140462 100644
--- a/examples/state/custom_transitions.rs
+++ b/examples/state/custom_transitions.rs
@@ -243,22 +243,19 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
 fn setup_menu(mut commands: Commands) {
     let button_entity = commands
-        .spawn((
-            Node::default(),
-            Style {
-                // center button
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            // center button
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
                     Button,
-                    Style {
+                    Node {
                         width: Val::Px(150.),
                         height: Val::Px(65.),
                         // horizontally center child text
diff --git a/examples/state/states.rs b/examples/state/states.rs
index 9fc7f6b362..3e83b6fda9 100644
--- a/examples/state/states.rs
+++ b/examples/state/states.rs
@@ -51,22 +51,19 @@ fn setup(mut commands: Commands) {
 
 fn setup_menu(mut commands: Commands) {
     let button_entity = commands
-        .spawn((
-            Node::default(),
-            Style {
-                // center button
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            // center button
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
                     Button,
-                    Style {
+                    Node {
                         width: Val::Px(150.),
                         height: Val::Px(65.),
                         // horizontally center child text
diff --git a/examples/state/sub_states.rs b/examples/state/sub_states.rs
index 528a9471a0..959e58d7f7 100644
--- a/examples/state/sub_states.rs
+++ b/examples/state/sub_states.rs
@@ -156,22 +156,19 @@ mod ui {
 
     pub fn setup_menu(mut commands: Commands) {
         let button_entity = commands
-            .spawn((
-                Node::default(),
-                Style {
-                    // center button
-                    width: Val::Percent(100.),
-                    height: Val::Percent(100.),
-                    justify_content: JustifyContent::Center,
-                    align_items: AlignItems::Center,
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                // center button
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                ..default()
+            })
             .with_children(|parent| {
                 parent
                     .spawn((
                         Button,
-                        Style {
+                        Node {
                             width: Val::Px(150.),
                             height: Val::Px(65.),
                             // horizontally center child text
@@ -205,8 +202,7 @@ mod ui {
         commands
             .spawn((
                 StateScoped(IsPaused::Paused),
-                Node::default(),
-                Style {
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
@@ -220,8 +216,7 @@ mod ui {
             .with_children(|parent| {
                 parent
                     .spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             width: Val::Px(400.),
                             height: Val::Px(400.),
                             // horizontally center child text
diff --git a/examples/stress_tests/bevymark.rs b/examples/stress_tests/bevymark.rs
index f320eac0e1..761b997344 100644
--- a/examples/stress_tests/bevymark.rs
+++ b/examples/stress_tests/bevymark.rs
@@ -261,8 +261,7 @@ fn setup(
     commands.spawn(Camera2d);
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 padding: UiRect::all(Val::Px(5.0)),
                 ..default()
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 3abe9cfd9c..b1039c2262 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -79,10 +79,8 @@ fn main() {
     }
 
     if args.relayout {
-        app.add_systems(Update, |mut style_query: Query<&mut Style>| {
-            style_query
-                .iter_mut()
-                .for_each(|mut style| style.set_changed());
+        app.add_systems(Update, |mut nodes: Query<&mut Node>| {
+            nodes.iter_mut().for_each(|mut node| node.set_changed());
         });
     }
 
@@ -138,17 +136,14 @@ fn setup_flex(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
     let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8);
     commands.spawn(Camera2d);
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                flex_direction: FlexDirection::Column,
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            ..default()
+        })
         .with_children(|commands| {
             for column in 0..args.buttons {
                 commands.spawn(Node::default()).with_children(|commands| {
@@ -193,17 +188,14 @@ fn setup_grid(mut commands: Commands, asset_server: Res<AssetServer>, args: Res<
     let as_rainbow = |i: usize| Color::hsl((i as f32 / buttons_f) * 360.0, 0.9, 0.8);
     commands.spawn(Camera2d);
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                display: Display::Grid,
-                width: Val::Percent(100.),
-                height: Val::Percent(100.0),
-                grid_template_columns: RepeatedGridTrack::flex(args.buttons as u16, 1.0),
-                grid_template_rows: RepeatedGridTrack::flex(args.buttons as u16, 1.0),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            display: Display::Grid,
+            width: Val::Percent(100.),
+            height: Val::Percent(100.0),
+            grid_template_columns: RepeatedGridTrack::flex(args.buttons as u16, 1.0),
+            grid_template_rows: RepeatedGridTrack::flex(args.buttons as u16, 1.0),
+            ..default()
+        })
         .with_children(|commands| {
             for column in 0..args.buttons {
                 for row in 0..args.buttons {
@@ -245,7 +237,7 @@ fn spawn_button(
     let margin = UiRect::axes(width * 0.05, height * 0.05);
     let mut builder = commands.spawn((
         Button,
-        Style {
+        Node {
             width,
             height,
             margin,
diff --git a/examples/stress_tests/many_gizmos.rs b/examples/stress_tests/many_gizmos.rs
index 95282aeb50..aaa1b9a1d6 100644
--- a/examples/stress_tests/many_gizmos.rs
+++ b/examples/stress_tests/many_gizmos.rs
@@ -89,7 +89,7 @@ fn setup(mut commands: Commands) {
 
     commands.spawn((
         Text::default(),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/stress_tests/many_glyphs.rs b/examples/stress_tests/many_glyphs.rs
index b02b93bef8..0e05a93e19 100644
--- a/examples/stress_tests/many_glyphs.rs
+++ b/examples/stress_tests/many_glyphs.rs
@@ -56,24 +56,18 @@ fn setup(mut commands: Commands) {
     };
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|commands| {
             commands
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Px(1000.),
-                        ..Default::default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Px(1000.),
+                    ..Default::default()
+                })
                 .with_child((Text(text_string.clone()), text_font.clone(), text_block));
         });
 
diff --git a/examples/time/virtual_time.rs b/examples/time/virtual_time.rs
index ee0a87be9f..1139ee6d2f 100644
--- a/examples/time/virtual_time.rs
+++ b/examples/time/virtual_time.rs
@@ -77,18 +77,15 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut time: ResMu
     let font_size = 33.;
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                display: Display::Flex,
-                justify_content: JustifyContent::SpaceBetween,
-                width: Val::Percent(100.),
-                position_type: PositionType::Absolute,
-                top: Val::Px(0.),
-                padding: UiRect::all(Val::Px(20.0)),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            display: Display::Flex,
+            justify_content: JustifyContent::SpaceBetween,
+            width: Val::Percent(100.),
+            position_type: PositionType::Absolute,
+            top: Val::Px(0.),
+            padding: UiRect::all(Val::Px(20.0)),
+            ..default()
+        })
         .with_children(|builder| {
             // real time info
             builder.spawn((
diff --git a/examples/tools/gamepad_viewer.rs b/examples/tools/gamepad_viewer.rs
index b8289465cb..1112a227dc 100644
--- a/examples/tools/gamepad_viewer.rs
+++ b/examples/tools/gamepad_viewer.rs
@@ -377,7 +377,7 @@ fn setup_connected(mut commands: Commands) {
     commands
         .spawn((
             Text::new("Connected Gamepads:\n"),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.),
                 left: Val::Px(12.),
diff --git a/examples/tools/scene_viewer/morph_viewer_plugin.rs b/examples/tools/scene_viewer/morph_viewer_plugin.rs
index cde1edd58b..2c82ff6406 100644
--- a/examples/tools/scene_viewer/morph_viewer_plugin.rs
+++ b/examples/tools/scene_viewer/morph_viewer_plugin.rs
@@ -268,7 +268,7 @@ fn detect_morphs(
     commands
         .spawn((
             Text::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(10.0),
                 left: Val::Px(10.0),
diff --git a/examples/transforms/align.rs b/examples/transforms/align.rs
index be4bed37fa..da3e52eaa2 100644
--- a/examples/transforms/align.rs
+++ b/examples/transforms/align.rs
@@ -103,7 +103,7 @@ fn setup(
             Click and drag the mouse to rotate the camera.\n\
             Press 'H' to hide/show these instructions.",
         ),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 5df8cfaa1e..d7c7797b91 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -13,8 +13,7 @@ fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
     let root = commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin: UiRect::all(Val::Px(25.0)),
                 align_self: AlignSelf::Stretch,
                 justify_self: JustifySelf::Stretch,
@@ -30,8 +29,7 @@ fn setup(mut commands: Commands) {
 
     let root_rounded = commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin: UiRect::all(Val::Px(25.0)),
                 align_self: AlignSelf::Stretch,
                 justify_self: JustifySelf::Stretch,
@@ -125,8 +123,7 @@ fn setup(mut commands: Commands) {
     for (label, border) in border_labels.into_iter().zip(borders) {
         let inner_spot = commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(10.),
                     height: Val::Px(10.),
                     ..default()
@@ -136,8 +133,7 @@ fn setup(mut commands: Commands) {
             .id();
         let border_node = commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(50.),
                     height: Val::Px(50.),
                     border,
@@ -166,14 +162,11 @@ fn setup(mut commands: Commands) {
             ))
             .id();
         let container = commands
-            .spawn((
-                Node::default(),
-                Style {
-                    flex_direction: FlexDirection::Column,
-                    align_items: AlignItems::Center,
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                ..default()
+            })
             .add_children(&[border_node, label_node])
             .id();
         commands.entity(root).add_child(container);
@@ -182,8 +175,7 @@ fn setup(mut commands: Commands) {
     for (label, border) in border_labels.into_iter().zip(borders) {
         let inner_spot = commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(10.),
                     height: Val::Px(10.),
                     ..default()
@@ -202,8 +194,7 @@ fn setup(mut commands: Commands) {
         );
         let border_node = commands
             .spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(50.),
                     height: Val::Px(50.),
                     border,
@@ -233,14 +224,11 @@ fn setup(mut commands: Commands) {
             ))
             .id();
         let container = commands
-            .spawn((
-                Node::default(),
-                Style {
-                    flex_direction: FlexDirection::Column,
-                    align_items: AlignItems::Center,
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                ..default()
+            })
             .add_children(&[border_node, label_node])
             .id();
         commands.entity(root_rounded).add_child(container);
@@ -248,8 +236,7 @@ fn setup(mut commands: Commands) {
 
     let border_label = commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin: UiRect {
                     left: Val::Px(25.0),
                     right: Val::Px(25.0),
@@ -273,8 +260,7 @@ fn setup(mut commands: Commands) {
 
     let border_rounded_label = commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin: UiRect {
                     left: Val::Px(25.0),
                     right: Val::Px(25.0),
@@ -298,8 +284,7 @@ fn setup(mut commands: Commands) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin: UiRect::all(Val::Px(25.0)),
                 flex_direction: FlexDirection::Column,
                 align_self: AlignSelf::Stretch,
diff --git a/examples/ui/box_shadow.rs b/examples/ui/box_shadow.rs
index 03ece8bdfa..64956a3e5f 100644
--- a/examples/ui/box_shadow.rs
+++ b/examples/ui/box_shadow.rs
@@ -35,8 +35,7 @@ fn setup(mut commands: Commands) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.0),
                 height: Val::Percent(100.0),
                 padding: UiRect::all(Val::Px(30.)),
@@ -201,8 +200,7 @@ fn box_shadow_node_bundle(
     border_radius: BorderRadius,
 ) -> impl Bundle {
     (
-        Node::default(),
-        Style {
+        Node {
             width: Val::Px(size.x),
             height: Val::Px(size.y),
             border: UiRect::all(Val::Px(4.)),
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index b99c110d78..03740f4b4b 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -55,21 +55,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // ui camera
     commands.spawn(Camera2d);
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
                     Button,
-                    Style {
+                    Node {
                         width: Val::Px(150.0),
                         height: Val::Px(65.0),
                         border: UiRect::all(Val::Px(5.0)),
diff --git a/examples/ui/display_and_visibility.rs b/examples/ui/display_and_visibility.rs
index 309e5105b2..ea5cfb1624 100644
--- a/examples/ui/display_and_visibility.rs
+++ b/examples/ui/display_and_visibility.rs
@@ -48,15 +48,15 @@ trait TargetUpdate {
 }
 
 impl TargetUpdate for Target<Display> {
-    type TargetComponent = Style;
+    type TargetComponent = Node;
     const NAME: &'static str = "Display";
-    fn update_target(&self, style: &mut Self::TargetComponent) -> String {
-        style.display = match style.display {
+    fn update_target(&self, node: &mut Self::TargetComponent) -> String {
+        node.display = match node.display {
             Display::Flex => Display::None,
             Display::None => Display::Flex,
             Display::Block | Display::Grid => unreachable!(),
         };
-        format!("{}::{:?} ", Self::NAME, style.display)
+        format!("{}::{:?} ", Self::NAME, node.display)
     }
 }
 
@@ -82,99 +82,94 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     };
 
     commands.spawn(Camera2d);
-    commands.spawn((Node::default(),
-        Style {
-            width: Val::Percent(100.),
-            height: Val::Percent(100.),
-            flex_direction: FlexDirection::Column,
-            align_items: AlignItems::Center,
-            justify_content: JustifyContent::SpaceEvenly,
-            ..Default::default()
-        },
-        BackgroundColor(Color::BLACK),
-    )).with_children(|parent| {
-        parent.spawn((Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"),
-            text_font.clone(),
-            TextLayout::new_with_justify(JustifyText::Center),
-            Style {
-                margin: UiRect::bottom(Val::Px(10.)),
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceEvenly,
                 ..Default::default()
             },
-        ));
+            BackgroundColor(Color::BLACK),
+        ))
+        .with_children(|parent| {
+            parent.spawn((
+                Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"),
+                text_font.clone(),
+                TextLayout::new_with_justify(JustifyText::Center),
+                Node {
+                    margin: UiRect::bottom(Val::Px(10.)),
+                    ..Default::default()
+                },
+            ));
 
-        parent
-            .spawn((
-                Node::default(),
-                Style {
+            parent
+                .spawn(Node {
                     width: Val::Percent(100.),
                     ..default()
-                },
-            ))
-            .with_children(|parent| {
-                let mut target_ids = vec![];
-                parent.spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(50.),
-                        height: Val::Px(520.),
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                )).with_children(|parent| {
-                    target_ids = spawn_left_panel(parent, &palette);
+                })
+                .with_children(|parent| {
+                    let mut target_ids = vec![];
+                    parent
+                        .spawn(Node {
+                            width: Val::Percent(50.),
+                            height: Val::Px(520.),
+                            justify_content: JustifyContent::Center,
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            target_ids = spawn_left_panel(parent, &palette);
+                        });
+
+                    parent
+                        .spawn(Node {
+                            width: Val::Percent(50.),
+                            justify_content: JustifyContent::Center,
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            spawn_right_panel(parent, text_font, &palette, target_ids);
+                        });
                 });
 
-                parent.spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(50.),
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                )).with_children(|parent| {
-                    spawn_right_panel(parent, text_font, &palette, target_ids);
-                });
-            });
-
-            parent.spawn((
-                Node::default(),
-                Style {
+            parent
+                .spawn(Node {
                     flex_direction: FlexDirection::Row,
                     align_items: AlignItems::Start,
                     justify_content: JustifyContent::Start,
                     column_gap: Val::Px(10.),
                     ..default()
-                },
-            ))
-            .with_children(|builder| {
-                let text_font = TextFont {
-                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
-                    ..default()
-                };
+                })
+                .with_children(|builder| {
+                    let text_font = TextFont {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                        ..default()
+                    };
 
-                builder.spawn((Text::new("Display::None\nVisibility::Hidden\nVisibility::Inherited"),
+                    builder.spawn((
+                        Text::new("Display::None\nVisibility::Hidden\nVisibility::Inherited"),
                         text_font.clone(),
                         TextColor(HIDDEN_COLOR),
                         TextLayout::new_with_justify(JustifyText::Center),
-                ));
-                builder.spawn((Text::new("-\n-\n-"),
+                    ));
+                    builder.spawn((
+                        Text::new("-\n-\n-"),
                         text_font.clone(),
                         TextColor(DARK_GRAY.into()),
                         TextLayout::new_with_justify(JustifyText::Center),
-                ));
-                builder.spawn((Text::new("The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible."),
-                    text_font
-                ));
-            });
-    });
+                    ));
+                    builder.spawn((Text::new("The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible."), text_font));
+                });
+        });
 }
 
 fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Entity> {
     let mut target_ids = vec![];
     builder
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 padding: UiRect::all(Val::Px(10.)),
                 ..default()
             },
@@ -186,8 +181,7 @@ fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Ent
                 .with_children(|parent| {
                     let id = parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 align_items: AlignItems::FlexEnd,
                                 justify_content: JustifyContent::FlexEnd,
                                 ..default()
@@ -195,19 +189,15 @@ fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Ent
                             BackgroundColor(palette[0]),
                         ))
                         .with_children(|parent| {
-                            parent.spawn((
-                                Node::default(),
-                                Style {
-                                    width: Val::Px(100.),
-                                    height: Val::Px(500.),
-                                    ..default()
-                                },
-                            ));
+                            parent.spawn(Node {
+                                width: Val::Px(100.),
+                                height: Val::Px(500.),
+                                ..default()
+                            });
 
                             let id = parent
                                 .spawn((
-                                    Node::default(),
-                                    Style {
+                                    Node {
                                         height: Val::Px(400.),
                                         align_items: AlignItems::FlexEnd,
                                         justify_content: JustifyContent::FlexEnd,
@@ -216,19 +206,15 @@ fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Ent
                                     BackgroundColor(palette[1]),
                                 ))
                                 .with_children(|parent| {
-                                    parent.spawn((
-                                        Node::default(),
-                                        Style {
-                                            width: Val::Px(100.),
-                                            height: Val::Px(400.),
-                                            ..default()
-                                        },
-                                    ));
+                                    parent.spawn(Node {
+                                        width: Val::Px(100.),
+                                        height: Val::Px(400.),
+                                        ..default()
+                                    });
 
                                     let id = parent
                                         .spawn((
-                                            Node::default(),
-                                            Style {
+                                            Node {
                                                 height: Val::Px(300.),
                                                 align_items: AlignItems::FlexEnd,
                                                 justify_content: JustifyContent::FlexEnd,
@@ -237,19 +223,15 @@ fn spawn_left_panel(builder: &mut ChildBuilder, palette: &[Color; 4]) -> Vec<Ent
                                             BackgroundColor(palette[2]),
                                         ))
                                         .with_children(|parent| {
-                                            parent.spawn((
-                                                Node::default(),
-                                                Style {
-                                                    width: Val::Px(100.),
-                                                    height: Val::Px(300.),
-                                                    ..default()
-                                                },
-                                            ));
+                                            parent.spawn(Node {
+                                                width: Val::Px(100.),
+                                                height: Val::Px(300.),
+                                                ..default()
+                                            });
 
                                             let id = parent
                                                 .spawn((
-                                                    Node::default(),
-                                                    Style {
+                                                    Node {
                                                         width: Val::Px(200.),
                                                         height: Val::Px(200.),
                                                         ..default()
@@ -284,8 +266,7 @@ fn spawn_right_panel(
     };
     parent
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 padding: UiRect::all(Val::Px(10.)),
                 ..default()
             },
@@ -294,8 +275,7 @@ fn spawn_right_panel(
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(500.),
                         height: Val::Px(500.),
                         flex_direction: FlexDirection::Column,
@@ -315,8 +295,7 @@ fn spawn_right_panel(
 
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 width: Val::Px(400.),
                                 height: Val::Px(400.),
                                 flex_direction: FlexDirection::Column,
@@ -336,8 +315,7 @@ fn spawn_right_panel(
 
                             parent
                                 .spawn((
-                                    Node::default(),
-                                    Style {
+                                    Node {
                                         width: Val::Px(300.),
                                         height: Val::Px(300.),
                                         flex_direction: FlexDirection::Column,
@@ -357,8 +335,7 @@ fn spawn_right_panel(
 
                                     parent
                                         .spawn((
-                                            Node::default(),
-                                            Style {
+                                            Node {
                                                 width: Val::Px(200.),
                                                 height: Val::Px(200.),
                                                 align_items: AlignItems::FlexStart,
@@ -376,14 +353,11 @@ fn spawn_right_panel(
                                         .with_children(|parent| {
                                             spawn_buttons(parent, target_ids.pop().unwrap());
 
-                                            parent.spawn((
-                                                Node::default(),
-                                                Style {
-                                                    width: Val::Px(100.),
-                                                    height: Val::Px(100.),
-                                                    ..default()
-                                                },
-                                            ));
+                                            parent.spawn(Node {
+                                                width: Val::Px(100.),
+                                                height: Val::Px(100.),
+                                                ..default()
+                                            });
                                         });
                                 });
                         });
@@ -399,7 +373,7 @@ where
     parent
         .spawn((
             Button,
-            Style {
+            Node {
                 align_self: AlignSelf::FlexStart,
                 padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
                 ..default()
diff --git a/examples/ui/flex_layout.rs b/examples/ui/flex_layout.rs
index bb78f43755..901a4af124 100644
--- a/examples/ui/flex_layout.rs
+++ b/examples/ui/flex_layout.rs
@@ -23,8 +23,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 // fill the entire window
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
@@ -39,13 +38,10 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|builder| {
             // spawn the key
             builder
-                .spawn((
-                    Node::default(),
-                    Style {
-                        flex_direction: FlexDirection::Row,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    flex_direction: FlexDirection::Row,
+                    ..default()
+                })
                 .with_children(|builder| {
                     spawn_nested_text_bundle(
                         builder,
@@ -64,16 +60,13 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                 });
 
             builder
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(100.),
-                        height: Val::Percent(100.),
-                        flex_direction: FlexDirection::Column,
-                        row_gap: MARGIN,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    flex_direction: FlexDirection::Column,
+                    row_gap: MARGIN,
+                    ..default()
+                })
                 .with_children(|builder| {
                     // spawn one child node for each combination of `AlignItems` and `JustifyContent`
                     let justifications = [
@@ -93,16 +86,13 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                     ];
                     for align_items in alignments {
                         builder
-                            .spawn((
-                                Node::default(),
-                                Style {
-                                    width: Val::Percent(100.),
-                                    height: Val::Percent(100.),
-                                    flex_direction: FlexDirection::Row,
-                                    column_gap: MARGIN,
-                                    ..Default::default()
-                                },
-                            ))
+                            .spawn(Node {
+                                width: Val::Percent(100.),
+                                height: Val::Percent(100.),
+                                flex_direction: FlexDirection::Row,
+                                column_gap: MARGIN,
+                                ..Default::default()
+                            })
                             .with_children(|builder| {
                                 for justify_content in justifications {
                                     spawn_child_node(
@@ -126,8 +116,7 @@ fn spawn_child_node(
 ) {
     builder
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 flex_direction: FlexDirection::Column,
                 align_items,
                 justify_content,
@@ -164,8 +153,7 @@ fn spawn_nested_text_bundle(
 ) {
     builder
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 margin,
                 padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
                 ..default()
diff --git a/examples/ui/font_atlas_debug.rs b/examples/ui/font_atlas_debug.rs
index be415f3440..f0a315c99f 100644
--- a/examples/ui/font_atlas_debug.rs
+++ b/examples/ui/font_atlas_debug.rs
@@ -50,7 +50,7 @@ fn atlas_render_system(
             state.atlas_count += 1;
             commands.spawn((
                 UiImage::new(font_atlas.texture.clone()),
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     top: Val::ZERO,
                     left: Val::Px(512.0 * x_offset),
@@ -86,13 +86,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResM
     commands.spawn(Camera2d);
     commands
         .spawn((
-            Node::default(),
-            BackgroundColor(Color::NONE),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 bottom: Val::ZERO,
                 ..default()
             },
+            BackgroundColor(Color::NONE),
         ))
         .with_children(|parent| {
             parent.spawn((
diff --git a/examples/ui/ghost_nodes.rs b/examples/ui/ghost_nodes.rs
index ceb9bbe932..eeb9241f54 100644
--- a/examples/ui/ghost_nodes.rs
+++ b/examples/ui/ghost_nodes.rs
@@ -41,16 +41,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // Normal UI root
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((Node::default(), Counter(0)))
@@ -79,7 +76,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 fn create_button() -> impl Bundle {
     (
         Button,
-        Style {
+        Node {
             width: Val::Px(150.0),
             height: Val::Px(65.0),
             border: UiRect::all(Val::Px(5.0)),
diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs
index ae50dee9d2..83195d7032 100644
--- a/examples/ui/grid.rs
+++ b/examples/ui/grid.rs
@@ -22,8 +22,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
     // Top-level grid (app frame)
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 // Use the CSS Grid algorithm for laying out this node
                 display: Display::Grid,
                 // Make node fill the entirety of its parent (in this case the window)
@@ -49,16 +48,15 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|builder| {
             // Header
             builder
-                .spawn((
-                    Node::default(),
-                    Style {
+                .spawn(
+                    Node {
                         display: Display::Grid,
                         // Make this node span two grid columns so that it takes up the entire top tow
                         grid_column: GridPlacement::span(2),
                         padding: UiRect::all(Val::Px(6.0)),
                         ..default()
                     },
-                ))
+                )
                 .with_children(|builder| {
                     spawn_nested_text_bundle(builder, font.clone(), "Bevy CSS Grid Layout Example");
                 });
@@ -66,8 +64,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
             // Main content grid (auto placed in row 2, column 1)
             builder
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         // Make the height of the node fill its parent
                         height: Val::Percent(100.0),
                         // Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
@@ -117,8 +114,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
             // Right side bar (auto placed in row 2, column 2)
             builder
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         display: Display::Grid,
                         // Align content towards the start (top) in the vertical axis
                         align_items: AlignItems::Start,
@@ -154,8 +150,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             // Footer / status bar
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     // Make this node span two grid column so that it takes up the entire bottom row
                     grid_column: GridPlacement::span(2),
                     ..default()
@@ -165,9 +160,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             // Modal (absolutely positioned on top of content - currently hidden: to view it, change its visibility)
             builder.spawn((
-                Node::default(),
-                Visibility::Hidden,
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     margin: UiRect {
                         top: Val::Px(100.),
@@ -180,6 +173,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                     max_width: Val::Px(600.),
                     ..default()
                 },
+                Visibility::Hidden,
                 BackgroundColor(Color::WHITE.with_alpha(0.8)),
             ));
         });
@@ -191,8 +185,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
 fn item_rect(builder: &mut ChildBuilder, color: Srgba) {
     builder
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 display: Display::Grid,
                 padding: UiRect::all(Val::Px(3.0)),
                 ..default()
diff --git a/examples/ui/overflow.rs b/examples/ui/overflow.rs
index 2857c1edfa..ad7bd6e026 100644
--- a/examples/ui/overflow.rs
+++ b/examples/ui/overflow.rs
@@ -21,8 +21,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
                 align_items: AlignItems::Center,
@@ -39,21 +38,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 Overflow::clip(),
             ] {
                 parent
-                    .spawn((
-                        Node::default(),
-                        Style {
-                            flex_direction: FlexDirection::Column,
-                            align_items: AlignItems::Center,
-                            margin: UiRect::horizontal(Val::Px(25.)),
-                            ..Default::default()
-                        },
-                    ))
+                    .spawn(Node {
+                        flex_direction: FlexDirection::Column,
+                        align_items: AlignItems::Center,
+                        margin: UiRect::horizontal(Val::Px(25.)),
+                        ..Default::default()
+                    })
                     .with_children(|parent| {
                         let label = format!("{overflow:#?}");
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     padding: UiRect::all(Val::Px(10.)),
                                     margin: UiRect::bottom(Val::Px(25.)),
                                     ..Default::default()
@@ -65,8 +60,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             });
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     width: Val::Px(100.),
                                     height: Val::Px(100.),
                                     padding: UiRect {
@@ -84,7 +78,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             .with_children(|parent| {
                                 parent.spawn((
                                     UiImage::new(image.clone()),
-                                    Style {
+                                    Node {
                                         min_width: Val::Px(100.),
                                         min_height: Val::Px(100.),
                                         ..default()
diff --git a/examples/ui/overflow_clip_margin.rs b/examples/ui/overflow_clip_margin.rs
index 79bd636cf3..420027e553 100644
--- a/examples/ui/overflow_clip_margin.rs
+++ b/examples/ui/overflow_clip_margin.rs
@@ -18,8 +18,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
                 align_items: AlignItems::Center,
@@ -38,19 +37,15 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 OverflowClipMargin::content_box(),
             ] {
                 parent
-                    .spawn((
-                        Node::default(),
-                        Style {
-                            flex_direction: FlexDirection::Row,
-                            column_gap: Val::Px(20.),
-                            ..default()
-                        },
-                    ))
+                    .spawn(Node {
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(20.),
+                        ..default()
+                    })
                     .with_children(|parent| {
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     padding: UiRect::all(Val::Px(10.)),
                                     margin: UiRect::bottom(Val::Px(25.)),
                                     ..default()
@@ -61,8 +56,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                         parent
                             .spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     margin: UiRect::top(Val::Px(10.)),
                                     width: Val::Px(100.),
                                     height: Val::Px(100.),
@@ -78,8 +72,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             .with_children(|parent| {
                                 parent
                                     .spawn((
-                                        Node::default(),
-                                        Style {
+                                        Node {
                                             min_width: Val::Px(50.),
                                             min_height: Val::Px(50.),
                                             ..default()
@@ -88,7 +81,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     ))
                                     .with_child((
                                         UiImage::new(image.clone()),
-                                        Style {
+                                        Node {
                                             min_width: Val::Px(100.),
                                             min_height: Val::Px(100.),
                                             ..default()
diff --git a/examples/ui/overflow_debug.rs b/examples/ui/overflow_debug.rs
index 6896680b9d..25391372d4 100644
--- a/examples/ui/overflow_debug.rs
+++ b/examples/ui/overflow_debug.rs
@@ -89,7 +89,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 "Next Overflow Setting (O)\nNext Container Size (S)\nToggle Animation (space)\n\n",
             ),
             text_font.clone(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 top: Val::Px(12.0),
                 left: Val::Px(12.0),
@@ -105,29 +105,23 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // Overflow Debug
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        display: Display::Grid,
-                        grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE),
-                        grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE),
-                        row_gap: Val::Px(80.),
-                        column_gap: Val::Px(80.),
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    display: Display::Grid,
+                    grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE),
+                    grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE),
+                    row_gap: Val::Px(80.),
+                    column_gap: Val::Px(80.),
+                    ..default()
+                })
                 .with_children(|parent| {
                     spawn_image(parent, &asset_server, Move);
                     spawn_image(parent, &asset_server, Scale);
@@ -148,7 +142,7 @@ fn spawn_image(
     spawn_container(parent, update_transform, |parent| {
         parent.spawn((
             UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
-            Style {
+            Node {
                 height: Val::Px(100.),
                 position_type: PositionType::Absolute,
                 top: Val::Px(-50.),
@@ -187,8 +181,7 @@ fn spawn_container(
 
     parent
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
                 align_items: AlignItems::Center,
@@ -202,8 +195,7 @@ fn spawn_container(
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         align_items: AlignItems::Center,
                         justify_content: JustifyContent::Center,
                         top: Val::Px(transform.translation.x),
@@ -241,23 +233,23 @@ fn update_animation(
 
 fn update_transform<T: UpdateTransform + Component>(
     animation: Res<AnimationState>,
-    mut containers: Query<(&mut Transform, &mut Style, &T)>,
+    mut containers: Query<(&mut Transform, &mut Node, &T)>,
 ) {
-    for (mut transform, mut style, update_transform) in &mut containers {
+    for (mut transform, mut node, update_transform) in &mut containers {
         update_transform.update(animation.t, &mut transform);
 
-        style.left = Val::Px(transform.translation.x);
-        style.top = Val::Px(transform.translation.y);
+        node.left = Val::Px(transform.translation.x);
+        node.top = Val::Px(transform.translation.y);
     }
 }
 
 fn toggle_overflow(
-    mut containers: Query<&mut Style, With<Container>>,
+    mut containers: Query<&mut Node, With<Container>>,
     instructions: Single<Entity, With<Instructions>>,
     mut writer: TextUiWriter,
 ) {
-    for mut style in &mut containers {
-        style.overflow = match style.overflow {
+    for mut node in &mut containers {
+        node.overflow = match node.overflow {
             Overflow {
                 x: OverflowAxis::Visible,
                 y: OverflowAxis::Visible,
@@ -274,19 +266,19 @@ fn toggle_overflow(
         };
 
         let entity = *instructions;
-        *writer.text(entity, 1) = format!("{:?}", style.overflow);
+        *writer.text(entity, 1) = format!("{:?}", node.overflow);
     }
 }
 
-fn next_container_size(mut containers: Query<(&mut Style, &mut Container)>) {
-    for (mut style, mut container) in &mut containers {
+fn next_container_size(mut containers: Query<(&mut Node, &mut Container)>) {
+    for (mut node, mut container) in &mut containers {
         container.0 = (container.0 + 1) % 3;
 
-        style.width = match container.0 {
+        node.width = match container.0 {
             2 => Val::Percent(30.),
             _ => Val::Percent(100.),
         };
-        style.height = match container.0 {
+        node.height = match container.0 {
             1 => Val::Percent(30.),
             _ => Val::Percent(100.),
         };
diff --git a/examples/ui/relative_cursor_position.rs b/examples/ui/relative_cursor_position.rs
index de4b36e939..796e810895 100644
--- a/examples/ui/relative_cursor_position.rs
+++ b/examples/ui/relative_cursor_position.rs
@@ -29,22 +29,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     ));
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                flex_direction: FlexDirection::Column,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            flex_direction: FlexDirection::Column,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(250.),
                         height: Val::Px(250.),
                         margin: UiRect::bottom(Val::Px(15.)),
diff --git a/examples/ui/render_ui_to_texture.rs b/examples/ui/render_ui_to_texture.rs
index 8a40308ad7..69083dd2ec 100644
--- a/examples/ui/render_ui_to_texture.rs
+++ b/examples/ui/render_ui_to_texture.rs
@@ -65,8 +65,7 @@ fn setup(
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 // Cover the whole image
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
diff --git a/examples/ui/scroll.rs b/examples/ui/scroll.rs
index 5aacceb674..152ea7189f 100644
--- a/examples/ui/scroll.rs
+++ b/examples/ui/scroll.rs
@@ -30,28 +30,22 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // root node
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                justify_content: JustifyContent::SpaceBetween,
-                flex_direction: FlexDirection::Column,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            justify_content: JustifyContent::SpaceBetween,
+            flex_direction: FlexDirection::Column,
+            ..default()
+        })
         .insert(PickingBehavior::IGNORE)
         .with_children(|parent| {
             // horizontal scroll example
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(100.),
-                        flex_direction: FlexDirection::Column,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    flex_direction: FlexDirection::Column,
+                    ..default()
+                })
                 .with_children(|parent| {
                     // header
                     parent.spawn((
@@ -67,8 +61,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // horizontal scroll container
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 width: Val::Percent(80.),
                                 margin: UiRect::all(Val::Px(10.)),
                                 flex_direction: FlexDirection::Row,
@@ -88,7 +81,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     Label,
                                     AccessibilityNode(NodeBuilder::new(Role::ListItem)),
                                 ))
-                                .insert(Style {
+                                .insert(Node {
                                     min_width: Val::Px(200.),
                                     align_content: AlignContent::Center,
                                     ..default()
@@ -111,29 +104,23 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             // container for all other examples
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(100.),
-                        height: Val::Percent(100.),
-                        flex_direction: FlexDirection::Row,
-                        justify_content: JustifyContent::SpaceBetween,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    flex_direction: FlexDirection::Row,
+                    justify_content: JustifyContent::SpaceBetween,
+                    ..default()
+                })
                 .with_children(|parent| {
                     // vertical scroll example
                     parent
-                        .spawn((
-                            Node::default(),
-                            Style {
-                                flex_direction: FlexDirection::Column,
-                                justify_content: JustifyContent::Center,
-                                align_items: AlignItems::Center,
-                                width: Val::Px(200.),
-                                ..default()
-                            },
-                        ))
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
                         .with_children(|parent| {
                             // Title
                             parent.spawn((
@@ -148,8 +135,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // Scrolling list
                             parent
                                 .spawn((
-                                    Node::default(),
-                                    Style {
+                                    Node {
                                         flex_direction: FlexDirection::Column,
                                         align_self: AlignSelf::Stretch,
                                         height: Val::Percent(50.),
@@ -162,14 +148,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     // List items
                                     for i in 0..25 {
                                         parent
-                                            .spawn((
-                                                Node::default(),
-                                                Style {
-                                                    min_height: Val::Px(LINE_HEIGHT),
-                                                    max_height: Val::Px(LINE_HEIGHT),
-                                                    ..default()
-                                                },
-                                            ))
+                                            .spawn(Node {
+                                                min_height: Val::Px(LINE_HEIGHT),
+                                                max_height: Val::Px(LINE_HEIGHT),
+                                                ..default()
+                                            })
                                             .insert(PickingBehavior {
                                                 should_block_lower: false,
                                                 ..default()
@@ -199,16 +182,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                     // Bidirectional scroll example
                     parent
-                        .spawn((
-                            Node::default(),
-                            Style {
-                                flex_direction: FlexDirection::Column,
-                                justify_content: JustifyContent::Center,
-                                align_items: AlignItems::Center,
-                                width: Val::Px(200.),
-                                ..default()
-                            },
-                        ))
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
                         .with_children(|parent| {
                             // Title
                             parent.spawn((
@@ -223,8 +203,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // Scrolling list
                             parent
                                 .spawn((
-                                    Node::default(),
-                                    Style {
+                                    Node {
                                         flex_direction: FlexDirection::Column,
                                         align_self: AlignSelf::Stretch,
                                         height: Val::Percent(50.),
@@ -237,13 +216,10 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     // Rows in each column
                                     for oi in 0..10 {
                                         parent
-                                            .spawn((
-                                                Node::default(),
-                                                Style {
-                                                    flex_direction: FlexDirection::Row,
-                                                    ..default()
-                                                },
-                                            ))
+                                            .spawn(Node {
+                                                flex_direction: FlexDirection::Row,
+                                                ..default()
+                                            })
                                             .insert(PickingBehavior::IGNORE)
                                             .with_children(|parent| {
                                                 // Elements in each row
@@ -274,16 +250,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                     // Nested scrolls example
                     parent
-                        .spawn((
-                            Node::default(),
-                            Style {
-                                flex_direction: FlexDirection::Column,
-                                justify_content: JustifyContent::Center,
-                                align_items: AlignItems::Center,
-                                width: Val::Px(200.),
-                                ..default()
-                            },
-                        ))
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
                         .with_children(|parent| {
                             // Title
                             parent.spawn((
@@ -298,8 +271,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // Outer, horizontal scrolling container
                             parent
                                 .spawn((
-                                    Node::default(),
-                                    Style {
+                                    Node {
                                         column_gap: Val::Px(20.),
                                         flex_direction: FlexDirection::Row,
                                         align_self: AlignSelf::Stretch,
@@ -314,8 +286,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                     for oi in 0..30 {
                                         parent
                                             .spawn((
-                                                Node::default(),
-                                                Style {
+                                                Node {
                                                     flex_direction: FlexDirection::Column,
                                                     align_self: AlignSelf::Stretch,
                                                     overflow: Overflow::scroll_y(),
diff --git a/examples/ui/size_constraints.rs b/examples/ui/size_constraints.rs
index f4fc0fc384..6c8dc504c4 100644
--- a/examples/ui/size_constraints.rs
+++ b/examples/ui/size_constraints.rs
@@ -53,8 +53,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.0),
                 height: Val::Percent(100.0),
                 justify_content: JustifyContent::Center,
@@ -65,20 +64,17 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         ))
         .with_children(|parent| {
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        flex_direction: FlexDirection::Column,
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    flex_direction: FlexDirection::Column,
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                })
                 .with_children(|parent| {
                     parent.spawn((
                         Text::new("Size Constraints Example"),
                         text_font.clone(),
-                        Style {
+                        Node {
                             margin: UiRect::bottom(Val::Px(25.)),
                             ..Default::default()
                         },
@@ -88,8 +84,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 flex_direction: FlexDirection::Column,
                                 align_items: AlignItems::Stretch,
                                 padding: UiRect::all(Val::Px(10.)),
@@ -115,8 +110,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 fn spawn_bar(parent: &mut ChildBuilder) {
     parent
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 flex_basis: Val::Percent(100.0),
                 align_self: AlignSelf::Stretch,
                 padding: UiRect::all(Val::Px(10.)),
@@ -127,8 +121,7 @@ fn spawn_bar(parent: &mut ChildBuilder) {
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         align_items: AlignItems::Stretch,
                         width: Val::Percent(100.),
                         height: Val::Px(100.),
@@ -157,8 +150,7 @@ fn spawn_button_row(
 
     parent
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 flex_direction: FlexDirection::Column,
                 padding: UiRect::all(Val::Px(2.)),
                 align_items: AlignItems::Stretch,
@@ -168,28 +160,22 @@ fn spawn_button_row(
         ))
         .with_children(|parent| {
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        flex_direction: FlexDirection::Row,
-                        justify_content: JustifyContent::End,
-                        padding: UiRect::all(Val::Px(2.)),
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    flex_direction: FlexDirection::Row,
+                    justify_content: JustifyContent::End,
+                    padding: UiRect::all(Val::Px(2.)),
+                    ..default()
+                })
                 .with_children(|parent| {
                     // spawn row label
                     parent
-                        .spawn((
-                            Node::default(),
-                            Style {
-                                min_width: Val::Px(200.),
-                                max_width: Val::Px(200.),
-                                justify_content: JustifyContent::Center,
-                                align_items: AlignItems::Center,
-                                ..default()
-                            },
-                        ))
+                        .spawn((Node {
+                            min_width: Val::Px(200.),
+                            max_width: Val::Px(200.),
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            ..default()
+                        },))
                         .with_child((Text::new(label), text_style.clone()));
 
                     // spawn row buttons
@@ -228,7 +214,7 @@ fn spawn_button(
     parent
         .spawn((
             Button,
-            Style {
+            Node {
                 align_items: AlignItems::Center,
                 justify_content: JustifyContent::Center,
                 border: UiRect::all(Val::Px(2.)),
@@ -246,8 +232,7 @@ fn spawn_button(
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(100.),
                         justify_content: JustifyContent::Center,
                         ..default()
@@ -276,7 +261,7 @@ fn update_buttons(
         (Entity, &Interaction, &Constraint, &ButtonValue),
         Changed<Interaction>,
     >,
-    mut bar_style: Single<&mut Style, With<Bar>>,
+    mut bar_node: Single<&mut Node, With<Bar>>,
     mut text_query: Query<&mut TextColor>,
     children_query: Query<&Children>,
     mut button_activated_event: EventWriter<ButtonActivatedEvent>,
@@ -287,16 +272,16 @@ fn update_buttons(
                 button_activated_event.send(ButtonActivatedEvent(button_id));
                 match constraint {
                     Constraint::FlexBasis => {
-                        bar_style.flex_basis = value.0;
+                        bar_node.flex_basis = value.0;
                     }
                     Constraint::Width => {
-                        bar_style.width = value.0;
+                        bar_node.width = value.0;
                     }
                     Constraint::MinWidth => {
-                        bar_style.min_width = value.0;
+                        bar_node.min_width = value.0;
                     }
                     Constraint::MaxWidth => {
-                        bar_style.max_width = value.0;
+                        bar_node.max_width = value.0;
                     }
                 }
             }
diff --git a/examples/ui/text.rs b/examples/ui/text.rs
index 7e96231e14..18ab488789 100644
--- a/examples/ui/text.rs
+++ b/examples/ui/text.rs
@@ -41,7 +41,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         // Set the justification of the Text
         TextLayout::new_with_justify(JustifyText::Center),
         // Set the style of the Node itself.
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.0),
             right: Val::Px(5.0),
@@ -92,7 +92,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         // Here we are able to call the `From` method instead of creating a new `TextSection`.
         // This will use the default font (a minimal subset of FiraMono) and apply the default styling.
         Text::new("From an &str into a Text with the default font!"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.0),
             left: Val::Px(15.0),
@@ -107,7 +107,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             font: asset_server.load("fonts/FiraMono-Medium.ttf"),
             ..default()
         },
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.0),
             left: Val::Px(15.0),
diff --git a/examples/ui/text_debug.rs b/examples/ui/text_debug.rs
index 030a5df329..3c9e42b54d 100644
--- a/examples/ui/text_debug.rs
+++ b/examples/ui/text_debug.rs
@@ -36,29 +36,23 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
     let root_uinode = commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::SpaceBetween,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::SpaceBetween,
+            ..default()
+        })
         .id();
 
     let left_column = commands
-        .spawn((
-            Node::default(),
-            Style {
+        .spawn(Node {
             flex_direction: FlexDirection::Column,
             justify_content: JustifyContent::SpaceBetween,
             align_items: AlignItems::Start,
             flex_grow: 1.,
             margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
             ..default()
-        },
-    )).with_children(|builder| {
+        }).with_children(|builder| {
         builder.spawn((
             Text::new("This is\ntext with\nline breaks\nin the top left."),
             TextFont {
@@ -79,7 +73,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
             },
             TextColor(YELLOW.into()),
             TextLayout::new_with_justify(JustifyText::Right),
-            Style {
+            Node {
                 max_width: Val::Px(300.),
                 ..default()
             },
@@ -93,7 +87,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
                 font_size: 25.0,
                 ..default()
             },
-            Style {
+            Node {
                 max_width: Val::Px(300.),
                 ..default()
             },
@@ -102,151 +96,150 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
         );
     }).id();
 
-    let right_column = commands.spawn((
-            Node::default(),
-            Style {
-                flex_direction: FlexDirection::Column,
-                justify_content: JustifyContent::SpaceBetween,
-                align_items: AlignItems::End,
-                flex_grow: 1.,
-                margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
-                ..default()
-            },
-    )).with_children(|builder| {
-
-        builder.spawn((Text::new(
-            "This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."),
-            TextFont {
-                font: font.clone(),
-                font_size: 33.0,
-                ..default()
-            },
-            TextColor(Color::srgb(0.8, 0.2, 0.7)),
-            TextLayout::new_with_justify(JustifyText::Center),
-            Style {
-                max_width: Val::Px(400.),
-                ..default()
-            },BackgroundColor(background_color))
-        );
-
-        builder.spawn((Text::new(
-            "This text is left-justified and is vertically positioned to distribute the empty space equally above and below it."),
-            TextFont {
-                font: font.clone(),
-                font_size: 29.0,
-                ..default()
-            },
-            TextColor(YELLOW.into()),
-            TextLayout::new_with_justify(JustifyText::Left),
-            Style {
-                max_width: Val::Px(300.),
-                ..default()
-            },
-            BackgroundColor(background_color)
-        ));
-
-        builder.spawn((
-            Text::new("This text is fully justified and is positioned in the same way."),
-            TextFont {
-                font: font.clone(),
-                font_size: 29.0,
-                ..default()
-            },
-            TextLayout::new_with_justify(JustifyText::Justified),
-            TextColor(GREEN_YELLOW.into()),
-            Style {
-                max_width: Val::Px(300.),
-                ..default()
-            },
-            BackgroundColor(background_color)
-        )
-        );
-
-        builder.spawn((
-            Text::default(),
-            TextFont {
-                font: font.clone(),
-                font_size: 21.0,
-                ..default()
-            },
-            TextChanges,
-            BackgroundColor(background_color)
-        ))
-        .with_children(|p| {
-            p.spawn((
-                TextSpan::new("\nThis text changes in the bottom right"),
+    let right_column = commands
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::SpaceBetween,
+            align_items: AlignItems::End,
+            flex_grow: 1.,
+            margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
+            ..default()
+        })
+        .with_children(|builder| {
+            builder.spawn((
+                Text::new("This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."),
                 TextFont {
                     font: font.clone(),
-                    font_size: 21.0,
+                    font_size: 33.0,
                     ..default()
                 },
-            ));
-            p.spawn((
-                TextSpan::new(" this text has zero fontsize"),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 0.0,
+                TextColor(Color::srgb(0.8, 0.2, 0.7)),
+                TextLayout::new_with_justify(JustifyText::Center),
+                Node {
+                    max_width: Val::Px(400.),
                     ..default()
                 },
-                TextColor(BLUE.into()),
+                BackgroundColor(background_color),
             ));
-            p.spawn((
-                TextSpan::new("\nThis text changes in the bottom right - "),
+
+            builder.spawn((
+                Text::new("This text is left-justified and is vertically positioned to distribute the empty space equally above and below it."),
                 TextFont {
                     font: font.clone(),
-                    font_size: 21.0,
-                    ..default()
-                },
-                TextColor(RED.into()),
-            ));
-            p.spawn((
-                TextSpan::default(),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 21.0,
-                    ..default()
-                },
-                TextColor(ORANGE_RED.into()),
-            ));
-            p.spawn((
-                TextSpan::new(" fps, "),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 10.0,
+                    font_size: 29.0,
                     ..default()
                 },
                 TextColor(YELLOW.into()),
-            ));
-            p.spawn((
-                TextSpan::default(),
-                TextFont {
-                    font: font.clone(),
-                    font_size: 21.0,
+                TextLayout::new_with_justify(JustifyText::Left),
+                Node {
+                    max_width: Val::Px(300.),
                     ..default()
                 },
-                TextColor(LIME.into()),
+                BackgroundColor(background_color),
             ));
-            p.spawn((
-                TextSpan::new(" ms/frame"),
+
+            builder.spawn((
+                Text::new("This text is fully justified and is positioned in the same way."),
                 TextFont {
                     font: font.clone(),
-                    font_size: 42.0,
+                    font_size: 29.0,
                     ..default()
                 },
-                TextColor(BLUE.into()),
-            ));
-            p.spawn((
-                TextSpan::new(" this text has negative fontsize"),
-                TextFont {
-                    font: font.clone(),
-                    font_size: -42.0,
+                TextLayout::new_with_justify(JustifyText::Justified),
+                TextColor(GREEN_YELLOW.into()),
+                Node {
+                    max_width: Val::Px(300.),
                     ..default()
                 },
-                TextColor(BLUE.into()),
+                BackgroundColor(background_color),
             ));
-        });
-    })
-    .id();
+
+            builder
+                .spawn((
+                    Text::default(),
+                    TextFont {
+                        font: font.clone(),
+                        font_size: 21.0,
+                        ..default()
+                    },
+                    TextChanges,
+                    BackgroundColor(background_color),
+                ))
+                .with_children(|p| {
+                    p.spawn((
+                        TextSpan::new("\nThis text changes in the bottom right"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                    ));
+                    p.spawn((
+                        TextSpan::new(" this text has zero fontsize"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 0.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new("\nThis text changes in the bottom right - "),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(RED.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::default(),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(ORANGE_RED.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" fps, "),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 10.0,
+                            ..default()
+                        },
+                        TextColor(YELLOW.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::default(),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(LIME.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" ms/frame"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 42.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" this text has negative fontsize"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: -42.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                });
+        })
+        .id();
     commands
         .entity(root_uinode)
         .add_children(&[left_column, right_column]);
diff --git a/examples/ui/text_wrap_debug.rs b/examples/ui/text_wrap_debug.rs
index 9b03246c8d..227fb15116 100644
--- a/examples/ui/text_wrap_debug.rs
+++ b/examples/ui/text_wrap_debug.rs
@@ -53,8 +53,7 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     let root = commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
                 flex_direction: FlexDirection::Column,
@@ -71,17 +70,14 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
         LineBreak::NoWrap,
     ] {
         let row_id = commands
-            .spawn((
-                Node::default(),
-                Style {
-                    flex_direction: FlexDirection::Row,
-                    justify_content: JustifyContent::SpaceAround,
-                    align_items: AlignItems::Center,
-                    width: Val::Percent(100.),
-                    height: Val::Percent(50.),
-                    ..default()
-                },
-            ))
+            .spawn(Node {
+                flex_direction: FlexDirection::Row,
+                justify_content: JustifyContent::SpaceAround,
+                align_items: AlignItems::Center,
+                width: Val::Percent(100.),
+                height: Val::Percent(50.),
+                ..default()
+            })
             .id();
 
         let justifications = vec![
@@ -97,8 +93,7 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
             let c = 0.3 + i as f32 * 0.1;
             let column_id = commands
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         justify_content: justification,
                         flex_direction: FlexDirection::Column,
                         width: Val::Percent(16.),
diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs
index 1fdfc4678a..619e503d33 100644
--- a/examples/ui/transparency_ui.rs
+++ b/examples/ui/transparency_ui.rs
@@ -17,21 +17,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::SpaceAround,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::SpaceAround,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
                     Button,
-                    Style {
+                    Node {
                         width: Val::Px(150.0),
                         height: Val::Px(65.0),
                         justify_content: JustifyContent::Center,
@@ -58,7 +55,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             parent
                 .spawn((
                     Button,
-                    Style {
+                    Node {
                         width: Val::Px(150.0),
                         height: Val::Px(65.0),
                         justify_content: JustifyContent::Center,
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index 4c4f4725d6..5fd613259c 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -35,22 +35,18 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     // root node
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                justify_content: JustifyContent::SpaceBetween,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            justify_content: JustifyContent::SpaceBetween,
+            ..default()
+        })
         .insert(PickingBehavior::IGNORE)
         .with_children(|parent| {
             // left vertical fill (border)
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(200.),
                         border: UiRect::all(Val::Px(2.)),
                         ..default()
@@ -61,8 +57,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // left vertical fill (content)
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 width: Val::Percent(100.),
                                 flex_direction: FlexDirection::Column,
                                 padding: UiRect::all(Val::Px(5.)),
@@ -110,16 +105,13 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 });
             // right vertical fill
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        flex_direction: FlexDirection::Column,
-                        justify_content: JustifyContent::Center,
-                        align_items: AlignItems::Center,
-                        width: Val::Px(200.),
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    flex_direction: FlexDirection::Column,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::Center,
+                    width: Val::Px(200.),
+                    ..default()
+                })
                 .with_children(|parent| {
                     // Title
                     parent.spawn((
@@ -134,8 +126,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     // Scrolling list
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 flex_direction: FlexDirection::Column,
                                 align_self: AlignSelf::Stretch,
                                 height: Val::Percent(50.),
@@ -167,8 +158,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(200.0),
                         height: Val::Px(200.0),
                         position_type: PositionType::Absolute,
@@ -182,8 +172,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 ))
                 .with_children(|parent| {
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             width: Val::Percent(100.0),
                             height: Val::Percent(100.0),
                             ..default()
@@ -202,23 +191,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
             // render order test: reddest in the back, whitest in the front (flex center)
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(100.0),
-                        height: Val::Percent(100.0),
-                        position_type: PositionType::Absolute,
-                        align_items: AlignItems::Center,
-                        justify_content: JustifyContent::Center,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    height: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                })
                 .insert(PickingBehavior::IGNORE)
                 .with_children(|parent| {
                     parent
                         .spawn((
-                            Node::default(),
-                            Style {
+                            Node {
                                 width: Val::Px(100.0),
                                 height: Val::Px(100.0),
                                 ..default()
@@ -228,8 +213,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ))
                         .with_children(|parent| {
                             parent.spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     // Take the size of the parent node.
                                     width: Val::Percent(100.0),
                                     height: Val::Percent(100.0),
@@ -242,8 +226,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 shadow,
                             ));
                             parent.spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     width: Val::Percent(100.0),
                                     height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
@@ -255,8 +238,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                 shadow,
                             ));
                             parent.spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     width: Val::Percent(100.0),
                                     height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
@@ -269,8 +251,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             ));
                             // alpha test
                             parent.spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     width: Val::Percent(100.0),
                                     height: Val::Percent(100.0),
                                     position_type: PositionType::Absolute,
@@ -288,22 +269,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 });
             // bevy logo (flex center)
             parent
-                .spawn((
-                    Node::default(),
-                    Style {
-                        width: Val::Percent(100.0),
-                        position_type: PositionType::Absolute,
-                        justify_content: JustifyContent::Center,
-                        align_items: AlignItems::FlexStart,
-                        ..default()
-                    },
-                ))
+                .spawn(Node {
+                    width: Val::Percent(100.0),
+                    position_type: PositionType::Absolute,
+                    justify_content: JustifyContent::Center,
+                    align_items: AlignItems::FlexStart,
+                    ..default()
+                })
                 .with_children(|parent| {
                     // bevy logo (image)
                     parent
                         .spawn((
                             UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
-                            Style {
+                            Node {
                                 width: Val::Px(500.0),
                                 height: Val::Px(125.0),
                                 margin: UiRect::top(Val::VMin(5.)),
@@ -315,8 +293,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                             // This UI node takes up no space in the layout and the `Text` component is used by the accessibility module
                             // and is not rendered.
                             parent.spawn((
-                                Node::default(),
-                                Style {
+                                Node {
                                     display: Display::None,
                                     ..default()
                                 },
diff --git a/examples/ui/ui_material.rs b/examples/ui/ui_material.rs
index d22755c9bd..849cdba687 100644
--- a/examples/ui/ui_material.rs
+++ b/examples/ui/ui_material.rs
@@ -23,16 +23,13 @@ fn setup(
     commands.spawn(Camera2d);
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             let banner_scale_factor = 0.5;
             parent.spawn((
@@ -42,7 +39,7 @@ fn setup(
                     color_texture: asset_server.load("branding/banner.png"),
                     border_color: LinearRgba::WHITE.to_f32_array().into(),
                 })),
-                Style {
+                Node {
                     position_type: PositionType::Absolute,
                     width: Val::Px(905.0 * banner_scale_factor),
                     height: Val::Px(363.0 * banner_scale_factor),
diff --git a/examples/ui/ui_scaling.rs b/examples/ui/ui_scaling.rs
index 517a25796e..946b3935b7 100644
--- a/examples/ui/ui_scaling.rs
+++ b/examples/ui/ui_scaling.rs
@@ -30,8 +30,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Percent(50.0),
                 height: Val::Percent(50.0),
                 position_type: PositionType::Absolute,
@@ -46,8 +45,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(40.0),
                         height: Val::Px(40.0),
                         ..default()
@@ -58,8 +56,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                     parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK));
                 });
             parent.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Percent(15.0),
                     height: Val::Percent(15.0),
                     ..default()
@@ -68,7 +65,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             ));
             parent.spawn((
                 UiImage::new(asset_server.load("branding/icon.png")),
-                Style {
+                Node {
                     width: Val::Px(30.0),
                     height: Val::Px(30.0),
                     ..default()
diff --git a/examples/ui/ui_texture_atlas.rs b/examples/ui/ui_texture_atlas.rs
index e48e3cc986..307b9541c8 100644
--- a/examples/ui/ui_texture_atlas.rs
+++ b/examples/ui/ui_texture_atlas.rs
@@ -33,22 +33,19 @@ fn setup(
 
     // root node
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                flex_direction: FlexDirection::Column,
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                row_gap: Val::Px(text_font.font_size * 2.),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            row_gap: Val::Px(text_font.font_size * 2.),
+            ..default()
+        })
         .with_children(|parent| {
             parent.spawn((
                 UiImage::new(texture_handle),
-                Style {
+                Node {
                     width: Val::Px(256.),
                     height: Val::Px(256.),
                     ..default()
diff --git a/examples/ui/ui_texture_atlas_slice.rs b/examples/ui/ui_texture_atlas_slice.rs
index 4f42095129..8cf4590321 100644
--- a/examples/ui/ui_texture_atlas_slice.rs
+++ b/examples/ui/ui_texture_atlas_slice.rs
@@ -63,16 +63,13 @@ fn setup(
     // ui camera
     commands.spawn(Camera2d);
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             for (idx, [w, h]) in [
                 (0, [150.0, 150.0]),
@@ -83,7 +80,7 @@ fn setup(
                     .spawn((
                         Button,
                         UiImage::new(texture_handle.clone()),
-                        Style {
+                        Node {
                             width: Val::Px(w),
                             height: Val::Px(h),
                             // horizontally center child text
diff --git a/examples/ui/ui_texture_slice.rs b/examples/ui/ui_texture_slice.rs
index d7a0f5b0db..5ddd3f6fe5 100644
--- a/examples/ui/ui_texture_slice.rs
+++ b/examples/ui/ui_texture_slice.rs
@@ -55,22 +55,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // ui camera
     commands.spawn(Camera2d);
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] {
                 parent
                     .spawn((
                         Button,
-                        Style {
+                        Node {
                             width: Val::Px(w),
                             height: Val::Px(h),
                             // horizontally center child text
diff --git a/examples/ui/ui_texture_slice_flip_and_tile.rs b/examples/ui/ui_texture_slice_flip_and_tile.rs
index 448678e181..4503034eab 100644
--- a/examples/ui/ui_texture_slice_flip_and_tile.rs
+++ b/examples/ui/ui_texture_slice_flip_and_tile.rs
@@ -39,19 +39,16 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
 
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::Center,
-                align_content: AlignContent::Center,
-                flex_wrap: FlexWrap::Wrap,
-                column_gap: Val::Px(10.),
-                row_gap: Val::Px(10.),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_content: AlignContent::Center,
+            flex_wrap: FlexWrap::Wrap,
+            column_gap: Val::Px(10.),
+            row_gap: Val::Px(10.),
+            ..default()
+        })
         .with_children(|parent| {
             for ([width, height], flip_x, flip_y) in [
                 ([160., 160.], false, false),
@@ -66,7 +63,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         flip_y,
                         ..default()
                     },
-                    Style {
+                    Node {
                         width: Val::Px(width),
                         height: Val::Px(height),
                         ..default()
diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs
index ade06879d0..d9126ea2c3 100644
--- a/examples/ui/viewport_debug.rs
+++ b/examples/ui/viewport_debug.rs
@@ -40,7 +40,7 @@ fn update(
     mut timer: Local<f32>,
     mut visible_tree: Local<Coords>,
     time: Res<Time>,
-    mut coords_style_query: Query<(&Coords, &mut Style)>,
+    mut coords_nodes: Query<(&Coords, &mut Node)>,
 ) {
     *timer -= time.delta_secs();
     if *timer <= 0. {
@@ -49,8 +49,8 @@ fn update(
             Coords::Viewport => Coords::Pixel,
             Coords::Pixel => Coords::Viewport,
         };
-        for (coords, mut style) in coords_style_query.iter_mut() {
-            style.display = if *coords == *visible_tree {
+        for (coords, mut node) in coords_nodes.iter_mut() {
+            node.display = if *coords == *visible_tree {
                 Display::Flex
             } else {
                 Display::None
@@ -68,8 +68,7 @@ fn setup(mut commands: Commands) {
 fn spawn_with_viewport_coords(commands: &mut Commands) {
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Vw(100.),
                 height: Val::Vh(100.),
                 border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
@@ -81,8 +80,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
         ))
         .with_children(|builder| {
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(30.),
                     height: Val::Vh(30.),
                     border: UiRect::all(Val::VMin(5.)),
@@ -93,8 +91,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(60.),
                     height: Val::Vh(30.),
                     ..default()
@@ -103,8 +100,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(45.),
                     height: Val::Vh(30.),
                     border: UiRect::left(Val::VMax(45. / 2.)),
@@ -115,8 +111,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(45.),
                     height: Val::Vh(30.),
                     border: UiRect::right(Val::VMax(45. / 2.)),
@@ -127,8 +122,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(60.),
                     height: Val::Vh(30.),
                     ..default()
@@ -137,8 +131,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Vw(30.),
                     height: Val::Vh(30.),
                     border: UiRect::all(Val::VMin(5.)),
@@ -153,8 +146,7 @@ fn spawn_with_viewport_coords(commands: &mut Commands) {
 fn spawn_with_pixel_coords(commands: &mut Commands) {
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 width: Val::Px(640.),
                 height: Val::Px(360.),
                 border: UiRect::axes(Val::Px(32.), Val::Px(18.)),
@@ -166,8 +158,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
         ))
         .with_children(|builder| {
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(192.),
                     height: Val::Px(108.),
                     border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
@@ -178,8 +169,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(384.),
                     height: Val::Px(108.),
                     ..default()
@@ -188,8 +178,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(288.),
                     height: Val::Px(108.),
                     border: UiRect::left(Val::Px(144.)),
@@ -200,8 +189,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(288.),
                     height: Val::Px(108.),
                     border: UiRect::right(Val::Px(144.)),
@@ -212,8 +200,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(384.),
                     height: Val::Px(108.),
                     ..default()
@@ -222,8 +209,7 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
             ));
 
             builder.spawn((
-                Node::default(),
-                Style {
+                Node {
                     width: Val::Px(192.),
                     height: Val::Px(108.),
                     border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
diff --git a/examples/ui/window_fallthrough.rs b/examples/ui/window_fallthrough.rs
index 499f105a41..b00cd433da 100644
--- a/examples/ui/window_fallthrough.rs
+++ b/examples/ui/window_fallthrough.rs
@@ -35,7 +35,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
             ..default()
         },
         // Set the style of the TextBundle itself.
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             bottom: Val::Px(5.),
             right: Val::Px(10.),
diff --git a/examples/ui/z_index.rs b/examples/ui/z_index.rs
index b93a1d1972..14cf73fa7c 100644
--- a/examples/ui/z_index.rs
+++ b/examples/ui/z_index.rs
@@ -23,21 +23,17 @@ fn setup(mut commands: Commands) {
     // the default z-index value is `ZIndex::Local(0)`.
     // because this is a root UI node, using local or global values will do the same thing.
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                align_items: AlignItems::Center,
-                justify_content: JustifyContent::Center,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
         .with_children(|parent| {
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(180.0),
                         height: Val::Px(100.0),
                         ..default()
@@ -47,8 +43,7 @@ fn setup(mut commands: Commands) {
                 .with_children(|parent| {
                     // spawn a node with default z-index.
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             position_type: PositionType::Absolute,
                             left: Val::Px(10.0),
                             bottom: Val::Px(40.0),
@@ -62,8 +57,7 @@ fn setup(mut commands: Commands) {
                     // spawn a node with a positive local z-index of 2.
                     // it will show above other nodes in the gray container.
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             position_type: PositionType::Absolute,
                             left: Val::Px(45.0),
                             bottom: Val::Px(30.0),
@@ -78,8 +72,7 @@ fn setup(mut commands: Commands) {
                     // spawn a node with a negative local z-index.
                     // it will show under other nodes in the gray container.
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             position_type: PositionType::Absolute,
                             left: Val::Px(70.0),
                             bottom: Val::Px(20.0),
@@ -95,8 +88,7 @@ fn setup(mut commands: Commands) {
                     // it will show above all other nodes, because it's the highest global z-index in this example.
                     // by default, boxes all share the global z-index of 0 that the gray container is added to.
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             position_type: PositionType::Absolute,
                             left: Val::Px(15.0),
                             bottom: Val::Px(10.0),
@@ -112,8 +104,7 @@ fn setup(mut commands: Commands) {
                     // this will show under all other nodes including its parent, because it's the lowest global z-index
                     // in this example.
                     parent.spawn((
-                        Node::default(),
-                        Style {
+                        Node {
                             position_type: PositionType::Absolute,
                             left: Val::Px(-15.0),
                             bottom: Val::Px(-15.0),
diff --git a/examples/window/low_power.rs b/examples/window/low_power.rs
index de4b1e6de5..ba9b5929b6 100644
--- a/examples/window/low_power.rs
+++ b/examples/window/low_power.rs
@@ -188,7 +188,7 @@ pub(crate) mod test_setup {
         commands
             .spawn((
                 Text::default(),
-                Style {
+                Node {
                     align_self: AlignSelf::FlexStart,
                     position_type: PositionType::Absolute,
                     top: Val::Px(12.0),
diff --git a/examples/window/monitor_info.rs b/examples/window/monitor_info.rs
index 9aa7fa6828..930aca48f9 100644
--- a/examples/window/monitor_info.rs
+++ b/examples/window/monitor_info.rs
@@ -67,7 +67,7 @@ fn update(
         );
         commands.spawn((
             Text(info_text),
-            Style {
+            Node {
                 position_type: PositionType::Relative,
                 height: Val::Percent(100.0),
                 width: Val::Percent(100.0),
diff --git a/examples/window/multiple_windows.rs b/examples/window/multiple_windows.rs
index cb2d56a9d1..aed1c76804 100644
--- a/examples/window/multiple_windows.rs
+++ b/examples/window/multiple_windows.rs
@@ -47,7 +47,7 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
         ))
         .id();
 
-    let style = Style {
+    let node = Node {
         position_type: PositionType::Absolute,
         top: Val::Px(12.0),
         left: Val::Px(12.0),
@@ -56,14 +56,14 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
 
     commands.spawn((
         Text::new("First window"),
-        style.clone(),
+        node.clone(),
         // Since we are using multiple cameras, we need to specify which camera UI should be rendered to
         TargetCamera(first_window_camera),
     ));
 
     commands.spawn((
         Text::new("Second window"),
-        style,
+        node,
         TargetCamera(second_window_camera),
     ));
 }
diff --git a/examples/window/scale_factor_override.rs b/examples/window/scale_factor_override.rs
index ab6c6ddf96..dbe487f07f 100644
--- a/examples/window/scale_factor_override.rs
+++ b/examples/window/scale_factor_override.rs
@@ -28,21 +28,17 @@ fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
     // root node
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.0),
-                height: Val::Percent(100.0),
-                justify_content: JustifyContent::SpaceBetween,
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            justify_content: JustifyContent::SpaceBetween,
+            ..default()
+        })
         .with_children(|parent| {
             // left vertical fill (border)
             parent
                 .spawn((
-                    Node::default(),
-                    Style {
+                    Node {
                         width: Val::Px(300.0),
                         height: Val::Percent(100.0),
                         border: UiRect::all(Val::Px(2.0)),
@@ -57,7 +53,7 @@ fn setup(mut commands: Commands) {
                         font_size: 25.0,
                         ..default()
                     },
-                    Style {
+                    Node {
                         align_self: AlignSelf::FlexEnd,
                         ..default()
                     },
diff --git a/examples/window/screenshot.rs b/examples/window/screenshot.rs
index 225bd2f9c7..cb6f9d4932 100644
--- a/examples/window/screenshot.rs
+++ b/examples/window/screenshot.rs
@@ -83,7 +83,7 @@ fn setup(
 
     commands.spawn((
         Text::new("Press <spacebar> to save a screenshot to disk"),
-        Style {
+        Node {
             position_type: PositionType::Absolute,
             top: Val::Px(12.0),
             left: Val::Px(12.0),
diff --git a/examples/window/window_drag_move.rs b/examples/window/window_drag_move.rs
index cad8e45310..99e77d08aa 100644
--- a/examples/window/window_drag_move.rs
+++ b/examples/window/window_drag_move.rs
@@ -62,8 +62,7 @@ fn setup(mut commands: Commands) {
     // UI
     commands
         .spawn((
-            Node::default(),
-            Style {
+            Node {
                 position_type: PositionType::Absolute,
                 padding: UiRect::all(Val::Px(5.0)),
                 ..default()
diff --git a/examples/window/window_resizing.rs b/examples/window/window_resizing.rs
index ec3698702c..785d23a878 100644
--- a/examples/window/window_resizing.rs
+++ b/examples/window/window_resizing.rs
@@ -35,13 +35,10 @@ fn setup_camera(mut commands: Commands) {
 fn setup_ui(mut commands: Commands) {
     // Node that fills entire background
     commands
-        .spawn((
-            Node::default(),
-            Style {
-                width: Val::Percent(100.),
-                ..default()
-            },
-        ))
+        .spawn(Node {
+            width: Val::Percent(100.),
+            ..default()
+        })
         // Text where we display current resolution
         .with_child((
             Text::new("Resolution"),