diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 65bd4d26..c58f8ab5 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -24,7 +24,7 @@ jobs:
         - uses: ZebraDevs/flutter-code-quality@main
           with:
             token: ${{secrets.GITHUB_TOKEN}}  
-            coverage-pass-score: '1'
+            coverage-pass-score: '90'
             
             
   check-secret:
diff --git a/LICENSE-3RD-PARTY b/LICENSE-3RD-PARTY
index 25659cf2..cee51f99 100644
--- a/LICENSE-3RD-PARTY
+++ b/LICENSE-3RD-PARTY
@@ -2,7 +2,7 @@
 
 ---
 
-### Flutter
+## Flutter
 
 Applies to:
 
@@ -37,7 +37,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 ---
 
-### tinycolor
+## tinycolor
 
 Applies to:
 
@@ -53,7 +53,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 
 ---
 
-### IBM Plex Sans
+## IBM Plex Sans
 
 Applies to:
 
@@ -67,7 +67,7 @@ This Font Software is licensed under the SIL Open Font License, Version 1.1.
 
 This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
 
-## SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+### SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
 
 PREAMBLE
 The goals of the Open Font License (OFL) are to stimulate worldwide
@@ -151,3 +151,37 @@ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
 DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
 OTHER DEALINGS IN THE FONT SOFTWARE.
+
+
+
+## Mike Rydstrom
+
+Applies to:
+
+* platform_is.dart
+* universal_platform_vm.dart
+* universal_platform_web.dart
+
+https://gist.github.com/rydmike/1771fe24c050ebfe792fa309371154d8
+
+MIT License
+
+Copyright (c) 2021 Mike Rydstrom
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/example/lib/home.dart b/example/lib/home.dart
index 134ee502..72fbbd44 100644
--- a/example/lib/home.dart
+++ b/example/lib/home.dart
@@ -161,30 +161,40 @@ class _HomeState extends State<Home> {
       child: SingleChildScrollView(
         child: Column(
           children: [
-            ExpansionTile(
-              title: Text('Widgets'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _components
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
-            ExpansionTile(
-              title: Text('Theme'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _theme
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
-            ExpansionTile(
-              title: Text('Assets'),
-              backgroundColor: Zeta.of(context).colors.warm.shade30,
-              children: _assets
-                  .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}')))
-                  .toList(),
-            ),
+            ExampleListTile(name: 'Components', children: _components),
+            ExampleListTile(name: 'Theme', children: _theme),
+            ExampleListTile(name: 'Assets', children: _assets),
           ],
         ),
       ),
     );
   }
 }
+
+class ExampleListTile extends StatelessWidget {
+  const ExampleListTile({
+    super.key,
+    required this.children,
+    required this.name,
+  });
+
+  final List<Component> children;
+  final String name;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExpansionTile(
+      title: Text(name),
+      children: children
+          .map(
+            (item) => ListTile(
+              title: Text(item.name),
+              onTap: () => context.go('/${item.name}'),
+              hoverColor: Zeta.of(context).colors.surfaceHover,
+              tileColor: Zeta.of(context).colors.surfaceDefault,
+            ),
+          )
+          .toList(),
+    );
+  }
+}
diff --git a/example/lib/pages/theme/spacing_example.dart b/example/lib/pages/theme/spacing_example.dart
index 6ab0e78d..4be2cb92 100644
--- a/example/lib/pages/theme/spacing_example.dart
+++ b/example/lib/pages/theme/spacing_example.dart
@@ -16,33 +16,33 @@ class SpacingExample extends StatelessWidget {
       'medium': Zeta.of(context).spacing.medium,
       'large': Zeta.of(context).spacing.large,
       'xl': Zeta.of(context).spacing.xl,
-      '2xl': Zeta.of(context).spacing.xl_2,
-      '3xl': Zeta.of(context).spacing.xl_3,
-      '4xl': Zeta.of(context).spacing.xl_4,
-      '5xl': Zeta.of(context).spacing.xl_5,
-      '6xl': Zeta.of(context).spacing.xl_6,
-      '7xl': Zeta.of(context).spacing.xl_7,
-      '8xl': Zeta.of(context).spacing.xl_8,
-      '9xl': Zeta.of(context).spacing.xl_9,
-      '10xl': Zeta.of(context).spacing.xl_10,
-      '11xl': Zeta.of(context).spacing.xl_11,
+      'xl_2': Zeta.of(context).spacing.xl_2,
+      'xl_3': Zeta.of(context).spacing.xl_3,
+      'xl_4': Zeta.of(context).spacing.xl_4,
+      'xl_5': Zeta.of(context).spacing.xl_5,
+      'xl_6': Zeta.of(context).spacing.xl_6,
+      'xl_7': Zeta.of(context).spacing.xl_7,
+      'xl_8': Zeta.of(context).spacing.xl_8,
+      'xl_9': Zeta.of(context).spacing.xl_9,
+      'xl_10': Zeta.of(context).spacing.xl_10,
+      'xl_11': Zeta.of(context).spacing.xl_11,
     };
     Map<String, double> baseSpacings = {
-      'x1': Zeta.of(context).spacing.primitives.x1,
-      'x2': Zeta.of(context).spacing.primitives.x2,
-      'x3': Zeta.of(context).spacing.primitives.x3,
-      'x4': Zeta.of(context).spacing.primitives.x4,
-      'x5': Zeta.of(context).spacing.primitives.x5,
-      'x6': Zeta.of(context).spacing.primitives.x6,
-      'x7': Zeta.of(context).spacing.primitives.x7,
-      'x8': Zeta.of(context).spacing.primitives.x8,
-      'x9': Zeta.of(context).spacing.primitives.x9,
-      'x10': Zeta.of(context).spacing.primitives.x10,
-      'x11': Zeta.of(context).spacing.primitives.x11,
-      'x12': Zeta.of(context).spacing.primitives.x12,
-      'x13': Zeta.of(context).spacing.primitives.x13,
-      'x14': Zeta.of(context).spacing.primitives.x14,
-      'x15': Zeta.of(context).spacing.primitives.x15,
+      'primitives.x1': Zeta.of(context).spacing.primitives.x1,
+      'primitives.x2': Zeta.of(context).spacing.primitives.x2,
+      'primitives.x3': Zeta.of(context).spacing.primitives.x3,
+      'primitives.x4': Zeta.of(context).spacing.primitives.x4,
+      'primitives.x5': Zeta.of(context).spacing.primitives.x5,
+      'primitives.x6': Zeta.of(context).spacing.primitives.x6,
+      'primitives.x7': Zeta.of(context).spacing.primitives.x7,
+      'primitives.x8': Zeta.of(context).spacing.primitives.x8,
+      'primitives.x9': Zeta.of(context).spacing.primitives.x9,
+      'primitives.x10': Zeta.of(context).spacing.primitives.x10,
+      'primitives.x11': Zeta.of(context).spacing.primitives.x11,
+      'primitives.x12': Zeta.of(context).spacing.primitives.x12,
+      'primitives.x13': Zeta.of(context).spacing.primitives.x13,
+      'primitives.x14': Zeta.of(context).spacing.primitives.x14,
+      'primitives.x15': Zeta.of(context).spacing.primitives.x15,
     };
 
     return ExampleScaffold(
@@ -55,12 +55,12 @@ class SpacingExample extends StatelessWidget {
             children: [
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
-                children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+                children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
               ),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
-                children: semanticSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
-              )
+                children: baseSpacings.entries.map((obj) => _SpacingDemo(obj)).toList(),
+              ),
             ],
           ),
         ),
diff --git a/example/widgetbook/pages/assets/icon_widgetbook.dart b/example/widgetbook/pages/assets/icon_widgetbook.dart
index e746f90d..81c2ad68 100644
--- a/example/widgetbook/pages/assets/icon_widgetbook.dart
+++ b/example/widgetbook/pages/assets/icon_widgetbook.dart
@@ -51,7 +51,7 @@ Widget iconsUseCase(BuildContext context) {
                             nameArr,
                             textAlign: TextAlign.center,
                             maxLines: 2,
-                          )
+                          ),
                         ],
                       ),
                     ),
