diff --git a/.idea/runConfigurations/Forui_Example___run.xml b/.idea/runConfigurations/Forui_Example___run.xml
deleted file mode 100644
index 7c4a018bd..000000000
--- a/.idea/runConfigurations/Forui_Example___run.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Forui Example - run" type="FlutterRunConfigurationType" factoryName="Flutter">
-    <option name="filePath" value="$PROJECT_DIR$/forui/example/lib/main.dart" />
-    <method v="2" />
-  </configuration>
-</component>
\ No newline at end of file
diff --git a/.idea/runConfigurations/dev.xml b/.idea/runConfigurations/docs___run.xml
similarity index 78%
rename from .idea/runConfigurations/dev.xml
rename to .idea/runConfigurations/docs___run.xml
index 87dae7612..e6ea3f5ff 100644
--- a/.idea/runConfigurations/dev.xml
+++ b/.idea/runConfigurations/docs___run.xml
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="dev" type="js.build_tools.npm" nameIsGenerated="true">
+  <configuration default="false" name="docs - run" type="js.build_tools.npm">
     <package-json value="$PROJECT_DIR$/docs/package.json" />
     <command value="run" />
     <scripts>
diff --git a/.idea/runConfigurations/forui___tests.xml b/.idea/runConfigurations/forui___tests.xml
new file mode 100644
index 000000000..9a7619973
--- /dev/null
+++ b/.idea/runConfigurations/forui___tests.xml
@@ -0,0 +1,8 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="forui - tests" type="FlutterTestConfigType" factoryName="Flutter Test">
+    <option name="testDir" value="$PROJECT_DIR$/forui" />
+    <option name="useRegexp" value="false" />
+    <option name="additionalArgs" value="" />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/.idea/runConfigurations/Update_Golden_Test_Images.xml b/.idea/runConfigurations/forui___update_golden_test_images.xml
similarity index 67%
rename from .idea/runConfigurations/Update_Golden_Test_Images.xml
rename to .idea/runConfigurations/forui___update_golden_test_images.xml
index bbfedd410..5f492b8c1 100644
--- a/.idea/runConfigurations/Update_Golden_Test_Images.xml
+++ b/.idea/runConfigurations/forui___update_golden_test_images.xml
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Update Golden Test Images" type="FlutterTestConfigType" factoryName="Flutter Test">
+  <configuration default="false" name="forui - update golden test images" type="FlutterTestConfigType" factoryName="Flutter Test">
     <option name="testDir" value="$PROJECT_DIR$/forui" />
     <option name="useRegexp" value="false" />
     <option name="additionalArgs" value="--update-goldens" />
diff --git a/.idea/runConfigurations/samples___run.xml b/.idea/runConfigurations/samples___run.xml
new file mode 100644
index 000000000..2d69cd950
--- /dev/null
+++ b/.idea/runConfigurations/samples___run.xml
@@ -0,0 +1,6 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="samples - run" type="FlutterRunConfigurationType" factoryName="Flutter">
+    <option name="filePath" value="$PROJECT_DIR$/samples/lib/main.dart" />
+    <method v="2" />
+  </configuration>
+</component>
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 594ce763a..c6e8eba6a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -97,41 +97,6 @@ They should:
 5. implement `operator ==` and `hashCode`.
 
 
-Widget should not scale `TextStyle`S during initialization. `TextStyle`s should be scaled in a widget's build method instead.
-This avoids confusion about whether `TextStyle`s are automatically scaled inside widget styles.
-
-✅ Prefer this:
-```dart
-class FooStyle {
-  final TextStyle text;
-  
-  FooStyle.inherit({FFont font, FColorScheme scheme}): text = const TextStyle(size: 1);
-}
-
-class Foo extends StatelessWidget {
-  final FooStyle style;
-  
-  @overrride
-  Widget build(BuildContext context) => Text('Hi', style: style.text.withFont(context.theme.font));
-}
-```
-
-❌ Instead of:
-```dart
-class FooStyle {
-  final TextStyle text;
-
-  FooStyle.inherit({FFont font, FColorScheme scheme}): text = const TextStyle(size: 1).withFont(font);
-}
-
-class Foo extends StatelessWidget {
-  final FooStyle style;
-
-  @overrride
-  Widget build(BuildContext context) => Text('Hi', style: style.text);
-}
-```
-
 ## Expose `String` and `Widget` variants of the same parameter.
 
 Widgets typically contain string-based content such as titles and labels. These widgets should expose a `String` and
