diff --git a/res/ruis_res/themes/dark/style.tml b/res/ruis_res/themes/dark/style.tml
index 3ab75d468..9742042ec 100644
--- a/res/ruis_res/themes/dark/style.tml
+++ b/res/ruis_res/themes/dark/style.tml
@@ -3,9 +3,9 @@ ruis{
     color_background{0xff101010}
     color_panel{0xff424242}
     color_special{0xffff8080}
-    color_primary{0xff505050}
+    color_primary{0xff686868}
     color_secondary{0xff303030}
-    color_highlight{0xffad9869}
+    color_highlight{0xffcdb889}
 
     color_dimmed{0xb0000000}
 
@@ -13,14 +13,14 @@ ruis{
     color_text_secondary{0xffa0a0a0}
 
     len_indent{17pp}
-    len_gap{4pp}
+    len_gap_small{4pp}
+    len_gap{10pp}
+    len_gap_big{25pp}
     len_border{1pp}
-    len_button_padding{5pp}
-    len_dialog_margin{30pp}
-    len_dialog_padding{20pp}
 
-    font_size_text{12pp}
+    font_size_primary{14pp}
+    font_size_secondary{12pp}
     font_size_title{22pp}
-    font_face_text{ruis_fnt_normal}
+    font_face_primary{ruis_fnt_normal}
 }
 user{}
diff --git a/res/ruis_res/themes/light/style.tml b/res/ruis_res/themes/light/style.tml
index 96d68754a..e7d4b2645 100644
--- a/res/ruis_res/themes/light/style.tml
+++ b/res/ruis_res/themes/light/style.tml
@@ -1,7 +1,7 @@
 version{1}
 // TODO: support include?
 ruis{
-    color_background{0xffffffff}
+    color_background{0xffe0e0e0}
     color_panel{0xffa0a0a0}
     color_special{0xff1976d2}
     color_primary{0xffc0c0c0}
@@ -14,14 +14,14 @@ ruis{
     color_text_secondary{0xff616161}
 
     len_indent{17pp}
-    len_gap{4pp}
+    len_gap_small{4pp}
+    len_gap{10pp}
+    len_gap_big{25pp}
     len_border{1pp}
-    len_button_padding{5pp}
-    len_dialog_margin{30pp}
-    len_dialog_padding{20pp}
 
-    font_size_text{12pp}
+    font_size_primary{14pp}
+    font_size_secondary{12pp}
     font_size_title{22pp}
-    font_face_text{ruis_fnt_normal}
+    font_face_primary{ruis_fnt_normal}
 }
 user{}
diff --git a/src/ruis/style/style_provider.cpp b/src/ruis/style/style_provider.cpp
index 30c6f390a..9ad468d37 100644
--- a/src/ruis/style/style_provider.cpp
+++ b/src/ruis/style/style_provider.cpp
@@ -185,34 +185,34 @@ styled<length> style_provider::get_len_indent() const
 	return this->get<length>(style::len_indent);
 }
 
-styled<length> style_provider::get_len_gap() const
+styled<length> style_provider::get_len_gap_small() const
 {
-	return this->get<length>(style::len_gap);
+	return this->get<length>(style::len_gap_small);
 }
 
-styled<length> style_provider::get_len_border() const
+styled<length> style_provider::get_len_gap() const
 {
-	return this->get<length>(style::len_border);
+	return this->get<length>(style::len_gap);
 }
 
-styled<length> style_provider::get_len_button_padding() const
+styled<length> style_provider::get_len_gap_big() const
 {
-	return this->get<length>(style::len_button_padding);
+	return this->get<length>(style::len_gap_big);
 }
 
-styled<length> style_provider::get_len_dialog_margin() const
+styled<length> style_provider::get_len_border() const
 {
-	return this->get<length>(style::len_dialog_margin);
+	return this->get<length>(style::len_border);
 }
 
-styled<length> style_provider::get_len_dialog_padding() const
+styled<length> style_provider::get_font_size_primary() const
 {
-	return this->get<length>(style::len_dialog_padding);
+	return this->get<length>(style::font_size_primary);
 }
 
-styled<length> style_provider::get_font_size_normal() const
+styled<length> style_provider::get_font_size_secondary() const
 {
-	return this->get<length>(style::font_size_text);
+	return this->get<length>(style::font_size_secondary);
 }
 
 styled<length> style_provider::get_font_size_title() const
@@ -220,7 +220,7 @@ styled<length> style_provider::get_font_size_title() const
 	return this->get<length>(style::font_size_title);
 }
 