diff --git a/example/widgetbook/pages/introduction.dart b/example/widgetbook/pages/introduction.dart
index 3cfe397f..24f553f3 100644
--- a/example/widgetbook/pages/introduction.dart
+++ b/example/widgetbook/pages/introduction.dart
@@ -32,7 +32,7 @@ class _IntroductionWidgetbookState extends State<IntroductionWidgetbook> {
     return LayoutBuilder(builder: (context, constraints) {
       final bool largeScreen = constraints.maxWidth > 480;
       return Scaffold(
-        backgroundColor: colors.black,
+        backgroundColor: Colors.black,
         body: SingleChildScrollView(
           child: Padding(
             padding: EdgeInsets.symmetric(
diff --git a/lib/generated/tokens/semantics.g.dart b/lib/generated/tokens/semantics.g.dart
index 8498e081..14e9f0a0 100644
--- a/lib/generated/tokens/semantics.g.dart
+++ b/lib/generated/tokens/semantics.g.dart
@@ -4,367 +4,250 @@ import 'primitives.g.dart';
 // This file is automatically generated by the zeta repository
 // DO NOT MODIFY
 
-/// The semantic tokens for
+/// Semantic tokens for Colors.
 abstract interface class ZetaSemanticColors {
-  /// The primitives for the colors
+  /// Primitives used to construct semantic colors
   ZetaPrimitives get primitives;
 
-  /// Border
-  ZetaSemanticBorderColors get border;
+  /// Main Default color
+  Color get mainDefault;
 
-  /// Main
-  ZetaSemanticMainColors get main;
+  /// Main Subtle color
+  Color get mainSubtle;
 
-  /// State
-  ZetaSemanticStateColors get state;
+  /// Main Primary color
+  Color get mainPrimary;
 
-  /// Surface
-  ZetaSemanticSurfaceColors get surface;
-}
-
-/// The semantic tokens for Border
-abstract interface class ZetaSemanticBorderColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
-
-  /// Default Color
-  Color get defaultColor;
-
-  /// Disabled
-  Color get disabled;
-
-  /// Hover
-  Color get hover;
-
-  /// Info
-  Color get info;
-
-  /// Negative
-  Color get negative;
-
-  /// Positive
-  Color get positive;
+  /// Main Secondary color
+  Color get mainSecondary;
 
-  /// Primary
-  Color get primary;
+  /// Main Positive color
+  Color get mainPositive;
 
-  /// Primary Main
-  Color get primaryMain;
-
-  /// Pure
-  Color get pure;
-
-  /// Secondary
-  Color get secondary;
-
-  /// Selected
-  Color get selected;
-
-  /// Subtle
-  Color get subtle;
-
-  /// Warning
-  Color get warning;
-}
-
-/// The semantic tokens for Main
-abstract interface class ZetaSemanticMainColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Main Warning color
+  Color get mainWarning;
 
-  /// Default Color
-  Color get defaultColor;
+  /// Main Negative color
+  Color get mainNegative;
 
-  /// Disabled
-  Color get disabled;
+  /// Main Info color
+  Color get mainInfo;
 
-  /// Info
-  Color get info;
+  /// Main Disabled color
+  Color get mainDisabled;
 
-  /// Inverse
-  Color get inverse;
+  /// Main Light color
+  Color get mainLight;
 
-  /// Light
-  Color get light;
+  /// Main Inverse color
+  Color get mainInverse;
 
-  /// Negative
-  Color get negative;
+  /// Border Default color
+  Color get borderDefault;
 
-  /// Positive
-  Color get positive;
-
-  /// Primary
-  Color get primary;
-
-  /// Secondary
-  Color get secondary;
-
-  /// Subtle
-  Color get subtle;
-
-  /// Warning
-  Color get warning;
-}
-
-/// The semantic tokens for State
-abstract interface class ZetaSemanticStateColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
-
-  ///  Inverse
-  ZetaSemanticInverseColors get inverse;
-
-  /// Default
-  ZetaSemanticDefaultColors get defaultColor;
-
-  /// Disabled
-  ZetaSemanticDisabledColors get disabled;
-
-  /// Info
-  ZetaSemanticInfoColors get info;
-
-  /// Negative
-  ZetaSemanticNegativeColors get negative;
-
-  /// Positive
-  ZetaSemanticPositiveColors get positive;
-
-  /// Primary
-  ZetaSemanticPrimaryColors get primary;
-
-  /// Secondary
-  ZetaSemanticSecondaryColors get secondary;
-}
+  /// Border Selected color
+  Color get borderSelected;
 
-/// The semantic tokens for Inverse
-abstract interface class ZetaSemanticInverseColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Border Hover color
+  Color get borderHover;
 
-  /// Enabled
-  Color get enabled;
+  /// Border Subtle color
+  Color get borderSubtle;
 
-  /// Focus
-  Color get focus;
+  /// Border Disabled color
+  Color get borderDisabled;
 
-  /// Hover
-  Color get hover;
+  /// Border Pure color
+  Color get borderPure;
 
-  /// Selected
-  Color get selected;
-}
+  /// Border Primary Main color
+  Color get borderPrimaryMain;
 
-/// The semantic tokens for Default
-abstract interface class ZetaSemanticDefaultColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Border Primary color
+  Color get borderPrimary;
 
-  /// Enabled
-  Color get enabled;
+  /// Border Secondary color
+  Color get borderSecondary;
 
-  /// Focus
-  Color get focus;
+  /// Border Positive color
+  Color get borderPositive;
 
-  /// Hover
-  Color get hover;
+  /// Border Warning color
+  Color get borderWarning;
 
-  /// Selected
-  Color get selected;
-}
+  /// Border Negative color
+  Color get borderNegative;
 
-/// The semantic tokens for Disabled
-abstract interface class ZetaSemanticDisabledColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Border Info color
+  Color get borderInfo;
 
-  /// Disabled
-  Color get disabled;
-}
+  /// Surface Default color
+  Color get surfaceDefault;
 
-/// The semantic tokens for Info
-abstract interface class ZetaSemanticInfoColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Default Inverse color
+  Color get surfaceDefaultInverse;
 
-  /// Enabled
-  Color get enabled;
+  /// Surface Hover color
+  Color get surfaceHover;
 
-  /// Focus
-  Color get focus;
+  /// Surface Selected color
+  Color get surfaceSelected;
 
-  /// Hover
-  Color get hover;
+  /// Surface Selected Hover color
+  Color get surfaceSelectedHover;
 
-  /// Selected
-  Color get selected;
-}
+  /// Surface Disabled color
+  Color get surfaceDisabled;
 
-/// The semantic tokens for Negative
-abstract interface class ZetaSemanticNegativeColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Cool color
+  Color get surfaceCool;
 
-  /// Enabled
-  Color get enabled;
+  /// Surface Warm color
+  Color get surfaceWarm;
 
-  /// Focus
-  Color get focus;
+  /// Surface Primary color
+  Color get surfacePrimary;
 
-  /// Hover
-  Color get hover;
+  /// Surface Primary Subtle color
+  Color get surfacePrimarySubtle;
 
-  /// Selected
-  Color get selected;
-}
+  /// Surface Secondary color
+  Color get surfaceSecondary;
 
-/// The semantic tokens for Positive
-abstract interface class ZetaSemanticPositiveColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Avatar Blue color
+  Color get surfaceAvatarBlue;
 
-  /// Enabled
-  Color get enabled;
+  /// Surface Avatar Green color
+  Color get surfaceAvatarGreen;
 
-  /// Focus
-  Color get focus;
+  /// Surface Avatar Orange color
+  Color get surfaceAvatarOrange;
 
-  /// Hover
-  Color get hover;
+  /// Surface Avatar Pink color
+  Color get surfaceAvatarPink;
 
-  /// Selected
-  Color get selected;
-}
+  /// Surface Avatar Purple color
+  Color get surfaceAvatarPurple;
 
-/// The semantic tokens for Primary
-abstract interface class ZetaSemanticPrimaryColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Avatar Teal color
+  Color get surfaceAvatarTeal;
 
-  /// Enabled
-  Color get enabled;
+  /// Surface Avatar Yellow color
+  Color get surfaceAvatarYellow;
 
-  /// Focus
-  Color get focus;
+  /// Surface Secondary Subtle color
+  Color get surfaceSecondarySubtle;
 
-  /// Hover
-  Color get hover;
+  /// Surface Positive color
+  Color get surfacePositive;
 
-  /// Selected
-  Color get selected;
-}
+  /// Surface Positive Subtle color
+  Color get surfacePositiveSubtle;
 
-/// The semantic tokens for Secondary
-abstract interface class ZetaSemanticSecondaryColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Warning color
+  Color get surfaceWarning;
 
-  /// Enabled
-  Color get enabled;
+  /// Surface Warning Subtle color
+  Color get surfaceWarningSubtle;
 
-  /// Focus
-  Color get focus;
+  /// Surface Negative color
+  Color get surfaceNegative;
 
-  /// Hover
-  Color get hover;
+  /// Surface Negative Subtle color
+  Color get surfaceNegativeSubtle;
 
-  /// Selected
-  Color get selected;
-}
+  /// Surface Info color
+  Color get surfaceInfo;
 
-/// The semantic tokens for Surface
-abstract interface class ZetaSemanticSurfaceColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// Surface Info Subtle color
+  Color get surfaceInfoSubtle;
 
-  /// Avatar
-  ZetaSemanticAvatarColors get avatar;
+  /// State Disabled Disabled color
+  Color get stateDisabledDisabled;
 
-  /// Cool
-  Color get cool;
+  /// State Default Enabled color
+  Color get stateDefaultEnabled;
 
-  /// Default Color
-  Color get defaultColor;
+  /// State Default Hover color
+  Color get stateDefaultHover;
 
-  /// Default Inverse
-  Color get defaultInverse;
+  /// State Default Selected color
+  Color get stateDefaultSelected;
 
-  /// Disabled
-  Color get disabled;
+  /// State Default Focus color
+  Color get stateDefaultFocus;
 
-  /// Hover
-  Color get hover;
+  /// State Primary Enabled color
+  Color get statePrimaryEnabled;
 
-  /// Info
-  Color get info;
+  /// State Primary Hover color
+  Color get statePrimaryHover;
 
-  /// Info Subtle
-  Color get infoSubtle;
+  /// State Primary Selected color
+  Color get statePrimarySelected;
 
-  /// Negative
-  Color get negative;
+  /// State Primary Focus color
+  Color get statePrimaryFocus;
 
-  /// Negative Subtle
-  Color get negativeSubtle;
+  /// State Secondary Enabled color
+  Color get stateSecondaryEnabled;
 
-  /// Positive
-  Color get positive;
+  /// State Secondary Hover color
+  Color get stateSecondaryHover;
 
-  /// Positive Subtle
-  Color get positiveSubtle;
+  /// State Secondary Selected color
+  Color get stateSecondarySelected;
 
-  /// Primary
-  Color get primary;
+  /// State Secondary Focus color
+  Color get stateSecondaryFocus;
 
-  /// Primary Subtle
-  Color get primarySubtle;
+  /// State Negative Enabled color
+  Color get stateNegativeEnabled;
 
-  /// Secondary
-  Color get secondary;
+  /// State Negative Hover color
+  Color get stateNegativeHover;
 