diff --git a/forui/lib/src/theme/theme.dart b/forui/lib/src/theme/theme.dart
index fa7747c23..1cf36c633 100644
--- a/forui/lib/src/theme/theme.dart
+++ b/forui/lib/src/theme/theme.dart
@@ -75,7 +75,8 @@ class FTheme extends StatelessWidget {
   ///    );
   ///  }
   /// ```
-  @useResult static FThemeData of(BuildContext context) {
+  @useResult
+  static FThemeData of(BuildContext context) {
     final theme = context.dependOnInheritedWidgetOfExactType<_InheritedTheme>();
     return theme?.data ?? FThemes.zinc.light;
   }
@@ -99,18 +100,18 @@ class FTheme extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => _InheritedTheme(
-    data: data,
-    child: Directionality(
-      textDirection: textDirection ?? Directionality.of(context),
-      child: DefaultTextStyle(
-        style: data.typography.toTextStyle(
-          fontSize: data.typography.base,
-          color: data.colorScheme.foreground,
+        data: data,
+        child: Directionality(
+          textDirection: textDirection ?? Directionality.of(context),
+          child: DefaultTextStyle(
+            style: data.typography.base.copyWith(
+              fontFamily: data.typography.defaultFontFamily,
+              color: data.colorScheme.foreground,
+            ),
+            child: child,
+          ),
         ),
-        child: child,
-      ),
-    ),
-  );
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -138,7 +139,6 @@ class _InheritedTheme extends InheritedWidget {
 
 /// Provides functions for accessing the current [FThemeData].
 extension ThemeBuildContext on BuildContext {
-
   /// Returns the current [FThemeData], or [FThemes.zinc.light] if there is no ancestor [FTheme].
   ///
   /// ## Troubleshooting:
@@ -180,5 +180,4 @@ extension ThemeBuildContext on BuildContext {
   ///  }
   /// ```
   FThemeData get theme => FTheme.of(this);
-
 }
diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
index 0438b8feb..32cace336 100644
--- a/forui/lib/src/theme/theme_data.dart
+++ b/forui/lib/src/theme/theme_data.dart
@@ -70,22 +70,31 @@ final class FThemeData with Diagnosticable {
   });
 
   /// Creates a [FThemeData] that configures the widget styles using the given properties.
-  FThemeData.inherit({
-    required this.colorScheme,
-    this.typography = const FTypography(),
-    this.style = const FStyle(),
-  })  : badgeStyles = FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        buttonStyles = FButtonStyles.inherit(
-          colorScheme: colorScheme,
-          typography: typography,
-          style: style,
-        ),
-        cardStyle = FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        dialogStyle = FDialogStyle.inherit(style: style, colorScheme: colorScheme, typography: typography),
-        headerStyle = FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography),
-        textFieldStyle = FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
-        separatorStyles = FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
-        switchStyle = FSwitchStyle.inherit(colorScheme: colorScheme);
+  factory FThemeData.inherit({
+    required FColorScheme colorScheme,
+    FStyle style = const FStyle(),
+    FTypography? typography,
+  }) {
+    typography ??= FTypography.inherit(colorScheme: colorScheme);
+
+    return FThemeData(
+      colorScheme: colorScheme,
+      typography: typography,
+      style: style,
+      badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      buttonStyles: FButtonStyles.inherit(
+        colorScheme: colorScheme,
+        typography: typography,
+        style: style,
+      ),
+      cardStyle: FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      dialogStyle: FDialogStyle.inherit(style: style, colorScheme: colorScheme, typography: typography),
+      headerStyle: FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography),
+      textFieldStyle: FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      separatorStyles: FSeparatorStyles.inherit(colorScheme: colorScheme, style: style),
+      switchStyle: FSwitchStyle.inherit(colorScheme: colorScheme),
+    );
+  }
 
   /// Returns a copy of this [FThemeData] with the given properties replaced.
   ///
@@ -103,7 +112,8 @@ final class FThemeData with Diagnosticable {
   /// print(theme.colorScheme == copy.colorScheme); // true
   /// print(copy.typography); // bar
   /// ```
-  @useResult FThemeData copyWith({
+  @useResult
+  FThemeData copyWith({
     FColorScheme? colorScheme,
     FTypography? typography,
     FStyle? style,
diff --git a/forui/lib/src/theme/typography.dart b/forui/lib/src/theme/typography.dart
index 5be837ad5..3fa2e5f39 100644
--- a/forui/lib/src/theme/typography.dart
+++ b/forui/lib/src/theme/typography.dart
@@ -5,9 +5,6 @@ import 'package:meta/meta.dart';
 
 import 'package:forui/forui.dart';
 
-// TODO: replace with nullable number operations in Sugar 4.
-double? _scale(double? value, double factor) => value == null ? null : value * factor;
-
 /// Definitions for the various typographical styles that are part of a [FThemeData].
 ///
 /// A [FTypography] contains scalar values for scaling a [TextStyle]'s corresponding properties. It also contains labelled
@@ -16,217 +13,204 @@ double? _scale(double? value, double factor) => value == null ? null : value * f
 /// The scaling is applied automatically in all Forui widgets while the labelled font sizes are used as the defaults
 /// for the corresponding properties of widget styles configured via `inherit(...)` constructors.
 final class FTypography with Diagnosticable {
-
   /// The default font family. Defaults to [`packages/forui/Inter`](https://fonts.google.com/specimen/Inter).
   ///
   /// ## Contract:
-  /// Throws [AssertionError] if empty.
+  /// Throws an [AssertionError] if empty.
   final String defaultFontFamily;
 
-  /// A value used to scale [TextStyle.fontSize]. Defaults to 1.
+  /// The font size for extra small text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `sizeScalar` <= 0.0
-  /// * `sizeScalar` is NaN
-  final double sizeScalar;
+  /// Defaults to:
+  /// * `fontSize` = 12.
+  /// * `height` = 1.
+  final TextStyle xs;
 
-  /// A value used to scale [TextStyle.letterSpacing]. Defaults to 1.
+  /// The font size for small text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `letterSpacingScalar` <= 0.0
-  /// * `letterSpacingScalar` is NaN
-  final double letterSpacingScalar;
+  /// Defaults to:
+  /// * `fontSize` = 14.
+  /// * `height` = 1.25.
+  final TextStyle sm;
 
-  /// A value used to scale [TextStyle.wordSpacing]. Defaults to 1.
+  /// The font size for base text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `wordSpacingScalar` <= 0.0
-  /// * `wordSpacingScalar` is NaN
-  final double wordSpacingScalar;
+  /// Defaults to:
+  /// * `fontSize` = 16.
+  /// * `height` = 1.5.
+  final TextStyle base;
 
-  /// A value used to scale [TextStyle.height]. Defaults to 1.
+  /// The font size for large text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `heightScalar` <= 0.0
-  /// * `heightScalar` is NaN
-  final double heightScalar;
-
-  /// The font size for extra small text. Defaults to 12.
-  /// 
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xs` <= 0.0
-  /// * `xs` is NaN
-  final double xs;
+  /// Defaults to:
+  /// * `fontSize` = 18.
+  /// * `height` = 1.75.
+  final TextStyle lg;
 
-  /// The font size for small text. Defaults to 14.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `sm` <= 0.0
-  /// * `sm` is NaN
-  final double sm;
+  /// Defaults to:
+  /// * `fontSize` = 20.
+  /// * `height` = 1.75.
+  final TextStyle xl;
 
-  /// The font size for base text. Defaults to 16.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `base` <= 0.0
-  /// * `base` is NaN
-  final double base;
+  /// Defaults to:
+  /// * `fontSize` = 22.
+  /// * `height` = 2.
+  final TextStyle xl2;
 
-  /// The font size for large text. Defaults to 18.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `lg` <= 0.0
-  /// * `lg` is NaN
-  final double lg;
+  /// Defaults to:
+  /// * `fontSize` = 30.
+  /// * `height` = 2.25.
+  final TextStyle xl3;
 
-  /// The font size for extra large text. Defaults to 20.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `xl` <= 0.0
-  /// * `xl` is NaN
-  final double xl;
+  /// Defaults to:
+  /// * `fontSize` = 36.
+  /// * `height` = 2.5.
+  final TextStyle xl4;
 
-  /// The font size for extra large text. Defaults to 22.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `xl2` <= 0.0
-  /// * `xl2` is NaN
-  final double xl2;
+  /// Defaults to:
+  /// * `fontSize` = 48.
+  /// * `height` = 1.
+  final TextStyle xl5;
 
-  /// The font size for extra large text. Defaults to 30.
+  /// The font size for extra large text.
   ///
-  /// ## Contract: 
-  /// Throws [AssertionError] if:
-  /// * `xl3` <= 0.0
-  /// * `xl3` is NaN
-  final double xl3;
+  /// Defaults to:
+  /// * `fontSize` = 60.
+  /// * `height` = 1.
+  final TextStyle xl6;
 
-  /// The font size for extra large text. Defaults to 36.
+  /// The font size for extra large text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xl4` <= 0.0
-  /// * `xl4` is NaN
-  final double xl4;
+  /// Defaults to:
+  /// * `fontSize` = 72.
+  /// * `height` = 1.
+  final TextStyle xl7;
 
-  /// The font size for extra large text. Defaults to 48.
+  /// The font size for extra large text.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xl5` <= 0.0
-  /// * `xl5` is NaN
-  final double xl5;
+  /// Defaults to:
+  /// * `fontSize` = 96.
+  /// * `height` = 1.
+  final TextStyle xl8;
 
-  /// The font size for extra large text. Defaults to 60.
-  ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xl6` <= 0.0
-  /// * `xl6` is NaN
-  final double xl6;
+  /// Creates a [FTypography].
+  const FTypography({
+    this.defaultFontFamily = 'packages/forui/Inter',
+    this.xs = const TextStyle(fontSize: 12, height: 1),
+    this.sm = const TextStyle(fontSize: 14, height: 1.25),
+    this.base = const TextStyle(fontSize: 16, height: 1.5),
+    this.lg = const TextStyle(fontSize: 18, height: 1.75),
+    this.xl = const TextStyle(fontSize: 20, height: 1.75),
+    this.xl2 = const TextStyle(fontSize: 22, height: 2),
+    this.xl3 = const TextStyle(fontSize: 30, height: 2.25),
+    this.xl4 = const TextStyle(fontSize: 36, height: 2.5),
+    this.xl5 = const TextStyle(fontSize: 48, height: 1),
+    this.xl6 = const TextStyle(fontSize: 60, height: 1),
+    this.xl7 = const TextStyle(fontSize: 72, height: 1),
+    this.xl8 = const TextStyle(fontSize: 96, height: 1),
+  }) : assert(0 < defaultFontFamily.length, 'The defaultFontFamily should not be empty.');
 
-  /// The font size for extra large text. Defaults to 72.
-  ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xl7` <= 0.0
-  /// * `xl7` is NaN
-  final double xl7;
+  /// Creates a [FTypography] that inherits its properties from [colorScheme].
+  FTypography.inherit({
+    required FColorScheme colorScheme,
+    this.defaultFontFamily = 'packages/forui/Inter',
+  })  : xs = TextStyle(color: colorScheme.foreground, fontSize: 12, height: 1),
+        sm = TextStyle(color: colorScheme.foreground, fontSize: 14, height: 1.25),
+        base = TextStyle(color: colorScheme.foreground, fontSize: 16, height: 1.5),
+        lg = TextStyle(color: colorScheme.foreground, fontSize: 18, height: 1.75),
+        xl = TextStyle(color: colorScheme.foreground, fontSize: 20, height: 1.75),
+        xl2 = TextStyle(color: colorScheme.foreground, fontSize: 22, height: 2),
+        xl3 = TextStyle(color: colorScheme.foreground, fontSize: 30, height: 2.25),
+        xl4 = TextStyle(color: colorScheme.foreground, fontSize: 36, height: 2.5),
+        xl5 = TextStyle(color: colorScheme.foreground, fontSize: 48, height: 1),
+        xl6 = TextStyle(color: colorScheme.foreground, fontSize: 60, height: 1),
+        xl7 = TextStyle(color: colorScheme.foreground, fontSize: 72, height: 1),
+        xl8 = TextStyle(color: colorScheme.foreground, fontSize: 96, height: 1),
+        assert(defaultFontFamily.isNotEmpty, 'The defaultFontFamily should not be empty.');
 
-  /// The font size for extra large text. Defaults to 96.
+  /// Scales the fields of this [FTypography] by the given fields.
   ///
-  /// ## Contract:
-  /// Throws [AssertionError] if:
-  /// * `xl8` <= 0.0
-  /// * `xl8` is NaN
-  final double xl8;
+  /// ```dart
+  /// const typography = FTypography(
+  ///   sm: TextStyle(fontSize: 10),
+  ///   base: TextStyle(fontSize: 20),
+  /// );
+  ///
+  /// final scaled = typography.scale(sizeScalar: 1.5);
+  ///
+  /// print(scaled.sm.fontSize); // 15
+  /// print(scaled.base.fontSize); // 30
+  /// ```
+  @useResult
+  FTypography scale({double sizeScalar = 1}) => FTypography(
+    defaultFontFamily: defaultFontFamily,
+    xs: _scaleTextStyle(style: xs, sizeScalar: sizeScalar),
+    sm: _scaleTextStyle(style: sm, sizeScalar: sizeScalar),
+    base: _scaleTextStyle(style: base, sizeScalar: sizeScalar),
+    lg: _scaleTextStyle(style: lg, sizeScalar: sizeScalar),
+    xl: _scaleTextStyle(style: xl, sizeScalar: sizeScalar),
+    xl2: _scaleTextStyle(style: xl2, sizeScalar: sizeScalar),
+    xl3: _scaleTextStyle(style: xl3, sizeScalar: sizeScalar),
+    xl4: _scaleTextStyle(style: xl4, sizeScalar: sizeScalar),
+    xl5: _scaleTextStyle(style: xl5, sizeScalar: sizeScalar),
+    xl6: _scaleTextStyle(style: xl6, sizeScalar: sizeScalar),
+    xl7: _scaleTextStyle(style: xl7, sizeScalar: sizeScalar),
+    xl8: _scaleTextStyle(style: xl8, sizeScalar: sizeScalar),
+  );
 
-  /// Creates a [FTypography].
-  const FTypography({
-    this.defaultFontFamily = 'packages/forui/Inter',
-    this.sizeScalar = 1,
-    this.letterSpacingScalar = 1,
-    this.wordSpacingScalar = 1,
-    this.heightScalar = 1,
-    this.xs = 12,
-    this.sm = 14,
-    this.base = 16,
-    this.lg = 18,
-    this.xl = 20,
-    this.xl2 = 22,
-    this.xl3 = 30,
-    this.xl4 = 36,
-    this.xl5 = 48,
-    this.xl6 = 60,
-    this.xl7 = 72,
-    this.xl8 = 96,
-  }):
-    assert(0 < defaultFontFamily.length, 'The defaultFontFamily should not be empty.'),
-    assert(0 < sizeScalar, 'The sizeScalar is $sizeScalar, but it should be in the range "0 < sizeScalar".'),
-    assert(0 < letterSpacingScalar, 'The letterSpacingScalar is $letterSpacingScalar, but it should be in the range "0 < letterSpacingScalar".'),
-    assert(0 < wordSpacingScalar, 'The wordSpacingScalar is $wordSpacingScalar, but it should be in the range "0 < wordSpacingScalar".'),
-    assert(0 < heightScalar, 'The heightScalar is $heightScalar, but it should be in the range "0 < heightScalar".'),
-    assert(0 < xs, 'The xs is $xs, but it should be in the range "0 < xs".'),
-    assert(0 < sm, 'The sm is $sm, but it should be in the range "0 < sm".'),
-    assert(0 < base, 'The base is $base, but it should be in the range "0 < base".'),
-    assert(0 < lg, 'The lg is $lg, but it should be in the range "0 < lg".'),
-    assert(0 < xl, 'The xl is $xl, but it should be in the range "0 < xl".'),
-    assert(0 < xl2, 'The xl2 is $xl2, but it should be in the range "0 < xl2".'),
-    assert(0 < xl3, 'The xl3 is $xl3, but it should be in the range "0 < xl3".'),
-    assert(0 < xl4, 'The xl4 is $xl4, but it should be in the range "0 < xl4".'),
-    assert(0 < xl5, 'The xl5 is $xl5, but it should be in the range "0 < xl5".'),
-    assert(0 < xl6, 'The xl6 is $xl6, but it should be in the range "0 < xl6".'),
-    assert(0 < xl7, 'The xl7 is $xl7, but it should be in the range "0 < xl7".'),
-    assert(0 < xl8, 'The xl8 is $xl8, but it should be in the range "0 < xl8".');
+  TextStyle _scaleTextStyle({
+    required TextStyle style,
+    required double sizeScalar,
+  }) {
+    // default font size; https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html
+    final double fontSize = style.fontSize ?? 14;
+
+    return style.copyWith(fontSize: fontSize * sizeScalar);
+  }
 
   /// Returns a copy of this [FTypography] with the given properties replaced.
   ///
   /// ```dart
   /// const typography = FTypography(
   ///   defaultFontFamily: 'packages/forui/my-font',
-  ///   sizeScalar: 2,
+  ///   sm: TextStyle(fontSize: 10),
+  ///   base: TextStyle(fontSize: 20),
   /// );
   ///
-  /// final copy = typography.copyWith(sizeScalar: 3);
+  /// final copy = typography.copyWith(defaultFontFamily: 'packages/forui/another-font');
   ///
-  /// print(copy.defaultFontFamily); // 'packages/forui/my-font'
-  /// print(copy.sizeScalar); // 3
+  /// print(copy.defaultFontFamily); // 'packages/forui/another-font'
+  /// print(copy.sm.fontSize); // 10
+  /// print(copy.base.fontSize); // 20
   /// ```
-  @useResult FTypography copyWith({
+  @useResult
+  FTypography copyWith({
     String? defaultFontFamily,
-    double? sizeScalar,
-    double? letterSpacingScalar,
-    double? wordSpacingScalar,
-    double? heightScalar,
-    double? xs,
-    double? sm,
-    double? base,
-    double? lg,
-    double? xl,
-    double? xl2,
-    double? xl3,
-    double? xl4,
-    double? xl5,
-    double? xl6,
-    double? xl7,
-    double? xl8,
+    TextStyle? xs,
+    TextStyle? sm,
+    TextStyle? base,
+    TextStyle? lg,
+    TextStyle? xl,
+    TextStyle? xl2,
+    TextStyle? xl3,
+    TextStyle? xl4,
+    TextStyle? xl5,
+    TextStyle? xl6,
+    TextStyle? xl7,
+    TextStyle? xl8,
   }) =>
       FTypography(
         defaultFontFamily: defaultFontFamily ?? this.defaultFontFamily,
-        sizeScalar: sizeScalar ?? this.sizeScalar,
-        letterSpacingScalar: letterSpacingScalar ?? this.letterSpacingScalar,
-        wordSpacingScalar: wordSpacingScalar ?? this.wordSpacingScalar,
-        heightScalar: heightScalar ?? this.heightScalar,
         xs: xs ?? this.xs,
         sm: sm ?? this.sm,
         base: base ?? this.base,
@@ -241,134 +225,47 @@ final class FTypography with Diagnosticable {
         xl8: xl8 ?? this.xl8,
       );
 
-  /// Returns a [TextStyle] with the given properties, based on, and scaled using this [FTypography].
-  ///
-  /// ```dart
-  /// final typography = FTypography(
-  ///   defaultFontFamily: 'packages/forui/my-font',
-  ///   sizeScalar: 2,
-  ///   letterSpacingScalar: 3,
-  ///   wordSpacingScalar: 4,
-  ///   heightScalar: 5,
-  /// );
-  ///
-  /// final style = typography.toTextStyle(
-  ///   fontSize: 1,
-  ///   letterSpacing: 1,
-  ///   wordSpacing: 1,
-  ///   height: 1,
-  /// );
-  ///
-  /// print(style.fontFamily); // 'packages/forui/my-font'
-  /// print(style.fontSize); // 2
-  /// print(style.letterSpacing); // 3
-  /// print(style.wordSpacing); // 4
-  /// print(style.height); // 5
-  /// ```
-  @useResult TextStyle toTextStyle({
-    bool inherit = true,
-    Color? color,
-    Color? backgroundColor,
-    double? fontSize,
-    FontWeight? fontWeight,
-    FontStyle? fontStyle,
-    double? letterSpacing,
-    double? wordSpacing,
-    TextBaseline? textBaseline,
-    double? height,
-    TextLeadingDistribution? leadingDistribution,
-    Locale? locale,
-    Paint? foreground,
-    Paint? background,
-    List<Shadow>? shadows,
-    List<FontFeature>? fontFeatures,
-    List<FontVariation>? fontVariations,
-    TextDecoration? decoration,
-    Color? decorationColor,
-    TextDecorationStyle? decorationStyle,
-    double? decorationThickness,
-    String? debugLabel,
-    TextOverflow? overflow,
-  }) => TextStyle(
-    inherit: inherit,
-    color: color,
-    backgroundColor: backgroundColor,
-    fontSize: _scale(fontSize, sizeScalar),
-    fontWeight: fontWeight,
-    fontStyle: fontStyle,
-    letterSpacing: _scale(letterSpacing, letterSpacingScalar),
-    wordSpacing: _scale(wordSpacing, wordSpacingScalar),
-    textBaseline: textBaseline,
-    height: _scale(height, heightScalar),
-    leadingDistribution: leadingDistribution,
-    locale: locale,
-    foreground: foreground,
-    background: background,
-    shadows: shadows,
-    fontFeatures: fontFeatures,
-    fontVariations: fontVariations,
-    decoration: decoration,
-    decorationColor: decorationColor,
-    decorationStyle: decorationStyle,
-    decorationThickness: decorationThickness,
-    debugLabel: debugLabel,
-    fontFamily: defaultFontFamily,
-    overflow: overflow,
-  );
-
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties
       ..add(StringProperty('family', defaultFontFamily, defaultValue: 'packages/forui/Inter'))
-      ..add(DoubleProperty('sizeScalar', sizeScalar, defaultValue: 1))
-      ..add(DoubleProperty('letterSpacingScalar', letterSpacingScalar, defaultValue: 1))
-      ..add(DoubleProperty('wordSpacingScalar', wordSpacingScalar, defaultValue: 1))
-      ..add(DoubleProperty('heightScalar', heightScalar, defaultValue: 1))
-      ..add(DoubleProperty('xs', xs, defaultValue: 12))
-      ..add(DoubleProperty('sm', sm, defaultValue: 14))
-      ..add(DoubleProperty('base', base, defaultValue: 16))
-      ..add(DoubleProperty('lg', lg, defaultValue: 18))
-      ..add(DoubleProperty('xl', xl, defaultValue: 20))
-      ..add(DoubleProperty('xl2', xl2, defaultValue: 22))
-      ..add(DoubleProperty('xl3', xl3, defaultValue: 30))
-      ..add(DoubleProperty('xl4', xl4, defaultValue: 36))
-      ..add(DoubleProperty('xl5', xl5, defaultValue: 48))
-      ..add(DoubleProperty('xl6', xl6, defaultValue: 60))
-      ..add(DoubleProperty('xl7', xl7, defaultValue: 72))
-      ..add(DoubleProperty('xl8', xl8, defaultValue: 96));
+      ..add(DiagnosticsProperty('xs', xs, defaultValue: 12))
+      ..add(DiagnosticsProperty('sm', sm, defaultValue: 14))
+      ..add(DiagnosticsProperty('base', base, defaultValue: 16))
+      ..add(DiagnosticsProperty('lg', lg, defaultValue: 18))
+      ..add(DiagnosticsProperty('xl', xl, defaultValue: 20))
+      ..add(DiagnosticsProperty('xl2', xl2, defaultValue: 22))
+      ..add(DiagnosticsProperty('xl3', xl3, defaultValue: 30))
+      ..add(DiagnosticsProperty('xl4', xl4, defaultValue: 36))
+      ..add(DiagnosticsProperty('xl5', xl5, defaultValue: 48))
+      ..add(DiagnosticsProperty('xl6', xl6, defaultValue: 60))
+      ..add(DiagnosticsProperty('xl7', xl7, defaultValue: 72))
+      ..add(DiagnosticsProperty('xl8', xl8, defaultValue: 96));
   }
 
   @override
   bool operator ==(Object other) =>
       identical(this, other) ||
-      other is FTypography &&
-          runtimeType == other.runtimeType &&
-          defaultFontFamily == other.defaultFontFamily &&
-          sizeScalar == other.sizeScalar &&
-          letterSpacingScalar == other.letterSpacingScalar &&
-          wordSpacingScalar == other.wordSpacingScalar &&
-          heightScalar == other.heightScalar &&
-          xs == other.xs &&
-          sm == other.sm &&
-          base == other.base &&
-          lg == other.lg &&
-          xl == other.xl &&
-          xl2 == other.xl2 &&
-          xl3 == other.xl3 &&
-          xl4 == other.xl4 &&
-          xl5 == other.xl5 &&
-          xl6 == other.xl6 &&
-          xl7 == other.xl7 &&
-          xl8 == other.xl8;
+          other is FTypography &&
+              runtimeType == other.runtimeType &&
+              defaultFontFamily == other.defaultFontFamily &&
+              xs == other.xs &&
+              sm == other.sm &&
+              base == other.base &&
+              lg == other.lg &&
+              xl == other.xl &&
+              xl2 == other.xl2 &&
+              xl3 == other.xl3 &&
+              xl4 == other.xl4 &&
+              xl5 == other.xl5 &&
+              xl6 == other.xl6 &&
+              xl7 == other.xl7 &&
+              xl8 == other.xl8;
 
   @override
   int get hashCode =>
       defaultFontFamily.hashCode ^
-      sizeScalar.hashCode ^
-      letterSpacingScalar.hashCode ^
-      wordSpacingScalar.hashCode ^
-      heightScalar.hashCode ^
       xs.hashCode ^
       sm.hashCode ^
       base.hashCode ^
@@ -382,40 +279,3 @@ final class FTypography with Diagnosticable {
       xl7.hashCode ^
       xl8.hashCode;
 }
-
-/// Provides functions for working with [FTypography]s.
-extension TypographyTextStyle on TextStyle {
-
-  /// Scales a [TextStyle] using the given [typography].
-  ///
-  /// ```dart
-  /// final typography = FTypography(
-  ///   defaultFontFamily: 'packages/forui/my-font',
-  ///   sizeScalar: 2,
-  ///   letterSpacingScalar: 3,
-  ///   wordSpacingScalar: 4,
-  ///   heightScalar: 5,
-  /// );
-  ///
-  /// final style = TextStyle(
-  ///   fontFamily: 'default-font',
-  ///   fontSize: 1,
-  ///   letterSpacing: 1,
-  ///   wordSpacing: 1,
-  ///   height: 1,
-  /// ).scale(typography);
-  ///
-  /// print(style.fontFamily); // 'default-font'
-  /// print(style.fontSize); // 2
-  /// print(style.letterSpacing); // 3
-  /// print(style.wordSpacing); // 4
-  /// print(style.height); // 5
-  /// ```
-  @useResult TextStyle scale(FTypography typography) => copyWith(
-    fontSize: _scale(fontSize, typography.sizeScalar),
-    letterSpacing: _scale(letterSpacing, typography.letterSpacingScalar),
-    wordSpacing: _scale(wordSpacing, typography.wordSpacingScalar),
-    height: _scale(height, typography.heightScalar),
-  );
-
-}
diff --git a/forui/lib/src/widgets/badge/badge_content.dart b/forui/lib/src/widgets/badge/badge_content.dart
index ebbb10187..5a63720fb 100644
--- a/forui/lib/src/widgets/badge/badge_content.dart
+++ b/forui/lib/src/widgets/badge/badge_content.dart
@@ -18,7 +18,7 @@ final class FBadgeContent extends StatelessWidget {
     child: Padding(
       padding: style.content.padding,
       child: DefaultTextStyle.merge(
-        style: style.content.labelTextStyle.scale(context.theme.typography),
+        style: style.content.labelTextStyle,
         child: switch ((label, rawLabel)) {
           (final String label, _) => Text(label),
           (_, final Widget label) => label,
diff --git a/forui/lib/src/widgets/badge/badge_styles.dart b/forui/lib/src/widgets/badge/badge_styles.dart
index ec5bd3610..b5fd46bc3 100644
--- a/forui/lib/src/widgets/badge/badge_styles.dart
+++ b/forui/lib/src/widgets/badge/badge_styles.dart
@@ -29,9 +29,8 @@ class FBadgeStyles with Diagnosticable {
       backgroundColor: colorScheme.primary,
       borderColor: colorScheme.primary,
       content: FBadgeContentStyle(
-        labelTextStyle: TextStyle(
+        labelTextStyle: typography.sm.copyWith(
           color: colorScheme.primaryForeground,
-          fontSize: typography.sm,
           fontWeight: FontWeight.w600,
         ),
       ),
@@ -41,9 +40,8 @@ class FBadgeStyles with Diagnosticable {
       backgroundColor: colorScheme.secondary,
       borderColor: colorScheme.secondary,
       content: FBadgeContentStyle(
-        labelTextStyle: TextStyle(
+        labelTextStyle: typography.sm.copyWith(
           color: colorScheme.secondaryForeground,
-          fontSize: typography.sm,
           fontWeight: FontWeight.w600,
         ),
       ),
@@ -53,9 +51,8 @@ class FBadgeStyles with Diagnosticable {
       backgroundColor: colorScheme.background,
       borderColor: colorScheme.border,
       content: FBadgeContentStyle(
-        labelTextStyle: TextStyle(
+        labelTextStyle: typography.sm.copyWith(
           color: colorScheme.foreground,
-          fontSize: typography.sm,
           fontWeight: FontWeight.w600,
         ),
       ),
@@ -65,9 +62,8 @@ class FBadgeStyles with Diagnosticable {
       backgroundColor: colorScheme.destructive,
       borderColor: colorScheme.destructive,
       content: FBadgeContentStyle(
-        labelTextStyle: TextStyle(
+        labelTextStyle: typography.sm.copyWith(
           color: colorScheme.destructiveForeground,
-          fontSize: typography.sm,
           fontWeight: FontWeight.w600,
         ),
       ),
diff --git a/forui/lib/src/widgets/button/button_content.dart b/forui/lib/src/widgets/button/button_content.dart
index 34a469f5d..200fb4903 100644
--- a/forui/lib/src/widgets/button/button_content.dart
+++ b/forui/lib/src/widgets/button/button_content.dart
@@ -17,13 +17,12 @@ final class FButtonContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final typography = context.theme.typography;
     final (:style, :enabled) = FButton._of(context);
 
     return Padding(
         padding: style.content.padding,
         child: DefaultTextStyle.merge(
-          style: enabled ? style.content.enabledTextStyle.scale(typography) : style.content.disabledTextStyle.scale(typography),
+          style: enabled ? style.content.enabledTextStyle : style.content.disabledTextStyle,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: separate([
@@ -75,15 +74,15 @@ class FButtonContentStyle with Diagnosticable {
           horizontal: 16,
           vertical: 12.5,
         ),
-        enabledTextStyle = TextStyle(
-          fontSize: typography.base,
-          fontWeight: FontWeight.w500,
+        enabledTextStyle = typography.base.copyWith(
           color: enabled,
-        ),
-        disabledTextStyle = TextStyle(
-          fontSize: typography.base,
           fontWeight: FontWeight.w500,
+          height: 1,
+        ),
+        disabledTextStyle = typography.base.copyWith(
           color: disabled,
+          fontWeight: FontWeight.w500,
+          height: 1,
         );
 
   /// Returns a copy of this [FButtonContentStyle] with the given properties replaced.
diff --git a/forui/lib/src/widgets/card/card.dart b/forui/lib/src/widgets/card/card.dart
index 8926f40a1..1fb722fda 100644
--- a/forui/lib/src/widgets/card/card.dart
+++ b/forui/lib/src/widgets/card/card.dart
@@ -71,7 +71,6 @@ final class FCard extends StatelessWidget {
     super.debugFillProperties(properties);
     properties.add(DiagnosticsProperty('style', style));
   }
-
 }
 
 /// [FCard]'s style.
diff --git a/forui/lib/src/widgets/card/card_content.dart b/forui/lib/src/widgets/card/card_content.dart
index bcfc8d9c4..730ba9afa 100644
--- a/forui/lib/src/widgets/card/card_content.dart
+++ b/forui/lib/src/widgets/card/card_content.dart
@@ -1,6 +1,7 @@
 part of 'card.dart';
 
-@internal final class FCardContent extends StatelessWidget {
+@internal
+final class FCardContent extends StatelessWidget {
   final String? title;
   final Widget? rawTitle;
   final String? subtitle;
@@ -13,28 +14,27 @@ part of 'card.dart';
     this.rawTitle,
     this.subtitle,
     this.rawSubtitle,
-    this.child, 
-    this.style, 
+    this.child,
+    this.style,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
-    final typography = context.theme.typography;
     final style = this.style ?? context.theme.cardStyle.content;
-    
+
     final title = switch ((this.title, rawTitle)) {
       (final String title, _) => Text(title),
       (_, final Widget title) => title,
       _ => null,
     };
-    
+
     final subtitle = switch ((this.subtitle, rawSubtitle)) {
       (final String subtitle, _) => Text(subtitle),
       (_, final Widget subtitle) => subtitle,
       _ => null,
     };
-    
+
     return Padding(
       padding: style.padding,
       child: Column(
@@ -42,19 +42,18 @@ part of 'card.dart';
         children: [
           if (title != null)
             DefaultTextStyle.merge(
-              style: style.titleTextStyle.scale(typography),
+              style: style.titleTextStyle,
               child: title,
             ),
-          
           if (subtitle != null)
             DefaultTextStyle.merge(
-              style: style.subtitleTextStyle.scale(typography),
+              style: style.subtitleTextStyle,
               child: subtitle,
             ),
-
           if (child != null)
             Padding(
-              padding: (title == null && subtitle == null) ? const EdgeInsets.only(top: 4) : const EdgeInsets.only(top: 10),
+              padding:
+                  (title == null && subtitle == null) ? const EdgeInsets.only(top: 4) : const EdgeInsets.only(top: 10),
               child: child!,
             ),
         ],
@@ -91,17 +90,13 @@ final class FCardContentStyle with Diagnosticable {
   });
 
   /// Creates a [FCardContentStyle] that inherits its properties from [colorScheme] and [typography].
-  FCardContentStyle.inherit({required FColorScheme colorScheme, required FTypography typography}):
-    titleTextStyle = TextStyle(
-      fontSize: typography.base,
-      fontWeight: FontWeight.w600,
-      color: colorScheme.foreground,
-    ),
-    subtitleTextStyle = TextStyle(
-      fontSize: typography.sm,
-      color: colorScheme.mutedForeground,
-    ),
-    padding = const EdgeInsets.fromLTRB(16, 12, 16, 16);
+  FCardContentStyle.inherit({required FColorScheme colorScheme, required FTypography typography})
+      : titleTextStyle = typography.base.copyWith(
+          fontWeight: FontWeight.w600,
+          color: colorScheme.foreground,
+        ),
+        subtitleTextStyle = typography.sm.copyWith(color: colorScheme.mutedForeground),
+        padding = const EdgeInsets.fromLTRB(16, 12, 16, 16);
 
   /// Returns a copy of this [FCardContentStyle] with the given properties replaced.
   ///
@@ -120,11 +115,12 @@ final class FCardContentStyle with Diagnosticable {
     TextStyle? titleTextStyle,
     TextStyle? subtitleTextStyle,
     EdgeInsets? padding,
-  }) => FCardContentStyle(
-      titleTextStyle: titleTextStyle ?? this.titleTextStyle,
-      subtitleTextStyle: subtitleTextStyle ?? this.subtitleTextStyle,
-      padding: padding ?? this.padding,
-    );
+  }) =>
+      FCardContentStyle(
+        titleTextStyle: titleTextStyle ?? this.titleTextStyle,
+        subtitleTextStyle: subtitleTextStyle ?? this.subtitleTextStyle,
+        padding: padding ?? this.padding,
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -136,11 +132,13 @@ final class FCardContentStyle with Diagnosticable {
   }
 
   @override
-  bool operator ==(Object other) => identical(this, other) || other is FCardContentStyle &&
-      runtimeType == other.runtimeType &&
-      titleTextStyle == other.titleTextStyle &&
-      subtitleTextStyle == other.subtitleTextStyle &&
-      padding == other.padding;
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is FCardContentStyle &&
+          runtimeType == other.runtimeType &&
+          titleTextStyle == other.titleTextStyle &&
+          subtitleTextStyle == other.subtitleTextStyle &&
+          padding == other.padding;
 
   @override
   int get hashCode => titleTextStyle.hashCode ^ subtitleTextStyle.hashCode ^ padding.hashCode;
diff --git a/forui/lib/src/widgets/dialog/dialog.dart b/forui/lib/src/widgets/dialog/dialog.dart
index 4fa8615b5..d75665f67 100644
--- a/forui/lib/src/widgets/dialog/dialog.dart
+++ b/forui/lib/src/widgets/dialog/dialog.dart
@@ -87,28 +87,27 @@ class FDialog extends StatelessWidget {
     Widget? rawBody,
     Axis direction = Axis.vertical,
     super.key,
-  }):
-    assert(title == null || rawTitle == null, 'Cannot provide both a title and a rawTitle.'),
-    assert(body == null || rawBody == null, 'Cannot provide both a body and a rawBody.'),
-    semanticLabel = semanticLabel ?? title,
-    builder = switch (direction) {
-      Axis.horizontal => (context, style) => FHorizontalDialogContent(
-        style: style.horizontal,
-        title: title,
-        rawTitle: rawTitle,
-        body: body,
-        rawBody: rawBody,
-        actions: actions,
-      ),
-      Axis.vertical => (context, style) => FVerticalDialogContent(
-        style: style.vertical,
-        title: title,
-        rawTitle: rawTitle,
-        body: body,
-        rawBody: rawBody,
-        actions: actions,
-      ),
-    };
+  })  : assert(title == null || rawTitle == null, 'Cannot provide both a title and a rawTitle.'),
+        assert(body == null || rawBody == null, 'Cannot provide both a body and a rawBody.'),
+        semanticLabel = semanticLabel ?? title,
+        builder = switch (direction) {
+          Axis.horizontal => (context, style) => FHorizontalDialogContent(
+                style: style.horizontal,
+                title: title,
+                rawTitle: rawTitle,
+                body: body,
+                rawBody: rawBody,
+                actions: actions,
+              ),
+          Axis.vertical => (context, style) => FVerticalDialogContent(
+                style: style.vertical,
+                title: title,
+                rawTitle: rawTitle,
+                body: body,
+                rawBody: rawBody,
+                actions: actions,
+              ),
+        };
 
   /// Creates a [FDialog] with a custom builder.
   const FDialog.raw({
@@ -123,8 +122,8 @@ class FDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.theme;
-    final style = this.style ?? theme.dialogStyle;
     final typography = theme.typography;
+    final style = this.style ?? theme.dialogStyle;
 
     return AnimatedPadding(
       padding: MediaQuery.viewInsetsOf(context) + style.insetPadding,
@@ -137,11 +136,8 @@ class FDialog extends StatelessWidget {
         removeBottom: true,
         context: context,
         child: Align(
-          child: DefaultTextStyle(
-            style: context.theme.typography.toTextStyle(
-              fontSize: typography.base,
-              color: context.theme.colorScheme.foreground,
-            ),
+          child: DefaultTextStyle.merge(
+            style: typography.base.copyWith(color: theme.colorScheme.foreground),
             child: Semantics(
               scopesRoute: true,
               explicitChildNodes: true,
@@ -169,7 +165,8 @@ class FDialog extends StatelessWidget {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty('style', style))
-      ..add(DiagnosticsProperty('insetAnimationDuration', insetAnimationDuration, defaultValue: const Duration(milliseconds: 100)))
+      ..add(DiagnosticsProperty('insetAnimationDuration', insetAnimationDuration,
+          defaultValue: const Duration(milliseconds: 100)))
       ..add(DiagnosticsProperty('insetAnimationCurve', insetAnimationCurve, defaultValue: Curves.decelerate))
       ..add(StringProperty('semanticLabel', semanticLabel))
       ..add(DiagnosticsProperty('builder', builder));
@@ -207,26 +204,26 @@ final class FDialogStyle with Diagnosticable {
   });
 
   /// Creates a [FDialogStyle] that inherits its properties from the given [style], [colorScheme], and [typography].
-  FDialogStyle.inherit({required FStyle style, required FColorScheme colorScheme, required FTypography typography}):
-    decoration = BoxDecoration(
-      borderRadius: style.borderRadius,
-      color: colorScheme.background,
-    ),
-    insetPadding = const EdgeInsets.symmetric(horizontal: 40, vertical: 24),
-    horizontal = FDialogContentStyle.inherit(
-      colorScheme: colorScheme,
-      typography: typography,
-      padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 25),
-      actionPadding: 7,
-    ),
-    vertical = FDialogContentStyle.inherit(
-      colorScheme: colorScheme,
-      typography: typography,
-      padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 25),
-      actionPadding: 8,
-    ),
-    minWidth = 280,
-    maxWidth = 560;
+  FDialogStyle.inherit({required FStyle style, required FColorScheme colorScheme, required FTypography typography})
+      : decoration = BoxDecoration(
+          borderRadius: style.borderRadius,
+          color: colorScheme.background,
+        ),
+        insetPadding = const EdgeInsets.symmetric(horizontal: 40, vertical: 24),
+        horizontal = FDialogContentStyle.inherit(
+          colorScheme: colorScheme,
+          typography: typography,
+          padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 25),
+          actionPadding: 7,
+        ),
+        vertical = FDialogContentStyle.inherit(
+          colorScheme: colorScheme,
+          typography: typography,
+          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 25),
+          actionPadding: 8,
+        ),
+        minWidth = 280,
+        maxWidth = 560;
 
   /// Returns a copy of this [FButtonCustomStyle] with the given properties replaced.
   ///
@@ -244,21 +241,23 @@ final class FDialogStyle with Diagnosticable {
   /// print(copy.minWidth); // 1
   /// print(copy.maxWidth); // 3
   /// ```
-  @useResult FDialogStyle copyWith({
+  @useResult
+  FDialogStyle copyWith({
     BoxDecoration? decoration,
     EdgeInsets? insetPadding,
     FDialogContentStyle? horizontal,
     FDialogContentStyle? vertical,
     double? minWidth,
     double? maxWidth,
-  }) => FDialogStyle(
-      decoration: decoration ?? this.decoration,
-      insetPadding: insetPadding ?? this.insetPadding,
-      horizontal: horizontal ?? this.horizontal,
-      vertical: vertical ?? this.vertical,
-      minWidth: minWidth ?? this.minWidth,
-      maxWidth: maxWidth ?? this.maxWidth,
-    );
+  }) =>
+      FDialogStyle(
+        decoration: decoration ?? this.decoration,
+        insetPadding: insetPadding ?? this.insetPadding,
+        horizontal: horizontal ?? this.horizontal,
+        vertical: vertical ?? this.vertical,
+        minWidth: minWidth ?? this.minWidth,
+        maxWidth: maxWidth ?? this.maxWidth,
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
diff --git a/forui/lib/src/widgets/dialog/dialog_content.dart b/forui/lib/src/widgets/dialog/dialog_content.dart
index a3d440f83..b35ce352f 100644
--- a/forui/lib/src/widgets/dialog/dialog_content.dart
+++ b/forui/lib/src/widgets/dialog/dialog_content.dart
@@ -1,6 +1,7 @@
 part of 'dialog.dart';
 
-@internal sealed class FDialogContent extends StatelessWidget {
+@internal
+sealed class FDialogContent extends StatelessWidget {
   final FDialogContentStyle style;
   final CrossAxisAlignment alignment;
   final String? title;
@@ -12,7 +13,7 @@ part of 'dialog.dart';
   final List<Widget> actions;
 
   const FDialogContent({
-    required this.style, 
+    required this.style,
     required this.alignment,
     required this.title,
     required this.titleTextAlign,
@@ -23,23 +24,21 @@ part of 'dialog.dart';
     required this.actions,
     super.key,
   });
-  
+
   @override
   Widget build(BuildContext context) {
-    final typography = context.theme.typography;
-    
     final title = switch ((this.title, rawTitle)) {
       (final String title, _) => Text(title),
       (_, final Widget title) => title,
       _ => null,
     };
-    
+
     final body = switch ((this.body, rawBody)) {
       (final String body, _) => Text(body),
       (_, final Widget body) => body,
       _ => null,
     };
-    
+
     return IntrinsicWidth(
       child: Padding(
         padding: style.padding,
@@ -54,7 +53,7 @@ part of 'dialog.dart';
                   container: true,
                   child: DefaultTextStyle.merge(
                     textAlign: titleTextAlign,
-                    style: style.titleTextStyle.scale(typography),
+                    style: style.titleTextStyle,
                     child: title,
                   ),
                 ),
@@ -66,7 +65,7 @@ part of 'dialog.dart';
                   container: true,
                   child: DefaultTextStyle.merge(
                     textAlign: bodyTextAlign,
-                    style: style.bodyTextStyle.scale(typography),
+                    style: style.bodyTextStyle,
                     child: body,
                   ),
                 ),
@@ -77,7 +76,7 @@ part of 'dialog.dart';
       ),
     );
   }
-  
+
   Widget _actions(BuildContext context);
 
   @override
@@ -94,7 +93,8 @@ part of 'dialog.dart';
   }
 }
 
-@internal class FHorizontalDialogContent extends FDialogContent {
+@internal
+class FHorizontalDialogContent extends FDialogContent {
   const FHorizontalDialogContent({
     required super.style,
     required super.title,
@@ -102,29 +102,22 @@ part of 'dialog.dart';
     required super.body,
     required super.rawBody,
     required super.actions,
-  }): super(
-      alignment: CrossAxisAlignment.start,
-      titleTextAlign: TextAlign.start,
-      bodyTextAlign: TextAlign.start
-  );
+  }) : super(alignment: CrossAxisAlignment.start, titleTextAlign: TextAlign.start, bodyTextAlign: TextAlign.start);
 
   @override
   Widget _actions(BuildContext context) => Row(
-    mainAxisAlignment: MainAxisAlignment.end,
-    children: separate(
-      [
-        for (final action in actions)
-          IntrinsicWidth(
-            child: action,
-          ),
-      ],
-      by: [ SizedBox(width: style.actionPadding) ],
-    ),
-  );
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: separate(
+          [
+            for (final action in actions) IntrinsicWidth(child: action),
+          ],
+          by: [SizedBox(width: style.actionPadding)],
+        ),
+      );
 }
 
-
-@internal class FVerticalDialogContent extends FDialogContent {
+@internal
+class FVerticalDialogContent extends FDialogContent {
   const FVerticalDialogContent({
     required super.style,
     required super.title,
@@ -132,20 +125,16 @@ part of 'dialog.dart';
     required super.body,
     required super.rawBody,
     required super.actions,
-  }): super(
-    alignment: CrossAxisAlignment.center,
-    titleTextAlign: TextAlign.center,
-    bodyTextAlign: TextAlign.center
-  );
+  }) : super(alignment: CrossAxisAlignment.center, titleTextAlign: TextAlign.center, bodyTextAlign: TextAlign.center);
 
   @override
   Widget _actions(BuildContext context) => Column(
-    mainAxisSize: MainAxisSize.min,
-    children: separate(
-      actions,
-      by: [ SizedBox(height: style.actionPadding) ],
-    ),
-  );
+        mainAxisSize: MainAxisSize.min,
+        children: separate(
+          actions,
+          by: [SizedBox(height: style.actionPadding)],
+        ),
+      );
 }
 
 /// The dialog content's style.
@@ -161,7 +150,7 @@ final class FDialogContentStyle with Diagnosticable {
 
   /// The space between actions.
   final double actionPadding;
-  
+
   /// Creates a [FDialogContentStyle].
   FDialogContentStyle({
     required this.titleTextStyle,
@@ -169,23 +158,18 @@ final class FDialogContentStyle with Diagnosticable {
     required this.padding,
     required this.actionPadding,
   });
-  
+
   /// Creates a [FDialogContentStyle] that inherits its properties from [colorScheme] and [typography].
   FDialogContentStyle.inherit({
     required FColorScheme colorScheme,
     required FTypography typography,
     required this.padding,
     required this.actionPadding,
-  }):
-    titleTextStyle = TextStyle(
-      fontSize: typography.lg,
-      fontWeight: FontWeight.w600,
-      color: colorScheme.foreground,
-    ),
-    bodyTextStyle = TextStyle(
-      fontSize: typography.sm,
-      color: colorScheme.mutedForeground,
-    );
+  })  : titleTextStyle = typography.lg.copyWith(
+          fontWeight: FontWeight.w600,
+          color: colorScheme.foreground,
+        ),
+        bodyTextStyle = typography.sm.copyWith(color: colorScheme.mutedForeground);
 
   /// Returns a copy of this [FDialogContentStyle] with the given properties replaced.
   ///
@@ -203,17 +187,19 @@ final class FDialogContentStyle with Diagnosticable {
   /// print(style.titleTextStyle == copy.titleTextStyle); // true
   /// print(style.bodyTextStyle == copy.bodyTextStyle); // false
   /// ```
-  @useResult FDialogContentStyle copyWith({
+  @useResult
+  FDialogContentStyle copyWith({
     TextStyle? titleTextStyle,
     TextStyle? bodyTextStyle,
     EdgeInsets? padding,
     double? actionPadding,
-  }) => FDialogContentStyle(
-    titleTextStyle: titleTextStyle ?? this.titleTextStyle,
-    bodyTextStyle: bodyTextStyle ?? this.bodyTextStyle,
-    padding: padding ?? this.padding,
-    actionPadding: actionPadding ?? this.actionPadding,
-  );
+  }) =>
+      FDialogContentStyle(
+        titleTextStyle: titleTextStyle ?? this.titleTextStyle,
+        bodyTextStyle: bodyTextStyle ?? this.bodyTextStyle,
+        padding: padding ?? this.padding,
+        actionPadding: actionPadding ?? this.actionPadding,
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
diff --git a/forui/lib/src/widgets/header/header.dart b/forui/lib/src/widgets/header/header.dart
index bcbc476b7..16346309d 100644
--- a/forui/lib/src/widgets/header/header.dart
+++ b/forui/lib/src/widgets/header/header.dart
@@ -51,13 +51,11 @@ class FHeader extends StatelessWidget {
     this.rawTitle,
     this.actions = const [],
     super.key,
-  }):
-    assert((title != null) ^ (rawTitle != null), 'title or rawTitle must be provided, but not both.');
+  }) : assert((title != null) ^ (rawTitle != null), 'title or rawTitle must be provided, but not both.');
 
   @override
   Widget build(BuildContext context) {
     final style = this.style ?? context.theme.headerStyle;
-    final typography = context.theme.typography;
 
     final title = switch ((this.title, rawTitle)) {
       (final String title, _) => Text(title),
@@ -73,7 +71,7 @@ class FHeader extends StatelessWidget {
             overflow: TextOverflow.fade,
             maxLines: 1,
             softWrap: false,
-            style: style.titleTextStyle.scale(typography),
+            style: style.titleTextStyle,
             child: title,
           ),
         ),
@@ -105,10 +103,10 @@ final class FHeaderStyle with Diagnosticable {
 
   /// Creates a [FHeaderStyle] that inherits its properties from the given [FColorScheme] and [FTypography].
   FHeaderStyle.inherit({required FColorScheme colorScheme, required FTypography typography})
-      : titleTextStyle = TextStyle(
-          fontSize: typography.xl3,
-          fontWeight: FontWeight.w700,
+      : titleTextStyle = typography.xl3.copyWith(
           color: colorScheme.foreground,
+          fontWeight: FontWeight.w700,
+          height: 1,
         ),
         action = FHeaderActionStyle.inherit(colorScheme: colorScheme);
 
@@ -127,13 +125,15 @@ final class FHeaderStyle with Diagnosticable {
   /// print(style.titleTextStyle == copy.titleTextStyle); // true
   /// print(style.action == copy.action); // false
   /// ```
-  @useResult FHeaderStyle copyWith({
+  @useResult
+  FHeaderStyle copyWith({
     TextStyle? titleTextStyle,
     FHeaderActionStyle? action,
-  }) => FHeaderStyle(
-      titleTextStyle: titleTextStyle ?? this.titleTextStyle,
-      action: action ?? this.action,
-    );
+  }) =>
+      FHeaderStyle(
+        titleTextStyle: titleTextStyle ?? this.titleTextStyle,
+        action: action ?? this.action,
+      );
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
diff --git a/forui/lib/src/widgets/text_field/text_field.dart b/forui/lib/src/widgets/text_field/text_field.dart
index 2db69ba41..c6f10128a 100644
--- a/forui/lib/src/widgets/text_field/text_field.dart
+++ b/forui/lib/src/widgets/text_field/text_field.dart
@@ -775,7 +775,7 @@ final class FTextField extends StatelessWidget {
             Padding(
               padding: const EdgeInsets.only(top: 4, bottom: 7),
               child: DefaultTextStyle.merge(
-                style: stateStyle.labelTextStyle.scale(typography),
+                style: stateStyle.labelTextStyle,
                 child: label,
               ),
             ),
@@ -822,12 +822,12 @@ final class FTextField extends StatelessWidget {
   ) {
 
     final rawError = this.rawError == null ? this.rawError : DefaultTextStyle.merge(
-      style: current.footerTextStyle.scale(typography),
+      style: current.footerTextStyle,
       child: this.rawError!,
     );
 
     final rawHelp = this.rawHelp == null ? this.rawHelp : DefaultTextStyle.merge(
-      style: current.footerTextStyle.scale(typography),
+      style: current.footerTextStyle,
       child: this.rawHelp!,
     );
 
@@ -842,15 +842,15 @@ final class FTextField extends StatelessWidget {
         prefix: Padding(padding: EdgeInsets.only(left: style.contentPadding.left)),
         contentPadding: style.contentPadding.copyWith(left: 0),
         hintText: hint,
-        hintStyle: current.hintTextStyle.scale(typography),
+        hintStyle: current.hintTextStyle,
         hintMaxLines: hintMaxLines,
         helper: rawHelp,
         helperText: help,
-        helperStyle: current.footerTextStyle.scale(typography),
+        helperStyle: current.footerTextStyle,
         helperMaxLines: helpMaxLines,
         error: rawError,
         errorText: error,
-        errorStyle: current.footerTextStyle.scale(typography),
+        errorStyle: current.footerTextStyle,
         errorMaxLines: errorMaxLines,
         disabledBorder: OutlineInputBorder(
           borderSide: BorderSide(
@@ -891,7 +891,7 @@ final class FTextField extends StatelessWidget {
       keyboardType: keyboardType,
       textInputAction: textInputAction,
       textCapitalization: textCapitalization,
-      style: current.contentTextStyle.scale(typography),
+      style: current.contentTextStyle,
       textAlign: textAlign,
       textAlignVertical: textAlignVertical,
       textDirection: textDirection,
diff --git a/forui/lib/src/widgets/text_field/text_field_style.dart b/forui/lib/src/widgets/text_field/text_field_style.dart
index 01b2dad06..1c7b97a8f 100644
--- a/forui/lib/src/widgets/text_field/text_field_style.dart
+++ b/forui/lib/src/widgets/text_field/text_field_style.dart
@@ -12,8 +12,9 @@ final class FTextFieldStyle with Diagnosticable {
   /// The cursor indicates the current location of text insertion point in the field.
   final Color cursorColor;
 
-  /// The padding surrounding this text field's content. Defaults to
-  /// `const EdgeInsets.symmetric(horizontal: 15, vertical: 5)`.
+  /// The padding surrounding this text field's content.
+  ///
+  /// Defaults to `const EdgeInsets.symmetric(horizontal: 15, vertical: 5)`.
   final EdgeInsets contentPadding;
 
   /// Configures padding to edges surrounding a [Scrollable] when this text field scrolls into view.
@@ -199,24 +200,20 @@ final class FTextFieldStateStyle with Diagnosticable {
     required FTypography typography,
     required FStyle style,
   }):
-    labelTextStyle = TextStyle(
+    labelTextStyle = typography.sm.copyWith(
       color: labelColor,
-      fontSize: typography.sm,
       fontWeight: FontWeight.w600,
     ),
-    contentTextStyle = TextStyle(
+    contentTextStyle = typography.sm.copyWith(
       fontFamily: typography.defaultFontFamily,
-      fontSize: typography.sm,
       color: contentColor,
     ),
-    hintTextStyle = TextStyle(
+    hintTextStyle = typography.sm.copyWith(
       fontFamily: typography.defaultFontFamily,
-      fontSize: typography.sm,
       color: hintColor,
     ),
-    footerTextStyle = TextStyle(
+    footerTextStyle = typography.sm.copyWith(
       fontFamily: typography.defaultFontFamily,
-      fontSize: typography.sm,
       color: footerColor,
     ),
     focused = FTextFieldBorderStyle.inherit(color: focusedBorderColor, style: style),
diff --git a/forui/test/golden/badge/zinc-dark-Variant.destructive-raw-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.destructive-raw-badge-content.png
index 862d5f4fc..852f5c06e 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.destructive-raw-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.destructive-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.destructive-text-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.destructive-text-badge-content.png
index 862d5f4fc..852f5c06e 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.destructive-text-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.destructive-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.outline-raw-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.outline-raw-badge-content.png
index 4ad642ac3..edf3f6a76 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.outline-raw-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.outline-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.outline-text-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.outline-text-badge-content.png
index 4ad642ac3..edf3f6a76 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.outline-text-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.outline-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.primary-raw-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.primary-raw-badge-content.png
index d23304fa8..51e617f3c 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.primary-raw-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.primary-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.primary-text-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.primary-text-badge-content.png
index d23304fa8..51e617f3c 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.primary-text-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.primary-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.secondary-raw-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.secondary-raw-badge-content.png
index ab2c1677b..d190ddf8d 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.secondary-raw-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.secondary-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-dark-Variant.secondary-text-badge-content.png b/forui/test/golden/badge/zinc-dark-Variant.secondary-text-badge-content.png
index ab2c1677b..d190ddf8d 100644
Binary files a/forui/test/golden/badge/zinc-dark-Variant.secondary-text-badge-content.png and b/forui/test/golden/badge/zinc-dark-Variant.secondary-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.destructive-raw-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.destructive-raw-badge-content.png
index 320bda7eb..e75e8ed3c 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.destructive-raw-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.destructive-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.destructive-text-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.destructive-text-badge-content.png
index 320bda7eb..e75e8ed3c 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.destructive-text-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.destructive-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.outline-raw-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.outline-raw-badge-content.png
index 152c49ec0..ba2865582 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.outline-raw-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.outline-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.outline-text-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.outline-text-badge-content.png
index 152c49ec0..ba2865582 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.outline-text-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.outline-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.primary-raw-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.primary-raw-badge-content.png
index f3162779e..932110f89 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.primary-raw-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.primary-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.primary-text-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.primary-text-badge-content.png
index f3162779e..932110f89 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.primary-text-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.primary-text-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.secondary-raw-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.secondary-raw-badge-content.png
index 7477e6029..66d4e0442 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.secondary-raw-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.secondary-raw-badge-content.png differ
diff --git a/forui/test/golden/badge/zinc-light-Variant.secondary-text-badge-content.png b/forui/test/golden/badge/zinc-light-Variant.secondary-text-badge-content.png
index 7477e6029..66d4e0442 100644
Binary files a/forui/test/golden/badge/zinc-light-Variant.secondary-text-badge-content.png and b/forui/test/golden/badge/zinc-light-Variant.secondary-text-badge-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.destructive-disabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.destructive-disabled-button-content.png
index 2dbb03e6d..c1a56444d 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.destructive-disabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.destructive-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.destructive-enabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.destructive-enabled-button-content.png
index 46daf75eb..7bf9f1cc3 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.destructive-enabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.destructive-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.outline-disabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.outline-disabled-button-content.png
index 1d244d672..88df4a935 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.outline-disabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.outline-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.outline-enabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.outline-enabled-button-content.png
index eb9221b23..effa0053e 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.outline-enabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.outline-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.primary-disabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.primary-disabled-button-content.png
index fa0f554af..dfe43a958 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.primary-disabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.primary-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.primary-enabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.primary-enabled-button-content.png
index 7e3e7f7b0..db442bdd4 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.primary-enabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.primary-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.secondary-disabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.secondary-disabled-button-content.png
index 721d21df0..b0df6c978 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.secondary-disabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.secondary-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-dark-Variant.secondary-enabled-button-content.png b/forui/test/golden/button/zinc-dark-Variant.secondary-enabled-button-content.png
index df13b4775..68c6ffaf5 100644
Binary files a/forui/test/golden/button/zinc-dark-Variant.secondary-enabled-button-content.png and b/forui/test/golden/button/zinc-dark-Variant.secondary-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.destructive-disabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.destructive-disabled-button-content.png
index 811f86e4d..181943bbe 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.destructive-disabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.destructive-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.destructive-enabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.destructive-enabled-button-content.png
index 2113bd3dc..ebec052d9 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.destructive-enabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.destructive-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.outline-disabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.outline-disabled-button-content.png
index 74f73bdeb..77b15abfc 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.outline-disabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.outline-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.outline-enabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.outline-enabled-button-content.png
index 5db85d579..9520937e0 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.outline-enabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.outline-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.primary-disabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.primary-disabled-button-content.png
index 8ff1fdef2..d697dada1 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.primary-disabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.primary-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.primary-enabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.primary-enabled-button-content.png
index 6cd3e1746..16ed97b54 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.primary-enabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.primary-enabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.secondary-disabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.secondary-disabled-button-content.png
index eddd1aac9..2bd9623c3 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.secondary-disabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.secondary-disabled-button-content.png differ
diff --git a/forui/test/golden/button/zinc-light-Variant.secondary-enabled-button-content.png b/forui/test/golden/button/zinc-light-Variant.secondary-enabled-button-content.png
index 3c4f00355..ac1da6c0e 100644
Binary files a/forui/test/golden/button/zinc-light-Variant.secondary-enabled-button-content.png and b/forui/test/golden/button/zinc-light-Variant.secondary-enabled-button-content.png differ
diff --git a/forui/test/golden/card/zinc-dark-raw-card-content.png b/forui/test/golden/card/zinc-dark-raw-card-content.png
index 386dc5ef3..8b71b1c29 100644
Binary files a/forui/test/golden/card/zinc-dark-raw-card-content.png and b/forui/test/golden/card/zinc-dark-raw-card-content.png differ
diff --git a/forui/test/golden/card/zinc-dark-text-card-content.png b/forui/test/golden/card/zinc-dark-text-card-content.png
index 386dc5ef3..8b71b1c29 100644
Binary files a/forui/test/golden/card/zinc-dark-text-card-content.png and b/forui/test/golden/card/zinc-dark-text-card-content.png differ
diff --git a/forui/test/golden/card/zinc-light-raw-card-content.png b/forui/test/golden/card/zinc-light-raw-card-content.png
index 7feb996ed..2dbf01b92 100644
Binary files a/forui/test/golden/card/zinc-light-raw-card-content.png and b/forui/test/golden/card/zinc-light-raw-card-content.png differ
diff --git a/forui/test/golden/card/zinc-light-text-card-content.png b/forui/test/golden/card/zinc-light-text-card-content.png
index 7feb996ed..2dbf01b92 100644
Binary files a/forui/test/golden/card/zinc-light-text-card-content.png and b/forui/test/golden/card/zinc-light-text-card-content.png differ
diff --git a/forui/test/golden/dialog/zinc-dark-Axis.horizontal-raw-dialog-content.png b/forui/test/golden/dialog/zinc-dark-Axis.horizontal-raw-dialog-content.png
index 6e0bac4d3..4558c75c6 100644
Binary files a/forui/test/golden/dialog/zinc-dark-Axis.horizontal-raw-dialog-content.png and b/forui/test/golden/dialog/zinc-dark-Axis.horizontal-raw-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-dark-Axis.horizontal-text-dialog-content.png b/forui/test/golden/dialog/zinc-dark-Axis.horizontal-text-dialog-content.png
index 6e0bac4d3..4558c75c6 100644
Binary files a/forui/test/golden/dialog/zinc-dark-Axis.horizontal-text-dialog-content.png and b/forui/test/golden/dialog/zinc-dark-Axis.horizontal-text-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-dark-Axis.vertical-raw-dialog-content.png b/forui/test/golden/dialog/zinc-dark-Axis.vertical-raw-dialog-content.png
index f0150b091..ad2e6080a 100644
Binary files a/forui/test/golden/dialog/zinc-dark-Axis.vertical-raw-dialog-content.png and b/forui/test/golden/dialog/zinc-dark-Axis.vertical-raw-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-dark-Axis.vertical-text-dialog-content.png b/forui/test/golden/dialog/zinc-dark-Axis.vertical-text-dialog-content.png
index f0150b091..ad2e6080a 100644
Binary files a/forui/test/golden/dialog/zinc-dark-Axis.vertical-text-dialog-content.png and b/forui/test/golden/dialog/zinc-dark-Axis.vertical-text-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-light-Axis.horizontal-raw-dialog-content.png b/forui/test/golden/dialog/zinc-light-Axis.horizontal-raw-dialog-content.png
index ba9a0b1f9..360a4b851 100644
Binary files a/forui/test/golden/dialog/zinc-light-Axis.horizontal-raw-dialog-content.png and b/forui/test/golden/dialog/zinc-light-Axis.horizontal-raw-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-light-Axis.horizontal-text-dialog-content.png b/forui/test/golden/dialog/zinc-light-Axis.horizontal-text-dialog-content.png
index ba9a0b1f9..360a4b851 100644
Binary files a/forui/test/golden/dialog/zinc-light-Axis.horizontal-text-dialog-content.png and b/forui/test/golden/dialog/zinc-light-Axis.horizontal-text-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-light-Axis.vertical-raw-dialog-content.png b/forui/test/golden/dialog/zinc-light-Axis.vertical-raw-dialog-content.png
index 8a0c8c260..c3596ee8d 100644
Binary files a/forui/test/golden/dialog/zinc-light-Axis.vertical-raw-dialog-content.png and b/forui/test/golden/dialog/zinc-light-Axis.vertical-raw-dialog-content.png differ
diff --git a/forui/test/golden/dialog/zinc-light-Axis.vertical-text-dialog-content.png b/forui/test/golden/dialog/zinc-light-Axis.vertical-text-dialog-content.png
index 8a0c8c260..c3596ee8d 100644
Binary files a/forui/test/golden/dialog/zinc-light-Axis.vertical-text-dialog-content.png and b/forui/test/golden/dialog/zinc-light-Axis.vertical-text-dialog-content.png differ
diff --git a/forui/test/golden/header/zinc-dark-header.png b/forui/test/golden/header/zinc-dark-header.png
index a99ee2519..67d60b833 100644
Binary files a/forui/test/golden/header/zinc-dark-header.png and b/forui/test/golden/header/zinc-dark-header.png differ
diff --git a/forui/test/golden/header/zinc-dark-raw-title.png b/forui/test/golden/header/zinc-dark-raw-title.png
index 72dcab638..5aa4d358b 100644
Binary files a/forui/test/golden/header/zinc-dark-raw-title.png and b/forui/test/golden/header/zinc-dark-raw-title.png differ
diff --git a/forui/test/golden/header/zinc-light-header.png b/forui/test/golden/header/zinc-light-header.png
index eea9fcee0..58cf6863f 100644
Binary files a/forui/test/golden/header/zinc-light-header.png and b/forui/test/golden/header/zinc-light-header.png differ
diff --git a/forui/test/golden/header/zinc-light-raw-title.png b/forui/test/golden/header/zinc-light-raw-title.png
index 753eab311..70090d4bc 100644
Binary files a/forui/test/golden/header/zinc-light-raw-title.png and b/forui/test/golden/header/zinc-light-raw-title.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-focused-no-text.png b/forui/test/golden/text_field/default-zinc-dark-focused-no-text.png
index a0971e19b..df7216740 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-focused-no-text.png and b/forui/test/golden/text_field/default-zinc-dark-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-focused-raw-text.png b/forui/test/golden/text_field/default-zinc-dark-focused-raw-text.png
index a2e0127be..e1e23653e 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-focused-raw-text.png and b/forui/test/golden/text_field/default-zinc-dark-focused-raw-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-focused-text.png b/forui/test/golden/text_field/default-zinc-dark-focused-text.png
index 25faae303..a5a36d426 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-focused-text.png and b/forui/test/golden/text_field/default-zinc-dark-focused-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-unfocused-no-text.png b/forui/test/golden/text_field/default-zinc-dark-unfocused-no-text.png
index 8e7b13fa4..8719adb9f 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-unfocused-no-text.png and b/forui/test/golden/text_field/default-zinc-dark-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-unfocused-raw-text.png b/forui/test/golden/text_field/default-zinc-dark-unfocused-raw-text.png
index 7a1e46320..3c5610f57 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-unfocused-raw-text.png and b/forui/test/golden/text_field/default-zinc-dark-unfocused-raw-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-dark-unfocused-text.png b/forui/test/golden/text_field/default-zinc-dark-unfocused-text.png
index bad7d3367..65c2fb5b8 100644
Binary files a/forui/test/golden/text_field/default-zinc-dark-unfocused-text.png and b/forui/test/golden/text_field/default-zinc-dark-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-focused-no-text.png b/forui/test/golden/text_field/default-zinc-light-focused-no-text.png
index 22095100a..ca9e8f9db 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-focused-no-text.png and b/forui/test/golden/text_field/default-zinc-light-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-focused-raw-text.png b/forui/test/golden/text_field/default-zinc-light-focused-raw-text.png
index 95870e393..53d6e6956 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-focused-raw-text.png and b/forui/test/golden/text_field/default-zinc-light-focused-raw-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-focused-text.png b/forui/test/golden/text_field/default-zinc-light-focused-text.png
index 63b5fc75e..3f5153450 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-focused-text.png and b/forui/test/golden/text_field/default-zinc-light-focused-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-unfocused-no-text.png b/forui/test/golden/text_field/default-zinc-light-unfocused-no-text.png
index f8447c986..75e61a4b3 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-unfocused-no-text.png and b/forui/test/golden/text_field/default-zinc-light-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-unfocused-raw-text.png b/forui/test/golden/text_field/default-zinc-light-unfocused-raw-text.png
index c0a0eb39b..055e84d17 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-unfocused-raw-text.png and b/forui/test/golden/text_field/default-zinc-light-unfocused-raw-text.png differ
diff --git a/forui/test/golden/text_field/default-zinc-light-unfocused-text.png b/forui/test/golden/text_field/default-zinc-light-unfocused-text.png
index aa94e58e3..4285cb9c5 100644
Binary files a/forui/test/golden/text_field/default-zinc-light-unfocused-text.png and b/forui/test/golden/text_field/default-zinc-light-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-dark-focused-no-text.png b/forui/test/golden/text_field/email-zinc-dark-focused-no-text.png
index 414170fea..a8766fa44 100644
Binary files a/forui/test/golden/text_field/email-zinc-dark-focused-no-text.png and b/forui/test/golden/text_field/email-zinc-dark-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-dark-focused-text.png b/forui/test/golden/text_field/email-zinc-dark-focused-text.png
index c1b8e08bf..fe940ee26 100644
Binary files a/forui/test/golden/text_field/email-zinc-dark-focused-text.png and b/forui/test/golden/text_field/email-zinc-dark-focused-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-dark-unfocused-no-text.png b/forui/test/golden/text_field/email-zinc-dark-unfocused-no-text.png
index 45bb933c1..bc90b17fb 100644
Binary files a/forui/test/golden/text_field/email-zinc-dark-unfocused-no-text.png and b/forui/test/golden/text_field/email-zinc-dark-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-dark-unfocused-text.png b/forui/test/golden/text_field/email-zinc-dark-unfocused-text.png
index 2f646e22e..e534fcd91 100644
Binary files a/forui/test/golden/text_field/email-zinc-dark-unfocused-text.png and b/forui/test/golden/text_field/email-zinc-dark-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-light-focused-no-text.png b/forui/test/golden/text_field/email-zinc-light-focused-no-text.png
index b6f6a3cc2..a5326f8c4 100644
Binary files a/forui/test/golden/text_field/email-zinc-light-focused-no-text.png and b/forui/test/golden/text_field/email-zinc-light-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-light-focused-text.png b/forui/test/golden/text_field/email-zinc-light-focused-text.png
index 284dbc672..2d7206399 100644
Binary files a/forui/test/golden/text_field/email-zinc-light-focused-text.png and b/forui/test/golden/text_field/email-zinc-light-focused-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-light-unfocused-no-text.png b/forui/test/golden/text_field/email-zinc-light-unfocused-no-text.png
index 6e04cf61b..158e091a3 100644
Binary files a/forui/test/golden/text_field/email-zinc-light-unfocused-no-text.png and b/forui/test/golden/text_field/email-zinc-light-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/email-zinc-light-unfocused-text.png b/forui/test/golden/text_field/email-zinc-light-unfocused-text.png
index 5172c1229..cf22a7ed7 100644
Binary files a/forui/test/golden/text_field/email-zinc-light-unfocused-text.png and b/forui/test/golden/text_field/email-zinc-light-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-focused-no-text.png b/forui/test/golden/text_field/error-zinc-dark-focused-no-text.png
index f37078e31..719fb52b6 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-focused-no-text.png and b/forui/test/golden/text_field/error-zinc-dark-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-focused-raw-text.png b/forui/test/golden/text_field/error-zinc-dark-focused-raw-text.png
index 2dcc9ea3c..89e13da48 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-focused-raw-text.png and b/forui/test/golden/text_field/error-zinc-dark-focused-raw-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-focused-text.png b/forui/test/golden/text_field/error-zinc-dark-focused-text.png
index d850eab0e..c13339ece 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-focused-text.png and b/forui/test/golden/text_field/error-zinc-dark-focused-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-unfocused-no-text.png b/forui/test/golden/text_field/error-zinc-dark-unfocused-no-text.png
index 595def582..aa9dc5d10 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-unfocused-no-text.png and b/forui/test/golden/text_field/error-zinc-dark-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-unfocused-raw-text.png b/forui/test/golden/text_field/error-zinc-dark-unfocused-raw-text.png
index c8784e4c8..6d30d592e 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-unfocused-raw-text.png and b/forui/test/golden/text_field/error-zinc-dark-unfocused-raw-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-dark-unfocused-text.png b/forui/test/golden/text_field/error-zinc-dark-unfocused-text.png
index 92a1cb6e8..be449fc83 100644
Binary files a/forui/test/golden/text_field/error-zinc-dark-unfocused-text.png and b/forui/test/golden/text_field/error-zinc-dark-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-focused-no-text.png b/forui/test/golden/text_field/error-zinc-light-focused-no-text.png
index 61ec8378d..e717b0c76 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-focused-no-text.png and b/forui/test/golden/text_field/error-zinc-light-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-focused-raw-text.png b/forui/test/golden/text_field/error-zinc-light-focused-raw-text.png
index a5bb434a2..55d0d672c 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-focused-raw-text.png and b/forui/test/golden/text_field/error-zinc-light-focused-raw-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-focused-text.png b/forui/test/golden/text_field/error-zinc-light-focused-text.png
index 465cae999..dd90350bb 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-focused-text.png and b/forui/test/golden/text_field/error-zinc-light-focused-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-unfocused-no-text.png b/forui/test/golden/text_field/error-zinc-light-unfocused-no-text.png
index 83125d37f..46c86b8d1 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-unfocused-no-text.png and b/forui/test/golden/text_field/error-zinc-light-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-unfocused-raw-text.png b/forui/test/golden/text_field/error-zinc-light-unfocused-raw-text.png
index b0b0f3240..77ad0e4bc 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-unfocused-raw-text.png and b/forui/test/golden/text_field/error-zinc-light-unfocused-raw-text.png differ
diff --git a/forui/test/golden/text_field/error-zinc-light-unfocused-text.png b/forui/test/golden/text_field/error-zinc-light-unfocused-text.png
index b871a892d..74ed0f72c 100644
Binary files a/forui/test/golden/text_field/error-zinc-light-unfocused-text.png and b/forui/test/golden/text_field/error-zinc-light-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-dark-focused-no-text.png b/forui/test/golden/text_field/multiline-zinc-dark-focused-no-text.png
index 6c64bd7f5..8c53bf32f 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-dark-focused-no-text.png and b/forui/test/golden/text_field/multiline-zinc-dark-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-dark-focused-text.png b/forui/test/golden/text_field/multiline-zinc-dark-focused-text.png
index daa675dd7..17ece5b32 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-dark-focused-text.png and b/forui/test/golden/text_field/multiline-zinc-dark-focused-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-dark-unfocused-no-text.png b/forui/test/golden/text_field/multiline-zinc-dark-unfocused-no-text.png
index 1928d1fa4..2a5f35f50 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-dark-unfocused-no-text.png and b/forui/test/golden/text_field/multiline-zinc-dark-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-dark-unfocused-text.png b/forui/test/golden/text_field/multiline-zinc-dark-unfocused-text.png
index fa3b77738..8c2ff5842 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-dark-unfocused-text.png and b/forui/test/golden/text_field/multiline-zinc-dark-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-light-focused-no-text.png b/forui/test/golden/text_field/multiline-zinc-light-focused-no-text.png
index 1f9fcf650..52dccb3da 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-light-focused-no-text.png and b/forui/test/golden/text_field/multiline-zinc-light-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-light-focused-text.png b/forui/test/golden/text_field/multiline-zinc-light-focused-text.png
index 0f34bef89..884a834a1 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-light-focused-text.png and b/forui/test/golden/text_field/multiline-zinc-light-focused-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-light-unfocused-no-text.png b/forui/test/golden/text_field/multiline-zinc-light-unfocused-no-text.png
index 3ec65d60b..a696e5454 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-light-unfocused-no-text.png and b/forui/test/golden/text_field/multiline-zinc-light-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/multiline-zinc-light-unfocused-text.png b/forui/test/golden/text_field/multiline-zinc-light-unfocused-text.png
index 4c06afe80..db22901dc 100644
Binary files a/forui/test/golden/text_field/multiline-zinc-light-unfocused-text.png and b/forui/test/golden/text_field/multiline-zinc-light-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-dark-focused-no-text.png b/forui/test/golden/text_field/password-zinc-dark-focused-no-text.png
index db10bf479..a57679ba5 100644
Binary files a/forui/test/golden/text_field/password-zinc-dark-focused-no-text.png and b/forui/test/golden/text_field/password-zinc-dark-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-dark-focused-text.png b/forui/test/golden/text_field/password-zinc-dark-focused-text.png
index fe5196125..c20569ebd 100644
Binary files a/forui/test/golden/text_field/password-zinc-dark-focused-text.png and b/forui/test/golden/text_field/password-zinc-dark-focused-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-dark-unfocused-no-text.png b/forui/test/golden/text_field/password-zinc-dark-unfocused-no-text.png
index 9bf104208..edab691ec 100644
Binary files a/forui/test/golden/text_field/password-zinc-dark-unfocused-no-text.png and b/forui/test/golden/text_field/password-zinc-dark-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-dark-unfocused-text.png b/forui/test/golden/text_field/password-zinc-dark-unfocused-text.png
index 9f31ef685..145614a3f 100644
Binary files a/forui/test/golden/text_field/password-zinc-dark-unfocused-text.png and b/forui/test/golden/text_field/password-zinc-dark-unfocused-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-light-focused-no-text.png b/forui/test/golden/text_field/password-zinc-light-focused-no-text.png
index 74384304c..948c48fb2 100644
Binary files a/forui/test/golden/text_field/password-zinc-light-focused-no-text.png and b/forui/test/golden/text_field/password-zinc-light-focused-no-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-light-focused-text.png b/forui/test/golden/text_field/password-zinc-light-focused-text.png
index 30f3620f9..c1a8c6093 100644
Binary files a/forui/test/golden/text_field/password-zinc-light-focused-text.png and b/forui/test/golden/text_field/password-zinc-light-focused-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-light-unfocused-no-text.png b/forui/test/golden/text_field/password-zinc-light-unfocused-no-text.png
index ca5a86653..b12453454 100644
Binary files a/forui/test/golden/text_field/password-zinc-light-unfocused-no-text.png and b/forui/test/golden/text_field/password-zinc-light-unfocused-no-text.png differ
diff --git a/forui/test/golden/text_field/password-zinc-light-unfocused-text.png b/forui/test/golden/text_field/password-zinc-light-unfocused-text.png
index 9ea182b1e..37b7b43a8 100644
Binary files a/forui/test/golden/text_field/password-zinc-light-unfocused-text.png and b/forui/test/golden/text_field/password-zinc-light-unfocused-text.png differ
diff --git a/forui/test/src/theme/typoegraphy_test.dart b/forui/test/src/theme/typoegraphy_test.dart
deleted file mode 100644
index 0a84db1ae..000000000
--- a/forui/test/src/theme/typoegraphy_test.dart
+++ /dev/null
@@ -1,200 +0,0 @@
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:forui/forui.dart';
-
-void main() {
-  group('FTypography', () {
-    const typography = FTypography(
-      defaultFontFamily: 'Roboto',
-      sizeScalar: 2,
-      letterSpacingScalar: 3,
-      wordSpacingScalar: 4,
-      heightScalar: 5,
-    );
-
-    group('constructor', () {
-      test('no arguments', () {
-        const typography = FTypography();
-        expect(typography.defaultFontFamily, 'packages/forui/Inter');
-        expect(typography.sizeScalar, 1);
-        expect(typography.letterSpacingScalar, 1);
-        expect(typography.wordSpacingScalar, 1);
-        expect(typography.heightScalar, 1);
-      });
-
-      test('blank font family', () => expect(() => FTypography(defaultFontFamily: ''), throwsAssertionError));
-
-      test('sizeScalar is 0', () => expect(() => FTypography(sizeScalar: 0), throwsAssertionError));
-
-      test('sizeScalar is NaN', () => expect(() => FTypography(sizeScalar: double.nan), throwsAssertionError));
-
-      test('letterSpacingScalar is 0', () => expect(() => FTypography(letterSpacingScalar: 0), throwsAssertionError));
-
-      test('letterSpacingScalar is NaN',
-          () => expect(() => FTypography(letterSpacingScalar: double.nan), throwsAssertionError));
-
-      test('wordSpacingScalar is 0', () => expect(() => FTypography(wordSpacingScalar: 0), throwsAssertionError));
-
-      test('wordSpacingScalar is NaN', () => expect(() => FTypography(wordSpacingScalar: double.nan), throwsAssertionError));
-
-      test('heightScalar is 0', () => expect(() => FTypography(heightScalar: 0), throwsAssertionError));
-
-      test('heightScalar is NaN', () => expect(() => FTypography(heightScalar: double.nan), throwsAssertionError));
-    });
-
-    group('copyWith(...)', () {
-      test('no arguments', () {
-        typography.copyWith();
-
-        expect(typography.defaultFontFamily, 'Roboto');
-        expect(typography.sizeScalar, 2);
-        expect(typography.letterSpacingScalar, 3);
-        expect(typography.wordSpacingScalar, 4);
-        expect(typography.heightScalar, 5);
-      });
-
-      test('all arguments', () {
-        final typography = const FTypography().copyWith(
-          defaultFontFamily: 'Roboto',
-          sizeScalar: 2,
-          letterSpacingScalar: 3,
-          wordSpacingScalar: 4,
-          heightScalar: 5,
-        );
-
-        expect(typography.defaultFontFamily, 'Roboto');
-        expect(typography.sizeScalar, 2);
-        expect(typography.letterSpacingScalar, 3);
-        expect(typography.wordSpacingScalar, 4);
-        expect(typography.heightScalar, 5);
-      });
-    });
-
-    group('toTextStyle(...)', () {
-      test('no arguments', () {
-        final style = typography.toTextStyle();
-
-        expect(style.fontFamily, 'Roboto');
-        expect(style.fontSize, null);
-        expect(style.letterSpacing, null);
-        expect(style.wordSpacing, null);
-        expect(style.height, null);
-      });
-
-      test('scaled arguments', () {
-        final style = typography.toTextStyle(
-          fontSize: 7,
-          letterSpacing: 11,
-          wordSpacing: 13,
-          height: 17,
-        );
-
-        expect(style.fontFamily, 'Roboto');
-        expect(style.fontSize, 14);
-        expect(style.letterSpacing, 33);
-        expect(style.wordSpacing, 52);
-        expect(style.height, 85);
-      });
-
-      test('other arguments', () {
-        final style = typography.toTextStyle(
-          color: const Color(0xFF000000),
-        );
-
-        expect(style.color, const Color(0xFF000000));
-      });
-    });
-
-    test('debugFillProperties', () {
-      const font = FTypography(
-        defaultFontFamily: 'Roboto',
-        sizeScalar: 2,
-        letterSpacingScalar: 3,
-        wordSpacingScalar: 4,
-        heightScalar: 5,
-        xs: 6,
-        sm: 7,
-        base: 8,
-        lg: 9,
-        xl: 10,
-        xl2: 11,
-        xl3: 12,
-        xl4: 13,
-        xl5: 14,
-        xl6: 15,
-        xl7: 16,
-        xl8: 17,
-      );
-
-      final builder = DiagnosticPropertiesBuilder();
-      font.debugFillProperties(builder);
-
-      expect(
-          builder.properties.map((p) => p.toString()),
-          [
-            StringProperty('family', 'Roboto'),
-            DoubleProperty('sizeScalar', 2),
-            DoubleProperty('letterSpacingScalar', 3),
-            DoubleProperty('wordSpacingScalar', 4),
-            DoubleProperty('heightScalar', 5),
-            DoubleProperty('xs', 6),
-            DoubleProperty('sm', 7),
-            DoubleProperty('base', 8),
-            DoubleProperty('lg', 9),
-            DoubleProperty('xl', 10),
-            DoubleProperty('xl2', 11),
-            DoubleProperty('xl3', 12),
-            DoubleProperty('xl4', 13),
-            DoubleProperty('xl5', 14),
-            DoubleProperty('xl6', 15),
-            DoubleProperty('xl7', 16),
-            DoubleProperty('xl8', 17),
-          ].map((p) => p.toString()));
-    });
-
-    group('equality and hashcode', () {
-      test('equal', () {
-        final copy = typography.copyWith();
-        expect(copy, typography);
-        expect(copy.hashCode, typography.hashCode);
-      });
-
-      test('not equal', () {
-        final copy = typography.copyWith(defaultFontFamily: 'Else');
-        expect(copy, isNot(typography));
-        expect(copy.hashCode, isNot(typography.hashCode));
-      });
-    });
-  });
-
-  group('FontTextStyle', () {
-    const font = FTypography(
-      defaultFontFamily: 'Roboto',
-      sizeScalar: 2,
-      letterSpacingScalar: 3,
-      wordSpacingScalar: 4,
-      heightScalar: 5,
-    );
-
-    test('scale(...)', () {
-      final style = const TextStyle(
-        color: Colors.blueAccent,
-        fontFamily: 'default-font',
-        fontSize: 7,
-        letterSpacing: 11,
-        wordSpacing: 13,
-        height: 17,
-      ).scale(font);
-
-      expect(style.color, Colors.blueAccent);
-      expect(style.fontFamily, 'default-font');
-      expect(style.fontSize, 14);
-      expect(style.letterSpacing, 33);
-      expect(style.wordSpacing, 52);
-      expect(style.height, 85);
-    });
-  });
-}
diff --git a/forui/test/src/theme/typography_test.dart b/forui/test/src/theme/typography_test.dart
new file mode 100644
index 000000000..a878abe42
--- /dev/null
+++ b/forui/test/src/theme/typography_test.dart
@@ -0,0 +1,228 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_test/flutter_test.dart';
+
+import 'package:forui/forui.dart';
+
+void main() {
+  group('FTypography', () {
+    FTypography typography = const FTypography();
+
+    setUp(() {
+      typography = const FTypography(
+        defaultFontFamily: 'Roboto',
+        xs: TextStyle(fontSize: 1),
+        sm: TextStyle(fontSize: 2),
+        base: TextStyle(fontSize: 3),
+        lg: TextStyle(fontSize: 4),
+        xl: TextStyle(fontSize: 5),
+        xl2: TextStyle(fontSize: 6),
+        xl3: TextStyle(fontSize: 7),
+        xl4: TextStyle(fontSize: 8),
+        xl5: TextStyle(fontSize: 9),
+        xl6: TextStyle(fontSize: 10),
+        xl7: TextStyle(fontSize: 11),
+        xl8: TextStyle(fontSize: 12),
+      );
+    });
+
+    group('constructor', () {
+      test('no arguments', () {
+        const typography = FTypography();
+
+        expect(typography.defaultFontFamily, 'packages/forui/Inter');
+        expect(typography.xs, const TextStyle(fontSize: 12, height: 1));
+        expect(typography.sm, const TextStyle(fontSize: 14, height: 1.25));
+        expect(typography.base, const TextStyle(fontSize: 16, height: 1.5));
+        expect(typography.lg, const TextStyle(fontSize: 18, height: 1.75));
+        expect(typography.xl, const TextStyle(fontSize: 20, height: 1.75));
+        expect(typography.xl2, const TextStyle(fontSize: 22, height: 2));
+        expect(typography.xl3, const TextStyle(fontSize: 30, height: 2.25));
+        expect(typography.xl4, const TextStyle(fontSize: 36, height: 2.5));
+        expect(typography.xl5, const TextStyle(fontSize: 48, height: 1));
+        expect(typography.xl6, const TextStyle(fontSize: 60, height: 1));
+        expect(typography.xl7, const TextStyle(fontSize: 72, height: 1));
+        expect(typography.xl8, const TextStyle(fontSize: 96, height: 1));
+      });
+
+      test('blank font family', () => expect(() => FTypography(defaultFontFamily: ''), throwsAssertionError));
+    });
+
+    group('inherit constructor', () {
+      const colorScheme = FColorScheme(
+        brightness: Brightness.light,
+        background: Colors.black,
+        foreground: Colors.black12,
+        primary: Colors.black26,
+        primaryForeground: Colors.black38,
+        secondary: Colors.black45,
+        secondaryForeground: Colors.black54,
+        muted: Colors.black87,
+        mutedForeground: Colors.blue,
+        destructive: Colors.blueAccent,
+        destructiveForeground: Colors.blueGrey,
+        error: Colors.red,
+        errorForeground: Colors.redAccent,
+        border: Colors.lightBlue,
+      );
+
+      test('no arguments', () {
+        typography = FTypography.inherit(colorScheme: colorScheme);
+
+        expect(typography.defaultFontFamily, 'packages/forui/Inter');
+        expect(typography.xs, TextStyle(color: colorScheme.foreground, fontSize: 12, height: 1));
+        expect(typography.sm, TextStyle(color: colorScheme.foreground, fontSize: 14, height: 1.25));
+        expect(typography.base, TextStyle(color: colorScheme.foreground, fontSize: 16, height: 1.5));
+        expect(typography.lg, TextStyle(color: colorScheme.foreground, fontSize: 18, height: 1.75));
+        expect(typography.xl, TextStyle(color: colorScheme.foreground, fontSize: 20, height: 1.75));
+        expect(typography.xl2, TextStyle(color: colorScheme.foreground, fontSize: 22, height: 2));
+        expect(typography.xl3, TextStyle(color: colorScheme.foreground, fontSize: 30, height: 2.25));
+        expect(typography.xl4, TextStyle(color: colorScheme.foreground, fontSize: 36, height: 2.5));
+        expect(typography.xl5, TextStyle(color: colorScheme.foreground, fontSize: 48, height: 1));
+        expect(typography.xl6, TextStyle(color: colorScheme.foreground, fontSize: 60, height: 1));
+        expect(typography.xl7, TextStyle(color: colorScheme.foreground, fontSize: 72, height: 1));
+        expect(typography.xl8, TextStyle(color: colorScheme.foreground, fontSize: 96, height: 1));
+      });
+
+      test(
+        'blank font family',
+        () => expect(
+          () => FTypography.inherit(
+            colorScheme: colorScheme,
+            defaultFontFamily: '',
+          ),
+          throwsAssertionError,
+        ),
+      );
+    });
+
+    group('scale(...)', () {
+      test('no arguments', () {
+        typography = typography.scale();
+
+        expect(typography.defaultFontFamily, 'Roboto');
+        expect(typography.xs, const TextStyle(fontSize: 1));
+        expect(typography.sm, const TextStyle(fontSize: 2));
+        expect(typography.base, const TextStyle(fontSize: 3));
+        expect(typography.lg, const TextStyle(fontSize: 4));
+        expect(typography.xl, const TextStyle(fontSize: 5));
+        expect(typography.xl2, const TextStyle(fontSize: 6));
+        expect(typography.xl3, const TextStyle(fontSize: 7));
+        expect(typography.xl4, const TextStyle(fontSize: 8));
+        expect(typography.xl5, const TextStyle(fontSize: 9));
+        expect(typography.xl6, const TextStyle(fontSize: 10));
+        expect(typography.xl7, const TextStyle(fontSize: 11));
+        expect(typography.xl8, const TextStyle(fontSize: 12));
+      });
+
+      test('all arguments', () {
+        typography = typography.scale(sizeScalar: 10);
+
+        expect(typography.defaultFontFamily, 'Roboto');
+        expect(typography.xs, const TextStyle(fontSize: 10));
+        expect(typography.sm, const TextStyle(fontSize: 20));
+        expect(typography.base, const TextStyle(fontSize: 30));
+        expect(typography.lg, const TextStyle(fontSize: 40));
+        expect(typography.xl, const TextStyle(fontSize: 50));
+        expect(typography.xl2, const TextStyle(fontSize: 60));
+        expect(typography.xl3, const TextStyle(fontSize: 70));
+        expect(typography.xl4, const TextStyle(fontSize: 80));
+        expect(typography.xl5, const TextStyle(fontSize: 90));
+        expect(typography.xl6, const TextStyle(fontSize: 100));
+        expect(typography.xl7, const TextStyle(fontSize: 110));
+        expect(typography.xl8, const TextStyle(fontSize: 120));
+      });
+    });
+
+    group('copyWith(...)', () {
+      test('no arguments', () {
+        typography = const FTypography(defaultFontFamily: 'Roboto');
+        typography = typography.copyWith();
+
+        expect(typography.defaultFontFamily, 'Roboto');
+        expect(typography.xs, const TextStyle(fontSize: 12, height: 1));
+        expect(typography.sm, const TextStyle(fontSize: 14, height: 1.25));
+        expect(typography.base, const TextStyle(fontSize: 16, height: 1.5));
+        expect(typography.lg, const TextStyle(fontSize: 18, height: 1.75));
+        expect(typography.xl, const TextStyle(fontSize: 20, height: 1.75));
+        expect(typography.xl2, const TextStyle(fontSize: 22, height: 2));
+        expect(typography.xl3, const TextStyle(fontSize: 30, height: 2.25));
+        expect(typography.xl4, const TextStyle(fontSize: 36, height: 2.5));
+        expect(typography.xl5, const TextStyle(fontSize: 48, height: 1));
+        expect(typography.xl6, const TextStyle(fontSize: 60, height: 1));
+        expect(typography.xl7, const TextStyle(fontSize: 72, height: 1));
+        expect(typography.xl8, const TextStyle(fontSize: 96, height: 1));
+      });
+
+      test('all arguments', () {
+        final typography = const FTypography().copyWith(
+          defaultFontFamily: 'AnotherFont',
+          xs: const TextStyle(fontSize: 1),
+          sm: const TextStyle(fontSize: 2),
+          base: const TextStyle(fontSize: 3),
+          lg: const TextStyle(fontSize: 4),
+          xl: const TextStyle(fontSize: 5),
+          xl2: const TextStyle(fontSize: 6),
+          xl3: const TextStyle(fontSize: 7),
+          xl4: const TextStyle(fontSize: 8),
+          xl5: const TextStyle(fontSize: 9),
+          xl6: const TextStyle(fontSize: 10),
+          xl7: const TextStyle(fontSize: 11),
+          xl8: const TextStyle(fontSize: 12),
+        );
+
+        expect(typography.defaultFontFamily, 'AnotherFont');
+        expect(typography.xs, const TextStyle(fontSize: 1));
+        expect(typography.sm, const TextStyle(fontSize: 2));
+        expect(typography.base, const TextStyle(fontSize: 3));
+        expect(typography.lg, const TextStyle(fontSize: 4));
+        expect(typography.xl, const TextStyle(fontSize: 5));
+        expect(typography.xl2, const TextStyle(fontSize: 6));
+        expect(typography.xl3, const TextStyle(fontSize: 7));
+        expect(typography.xl4, const TextStyle(fontSize: 8));
+        expect(typography.xl5, const TextStyle(fontSize: 9));
+        expect(typography.xl6, const TextStyle(fontSize: 10));
+        expect(typography.xl7, const TextStyle(fontSize: 11));
+        expect(typography.xl8, const TextStyle(fontSize: 12));
+      });
+    });
+
+    test('debugFillProperties', () {
+      final builder = DiagnosticPropertiesBuilder();
+      typography.debugFillProperties(builder);
+
+      expect(
+          builder.properties.map((p) => p.toString()),
+          [
+            StringProperty('family', 'Roboto'),
+            DiagnosticsProperty('xs', const TextStyle(fontSize: 1)),
+            DiagnosticsProperty('sm', const TextStyle(fontSize: 2)),
+            DiagnosticsProperty('base', const TextStyle(fontSize: 3)),
+            DiagnosticsProperty('lg', const TextStyle(fontSize: 4)),
+            DiagnosticsProperty('xl', const TextStyle(fontSize: 5)),
+            DiagnosticsProperty('xl2', const TextStyle(fontSize: 6)),
+            DiagnosticsProperty('xl3', const TextStyle(fontSize: 7)),
+            DiagnosticsProperty('xl4', const TextStyle(fontSize: 8)),
+            DiagnosticsProperty('xl5', const TextStyle(fontSize: 9)),
+            DiagnosticsProperty('xl6', const TextStyle(fontSize: 10)),
+            DiagnosticsProperty('xl7', const TextStyle(fontSize: 11)),
+            DiagnosticsProperty('xl8', const TextStyle(fontSize: 12)),
+          ].map((p) => p.toString()));
+    });
+
+    group('equality and hashcode', () {
+      test('equal', () {
+        final copy = typography.copyWith();
+        expect(copy, typography);
+        expect(copy.hashCode, typography.hashCode);
+      });
+
+      test('not equal', () {
+        final copy = typography.copyWith(defaultFontFamily: 'Else');
+        expect(copy, isNot(typography));
+        expect(copy.hashCode, isNot(typography.hashCode));
+      });
+    });
+  });
+}
diff --git a/forui/test/src/widgets/text_field/flutter_test_config.dart b/forui/test/src/widgets/text_field/flutter_test_config.dart
index 69418f0ba..dc2942590 100644
--- a/forui/test/src/widgets/text_field/flutter_test_config.dart
+++ b/forui/test/src/widgets/text_field/flutter_test_config.dart
@@ -2,7 +2,7 @@ import 'dart:async';
 
 import '../../flutter_test_config.dart';
 
-const _kGoldenTestsThreshold = 4 / 100;
+const _kGoldenTestsThreshold = 5 / 100;
 
 Future<void> testExecutable(FutureOr<void> Function() testMain) async {
   await configureGoldenTests(_kGoldenTestsThreshold);
diff --git a/samples/lib/widgets/separator.dart b/samples/lib/widgets/separator.dart
index 7b15edb79..5f9960612 100644
--- a/samples/lib/widgets/separator.dart
+++ b/samples/lib/widgets/separator.dart
@@ -25,10 +25,9 @@ class SeparatorPage extends SampleScaffold {
         children: [
           Text(
             'Forui',
-            style: TextStyle(
-              fontSize: typography.base,
-              fontWeight: FontWeight.w600,
+            style: typography.base.copyWith(
               color: colorScheme.foreground,
+              fontWeight: FontWeight.w600,
             ),
           ),
           const FSeparator(),
@@ -36,25 +35,23 @@ class SeparatorPage extends SampleScaffold {
             children: [
               Text(
                 'Forui',
-                style: TextStyle(
-                  fontSize: typography.base,
-                  fontWeight: FontWeight.w600,
+                style: typography.base.copyWith(
                   color: colorScheme.foreground,
+                  fontWeight: FontWeight.w600,
                 ),
               ),
               const FSeparator(vertical: true),
               Text(
                 'Forui',
-                style: TextStyle(
-                  fontSize: typography.base,
-                  fontWeight: FontWeight.w600,
+                style: typography.base.copyWith(
                   color: colorScheme.foreground,
+                  fontWeight: FontWeight.w600,
                 ),
               ),
             ],
           ),
         ],
-        ),
+      ),
     );
   }
 }