-styled<res::font> style_provider::get_font_face_normal() const
+styled<res::font> style_provider::get_font_face_primary() const
 {
-	return this->get<res::font>(style::font_face_text);
+	return this->get<res::font>(style::font_face_primary);
 }
diff --git a/src/ruis/style/style_provider.hpp b/src/ruis/style/style_provider.hpp
index c4f10de65..8c3e70c5a 100644
--- a/src/ruis/style/style_provider.hpp
+++ b/src/ruis/style/style_provider.hpp
@@ -140,16 +140,15 @@ class style_provider
 	styled<color> get_color_highlight() const;
 
 	styled<length> get_len_indent() const;
+	styled<length> get_len_gap_small() const;
 	styled<length> get_len_gap() const;
+	styled<length> get_len_gap_big() const;
 	styled<length> get_len_border() const;
 
-	styled<length> get_len_button_padding() const;
-	styled<length> get_len_dialog_margin() const;
-	styled<length> get_len_dialog_padding() const;
-
-	styled<length> get_font_size_normal() const;
+	styled<length> get_font_size_primary() const;
+	styled<length> get_font_size_secondary() const;
 	styled<length> get_font_size_title() const;
-	styled<res::font> get_font_face_normal() const;
+	styled<res::font> get_font_face_primary() const;
 };
 
 } // namespace ruis
diff --git a/src/ruis/style/style_sheet.cpp b/src/ruis/style/style_sheet.cpp
index 7a96db443..0197abb31 100644
--- a/src/ruis/style/style_sheet.cpp
+++ b/src/ruis/style/style_sheet.cpp
@@ -46,22 +46,22 @@ style style_sheet::name_to_style(std::string_view name)
 		return style::color_special;
 	} else if (name == "len_indent"sv) {
 		return style::len_indent;
+	} else if (name == "len_gap_small"sv) {
+		return style::len_gap_small;
 	} else if (name == "len_gap"sv) {
 		return style::len_gap;
+	} else if (name == "len_gap_big"sv) {
+		return style::len_gap_big;
 	} else if (name == "len_border"sv) {
 		return style::len_border;
-	} else if (name == "len_button_padding"sv) {
-		return style::len_button_padding;
-	} else if (name == "len_dialog_margin"sv) {
-		return style::len_dialog_margin;
-	} else if (name == "len_dialog_padding"sv) {
-		return style::len_dialog_padding;
-	} else if (name == "font_size_text"sv) {
-		return style::font_size_text;
+	} else if (name == "font_size_primary"sv) {
+		return style::font_size_primary;
+	} else if (name == "font_size_secondary"sv) {
+		return style::font_size_secondary;
 	} else if (name == "font_size_title"sv) {
 		return style::font_size_title;
-	} else if (name == "font_face_text"sv) {
-		return style::font_face_text;
+	} else if (name == "font_face_primary"sv) {
+		return style::font_face_primary;
 	}
 
 	throw std::invalid_argument(utki::cat("style_sheet::name_to_style(name): unknown style name: ", name));
@@ -138,14 +138,14 @@ const utki::enum_array<tml::forest, style>& default_style_forests()
 		d[style::color_text] = tml::read("0xffffffff");
 		d[style::color_text_secondary] = tml::read("0xffa0a0a0");
 		d[style::len_indent] = tml::read("17pp");
-		d[style::len_gap] = tml::read("4pp");
+		d[style::len_gap_small] = tml::read("4pp");
+		d[style::len_gap] = tml::read("8pp");
+		d[style::len_gap_big] = tml::read("16pp");
 		d[style::len_border] = tml::read("1pp");
-		d[style::len_button_padding] = tml::read("5pp");
-		d[style::len_dialog_margin] = tml::read("30pp");
-		d[style::len_dialog_padding] = tml::read("20pp");
-		d[style::font_size_text] = tml::read("12pp");
+		d[style::font_size_primary] = tml::read("14pp");
+		d[style::font_size_secondary] = tml::read("12pp");
 		d[style::font_size_title] = tml::read("22pp");
-		d[style::font_face_text] = tml::read("ruis_fnt_normal");
+		d[style::font_face_primary] = tml::read("ruis_fnt_normal");
 		return d;
 	}();
 	return defaults;