-  /// Secondary Subtle
-  Color get secondarySubtle;
+  /// State Negative Selected color
+  Color get stateNegativeSelected;
 
-  /// Selected
-  Color get selected;
+  /// State Negative Focus color
+  Color get stateNegativeFocus;
 
-  /// Selected Hover
-  Color get selectedHover;
+  /// State Info Enabled color
+  Color get stateInfoEnabled;
 
-  /// Warm
-  Color get warm;
+  /// State Info Hover color
+  Color get stateInfoHover;
 
-  /// Warning
-  Color get warning;
+  /// State Info Selected color
+  Color get stateInfoSelected;
 
-  /// Warning Subtle
-  Color get warningSubtle;
-}
+  /// State Info Focus color
+  Color get stateInfoFocus;
 
-/// The semantic tokens for Avatar
-abstract interface class ZetaSemanticAvatarColors {
-  /// The primitives for the colors
-  ZetaPrimitives get primitives;
+  /// State Inverse Enabled color
+  Color get stateInverseEnabled;
 
-  /// Blue
-  Color get blue;
+  /// State Inverse Hover color
+  Color get stateInverseHover;
 
-  /// Green
-  Color get green;
+  /// State Inverse Selected color
+  Color get stateInverseSelected;
 
-  /// Orange
-  Color get orange;
+  /// State Inverse Focus color
+  Color get stateInverseFocus;
 
-  /// Pink
-  Color get pink;
+  /// State Positive Enabled color
+  Color get statePositiveEnabled;
 
-  /// Purple
-  Color get purple;
+  /// State Positive Hover color
+  Color get statePositiveHover;
 
-  /// Teal
-  Color get teal;
+  /// State Positive Selected color
+  Color get statePositiveSelected;
 
-  /// Yellow
-  Color get yellow;
+  /// State Positive Focus color
+  Color get statePositiveFocus;
 }
 
 /// Semantic tokens for Size.
@@ -445,708 +328,340 @@ abstract interface class ZetaRadiiSemantics {
   BorderRadius get full;
 }
 
-/// Implementation of ZetaSemanticColors
-final class ZetaSemanticColorsAA implements ZetaSemanticColors {
+/// The semantic colors for AA
+class ZetaSemanticColorsAA implements ZetaSemanticColors {
   /// Constructor for ZetaSemanticColorsAA
   const ZetaSemanticColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
-  @override
-  final ZetaPrimitives primitives;
-
-  /// Border
-  @override
-  ZetaSemanticBorderColors get border => ZetaSemanticBorderColorsAA(primitives: primitives);
-
-  /// Main
-  @override
-  ZetaSemanticMainColors get main => ZetaSemanticMainColorsAA(primitives: primitives);
-
-  /// State
-  @override
-  ZetaSemanticStateColors get state => ZetaSemanticStateColorsAA(primitives: primitives);
-
-  /// Surface
-  @override
-  ZetaSemanticSurfaceColors get surface => ZetaSemanticSurfaceColorsAA(primitives: primitives);
-}
-
-/// Implementation of ZetaSemanticBorderColors
-final class ZetaSemanticBorderColorsAA implements ZetaSemanticBorderColors {
-  /// Constructor for ZetaSemanticBorderColorsAA
-  const ZetaSemanticBorderColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
   @override
   final ZetaPrimitives primitives;
   @override
-  Color get defaultColor => primitives.cool.shade40;
-  @override
-  Color get disabled => primitives.cool.shade20;
-  @override
-  Color get hover => primitives.cool.shade90;
-  @override
-  Color get info => primitives.purple.shade50;
-  @override
-  Color get negative => primitives.red.shade50;
-  @override
-  Color get positive => primitives.green.shade50;
-  @override
-  Color get primary => primitives.blue.shade50;
-  @override
-  Color get primaryMain => primitives.blue.shade60;
+  Color get mainDefault => primitives.cool.shade90;
   @override
-  Color get pure => primitives.pure.shade0;
+  Color get mainSubtle => primitives.cool.shade70;
   @override
-  Color get secondary => primitives.yellow.shade50;
+  Color get mainPrimary => primitives.blue.shade60;
   @override
-  Color get selected => primitives.cool.shade90;
-  @override
-  Color get subtle => primitives.cool.shade30;
-  @override
-  Color get warning => primitives.orange.shade50;
-}
-
-/// Implementation of ZetaSemanticMainColors
-final class ZetaSemanticMainColorsAA implements ZetaSemanticMainColors {
-  /// Constructor for ZetaSemanticMainColorsAA
-  const ZetaSemanticMainColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
-  @override
-  final ZetaPrimitives primitives;
+  Color get mainSecondary => primitives.yellow.shade60;
   @override
-  Color get defaultColor => primitives.cool.shade90;
-  @override
-  Color get disabled => primitives.cool.shade50;
-  @override
-  Color get info => primitives.purple.shade60;
-  @override
-  Color get inverse => primitives.cool.shade20;
-  @override
-  Color get light => primitives.cool.shade30;
-  @override
-  Color get negative => primitives.red.shade60;
-  @override
-  Color get positive => primitives.green.shade60;
-  @override
-  Color get primary => primitives.blue.shade60;
-  @override
-  Color get secondary => primitives.yellow.shade60;
-  @override
-  Color get subtle => primitives.cool.shade70;
-  @override
-  Color get warning => primitives.orange.shade60;
-}
-
-/// Implementation of ZetaSemanticStateColors
-final class ZetaSemanticStateColorsAA implements ZetaSemanticStateColors {
-  /// Constructor for ZetaSemanticStateColorsAA
-  const ZetaSemanticStateColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
-  @override
-  final ZetaPrimitives primitives;
-
-  ///  Inverse
+  Color get mainPositive => primitives.green.shade60;
   @override
-  ZetaSemanticInverseColors get inverse => ZetaSemanticInverseColorsAA(primitives: primitives);
-
-  /// Default
+  Color get mainWarning => primitives.orange.shade60;
   @override
-  ZetaSemanticDefaultColors get defaultColor => ZetaSemanticDefaultColorsAA(primitives: primitives);
-
-  /// Disabled
+  Color get mainNegative => primitives.red.shade60;
   @override
-  ZetaSemanticDisabledColors get disabled => ZetaSemanticDisabledColorsAA(primitives: primitives);
-
-  /// Info
+  Color get mainInfo => primitives.purple.shade60;
   @override
-  ZetaSemanticInfoColors get info => ZetaSemanticInfoColorsAA(primitives: primitives);
-
-  /// Negative
+  Color get mainDisabled => primitives.cool.shade50;
   @override
-  ZetaSemanticNegativeColors get negative => ZetaSemanticNegativeColorsAA(primitives: primitives);
-
-  /// Positive
+  Color get mainLight => primitives.cool.shade30;
   @override
-  ZetaSemanticPositiveColors get positive => ZetaSemanticPositiveColorsAA(primitives: primitives);
-
-  /// Primary
+  Color get mainInverse => primitives.cool.shade20;
   @override
-  ZetaSemanticPrimaryColors get primary => ZetaSemanticPrimaryColorsAA(primitives: primitives);
-
-  /// Secondary
+  Color get borderDefault => primitives.cool.shade40;
   @override
-  ZetaSemanticSecondaryColors get secondary => ZetaSemanticSecondaryColorsAA(primitives: primitives);
-}
-
-/// Implementation of ZetaSemanticInverseColors
-final class ZetaSemanticInverseColorsAA implements ZetaSemanticInverseColors {
-  /// Constructor for ZetaSemanticInverseColorsAA
-  const ZetaSemanticInverseColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderSelected => primitives.cool.shade90;
   @override
-  final ZetaPrimitives primitives;
+  Color get borderHover => primitives.cool.shade90;
   @override
-  Color get enabled => primitives.cool.shade100;
+  Color get borderSubtle => primitives.cool.shade30;
   @override
-  Color get focus => primitives.cool.shade100;
+  Color get borderDisabled => primitives.cool.shade20;
   @override
-  Color get hover => primitives.cool.shade90;
+  Color get borderPure => primitives.pure.shade0;
   @override
-  Color get selected => primitives.cool.shade100;
-}
-
-/// Implementation of ZetaSemanticDefaultColors
-final class ZetaSemanticDefaultColorsAA implements ZetaSemanticDefaultColors {
-  /// Constructor for ZetaSemanticDefaultColorsAA
-  const ZetaSemanticDefaultColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderPrimaryMain => primitives.blue.shade60;
   @override
-  final ZetaPrimitives primitives;
+  Color get borderPrimary => primitives.blue.shade50;
   @override
-  Color get enabled => primitives.pure.shade0;
+  Color get borderSecondary => primitives.yellow.shade50;
   @override
-  Color get focus => primitives.pure.shade0;
+  Color get borderPositive => primitives.green.shade50;
   @override
-  Color get hover => primitives.cool.shade20;
+  Color get borderWarning => primitives.orange.shade50;
   @override
-  Color get selected => primitives.blue.shade10;
-}
-
-/// Implementation of ZetaSemanticDisabledColors
-final class ZetaSemanticDisabledColorsAA implements ZetaSemanticDisabledColors {
-  /// Constructor for ZetaSemanticDisabledColorsAA
-  const ZetaSemanticDisabledColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderNegative => primitives.red.shade50;
   @override
-  final ZetaPrimitives primitives;
+  Color get borderInfo => primitives.purple.shade50;
   @override
-  Color get disabled => primitives.cool.shade30;
-}
-
-/// Implementation of ZetaSemanticInfoColors
-final class ZetaSemanticInfoColorsAA implements ZetaSemanticInfoColors {
-  /// Constructor for ZetaSemanticInfoColorsAA
-  const ZetaSemanticInfoColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceDefault => primitives.pure.shade0;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceDefaultInverse => primitives.warm.shade100;
   @override
-  Color get enabled => primitives.purple.shade60;
+  Color get surfaceHover => primitives.cool.shade20;
   @override
-  Color get focus => primitives.purple.shade60;
+  Color get surfaceSelected => primitives.blue.shade10;
   @override
-  Color get hover => primitives.purple.shade50;
+  Color get surfaceSelectedHover => primitives.blue.shade20;
   @override
-  Color get selected => primitives.purple.shade70;
-}
-
-/// Implementation of ZetaSemanticNegativeColors
-final class ZetaSemanticNegativeColorsAA implements ZetaSemanticNegativeColors {
-  /// Constructor for ZetaSemanticNegativeColorsAA
-  const ZetaSemanticNegativeColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceDisabled => primitives.cool.shade30;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceCool => primitives.cool.shade10;
   @override
-  Color get enabled => primitives.red.shade60;
+  Color get surfaceWarm => primitives.warm.shade10;
   @override
-  Color get focus => primitives.red.shade60;
+  Color get surfacePrimary => primitives.blue.shade60;
   @override
-  Color get hover => primitives.red.shade50;
+  Color get surfacePrimarySubtle => primitives.blue.shade10;
   @override
-  Color get selected => primitives.red.shade70;
-}
-
-/// Implementation of ZetaSemanticPositiveColors
-final class ZetaSemanticPositiveColorsAA implements ZetaSemanticPositiveColors {
-  /// Constructor for ZetaSemanticPositiveColorsAA
-  const ZetaSemanticPositiveColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceSecondary => primitives.yellow.shade60;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceAvatarBlue => primitives.blue.shade80;
   @override
-  Color get enabled => primitives.green.shade60;
+  Color get surfaceAvatarGreen => primitives.green.shade60;
   @override
-  Color get focus => primitives.green.shade60;
+  Color get surfaceAvatarOrange => primitives.orange.shade50;
   @override
-  Color get hover => primitives.green.shade50;
+  Color get surfaceAvatarPink => primitives.pink.shade80;
   @override
-  Color get selected => primitives.green.shade70;
-}
-
-/// Implementation of ZetaSemanticPrimaryColors
-final class ZetaSemanticPrimaryColorsAA implements ZetaSemanticPrimaryColors {
-  /// Constructor for ZetaSemanticPrimaryColorsAA
-  const ZetaSemanticPrimaryColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceAvatarPurple => primitives.purple.shade80;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceAvatarTeal => primitives.teal.shade80;
   @override
-  Color get enabled => primitives.blue.shade60;
+  Color get surfaceAvatarYellow => primitives.yellow.shade50;
   @override
-  Color get focus => primitives.blue.shade60;
+  Color get surfaceSecondarySubtle => primitives.yellow.shade10;
   @override
-  Color get hover => primitives.blue.shade50;
+  Color get surfacePositive => primitives.green.shade60;
   @override
-  Color get selected => primitives.blue.shade70;
-}
-
-/// Implementation of ZetaSemanticSecondaryColors
-final class ZetaSemanticSecondaryColorsAA implements ZetaSemanticSecondaryColors {
-  /// Constructor for ZetaSemanticSecondaryColorsAA
-  const ZetaSemanticSecondaryColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfacePositiveSubtle => primitives.green.shade10;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceWarning => primitives.orange.shade60;
   @override
-  Color get enabled => primitives.yellow.shade40;
+  Color get surfaceWarningSubtle => primitives.orange.shade10;
   @override
-  Color get focus => primitives.yellow.shade40;
+  Color get surfaceNegative => primitives.red.shade60;
   @override
-  Color get hover => primitives.yellow.shade30;
+  Color get surfaceNegativeSubtle => primitives.red.shade10;
   @override
-  Color get selected => primitives.yellow.shade50;
-}
-
-/// Implementation of ZetaSemanticSurfaceColors
-final class ZetaSemanticSurfaceColorsAA implements ZetaSemanticSurfaceColors {
-  /// Constructor for ZetaSemanticSurfaceColorsAA
-  const ZetaSemanticSurfaceColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceInfo => primitives.purple.shade60;
   @override
-  final ZetaPrimitives primitives;
-
-  /// Avatar
+  Color get surfaceInfoSubtle => primitives.purple.shade10;
   @override
-  ZetaSemanticAvatarColors get avatar => ZetaSemanticAvatarColorsAA(primitives: primitives);
+  Color get stateDisabledDisabled => primitives.cool.shade30;
   @override
-  Color get cool => primitives.cool.shade10;
+  Color get stateDefaultEnabled => primitives.pure.shade0;
   @override
-  Color get defaultColor => primitives.pure.shade0;
+  Color get stateDefaultHover => primitives.cool.shade20;
   @override
-  Color get defaultInverse => primitives.warm.shade100;
+  Color get stateDefaultSelected => primitives.blue.shade10;
   @override
-  Color get disabled => primitives.cool.shade30;
+  Color get stateDefaultFocus => primitives.pure.shade0;
   @override
-  Color get hover => primitives.cool.shade20;
+  Color get statePrimaryEnabled => primitives.blue.shade60;
   @override
-  Color get info => primitives.purple.shade60;
+  Color get statePrimaryHover => primitives.blue.shade50;
   @override
-  Color get infoSubtle => primitives.purple.shade10;
+  Color get statePrimarySelected => primitives.blue.shade70;
   @override
-  Color get negative => primitives.red.shade60;
+  Color get statePrimaryFocus => primitives.blue.shade60;
   @override
-  Color get negativeSubtle => primitives.red.shade10;
+  Color get stateSecondaryEnabled => primitives.yellow.shade40;
   @override
-  Color get positive => primitives.green.shade60;
+  Color get stateSecondaryHover => primitives.yellow.shade30;
   @override
-  Color get positiveSubtle => primitives.green.shade10;
+  Color get stateSecondarySelected => primitives.yellow.shade50;
   @override
-  Color get primary => primitives.blue.shade60;
+  Color get stateSecondaryFocus => primitives.yellow.shade40;
   @override
-  Color get primarySubtle => primitives.blue.shade10;
+  Color get stateNegativeEnabled => primitives.red.shade60;
   @override
-  Color get secondary => primitives.yellow.shade60;
+  Color get stateNegativeHover => primitives.red.shade50;
   @override
-  Color get secondarySubtle => primitives.yellow.shade10;
+  Color get stateNegativeSelected => primitives.red.shade70;
   @override
-  Color get selected => primitives.blue.shade10;
+  Color get stateNegativeFocus => primitives.red.shade60;
   @override
-  Color get selectedHover => primitives.blue.shade20;
+  Color get stateInfoEnabled => primitives.purple.shade60;
   @override
-  Color get warm => primitives.warm.shade10;
+  Color get stateInfoHover => primitives.purple.shade50;
   @override
-  Color get warning => primitives.orange.shade60;
+  Color get stateInfoSelected => primitives.purple.shade70;
   @override
-  Color get warningSubtle => primitives.orange.shade10;
-}
-
-/// Implementation of ZetaSemanticAvatarColors
-final class ZetaSemanticAvatarColorsAA implements ZetaSemanticAvatarColors {
-  /// Constructor for ZetaSemanticAvatarColorsAA
-  const ZetaSemanticAvatarColorsAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get stateInfoFocus => primitives.purple.shade60;
   @override
-  final ZetaPrimitives primitives;
+  Color get stateInverseEnabled => primitives.cool.shade100;
   @override
-  Color get blue => primitives.blue.shade80;
+  Color get stateInverseHover => primitives.cool.shade90;
   @override
-  Color get green => primitives.green.shade60;
+  Color get stateInverseSelected => primitives.cool.shade100;
   @override
-  Color get orange => primitives.orange.shade50;
+  Color get stateInverseFocus => primitives.cool.shade100;
   @override
-  Color get pink => primitives.pink.shade80;
+  Color get statePositiveEnabled => primitives.green.shade60;
   @override
-  Color get purple => primitives.purple.shade80;
+  Color get statePositiveHover => primitives.green.shade50;
   @override
-  Color get teal => primitives.teal.shade80;
+  Color get statePositiveSelected => primitives.green.shade70;
   @override
-  Color get yellow => primitives.yellow.shade50;
+  Color get statePositiveFocus => primitives.green.shade60;
 }
 
-/// Implementation of ZetaSemanticColors
-final class ZetaSemanticColorsAAA implements ZetaSemanticColors {
+/// The semantic colors for AAA
+class ZetaSemanticColorsAAA implements ZetaSemanticColors {
   /// Constructor for ZetaSemanticColorsAAA
   const ZetaSemanticColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
-  @override
-  final ZetaPrimitives primitives;
-
-  /// Border
-  @override
-  ZetaSemanticBorderColors get border => ZetaSemanticBorderColorsAAA(primitives: primitives);
-
-  /// Main
-  @override
-  ZetaSemanticMainColors get main => ZetaSemanticMainColorsAAA(primitives: primitives);
-
-  /// State
-  @override
-  ZetaSemanticStateColors get state => ZetaSemanticStateColorsAAA(primitives: primitives);
-
-  /// Surface
-  @override
-  ZetaSemanticSurfaceColors get surface => ZetaSemanticSurfaceColorsAAA(primitives: primitives);
-}
-
-/// Implementation of ZetaSemanticBorderColors
-final class ZetaSemanticBorderColorsAAA implements ZetaSemanticBorderColors {
-  /// Constructor for ZetaSemanticBorderColorsAAA
-  const ZetaSemanticBorderColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
   @override
   final ZetaPrimitives primitives;
   @override
-  Color get defaultColor => primitives.cool.shade100;
-  @override
-  Color get disabled => primitives.cool.shade20;
-  @override
-  Color get hover => primitives.cool.shade90;
-  @override
-  Color get info => primitives.purple.shade70;
-  @override
-  Color get negative => primitives.red.shade70;
-  @override
-  Color get positive => primitives.green.shade70;
-  @override
-  Color get primary => primitives.blue.shade70;
-  @override
-  Color get primaryMain => primitives.blue.shade80;
-  @override
-  Color get pure => primitives.pure.shade0;
-  @override
-  Color get secondary => primitives.yellow.shade70;
-  @override
-  Color get selected => primitives.cool.shade90;
-  @override
-  Color get subtle => primitives.cool.shade80;
-  @override
-  Color get warning => primitives.orange.shade70;
-}
-
-/// Implementation of ZetaSemanticMainColors
-final class ZetaSemanticMainColorsAAA implements ZetaSemanticMainColors {
-  /// Constructor for ZetaSemanticMainColorsAAA
-  const ZetaSemanticMainColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
-  @override
-  final ZetaPrimitives primitives;
-  @override
-  Color get defaultColor => primitives.cool.shade100;
-  @override
-  Color get disabled => primitives.cool.shade60;
-  @override
-  Color get info => primitives.purple.shade80;
-  @override
-  Color get inverse => primitives.pure.shade0;
-  @override
-  Color get light => primitives.pure.shade0;
-  @override
-  Color get negative => primitives.red.shade80;
+  Color get mainDefault => primitives.cool.shade100;
   @override
-  Color get positive => primitives.green.shade80;
+  Color get mainSubtle => primitives.cool.shade90;
   @override
-  Color get primary => primitives.blue.shade80;
+  Color get mainPrimary => primitives.blue.shade80;
   @override
-  Color get secondary => primitives.yellow.shade80;
+  Color get mainSecondary => primitives.yellow.shade80;
   @override
-  Color get subtle => primitives.cool.shade90;
+  Color get mainPositive => primitives.green.shade80;
   @override
-  Color get warning => primitives.orange.shade80;
-}
-
-/// Implementation of ZetaSemanticStateColors
-final class ZetaSemanticStateColorsAAA implements ZetaSemanticStateColors {
-  /// Constructor for ZetaSemanticStateColorsAAA
-  const ZetaSemanticStateColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get mainWarning => primitives.orange.shade80;
   @override
-  final ZetaPrimitives primitives;
-
-  ///  Inverse
+  Color get mainNegative => primitives.red.shade80;
   @override
-  ZetaSemanticInverseColors get inverse => ZetaSemanticInverseColorsAAA(primitives: primitives);
-
-  /// Default
+  Color get mainInfo => primitives.purple.shade80;
   @override
-  ZetaSemanticDefaultColors get defaultColor => ZetaSemanticDefaultColorsAAA(primitives: primitives);
-
-  /// Disabled
+  Color get mainDisabled => primitives.cool.shade60;
   @override
-  ZetaSemanticDisabledColors get disabled => ZetaSemanticDisabledColorsAAA(primitives: primitives);
-
-  /// Info
+  Color get mainLight => primitives.pure.shade0;
   @override
-  ZetaSemanticInfoColors get info => ZetaSemanticInfoColorsAAA(primitives: primitives);
-
-  /// Negative
+  Color get mainInverse => primitives.pure.shade0;
   @override
-  ZetaSemanticNegativeColors get negative => ZetaSemanticNegativeColorsAAA(primitives: primitives);
-
-  /// Positive
+  Color get borderDefault => primitives.cool.shade100;
   @override
-  ZetaSemanticPositiveColors get positive => ZetaSemanticPositiveColorsAAA(primitives: primitives);
-
-  /// Primary
+  Color get borderSelected => primitives.cool.shade90;
   @override
-  ZetaSemanticPrimaryColors get primary => ZetaSemanticPrimaryColorsAAA(primitives: primitives);
-
-  /// Secondary
+  Color get borderHover => primitives.cool.shade90;
   @override
-  ZetaSemanticSecondaryColors get secondary => ZetaSemanticSecondaryColorsAAA(primitives: primitives);
-}
-
-/// Implementation of ZetaSemanticInverseColors
-final class ZetaSemanticInverseColorsAAA implements ZetaSemanticInverseColors {
-  /// Constructor for ZetaSemanticInverseColorsAAA
-  const ZetaSemanticInverseColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderSubtle => primitives.cool.shade80;
   @override
-  final ZetaPrimitives primitives;
-  @override
-  Color get enabled => primitives.pure.shade1000;
+  Color get borderDisabled => primitives.cool.shade20;
   @override
-  Color get focus => primitives.pure.shade1000;
+  Color get borderPure => primitives.pure.shade0;
   @override
-  Color get hover => primitives.cool.shade90;
-  @override
-  Color get selected => primitives.pure.shade1000;
-}
-
-/// Implementation of ZetaSemanticDefaultColors
-final class ZetaSemanticDefaultColorsAAA implements ZetaSemanticDefaultColors {
-  /// Constructor for ZetaSemanticDefaultColorsAAA
-  const ZetaSemanticDefaultColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderPrimaryMain => primitives.blue.shade80;
   @override
-  final ZetaPrimitives primitives;
+  Color get borderPrimary => primitives.blue.shade70;
   @override
-  Color get enabled => primitives.pure.shade0;
+  Color get borderSecondary => primitives.yellow.shade70;
   @override
-  Color get focus => primitives.pure.shade0;
+  Color get borderPositive => primitives.green.shade70;
   @override
-  Color get hover => primitives.cool.shade20;
+  Color get borderWarning => primitives.orange.shade70;
   @override
-  Color get selected => primitives.blue.shade10;
-}
-
-/// Implementation of ZetaSemanticDisabledColors
-final class ZetaSemanticDisabledColorsAAA implements ZetaSemanticDisabledColors {
-  /// Constructor for ZetaSemanticDisabledColorsAAA
-  const ZetaSemanticDisabledColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get borderNegative => primitives.red.shade70;
   @override
-  final ZetaPrimitives primitives;
+  Color get borderInfo => primitives.purple.shade70;
   @override
-  Color get disabled => primitives.cool.shade30;
-}
-
-/// Implementation of ZetaSemanticInfoColors
-final class ZetaSemanticInfoColorsAAA implements ZetaSemanticInfoColors {
-  /// Constructor for ZetaSemanticInfoColorsAAA
-  const ZetaSemanticInfoColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceDefault => primitives.pure.shade0;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceDefaultInverse => primitives.pure.shade1000;
   @override
-  Color get enabled => primitives.purple.shade80;
+  Color get surfaceHover => primitives.cool.shade20;
   @override
-  Color get focus => primitives.purple.shade80;
+  Color get surfaceSelected => primitives.blue.shade10;
   @override
-  Color get hover => primitives.purple.shade70;
+  Color get surfaceSelectedHover => primitives.blue.shade20;
   @override
-  Color get selected => primitives.purple.shade90;
-}
-
-/// Implementation of ZetaSemanticNegativeColors
-final class ZetaSemanticNegativeColorsAAA implements ZetaSemanticNegativeColors {
-  /// Constructor for ZetaSemanticNegativeColorsAAA
-  const ZetaSemanticNegativeColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceDisabled => primitives.cool.shade30;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceCool => primitives.cool.shade10;
   @override
-  Color get enabled => primitives.red.shade80;
+  Color get surfaceWarm => primitives.warm.shade10;
   @override
-  Color get focus => primitives.red.shade80;
+  Color get surfacePrimary => primitives.blue.shade80;
   @override
-  Color get hover => primitives.red.shade70;
+  Color get surfacePrimarySubtle => primitives.blue.shade10;
   @override
-  Color get selected => primitives.red.shade90;
-}
-
-/// Implementation of ZetaSemanticPositiveColors
-final class ZetaSemanticPositiveColorsAAA implements ZetaSemanticPositiveColors {
-  /// Constructor for ZetaSemanticPositiveColorsAAA
-  const ZetaSemanticPositiveColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceSecondary => primitives.yellow.shade80;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceAvatarBlue => primitives.blue.shade80;
   @override
-  Color get enabled => primitives.green.shade80;
+  Color get surfaceAvatarGreen => primitives.green.shade60;
   @override
-  Color get focus => primitives.green.shade80;
+  Color get surfaceAvatarOrange => primitives.orange.shade50;
   @override
-  Color get hover => primitives.green.shade70;
+  Color get surfaceAvatarPink => primitives.pink.shade80;
   @override
-  Color get selected => primitives.green.shade90;
-}
-
-/// Implementation of ZetaSemanticPrimaryColors
-final class ZetaSemanticPrimaryColorsAAA implements ZetaSemanticPrimaryColors {
-  /// Constructor for ZetaSemanticPrimaryColorsAAA
-  const ZetaSemanticPrimaryColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceAvatarPurple => primitives.purple.shade80;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceAvatarTeal => primitives.teal.shade80;
   @override
-  Color get enabled => primitives.blue.shade80;
+  Color get surfaceAvatarYellow => primitives.yellow.shade50;
   @override
-  Color get focus => primitives.blue.shade80;
+  Color get surfaceSecondarySubtle => primitives.yellow.shade10;
   @override
-  Color get hover => primitives.blue.shade70;
+  Color get surfacePositive => primitives.green.shade80;
   @override
-  Color get selected => primitives.blue.shade90;
-}
-
-/// Implementation of ZetaSemanticSecondaryColors
-final class ZetaSemanticSecondaryColorsAAA implements ZetaSemanticSecondaryColors {
-  /// Constructor for ZetaSemanticSecondaryColorsAAA
-  const ZetaSemanticSecondaryColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfacePositiveSubtle => primitives.green.shade10;
   @override
-  final ZetaPrimitives primitives;
+  Color get surfaceWarning => primitives.orange.shade80;
   @override
-  Color get enabled => primitives.yellow.shade80;
+  Color get surfaceWarningSubtle => primitives.orange.shade10;
   @override
-  Color get focus => primitives.yellow.shade80;
+  Color get surfaceNegative => primitives.red.shade80;
   @override
-  Color get hover => primitives.yellow.shade70;
+  Color get surfaceNegativeSubtle => primitives.red.shade10;
   @override
-  Color get selected => primitives.yellow.shade90;
-}
-
-/// Implementation of ZetaSemanticSurfaceColors
-final class ZetaSemanticSurfaceColorsAAA implements ZetaSemanticSurfaceColors {
-  /// Constructor for ZetaSemanticSurfaceColorsAAA
-  const ZetaSemanticSurfaceColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get surfaceInfo => primitives.purple.shade80;
   @override
-  final ZetaPrimitives primitives;
-
-  /// Avatar
+  Color get surfaceInfoSubtle => primitives.purple.shade10;
   @override
-  ZetaSemanticAvatarColors get avatar => ZetaSemanticAvatarColorsAAA(primitives: primitives);
+  Color get stateDisabledDisabled => primitives.cool.shade30;
   @override
-  Color get cool => primitives.cool.shade10;
+  Color get stateDefaultEnabled => primitives.pure.shade0;
   @override
-  Color get defaultColor => primitives.pure.shade0;
+  Color get stateDefaultHover => primitives.cool.shade20;
   @override
-  Color get defaultInverse => primitives.pure.shade1000;
+  Color get stateDefaultSelected => primitives.blue.shade10;
   @override
-  Color get disabled => primitives.cool.shade30;
+  Color get stateDefaultFocus => primitives.pure.shade0;
   @override
-  Color get hover => primitives.cool.shade20;
+  Color get statePrimaryEnabled => primitives.blue.shade80;
   @override
-  Color get info => primitives.purple.shade80;
+  Color get statePrimaryHover => primitives.blue.shade70;
   @override
-  Color get infoSubtle => primitives.purple.shade10;
+  Color get statePrimarySelected => primitives.blue.shade90;
   @override
-  Color get negative => primitives.red.shade80;
+  Color get statePrimaryFocus => primitives.blue.shade80;
   @override
-  Color get negativeSubtle => primitives.red.shade10;
+  Color get stateSecondaryEnabled => primitives.yellow.shade80;
   @override
-  Color get positive => primitives.green.shade80;
+  Color get stateSecondaryHover => primitives.yellow.shade70;
   @override
-  Color get positiveSubtle => primitives.green.shade10;
+  Color get stateSecondarySelected => primitives.yellow.shade90;
   @override
-  Color get primary => primitives.blue.shade80;
+  Color get stateSecondaryFocus => primitives.yellow.shade80;
   @override
-  Color get primarySubtle => primitives.blue.shade10;
+  Color get stateNegativeEnabled => primitives.red.shade80;
   @override
-  Color get secondary => primitives.yellow.shade80;
+  Color get stateNegativeHover => primitives.red.shade70;
   @override
-  Color get secondarySubtle => primitives.yellow.shade10;
+  Color get stateNegativeSelected => primitives.red.shade90;
   @override
-  Color get selected => primitives.blue.shade10;
+  Color get stateNegativeFocus => primitives.red.shade80;
   @override
-  Color get selectedHover => primitives.blue.shade20;
+  Color get stateInfoEnabled => primitives.purple.shade80;
   @override
-  Color get warm => primitives.warm.shade10;
+  Color get stateInfoHover => primitives.purple.shade70;
   @override
-  Color get warning => primitives.orange.shade80;
+  Color get stateInfoSelected => primitives.purple.shade90;
   @override
-  Color get warningSubtle => primitives.orange.shade10;
-}
-
-/// Implementation of ZetaSemanticAvatarColors
-final class ZetaSemanticAvatarColorsAAA implements ZetaSemanticAvatarColors {
-  /// Constructor for ZetaSemanticAvatarColorsAAA
-  const ZetaSemanticAvatarColorsAAA({required this.primitives});
-
-  /// The primitives for this sizes
+  Color get stateInfoFocus => primitives.purple.shade80;
   @override
-  final ZetaPrimitives primitives;
+  Color get stateInverseEnabled => primitives.pure.shade1000;
   @override
-  Color get blue => primitives.blue.shade80;
+  Color get stateInverseHover => primitives.cool.shade90;
   @override
-  Color get green => primitives.green.shade60;
+  Color get stateInverseSelected => primitives.pure.shade1000;
   @override
-  Color get orange => primitives.orange.shade50;
+  Color get stateInverseFocus => primitives.pure.shade1000;
   @override
-  Color get pink => primitives.pink.shade80;
+  Color get statePositiveEnabled => primitives.green.shade80;
   @override
-  Color get purple => primitives.purple.shade80;
+  Color get statePositiveHover => primitives.green.shade70;
   @override
-  Color get teal => primitives.teal.shade80;
+  Color get statePositiveSelected => primitives.green.shade90;
   @override
-  Color get yellow => primitives.yellow.shade50;
+  Color get statePositiveFocus => primitives.green.shade80;
 }
 
 /// The semantic sizes for AA
diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart
index 1437d5f6..a2f7e869 100644
--- a/lib/src/components/avatars/avatar.dart
+++ b/lib/src/components/avatars/avatar.dart
@@ -326,7 +326,7 @@ extension on ZetaAvatarSize {
       case ZetaAvatarSize.xs:
       case ZetaAvatarSize.xxs:
       case ZetaAvatarSize.xxxs:
-        return ZetaBorders.borderWidth;
+        return ZetaBorders.medium;
     }
   }
 
diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart
index 53fdc3bd..1fc5564e 100644
--- a/lib/src/components/badges/indicator.dart
+++ b/lib/src/components/badges/indicator.dart
@@ -113,7 +113,7 @@ class ZetaIndicator extends ZetaStatelessWidget {
         height: sizePixels + Zeta.of(context).spacing.minimum,
         decoration: BoxDecoration(
           border: Border.all(
-            width: ZetaBorders.borderWidth,
+            width: ZetaBorders.medium,
             color: Zeta.of(context).colors.borderSubtle,
           ),
           color: (inverse ? foregroundColor : Colors.transparent),
diff --git a/lib/src/components/banner/banner.dart b/lib/src/components/banner/banner.dart
index bde064d1..bb2be9cf 100644
--- a/lib/src/components/banner/banner.dart
+++ b/lib/src/components/banner/banner.dart
@@ -1,5 +1,3 @@
-import 'dart:io';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -65,7 +63,7 @@ class ZetaBanner extends MaterialBanner {
             builder: (context) {
               final backgroundColor = _backgroundColorFromType(context, type);
               final foregroundColor = backgroundColor.onColor;
-              if (!kIsWeb && Platform.isAndroid && context.mounted) {
+              if (!kIsWeb && PlatformIs.android && context.mounted) {
                 // ignore: invalid_use_of_visible_for_testing_member
                 final statusBarColor = SystemChrome.latestStyle?.statusBarColor;
                 if (statusBarColor != backgroundColor) {
diff --git a/lib/src/components/breadcrumbs/breadcrumbs.dart b/lib/src/components/breadcrumbs/breadcrumbs.dart
index e2f7fad5..646bfbb6 100644
--- a/lib/src/components/breadcrumbs/breadcrumbs.dart
+++ b/lib/src/components/breadcrumbs/breadcrumbs.dart
@@ -321,7 +321,7 @@ class _BreadCrumbsTruncatedState extends State<_BreadCrumbsTruncated> {
                 side: WidgetStateProperty.resolveWith((states) {
                   if (states.contains(WidgetState.focused)) {
                     return BorderSide(
-                      width: ZetaBorders.borderWidth,
+                      width: ZetaBorders.medium,
                       color: colors.primary.shade100,
                     );
                   }
diff --git a/lib/src/components/button_group/button_group.dart b/lib/src/components/button_group/button_group.dart
index e3274e4c..3e4c5b8a 100644
--- a/lib/src/components/button_group/button_group.dart
+++ b/lib/src/components/button_group/button_group.dart
@@ -238,7 +238,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
     bool finalButton,
   ) {
     if (_controller.value.contains(WidgetState.focused)) {
-      return BorderSide(color: colors.blue.shade50, width: ZetaBorders.borderWidth);
+      return BorderSide(color: colors.blue.shade50, width: ZetaBorders.medium);
     }
     if (_controller.value.contains(WidgetState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart
index 4aeee30b..03aeaa7e 100644
--- a/lib/src/components/buttons/button_style.dart
+++ b/lib/src/components/buttons/button_style.dart
@@ -137,7 +137,7 @@ ButtonStyle buttonStyle(
       }
       // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused.
       if (states.contains(WidgetState.focused)) {
-        return BorderSide(color: colors.blue, width: ZetaBorders.borderWidth);
+        return BorderSide(color: colors.blue, width: ZetaBorders.medium);
       }
       if (type.border) {
         return BorderSide(
diff --git a/lib/src/components/chat_item/chat_item.dart b/lib/src/components/chat_item/chat_item.dart
index 654b73d7..4241fff5 100644
--- a/lib/src/components/chat_item/chat_item.dart
+++ b/lib/src/components/chat_item/chat_item.dart
@@ -1,5 +1,4 @@
 // ignore_for_file: deprecated_member_use_from_same_package
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
@@ -134,22 +133,16 @@ class ZetaChatItem extends ZetaStatelessWidget {
 
     // coverage:ignore-start
     if (onMenuMoreTap != null) {
-      actions.add(
-        ZetaSlidableAction(onPressed: onMenuMoreTap, color: colors.purple, icon: ZetaIcons.more_vertical),
-      );
+      actions.add(ZetaSlidableAction.menuMore(onPressed: onMenuMoreTap));
     }
     if (onCallTap != null) {
-      actions.add(
-        ZetaSlidableAction(onPressed: onCallTap, color: colors.green, icon: ZetaIcons.phone),
-      );
+      actions.add(ZetaSlidableAction.call(onPressed: onCallTap));
     }
     if (onPttTap != null) {
-      actions.add(
-        ZetaSlidableAction(onPressed: onPttTap, color: colors.blue, icon: ZetaIcons.ptt),
-      );
+      actions.add(ZetaSlidableAction.ptt(onPressed: onPttTap));
     }
     if (onDeleteTap != null) {
-      actions.add(ZetaSlidableAction(onPressed: onDeleteTap, color: colors.red, icon: ZetaIcons.delete));
+      actions.add(ZetaSlidableAction.delete(onPressed: onDeleteTap));
     }
     // coverage:ignore-end
 
diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart
index 12ea4a16..88620cd7 100644
--- a/lib/src/components/chips/chip.dart
+++ b/lib/src/components/chips/chip.dart
@@ -225,7 +225,7 @@ class _ZetaChipState extends State<ZetaChip> {
                 BorderSide(
                   color: _controller.value.contains(WidgetState.focused) ? colors.blue.shade50 : colors.borderDefault,
                   width: _controller.value.contains(WidgetState.focused)
-                      ? ZetaBorders.borderWidth
+                      ? ZetaBorders.medium
                       : !selected
                           ? 1
                           : 0,
diff --git a/lib/src/components/dial_pad/dial_pad.dart b/lib/src/components/dial_pad/dial_pad.dart
index ebb059d0..31746bda 100644
--- a/lib/src/components/dial_pad/dial_pad.dart
+++ b/lib/src/components/dial_pad/dial_pad.dart
@@ -198,7 +198,7 @@ class ZetaDialPadButton extends StatelessWidget {
         decoration: ShapeDecoration(
           shape: const CircleBorder(),
           color: colors.warm.shade10,
-          shadows: [BoxShadow(color: colors.black.withOpacity(0.15), blurRadius: 4, offset: const Offset(0, 2))],
+          shadows: [BoxShadow(color: Colors.black.withOpacity(0.15), blurRadius: 4, offset: const Offset(0, 2))],
         ),
         child: Material(
           color: Colors.transparent,
diff --git a/lib/src/components/fabs/fab.dart b/lib/src/components/fabs/fab.dart
index 2f946f4a..b56fb15a 100644
--- a/lib/src/components/fabs/fab.dart
+++ b/lib/src/components/fabs/fab.dart
@@ -137,7 +137,7 @@ class _ZetaFABState extends State<ZetaFAB> {
           (Set<WidgetState> states) {
             if (states.contains(WidgetState.focused)) {
               // TODO(UX-1134): This removes a defualt border when focused, rather than adding a second border when focused.
-              return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.borderWidth);
+              return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaBorders.medium);
             }
             return null;
           },
diff --git a/lib/src/components/global_header/global_header.dart b/lib/src/components/global_header/global_header.dart
index 50830a34..2cba709c 100644
--- a/lib/src/components/global_header/global_header.dart
+++ b/lib/src/components/global_header/global_header.dart
@@ -175,7 +175,7 @@ class _GlobalHeaderState extends State<ZetaGlobalHeader> {
             setState(() {
               _selectedIndex = index;
             });
-            child.handlePress!.call();
+            child.handlePress?.call();
           },
         ),
       );
diff --git a/lib/src/components/list_item/notification_list_item.dart b/lib/src/components/list_item/notification_list_item.dart
index 9e88dc3e..a1559e8e 100644
--- a/lib/src/components/list_item/notification_list_item.dart
+++ b/lib/src/components/list_item/notification_list_item.dart
@@ -202,13 +202,8 @@ class ZetaNotificationBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final colors = Zeta.of(context).colors;
     return avatar != null
-        ? avatar!.copyWith(
-            size: ZetaAvatarSize.m,
-            lowerBadge: ZetaAvatarBadge.icon(icon: ZetaIcons.check_mark, color: colors.green),
-            backgroundColor: colors.purple.shade80,
-          )
+        ? avatar!.copyWith(size: ZetaAvatarSize.m)
         : icon != null
             ? ZetaIcon(
                 icon,
diff --git a/lib/src/components/radio/radio.dart b/lib/src/components/radio/radio.dart
index 38786490..2a82a57e 100644
--- a/lib/src/components/radio/radio.dart
+++ b/lib/src/components/radio/radio.dart
@@ -174,7 +174,7 @@ class _RadioPainter extends ToggleablePainter {
     final Paint paint = Paint()
       ..color = colors.surfacePrimary
       ..style = PaintingStyle.stroke
-      ..strokeWidth = Zeta.of(context).spacing.small + ZetaBorders.borderWidth;
+      ..strokeWidth = Zeta.of(context).spacing.small + ZetaBorders.medium;
     if (isFocused) canvas.drawCircle(center, _kInnerRadius, paint);
 
     // Outer circle
@@ -185,7 +185,7 @@ class _RadioPainter extends ToggleablePainter {
               ? inactiveColor
               : activeColor
       ..style = PaintingStyle.stroke
-      ..strokeWidth = ZetaBorders.borderWidth;
+      ..strokeWidth = ZetaBorders.medium;
     canvas.drawCircle(center, _kOuterRadius, paint);
 
     // Inner circle
diff --git a/lib/src/components/stepper/stepper.dart b/lib/src/components/stepper/stepper.dart
index 89e3b7fb..c30badba 100644
--- a/lib/src/components/stepper/stepper.dart
+++ b/lib/src/components/stepper/stepper.dart
@@ -313,7 +313,7 @@ class _ZetaStepperState extends State<ZetaStepper> with TickerProviderStateMixin
                           right: Zeta.of(context).spacing.large,
                           left: Zeta.of(context).spacing.large,
                         ),
-                        height: ZetaBorders.borderWidth,
+                        height: ZetaBorders.medium,
                         decoration: BoxDecoration(
                           borderRadius: Zeta.of(context).radius.full,
                           color: switch (widget.steps[index].type) {
diff --git a/lib/src/components/switch/zeta_switch.dart b/lib/src/components/switch/zeta_switch.dart
index 8afaba2b..99d9dcec 100644
--- a/lib/src/components/switch/zeta_switch.dart
+++ b/lib/src/components/switch/zeta_switch.dart
@@ -1,5 +1,3 @@
-import 'dart:io';
-
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -62,12 +60,9 @@ class ZetaSwitch extends StatelessWidget {
 
   ZetaSwitchType get _variant {
     if (variant != null) return variant!;
-    if (kIsWeb) return ZetaSwitchType.web;
-    return switch (Platform.operatingSystem) {
-      'ios' => ZetaSwitchType.ios,
-      'android' => ZetaSwitchType.android,
-      _ => ZetaSwitchType.web,
-    };
+    if (PlatformIs.android) return ZetaSwitchType.android;
+    if (PlatformIs.iOS) return ZetaSwitchType.ios;
+    return ZetaSwitchType.web;
   }
 
   Size get _size {
diff --git a/lib/src/components/text_input/internal_text_input.dart b/lib/src/components/text_input/internal_text_input.dart
index 2a4488b8..05d7a9c1 100644
--- a/lib/src/components/text_input/internal_text_input.dart
+++ b/lib/src/components/text_input/internal_text_input.dart
@@ -277,11 +277,11 @@ class InternalTextInputState extends State<InternalTextInput> {
       );
 
   OutlineInputBorder _focusedBorder(bool rounded) => _baseBorder(rounded).copyWith(
-        borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaBorders.borderWidth),
+        borderSide: BorderSide(color: _colors.primary.shade50, width: ZetaBorders.medium),
       ); // TODO(mikecoomber): change to colors.borderPrimary when added
 
   OutlineInputBorder _errorBorder(bool rounded) => _baseBorder(rounded).copyWith(
-        borderSide: BorderSide(color: _colors.error, width: ZetaBorders.borderWidth),
+        borderSide: BorderSide(color: _colors.error, width: ZetaBorders.medium),
       );
 
   @override
diff --git a/lib/src/components/top_app_bar/top_app_bar.dart b/lib/src/components/top_app_bar/top_app_bar.dart
index a1570584..c04ad557 100644
--- a/lib/src/components/top_app_bar/top_app_bar.dart
+++ b/lib/src/components/top_app_bar/top_app_bar.dart
@@ -182,7 +182,7 @@ class _ZetaTopAppBarState extends State<ZetaTopAppBar> {
                   if (widget.onSearchMicrophoneIconPressed != null) ...[
                     SizedBox(
                       height: Zeta.of(context).spacing.xl_2,
-                      child: VerticalDivider(width: ZetaBorders.borderWidth, color: colors.cool.shade70),
+                      child: VerticalDivider(width: ZetaBorders.medium, color: colors.cool.shade70),
                     ),
                     IconButton(
                       onPressed: widget.onSearchMicrophoneIconPressed,
diff --git a/lib/src/theme/tokens.dart b/lib/src/theme/tokens.dart
index 4ec1e093..06b468a8 100644
--- a/lib/src/theme/tokens.dart
+++ b/lib/src/theme/tokens.dart
@@ -338,6 +338,9 @@ class ZetaAnimationLength {
 /// Temporary class to hold border values.
 // TODO(Tokens): Remove this class and design / develop  Zeta.of(context).border instead.
 abstract final class ZetaBorders {
-  /// Border width
-  static double get borderWidth => 2;
+  /// Small border width
+  static double get small => 0.5;
+
+  /// Medium border width
+  static double get medium => 2;
 }
diff --git a/lib/src/utils/platform/platform_is.dart b/lib/src/utils/platform/platform_is.dart
new file mode 100644
index 00000000..9a15d7cc
--- /dev/null
+++ b/lib/src/utils/platform/platform_is.dart
@@ -0,0 +1,95 @@
+// The content of this file is adapted from Mike Rydstrom:
+// https://gist.github.com/rydmike/1771fe24c050ebfe792fa309371154d8
+
+import 'universal_platform_web.dart' if (dart.library.io) 'universal_platform_vm.dart';
+
+/// A universal platform checker.
+///
+/// Can be used to check active physical Flutter platform on all platforms.
+///
+/// To check what host platform the app is running on use:
+///
+/// * PlatformIs.android
+/// * PlatformIs.iOS
+/// * PlatformIs.macOS
+/// * PlatformIs.windows
+/// * PlatformIs.linux
+/// * PlatformIs.fuchsia
+///
+/// To check the device type use:
+///
+/// * PlatformIs.mobile  (Android or iOS)
+/// * PlatformIs.desktop (Windows, macOS or Linux)
+///
+/// Currently Fuchsia is not considered mobile nor desktop, even if it
+/// might be so in the future.
+///
+/// To check if the Flutter application is running on Web you can use:
+///
+/// * PlatformIs.web
+///
+/// Alternatively the Flutter foundation compile time constant kIsWeb also
+/// works well for that.
+///
+/// The platform checks are supported independently on web. You can use
+/// PlatformIs windows, iOS, macOS, Android and Linux to check what the host
+/// platform is when you are running a Flutter Web application.
+///
+/// Checking if we are running on a Fuchsia host in a Web browser, is not yet fully
+/// supported. If running in a Web browser on Fuchsia, PlatformIs.web will be true, but
+/// PlatformIs.fuchsia will be false. Future versions, when Fuchsia is released,
+/// may fix this.
+class PlatformIs {
+  PlatformIs._();
+
+  /// Web
+  static bool get web => const UniversalPlatform().web;
+
+  /// Mac OS desktop
+  static bool get macOS => const UniversalPlatform().macOS;
+
+  /// Windows desktop
+  static bool get windows => const UniversalPlatform().windows;
+
+  /// Linux desktop
+  static bool get linux => const UniversalPlatform().linux;
+
+  /// Android
+  static bool get android => const UniversalPlatform().android;
+
+  /// iOS
+  static bool get iOS => const UniversalPlatform().iOS;
+
+  /// Fuchsia
+  static bool get fuchsia => const UniversalPlatform().fuchsia;
+
+  /// Mobile (Android or iOS)
+  static bool get mobile => PlatformIs.iOS || PlatformIs.android;
+
+  /// Desktop (Windows, macOS, Linux)
+  static bool get desktop => PlatformIs.macOS || PlatformIs.windows || PlatformIs.linux;
+}
+
+/// Abstract platform interface.
+abstract interface class AbstractPlatform {
+  /// Web
+  bool get web;
+
+  /// Mac OS
+  bool get macOS;
+
+  /// Windows
+  bool get windows;
+
+  /// Linux
+  bool get linux;
+
+  /// Android
+  bool get android;
+
+  /// iOS
+  bool get iOS;
+
+  /// Fuchsia
+  bool get fuchsia;
+}
diff --git a/lib/src/utils/platform/universal_platform_vm.dart b/lib/src/utils/platform/universal_platform_vm.dart
new file mode 100644
index 00000000..7c25ca2f
--- /dev/null
+++ b/lib/src/utils/platform/universal_platform_vm.dart
@@ -0,0 +1,35 @@
+// The content of this file is adapted from Mike Rydstrom:
+// https://gist.github.com/rydmike/1771fe24c050ebfe792fa309371154d8
+
+import 'dart:io';
+
+import 'platform_is.dart';
+
+// NOTE:
+// Never import this library directly in the application. The PlatformIs
+// class and library uses conditional imports to only import this file on
+// VM platform builds.
+
+/// UniversalPlatform for Flutter VM builds.
+///
+/// We are using Dart VM builds, so we use dart:io Platform to
+/// get the current platform.
+class UniversalPlatform implements AbstractPlatform {
+  /// Default constructor.
+  @override
+  const UniversalPlatform();
+  @override
+  bool get web => false;
+  @override
+  bool get macOS => Platform.isMacOS;
+  @override
+  bool get windows => Platform.isWindows;
+  @override
+  bool get linux => Platform.isLinux;
+  @override
+  bool get android => Platform.isAndroid;
+  @override
+  bool get iOS => Platform.isIOS;
+  @override
+  bool get fuchsia => Platform.isFuchsia;
+}
diff --git a/lib/src/utils/platform/universal_platform_web.dart b/lib/src/utils/platform/universal_platform_web.dart
new file mode 100644
index 00000000..baaac9ae
--- /dev/null
+++ b/lib/src/utils/platform/universal_platform_web.dart
@@ -0,0 +1,54 @@
+// The content of this file is adapted from Mike Rydstrom:
+// https://gist.github.com/rydmike/1771fe24c050ebfe792fa309371154d8
+
+// ignore: avoid_web_libraries_in_flutter
+
+import 'package:web/web.dart';
+
+import 'platform_is.dart';
+
+// NOTE:
+// Never import this library directly in the application. The PlatformIs
+// class and library uses conditional imports to only import this file on
+// Web platform builds.
+
+final Navigator _nav = window.navigator;
+
+/// UniversalPlatform for Flutter WEB build.
+///
+/// We can use Navigator to get the current platform.
+///
+/// This function is borrowed, with minor modifications, from GetX utils library with MIT license.
+/// Credits for it belong to its author Jonny Borges https://github.com/jonataslaw
+/// https://github.com/jonataslaw/getx/blob/master/lib/get_utils/src/platform/platform_web.dart
+class UniversalPlatform implements AbstractPlatform {
+  /// Default constructor
+  @override
+  const UniversalPlatform();
+  @override
+  bool get web => true;
+  @override
+  bool get macOS => _nav.appVersion.contains('Mac OS') && !iOS;
+  @override
+  bool get windows => _nav.appVersion.contains('Win');
+  @override
+  bool get linux => (_nav.appVersion.contains('Linux') || _nav.appVersion.contains('x11')) && !android;
+  // Source: https://developer.chrome.com/multidevice/user-agent
+  @override
+  bool get android => _nav.appVersion.contains('Android ');
+  @override
+  bool get iOS {
+    // maxTouchPoints is needed to separate iPad iOS13 vs new MacOS
+    return _hasMatch(_nav.platform, '/iPad|iPhone|iPod/') || (_nav.platform == 'MacIntel' && _nav.maxTouchPoints > 1);
+  }
+
+  // Theoretically we could be in a Web browser on Fuchsia too, but
+  // we have no info on how to get that info yet, so we return false.
+  @override
+  bool get fuchsia => false;
+}
+
+bool _hasMatch(String? value, String pattern) {
+  // ignore: avoid_bool_literals_in_conditional_expressions
+  return (value == null) ? false : RegExp(pattern).hasMatch(value);
+}
diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart
index 453c6a3e..88621bd1 100644
--- a/lib/src/utils/utils.dart
+++ b/lib/src/utils/utils.dart
@@ -2,6 +2,7 @@ export 'debounce.dart';
 export 'enums.dart';
 export 'extensions.dart';
 export 'nothing.dart';
+export 'platform/platform_is.dart' show PlatformIs;
 export 'rounded.dart';
 export 'zeta.dart';
 export 'zeta_provider.dart';
diff --git a/pubspec.yaml b/pubspec.yaml
index 6f2d6a47..05511bcd 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -3,8 +3,8 @@ version: 0.15.2
 description: Zeta is the new, formal, standardized Zebra Design System based off
   the successes of ZDS (Zebra Design System). This package is in pre-release,
   and so many aspects are incomplete.
-homepage: https://github.com/zebradevs/zeta_flutter
-repository: https://github.com/zebradevs/zeta_flutter
+homepage: https://github.com/ZebraDevs/zeta_flutter
+repository: https://github.com/ZebraDevs/zeta_flutter
 issue_tracker: https://github.com/ZebraDevs/zeta_flutter/issues
 documentation: https://zeta-ds.web.app/flutter/dartdoc/index.html
 
diff --git a/test/src/components/button/button_test.dart b/test/src/components/button/button_test.dart
index 4acf577a..fed28ad8 100644
--- a/test/src/components/button/button_test.dart
+++ b/test/src/components/button/button_test.dart
@@ -262,7 +262,7 @@ void main() {
     expect(button.size, ZetaWidgetSize.medium);
     expect(
       filledButton.style?.side?.resolve({WidgetState.focused}),
-      BorderSide(color: ZetaColorBase.blue, width: ZetaBorders.borderWidth),
+      BorderSide(color: ZetaColorBase.blue, width: ZetaBorders.medium),
     );
   });
   testWidgets('debugFillProperties works correctly', (WidgetTester tester) async {
diff --git a/test/src/components/fabs/fab_test.dart b/test/src/components/fabs/fab_test.dart
index 422ef853..e9e79000 100644
--- a/test/src/components/fabs/fab_test.dart
+++ b/test/src/components/fabs/fab_test.dart
@@ -147,7 +147,7 @@ void main() {
     await tester.pumpAndSettle();
     expect(
       filledButton.style?.side?.resolve({WidgetState.focused}),
-      BorderSide(color: ZetaColorBase.blue[50]!, width: ZetaBorders.borderWidth),
+      BorderSide(color: ZetaColorBase.blue[50]!, width: ZetaBorders.medium),
     );
   });