diff --git a/src/ruis/style/style_sheet.hpp b/src/ruis/style/style_sheet.hpp
index 3f3e09c9e..1ce80073b 100644
--- a/src/ruis/style/style_sheet.hpp
+++ b/src/ruis/style/style_sheet.hpp
@@ -44,16 +44,16 @@ enum class style {
 	color_text_secondary,
 
 	len_indent,
+	len_gap_small,
 	len_gap,
+	len_gap_big,
 	len_border,
-	len_button_padding,
-	len_dialog_margin,
-	len_dialog_padding,
 
-	font_size_text,
+	font_size_primary,
+	font_size_secondary,
 	font_size_title,
 
-	font_face_text,
+	font_face_primary,
 
 	enum_size
 };
diff --git a/src/ruis/widget/base/font_widget.cpp b/src/ruis/widget/base/font_widget.cpp
index ecde6aa01..84e82245f 100644
--- a/src/ruis/widget/base/font_widget.cpp
+++ b/src/ruis/widget/base/font_widget.cpp
@@ -30,10 +30,10 @@ font_widget::font_widget(
 	widget(context, {}, {}),
 	params([&]() {
 		if (auto& f = params.face; !f.get()) {
-			f = context.get().style().get_font_face_normal();
+			f = context.get().style().get_font_face_primary();
 		}
 		if (auto& s = params.size; s.get().is_undefined()) {
-			s = context.get().style().get_font_size_normal();
+			s = context.get().style().get_font_size_primary();
 		}
 		return std::move(params);
 	}())
diff --git a/src/ruis/widget/base/touch/flickable.cpp b/src/ruis/widget/base/touch/flickable.cpp
index 9394a29c3..55788734c 100644
--- a/src/ruis/widget/base/touch/flickable.cpp
+++ b/src/ruis/widget/base/touch/flickable.cpp
@@ -95,7 +95,8 @@ ruis::event_status flickable::on_mouse_button(const mouse_button_event& event)
 				// After reaching the last touch point, it still can remain touched for some time without moving,
 				// so when the touch is released we need to update the timestamp of the last touch point to the current time,
 				// so that the velocity calculation would be correct.
-				utki::assert(!this->touch_history.empty());
+				utki::assert(!this->touch_history.empty()
+				); // TODO: once I got this assertion triggered, just need to click fast and move the mouse a little
 				this->touch_history.back().timestamp_ms = utki::get_ticks_ms();
 
 				this->velocity_px_per_ms = this->calculate_touch_velocity_px_per_ms();
diff --git a/src/ruis/widget/button/base/ellipse_button.cpp b/src/ruis/widget/button/base/ellipse_button.cpp
index 361165d5e..0e73ec243 100644
--- a/src/ruis/widget/button/base/ellipse_button.cpp
+++ b/src/ruis/widget/button/base/ellipse_button.cpp
@@ -57,7 +57,7 @@ ellipse_button::ellipse_button(
 			.params = [&](){
 				for(auto& b : params.ellipse.padding.specific.borders){
 					if(b.get().is_undefined()){
-						b = context.get().style().get_len_button_padding();
+						b = context.get().style().get_len_gap();
 					}
 				}
 
diff --git a/src/ruis/widget/button/base/rectangle_button.cpp b/src/ruis/widget/button/base/rectangle_button.cpp
index ef84508c6..ff8096a22 100644
--- a/src/ruis/widget/button/base/rectangle_button.cpp
+++ b/src/ruis/widget/button/base/rectangle_button.cpp
@@ -59,12 +59,12 @@ rectangle_button::rectangle_button( //
 			.params = [&](){
 				for(auto& b : params.rectangle.padding.specific.borders){
 					if(b.get().is_undefined()){
-						b = context.get().style().get_len_button_padding();
+						b = context.get().style().get_len_gap();
 					}
 				}
 				for(auto& r : params.rectangle.specific.corner_radii){
 					if(r.get().is_undefined()){
-						r = context.get().style().get_len_button_padding();
+						r = context.get().style().get_len_gap_small();
 					}
 				}
 				return std::move(params.rectangle);
diff --git a/src/ruis/widget/button/touch/selection_box.cpp b/src/ruis/widget/button/touch/selection_box.cpp
index cfab337d8..0afae69ca 100644
--- a/src/ruis/widget/button/touch/selection_box.cpp
+++ b/src/ruis/widget/button/touch/selection_box.cpp
@@ -246,7 +246,8 @@ void selection_box::show_selection_menu()
 			ruis::touch::make::list(c,
 				{
 					.layout_params{
-						.dims = {ruis::dim::fill, ruis::dim::fill}
+						.dims = {ruis::dim::fill, ruis::dim::fill},
+						.weight = 1
 					},
 					.list_params{
 						.provider = utki::make_shared<wrapping_provider>(utki::make_shared_from(*this))
diff --git a/src/ruis/widget/button/touch/tab_button.cpp b/src/ruis/widget/button/touch/tab_button.cpp
index 195ec8735..9401dff56 100644
--- a/src/ruis/widget/button/touch/tab_button.cpp
+++ b/src/ruis/widget/button/touch/tab_button.cpp
@@ -45,59 +45,72 @@ tab_button::tab_button(
 	),
 	choice_button(context),
 	// clang-format off
-    ruis::container(
-        context, //
-        {
-            .params = {
-                .layout = ruis::layout::pile
-            }
-        },
-        {
-            ruis::make::padding(
-                context,
-                {
-                    .layout_params{
-                        .dims = {ruis::dim::fill, ruis::dim::fill}
-                    },
-                    .params{
-                        .container{
-                            .layout = ruis::layout::column
-                        },
-                        .specific{
-                            .borders = {context.get().style().get_len_button_padding()}
-                        }
-                    }
-                },
-                {
-                    ruis::make::image(context,
-                        {
-                            .layout_params{
-                                .dims = {ruis::dim::min, ruis::dim::fill},
-                                .weight = 1
-                            },
-                            .params = std::move(params.params.image)
-                        }
-                    ),
-                    ruis::make::gap(context,
-                        {
-                            .layout_params{
-                                .dims = {ruis::dim::min, context.get().style().get_len_gap()}
-                            }
-                        }
-                    ),
-                    ruis::make::text(context,
-                        {
-                            .layout_params{
-                                .dims = {ruis::dim::min, ruis::dim::min},
-                                .align = {ruis::align::center, ruis::align::center}
-                            }
-                        },
-                        std::move(text)
-                    )
-                }
-            )
-        }
-    )
+	ruis::container(
+		context, //
+		{
+			.params = {
+				.layout = ruis::layout::pile
+			}
+		},
+		{
+			ruis::make::padding(
+				context,
+				{
+					.layout_params{
+						.dims = {ruis::dim::fill, ruis::dim::fill}
+					},
+					.params{
+						.container{
+							.layout = ruis::layout::column
+						},
+						.specific{
+							.borders = {context.get().style().get_len_gap_small()}
+						}
+					}
+				},
+				{
+					ruis::make::image(context,
+						{
+							.layout_params{
+								.dims = {ruis::dim::min, ruis::dim::fill},
+								.weight = 1
+							},
+							.params = [&]() {
+								auto& p = params.params.image;
+								if (auto& c = p.color.normal; c.get().is_undefined()) {
+									c = context.get().style().get_color_text();
+								}
+								return std::move(p);
+							}()
+						}
+					),
+					ruis::make::gap(context,
+					    {
+					        .layout_params{
+					            .dims = {ruis::dim::min, context.get().style().get_len_gap_small()}
+					        }
+					    }
+					),
+					ruis::make::text(context,
+						{
+							.layout_params{
+								.dims = {ruis::dim::min, ruis::dim::min},
+								.align = {ruis::align::center, ruis::align::center}
+							},
+							.params = [&](){
+								if(auto& l = params.params.text.font.size; l.get().is_undefined()){
+									l = context.get().style().get_font_size_secondary();
+								}
+
+								return std::move(params.params.text);
+							}()
+						},
+						std::move(text)
+					)
+				}
+			)
+		}
+	)
 // clang-format on
 {}
 
diff --git a/src/ruis/widget/button/touch/tab_group.cpp b/src/ruis/widget/button/touch/tab_group.cpp
index f687a41f2..356d84dd0 100644
--- a/src/ruis/widget/button/touch/tab_group.cpp
+++ b/src/ruis/widget/button/touch/tab_group.cpp
@@ -60,7 +60,7 @@ tab_group::tab_group(
 						}(),
 						.params{
 							.specific{
-								.borders = {context.get().style().get_len_gap()
+								.borders = {context.get().style().get_len_gap_small()
 								} // TODO: get from params, should be same as selector_gap
 							}
 						}
diff --git a/src/ruis/widget/group/touch/dialog.cpp b/src/ruis/widget/group/touch/dialog.cpp
index 309070f13..9f7f4c20a 100644
--- a/src/ruis/widget/group/touch/dialog.cpp
+++ b/src/ruis/widget/group/touch/dialog.cpp
@@ -99,35 +99,29 @@ widget_list make_chrome(
 			.layout_params{
 				.dims = {ruis::dim::fill, ruis::dim::fill}
 			},
-			.params{
-				.padding{
-					.specific{
-						.borders = [&](){
-							for(auto& b : params.padding_params.borders){
-								if(b.get().is_undefined()){
-									b = style.get_len_dialog_padding();
-								}
-							}
-							return std::move(params.padding_params.borders);
-						}()
-					}
-				},
-				.specific = [&](){
-					for(auto& r : params.rectangle_params.corner_radii){
-						if(r.get().is_undefined()){
-							r = style.get_len_dialog_padding();
-						}
+			.params = [&](){
+				auto& rect_params = params.params.rectangle;
+				for(auto& cr : rect_params.specific.corner_radii){
+					if(cr.get().is_undefined()){
+						cr = style.get_len_gap_big();
 					}
+				}
 
-					if(params.rectangle_params.fill_color.get().is_undefined()){
-						params.rectangle_params.fill_color = style.get_color_panel();
+				if(auto& c = rect_params.specific.fill_color; c.get().is_undefined()){
+					c = style.get_color_panel();
+				}
+
+				for(auto& b : rect_params.padding.specific.borders){
+					if(b.get().is_undefined()){
+						b = style.get_len_gap_big();
 					}
+				}
 
-					return std::move(params.rectangle_params);
-				}()
-			}
+				return std::move(rect_params);
+			}()
 		},
 		{
+			// TODO: the rectangle is already a containing widget, need to return its content container instead of creating a new one
 			std::move(content_container)
 		}
 	);
@@ -143,10 +137,10 @@ widget_list make_chrome(
 			.params{
 				.specific{
 					.borders = [&](){
-						auto borders = params.dialog_params.margin_params.borders;
+						auto borders = params.params.specific.margin_params.borders;
 						for(auto& b : borders){
 							if(b.get().is_undefined()){
-								b = style.get_len_dialog_margin();
+								b = style.get_len_gap_big();
 							}
 						}
 						return borders;
@@ -239,12 +233,9 @@ dialog::dialog(
 					// (e.g. scrollable lists) can take the whole available area of the panel
 					.dims = {ruis::dim::fill, ruis::dim::fill}
 				},
-				.params = [&](){
-					if(!params.params.layout){
-						params.params.layout = ruis::layout::pile;
-					}
-					return std::move(params.params);
-				}()
+				.params = {
+					.layout = ruis::layout::column
+				}
 			},
 			// clang-format on
 			std::move(children)
diff --git a/src/ruis/widget/group/touch/dialog.hpp b/src/ruis/widget/group/touch/dialog.hpp
index 7ad770de4..28780ad85 100644
--- a/src/ruis/widget/group/touch/dialog.hpp
+++ b/src/ruis/widget/group/touch/dialog.hpp
@@ -49,39 +49,35 @@ class dialog :
 	public containing_widget
 {
 public:
-	struct parameters {
+	struct specific_parameters {
 		/**
 		 * @brief Margin between the dialog panel and the edge of the dialog area.
-		 * Defaults to the 'len_dialog_margin' style value if undefined.
+		 * Defaults to the 'len_gap_big' style value if undefined.
 		 */
 		ruis::padding::specific_parameters margin_params;
 	};
 
-	struct all_parameters {
-		ruis::layout_parameters layout_params;
-		ruis::widget::parameters widget;
-		container::parameters params;
-
+	struct parameters {
 		/**
 		 * @brief Color of the dialog panel background.
 		 * Defaults to the 'color_panel' style value if undefined.
 		 */
 		color_widget::parameters color;
 
-		/**
-		 * @brief Padding between the dialog panel background and the dialog content.
-		 * Defaults to the 'len_dialog_padding' style value if undefined.
-		 */
-		ruis::padding::specific_parameters padding_params;
-
 		/**
 		 * @brief Dialog panel background rectangle parameters.
-		 *   - corner_radii defaults to the 'len_dialog_padding' style value if undefined.
+		 *   - corner_radii defaults to the 'len_gap_big' style value if undefined.
 		 *   - stroke_width defaults to 0 (filled rectangle) if undefined.
 		 */
-		rectangle::specific_parameters rectangle_params;
+		ruis::rectangle::parameters rectangle;
+
+		specific_parameters specific;
+	};
 
-		parameters dialog_params;
+	struct all_parameters {
+		ruis::layout_parameters layout_params;
+		ruis::widget::parameters widget;
+		parameters params;
 	};
 
 private:
@@ -116,7 +112,7 @@ class dialog :
 namespace make {
 /**
  * @brief Construct 'dialog' widget.
- * Default content layout is pile.
+ * Default content layout is column.
  * @param context - ruis context.
  * @param params - 'dialog' widget parameters.
  * @param children - contents of the constructed 'dialog' widget.
diff --git a/src/ruis/widget/input/impl/nine_patch_text_field.cpp b/src/ruis/widget/input/impl/nine_patch_text_field.cpp
index 163f6df26..3d8774140 100644
--- a/src/ruis/widget/input/impl/nine_patch_text_field.cpp
+++ b/src/ruis/widget/input/impl/nine_patch_text_field.cpp
@@ -72,7 +72,7 @@ nine_patch_text_field::nine_patch_text_field(
 
 				for(auto& b : params.params.nine_patch.padding.specific.borders){
 					if(b.get().is_undefined()){
-						b = context.get().style().get_len_gap();
+						b = context.get().style().get_len_gap_small();
 					}
 				}
 
diff --git a/src/ruis/widget/input/impl/rectangle_text_field.cpp b/src/ruis/widget/input/impl/rectangle_text_field.cpp
index 5994c2b2a..695e17ba8 100644
--- a/src/ruis/widget/input/impl/rectangle_text_field.cpp
+++ b/src/ruis/widget/input/impl/rectangle_text_field.cpp
@@ -76,6 +76,12 @@ rectangle_text_field::rectangle_text_field(
 					}
 				}
 
+				for(auto& r : params.params.rectangle.specific.corner_radii){
+					if(r.get().is_undefined()){
+						r  = context.get().style().get_len_gap_small();
+					}
+				}
+
 				if(auto& c = params.params.rectangle.specific.fill_color; c.get().is_undefined()){
 					c = context.get().style().get_color_background();
 				}
@@ -85,11 +91,6 @@ rectangle_text_field::rectangle_text_field(
 				if(auto& l = params.params.rectangle.specific.stroke_width; l.get().is_undefined()){
 					l = context.get().style().get_len_border();
 				}
-				for(auto& r : params.params.rectangle.specific.corner_radii){
-					if(r.get().is_undefined()){
-						r  = context.get().style().get_len_button_padding();
-					}
-				}
 
 				return std::move(params.params.rectangle);
 			}()
diff --git a/tests/app2/src/rectangles_window.cpp b/tests/app2/src/rectangles_window.cpp
index 76bc526e9..4376c9410 100644
--- a/tests/app2/src/rectangles_window.cpp
+++ b/tests/app2/src/rectangles_window.cpp
@@ -146,7 +146,7 @@ utki::shared_ref<ruis::widget> make_rectangles_window(
 							.params{
 								.padding{
 									.specific{
-										.borders = {c.get().style().get_len_gap()}
+										.borders = {c.get().style().get_len_gap_small()}
 									}
 								},
 								.color{
diff --git a/tests/touch/src/scroll_area_page.cpp b/tests/touch/src/scroll_area_page.cpp
index faf18a9ec..059500de2 100644
--- a/tests/touch/src/scroll_area_page.cpp
+++ b/tests/touch/src/scroll_area_page.cpp
@@ -25,7 +25,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 #include <ruis/standard_widgets.hpp>
 #include <ruis/style/style_sheet.hpp>
 #include <ruis/widget/button/impl/rectangle_push_button.hpp>
+#include <ruis/widget/group/overlay.hpp>
+#include <ruis/widget/group/touch/dialog.hpp>
 #include <ruis/widget/group/touch/scroll_area.hpp>
+#include <ruis/widget/input/labeled_text_field.hpp>
 #include <ruis/widget/label/gap.hpp>
 #include <ruis/widget/label/padding.hpp>
 #include <ruis/widget/label/text.hpp>
@@ -97,6 +100,88 @@ class theme_selection_provider : public ruis::list_provider
 	}
 };
 
+utki::shared_ref<ruis::touch::dialog> make_dialog(const utki::shared_ref<ruis::context>& c)
+{
+	// clang-format off
+	auto text_field = m::labeled_text_field(
+		c,
+		{
+			.layout_params{
+				.dims = {ruis::dim::fill, ruis::dim::min}
+			},
+			.params{
+				.label{
+					.string = U"Name"s
+				},
+				.text_input{
+					.specific{
+						.hint = U"Enter your name"s
+					}
+				}
+			}
+		},
+		ruis::string()
+	);
+	// clang-format on
+
+	// clang-format off
+	auto close_button = m::push_button(
+		c,
+		{
+			.layout_params{
+				.dims = {ruis::dim::fill, ruis::dim::min}
+			}
+		},
+		{
+			m::text(c, {}, U"Close"s)
+		}
+	);
+	// clang-format on
+
+	auto& close_button_ref = close_button.get();
+
+	// clang-format off
+	auto dialog = ruis::touch::make::dialog(
+		c,
+		{
+			.layout_params{
+				.dims = {ruis::dim::fill, ruis::dim::fill}
+			}
+		},
+		{
+			m::text(c, {}, U"Dialog"s),
+			m::gap(c,
+				{
+					.layout_params{
+						.dims = {ruis::dim::fill, c.get().style().get_len_gap_small().get()}
+					}
+				}
+			),
+			std::move(text_field),
+			m::gap(c,
+				{
+					.layout_params{
+						.dims = {ruis::dim::fill, c.get().style().get_len_gap_small().get()}
+					}
+				}
+			),
+			std::move(close_button)
+		}
+	);
+	// clang-format on
+
+	// use a weak reference to avoid a reference cycle
+	// (dialog -> content container -> close_button -> click_handler -> dialog)
+	auto dialog_weak = utki::make_weak_from(dialog.get());
+	close_button_ref.click_handler = [dialog_weak](ruis::push_button&) {
+		if (auto dlg = dialog_weak.lock()) {
+			dlg->close();
+		}
+	};
+
+	return dialog;
+}
+
 ruis::widget_list make_scroll_area_page_contents(const utki::shared_ref<ruis::context>& c)
 {
 	// clang-format off
@@ -140,9 +225,12 @@ ruis::widget_list make_scroll_area_page_contents(const utki::shared_ref<ruis::co
 	);
 	// clang-format on
 
-	button_1.get().click_handler = [](ruis::push_button&) {
-		utki::log([](auto& o) {
-			o << "Button 1 clicked\n";
+	button_1.get().click_handler = [](ruis::push_button& b) {
+		auto dialog = make_dialog(b.context);
+
+		auto& olay = b.get_ancestor<ruis::overlay>();
+		b.context.get().post_to_ui_thread([olay = utki::make_shared_from(olay), dialog]() {
+			olay.get().push_back(dialog);
 		});
 	};
 
@@ -152,7 +240,7 @@ ruis::widget_list make_scroll_area_page_contents(const utki::shared_ref<ruis::co
 		ruis::make::gap(c,
 			{
 				.layout_params{
-					.dims = {ruis::dim::fill, c.get().style().get_len_gap().get()}
+					.dims = {ruis::dim::fill, c.get().style().get_len_gap_small().get()}
 				}
 			}
 		),
@@ -160,7 +248,7 @@ ruis::widget_list make_scroll_area_page_contents(const utki::shared_ref<ruis::co
 		ruis::make::gap(c,
 			{
 				.layout_params{
-					.dims = {ruis::dim::fill, c.get().style().get_len_gap().get()}
+					.dims = {ruis::dim::fill, c.get().style().get_len_gap_small().get()}
 				}
 			}
 		),
@@ -179,7 +267,7 @@ ruis::widget_list make_scroll_area_page_contents(const utki::shared_ref<ruis::co
 		ruis::make::gap(c,
 			{
 				.layout_params{
-					.dims = {ruis::dim::fill, c.get().style().get_len_gap().get()}
+					.dims = {ruis::dim::fill, c.get().style().get_len_gap_small().get()}
 				}
 			}
 		),
@@ -219,7 +307,7 @@ class scroll_area_page :
 								.layout = ruis::layout::column
 							},
 							.specific{
-								.borders = {context.get().style().get_len_gap()}
+								.borders = {context.get().style().get_len_gap_small()}
 							}
 						}
 					},
diff --git a/tests/touch/src/style.cpp b/tests/touch/src/style.cpp
index 3035274ad..7016dcc60 100644
--- a/tests/touch/src/style.cpp
+++ b/tests/touch/src/style.cpp
@@ -36,22 +36,7 @@ utki::shared_ref<ruis::push_button> m::push_button(
 		context,
 		{
             .layout_params = std::move(params.layout_params),
-            .widget = std::move(params.widget),
-            .params{
-                .rectangle_button{
-                    .rectangle{
-                        .padding{
-                            .container = std::move(params.params),
-                            .specific{
-                                .borders = {5_pp}
-                            }
-                        },
-                        .specific{
-                            .corner_radii = {5_pp}
-                        }
-                    }
-                }
-            }
+            .widget = std::move(params.widget)
         },
 		std::move(contents)
 	);
diff --git a/tests/unit/src/style.cpp b/tests/unit/src/style.cpp
index 37d8aca54..e4f2e8bd2 100644
--- a/tests/unit/src/style.cpp
+++ b/tests/unit/src/style.cpp
@@ -69,6 +69,7 @@ const tst::set set("style", [](tst::suite& suite){
                 color_highlight{0xffad9869}
 
                 len_indent{17pp}
+                len_gap{15pp}
                 len_border{1pp}
             }
             user{
@@ -91,6 +92,15 @@ const tst::set set("style", [](tst::suite& suite){
 
         auto length_border = s.get_len_border();
         tst::check_eq(length_border.get(), ruis::length::make_pp(1), SL);
+
+        auto length_gap = s.get_len_gap();
+        tst::check_eq(length_gap.get(), ruis::length::make_pp(15), SL);
+
+        auto length_small_gap = s.get_len_gap_small();
+        tst::check_eq(length_small_gap.get(), ruis::length::make_pp(4), SL);
+
+        auto length_big_gap = s.get_len_gap_big();
+        tst::check_eq(length_big_gap.get(), ruis::length::make_pp(16), SL);
     });
 
     // test that ruis::real values can be obtained from style
@@ -260,14 +270,14 @@ const tst::set set("style", [](tst::suite& suite){
         tst::check_eq(tml::to_string(ss.get(ruis::style::color_text)), "0xffffffff"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::color_text_secondary)), "0xffa0a0a0"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::len_indent)), "17pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap)), "4pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap_small)), "4pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap)), "8pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap_big)), "16pp"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::len_border)), "1pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_button_padding)), "5pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_dialog_margin)), "30pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_dialog_padding)), "20pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_text)), "12pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_primary)), "14pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_secondary)), "12pp"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_title)), "22pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::font_face_text)), "ruis_fnt_normal"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_face_primary)), "ruis_fnt_normal"s, SL);
     });
 
     // test that when a style value is present in the style sheet, the sheet value is returned (not the default)
@@ -285,14 +295,14 @@ const tst::set set("style", [](tst::suite& suite){
                 color_text{0xff89abcd}
                 color_text_secondary{0xff9abcde}
                 len_indent{20pp}
-                len_gap{6pp}
+                len_gap_small{6pp}
+                len_gap{12pp}
+                len_gap_big{30pp}
                 len_border{2pp}
-                len_button_padding{7pp}
-                len_dialog_margin{40pp}
-                len_dialog_padding{30pp}
-                font_size_text{14pp}
+                font_size_primary{14pp}
+                font_size_secondary{10pp}
                 font_size_title{26pp}
-                font_face_text{custom_font}
+                font_face_primary{custom_font}
             }
             user{}
         )qwertyuiop"s);
@@ -309,14 +319,14 @@ const tst::set set("style", [](tst::suite& suite){
         tst::check_eq(tml::to_string(ss.get(ruis::style::color_text)), "0xff89abcd"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::color_text_secondary)), "0xff9abcde"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::len_indent)), "20pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap)), "6pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap_small)), "6pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap)), "12pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::len_gap_big)), "30pp"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::len_border)), "2pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_button_padding)), "7pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_dialog_margin)), "40pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::len_dialog_padding)), "30pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_text)), "14pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_primary)), "14pp"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_secondary)), "10pp"s, SL);
         tst::check_eq(tml::to_string(ss.get(ruis::style::font_size_title)), "26pp"s, SL);
-        tst::check_eq(tml::to_string(ss.get(ruis::style::font_face_text)), "custom_font"s, SL);
+        tst::check_eq(tml::to_string(ss.get(ruis::style::font_face_primary)), "custom_font"s, SL);
     });
 
     // test that parsing fails when a style value name is present but its value is empty