@kinetixui/tokens 0.4.3 → 0.5.0

package/dist/android/Color.kt

@@ -25,6 +25,21 @@ object KinetixPalette {
   val colorAmber850 = Color(0xff6a4b19)
   val colorAmber900 = Color(0xff553a11)
   val colorAmber950 = Color(0xff3f2a08)
+  val colorAzure0 = Color(0xfff7faff)
+  val colorAzure100 = Color(0xffdbeafe)
+  val colorAzure1000 = Color(0xff0f172a)
+  val colorAzure150 = Color(0xffcde1fd)
+  val colorAzure200 = Color(0xffbfdbfe)
+  val colorAzure300 = Color(0xff93c5fd)
+  val colorAzure400 = Color(0xff60a5fa)
+  val colorAzure50 = Color(0xffeff6ff)
+  val colorAzure500 = Color(0xff3b82f6)
+  val colorAzure600 = Color(0xff2563eb)
+  val colorAzure700 = Color(0xff1d4ed8)
+  val colorAzure800 = Color(0xff1e40af)
+  val colorAzure850 = Color(0xff1b3897)
+  val colorAzure900 = Color(0xff1e3a8a)
+  val colorAzure950 = Color(0xff172554)
   val colorBlue0 = Color(0xfff6fbff)
   val colorBlue100 = Color(0xff92b2c8)
   val colorBlue1000 = Color(0xff000000)

package/dist/android/Theme.dark.kt

@@ -34,9 +34,9 @@ object KinetixThemeDark {
   val colorMutedForeground = Color(0xff92b2c8)
   val colorPopover = Color(0xff0b1821)
   val colorPopoverForeground = Color(0xfff0f7ff)
-  val colorPrimary = Color(0xff92b2c8)
+  val colorPrimary = Color(0xff60a5fa)
   val colorPrimaryForeground = Color(0xff050c11)
-  val colorRing = Color(0xff92b2c8)
+  val colorRing = Color(0xff60a5fa)
   val colorSecondary = Color(0xff2e362e)
   val colorSecondaryForeground = Color(0xffe3e7e3)
   val colorSidebar = Color(0xff0b1821)
@@ -44,9 +44,9 @@ object KinetixThemeDark {
   val colorSidebarAccentForeground = Color(0xfff0f7ff)
   val colorSidebarBorder = Color(0xff395a70)
   val colorSidebarForeground = Color(0xfff0f7ff)
-  val colorSidebarPrimary = Color(0xff92b2c8)
+  val colorSidebarPrimary = Color(0xff60a5fa)
   val colorSidebarPrimaryForeground = Color(0xff050c11)
-  val colorSidebarRing = Color(0xff92b2c8)
+  val colorSidebarRing = Color(0xff60a5fa)
   val colorSuccess = Color(0xff90a08f)
   val colorSuccessForeground = Color(0xff171b17)
   val colorTertiary = Color(0xff395a70)

package/dist/android/Theme.kt

@@ -11,7 +11,7 @@ import androidx.compose.ui.unit.*
 
 object KinetixTheme {
   val colorAccent = Color(0xfff0f7ff)
-  val colorAccentForeground = Color(0xff1b3c53)
+  val colorAccentForeground = Color(0xff1d4ed8)
   val colorBackground = Color(0xffffffff)
   val colorBorder = Color(0xff92b2c8)
   val colorCard = Color(0xffffffff)
@@ -34,11 +34,11 @@ object KinetixTheme {
   val colorMutedForeground = Color(0xff6d6d6d)
   val colorPopover = Color(0xffffffff)
   val colorPopoverForeground = Color(0xff050c11)
-  val colorPrimary = Color(0xff1b3c53)
+  val colorPrimary = Color(0xff1d4ed8)
   val colorPrimaryForeground = Color(0xfff0f7ff)
-  val colorRing = Color(0xff1b3c53)
-  val colorSecondary = Color(0xfff1f3f1)
-  val colorSecondaryForeground = Color(0xff5d6d5c)
+  val colorRing = Color(0xff1d4ed8)
+  val colorSecondary = Color(0xffc7cfc7)
+  val colorSecondaryForeground = Color(0xff465245)
   val colorSemanticError = Color(0xffec5047)
   val colorSemanticErrorContainer = Color(0xfffef3f2)
   val colorSemanticInfoContainer = Color(0xfff0f7ff)
@@ -52,12 +52,12 @@ object KinetixTheme {
   val colorSemanticWarningContainer = Color(0xfffff8eb)
   val colorSidebar = Color(0xfffafafa)
   val colorSidebarAccent = Color(0xfff0f7ff)
-  val colorSidebarAccentForeground = Color(0xff1b3c53)
+  val colorSidebarAccentForeground = Color(0xff1d4ed8)
   val colorSidebarBorder = Color(0xffe0e0e0)
   val colorSidebarForeground = Color(0xff050c11)
-  val colorSidebarPrimary = Color(0xff1b3c53)
+  val colorSidebarPrimary = Color(0xff1d4ed8)
   val colorSidebarPrimaryForeground = Color(0xfff0f7ff)
-  val colorSidebarRing = Color(0xff1b3c53)
+  val colorSidebarRing = Color(0xff1d4ed8)
   val colorSuccess = Color(0xff5d6d5c)
   val colorSuccessForeground = Color(0xfff1f3f1)
   val colorTertiary = Color(0xffb0b0b0)

package/dist/android/res/values/colors.xml

@@ -4,6 +4,21 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
+  <color name="color_azure_0">#fff7faff</color>
+  <color name="color_azure_50">#ffeff6ff</color>
+  <color name="color_azure_100">#ffdbeafe</color>
+  <color name="color_azure_150">#ffcde1fd</color>
+  <color name="color_azure_200">#ffbfdbfe</color>
+  <color name="color_azure_300">#ff93c5fd</color>
+  <color name="color_azure_400">#ff60a5fa</color>
+  <color name="color_azure_500">#ff3b82f6</color>
+  <color name="color_azure_600">#ff2563eb</color>
+  <color name="color_azure_700">#ff1d4ed8</color>
+  <color name="color_azure_800">#ff1e40af</color>
+  <color name="color_azure_850">#ff1b3897</color>
+  <color name="color_azure_900">#ff1e3a8a</color>
+  <color name="color_azure_950">#ff172554</color>
+  <color name="color_azure_1000">#ff0f172a</color>
   <color name="color_blue_0">#fff6fbff</color>
   <color name="color_blue_50">#fff0f7ff</color>
   <color name="color_blue_100">#ff92b2c8</color>
@@ -114,14 +129,14 @@
   <color name="color_card_foreground">#ff050c11</color>
   <color name="color_popover">#ffffffff</color>
   <color name="color_popover_foreground">#ff050c11</color>
-  <color name="color_primary">#ff1b3c53</color>
+  <color name="color_primary">#ff1d4ed8</color>
   <color name="color_primary_foreground">#fff0f7ff</color>
-  <color name="color_secondary">#fff1f3f1</color>
-  <color name="color_secondary_foreground">#ff5d6d5c</color>
+  <color name="color_secondary">#ffc7cfc7</color>
+  <color name="color_secondary_foreground">#ff465245</color>
   <color name="color_muted">#fff6f6f6</color>
   <color name="color_muted_foreground">#ff6d6d6d</color>
   <color name="color_accent">#fff0f7ff</color>
-  <color name="color_accent_foreground">#ff1b3c53</color>
+  <color name="color_accent_foreground">#ff1d4ed8</color>
   <color name="color_destructive">#ffc60a0a</color>
   <color name="color_destructive_foreground">#fffef3f2</color>
   <color name="color_success">#ff5d6d5c</color>
@@ -130,7 +145,7 @@
   <color name="color_warning_foreground">#fffff8eb</color>
   <color name="color_border">#ff92b2c8</color>
   <color name="color_input">#ff92b2c8</color>
-  <color name="color_ring">#ff1b3c53</color>
+  <color name="color_ring">#ff1d4ed8</color>
   <color name="color_semantic_error">#ffec5047</color>
   <color name="color_semantic_on_error">#fffef3f2</color>
   <color name="color_semantic_error_container">#fffef3f2</color>
@@ -152,12 +167,12 @@
   <color name="color_chart_8">#ff465245</color>
   <color name="color_sidebar">#fffafafa</color>
   <color name="color_sidebar_foreground">#ff050c11</color>
-  <color name="color_sidebar_primary">#ff1b3c53</color>
+  <color name="color_sidebar_primary">#ff1d4ed8</color>
   <color name="color_sidebar_primary_foreground">#fff0f7ff</color>
   <color name="color_sidebar_accent">#fff0f7ff</color>
-  <color name="color_sidebar_accent_foreground">#ff1b3c53</color>
+  <color name="color_sidebar_accent_foreground">#ff1d4ed8</color>
   <color name="color_sidebar_border">#ffe0e0e0</color>
-  <color name="color_sidebar_ring">#ff1b3c53</color>
+  <color name="color_sidebar_ring">#ff1d4ed8</color>
   <color name="color_tertiary">#ffb0b0b0</color>
   <color name="color_tertiary_foreground">#fff0f7ff</color>
   <color name="color_info">#ff57778d</color>

package/dist/flutter/app_colors.dart

@@ -13,7 +13,7 @@ class KinetixColors {
     KinetixColors._();
 
     static const colorAccent = Color(0xFFF0F7FF); /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
-    static const colorAccentForeground = Color(0xFF1B3C53); /** synth: = primary for readable text on accent */
+    static const colorAccentForeground = Color(0xFF1D4ED8); /** synth: = primary for readable text on accent (#1d4ed8 on accent #f0f7ff ~5.7:1) */
     static const colorAmber0 = Color(0xFFFFFFFF);
     static const colorAmber100 = Color(0xFFFFF2DD);
     static const colorAmber1000 = Color(0xFF2A1A00);
@@ -29,6 +29,21 @@ class KinetixColors {
     static const colorAmber850 = Color(0xFF6A4B19);
     static const colorAmber900 = Color(0xFF553A11);
     static const colorAmber950 = Color(0xFF3F2A08);
+    static const colorAzure0 = Color(0xFFF7FAFF);
+    static const colorAzure100 = Color(0xFFDBEAFE);
+    static const colorAzure1000 = Color(0xFF0F172A);
+    static const colorAzure150 = Color(0xFFCDE1FD);
+    static const colorAzure200 = Color(0xFFBFDBFE);
+    static const colorAzure300 = Color(0xFF93C5FD);
+    static const colorAzure400 = Color(0xFF60A5FA);
+    static const colorAzure50 = Color(0xFFEFF6FF);
+    static const colorAzure500 = Color(0xFF3B82F6);
+    static const colorAzure600 = Color(0xFF2563EB);
+    static const colorAzure700 = Color(0xFF1D4ED8);
+    static const colorAzure800 = Color(0xFF1E40AF);
+    static const colorAzure850 = Color(0xFF1B3897);
+    static const colorAzure900 = Color(0xFF1E3A8A);
+    static const colorAzure950 = Color(0xFF172554);
     static const colorBackground = Color(0xFFFFFFFF); /** figma: surfaceContainerLowest #ffffff */
     static const colorBlue0 = Color(0xFFF6FBFF);
     static const colorBlue100 = Color(0xFF92B2C8);
@@ -108,8 +123,8 @@ class KinetixColors {
     static const colorNeutral900 = Color(0xFF1F1F1F);
     static const colorPopover = Color(0xFFFFFFFF); /** synth: no Figma popover token; = background */
     static const colorPopoverForeground = Color(0xFF050C11); /** synth: = foreground */
-    static const colorPrimary = Color(0xFF1B3C53); /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
-    static const colorPrimaryForeground = Color(0xFFF0F7FF); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
+    static const colorPrimary = Color(0xFF1D4ED8); /** was Figma 'Primay' navy (blue.500 -> blue.700). Swapped for a bright action blue #1d4ed8 (6.55:1 on bg) so primary buttons/links pop rather than reading as near-black. Dark uses a lighter step (#60a5fa) — navy/this hue would fail on the dark surface. */
+    static const colorPrimaryForeground = Color(0xFFF0F7FF); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground (on #1d4ed8 primary ~6:1) */
     static const colorRed0 = Color(0xFFFFF9F9);
     static const colorRed100 = Color(0xFFF4C9C9);
     static const colorRed1000 = Color(0xFF000000);
@@ -125,9 +140,9 @@ class KinetixColors {
     static const colorRed850 = Color(0xFF3B0303);
     static const colorRed900 = Color(0xFF280202);
     static const colorRed950 = Color(0xFF140101);
-    static const colorRing = Color(0xFF1B3C53); /** figma: focus state draws a 2px 'Primay' border */
-    static const colorSecondary = Color(0xFFF1F3F1); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    static const colorSecondaryForeground = Color(0xFF5D6D5C); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
+    static const colorRing = Color(0xFF1D4ED8); /** focus ring — tracks --primary (#1d4ed8, 6.55:1 on bg) */
+    static const colorSecondary = Color(0xFFC7CFC7); /** figma secondaryContainer was green.50 #f1f3f1 (invisible on bg); deepened to green.200 #c7cfc7 so a secondary button/chip clearly stands off the white page — same sage hue */
+    static const colorSecondaryForeground = Color(0xFF465245); /** green.700 #465245 on secondary green.200 #c7cfc7 clears ~5.2:1 */
     static const colorSemanticError = Color(0xFFEC5047); /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     static const colorSemanticErrorContainer = Color(0xFFFEF3F2); /** figma: errorContainer */
     static const colorSemanticInfoContainer = Color(0xFFF0F7FF);
@@ -141,12 +156,12 @@ class KinetixColors {
     static const colorSemanticWarningContainer = Color(0xFFFFF8EB); /** figma: warningContainer */
     static const colorSidebar = Color(0xFFFAFAFA);
     static const colorSidebarAccent = Color(0xFFF0F7FF);
-    static const colorSidebarAccentForeground = Color(0xFF1B3C53);
+    static const colorSidebarAccentForeground = Color(0xFF1D4ED8);
     static const colorSidebarBorder = Color(0xFFE0E0E0);
     static const colorSidebarForeground = Color(0xFF050C11);
-    static const colorSidebarPrimary = Color(0xFF1B3C53);
+    static const colorSidebarPrimary = Color(0xFF1D4ED8);
     static const colorSidebarPrimaryForeground = Color(0xFFF0F7FF);
-    static const colorSidebarRing = Color(0xFF1B3C53);
+    static const colorSidebarRing = Color(0xFF1D4ED8);
     static const colorStaticBlack = Color(0xFF000000);
     static const colorStaticWhite = Color(0xFFFFFFFF);
     static const colorSuccess = Color(0xFF5D6D5C); /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */

package/dist/flutter/app_theme.dart

@@ -13,7 +13,7 @@ class KinetixTheme {
     KinetixTheme._();
 
     static const colorAccent = Color(0xFFF0F7FF); /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
-    static const colorAccentForeground = Color(0xFF1B3C53); /** synth: = primary for readable text on accent */
+    static const colorAccentForeground = Color(0xFF1D4ED8); /** synth: = primary for readable text on accent (#1d4ed8 on accent #f0f7ff ~5.7:1) */
     static const colorBackground = Color(0xFFFFFFFF); /** figma: surfaceContainerLowest #ffffff */
     static const colorBorder = Color(0xFF92B2C8); /** figma: outline #92b2c8 */
     static const colorCard = Color(0xFFFFFFFF); /** synth: no Figma card token; = background */
@@ -36,11 +36,11 @@ class KinetixTheme {
     static const colorMutedForeground = Color(0xFF6D6D6D); /** figma: onSurfaceVariant #6d6d6d */
     static const colorPopover = Color(0xFFFFFFFF); /** synth: no Figma popover token; = background */
     static const colorPopoverForeground = Color(0xFF050C11); /** synth: = foreground */
-    static const colorPrimary = Color(0xFF1B3C53); /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
-    static const colorPrimaryForeground = Color(0xFFF0F7FF); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
-    static const colorRing = Color(0xFF1B3C53); /** figma: focus state draws a 2px 'Primay' border */
-    static const colorSecondary = Color(0xFFF1F3F1); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    static const colorSecondaryForeground = Color(0xFF5D6D5C); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
+    static const colorPrimary = Color(0xFF1D4ED8); /** was Figma 'Primay' navy (blue.500 -> blue.700). Swapped for a bright action blue #1d4ed8 (6.55:1 on bg) so primary buttons/links pop rather than reading as near-black. Dark uses a lighter step (#60a5fa) — navy/this hue would fail on the dark surface. */
+    static const colorPrimaryForeground = Color(0xFFF0F7FF); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground (on #1d4ed8 primary ~6:1) */
+    static const colorRing = Color(0xFF1D4ED8); /** focus ring — tracks --primary (#1d4ed8, 6.55:1 on bg) */
+    static const colorSecondary = Color(0xFFC7CFC7); /** figma secondaryContainer was green.50 #f1f3f1 (invisible on bg); deepened to green.200 #c7cfc7 so a secondary button/chip clearly stands off the white page — same sage hue */
+    static const colorSecondaryForeground = Color(0xFF465245); /** green.700 #465245 on secondary green.200 #c7cfc7 clears ~5.2:1 */
     static const colorSemanticError = Color(0xFFEC5047); /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     static const colorSemanticErrorContainer = Color(0xFFFEF3F2); /** figma: errorContainer */
     static const colorSemanticInfoContainer = Color(0xFFF0F7FF);
@@ -54,12 +54,12 @@ class KinetixTheme {
     static const colorSemanticWarningContainer = Color(0xFFFFF8EB); /** figma: warningContainer */
     static const colorSidebar = Color(0xFFFAFAFA);
     static const colorSidebarAccent = Color(0xFFF0F7FF);
-    static const colorSidebarAccentForeground = Color(0xFF1B3C53);
+    static const colorSidebarAccentForeground = Color(0xFF1D4ED8);
     static const colorSidebarBorder = Color(0xFFE0E0E0);
     static const colorSidebarForeground = Color(0xFF050C11);
-    static const colorSidebarPrimary = Color(0xFF1B3C53);
+    static const colorSidebarPrimary = Color(0xFF1D4ED8);
     static const colorSidebarPrimaryForeground = Color(0xFFF0F7FF);
-    static const colorSidebarRing = Color(0xFF1B3C53);
+    static const colorSidebarRing = Color(0xFF1D4ED8);
     static const colorSuccess = Color(0xFF5D6D5C); /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */
     static const colorSuccessForeground = Color(0xFFF1F3F1); /** synth */
     static const colorTertiary = Color(0xFFB0B0B0); /** figma: tertiary — switch off-track */

package/dist/flutter/kinetix_color_scheme.dark.dart

@@ -13,7 +13,7 @@ class KinetixColorSchemeDark {
   static const cardForeground = Color(0xFFF0F7FF);
   static const popover = Color(0xFF0B1821);
   static const popoverForeground = Color(0xFFF0F7FF);
-  static const primary = Color(0xFF92B2C8);
+  static const primary = Color(0xFF60A5FA);
   static const primaryForeground = Color(0xFF050C11);
   static const secondary = Color(0xFF2E362E);
   static const secondaryForeground = Color(0xFFE3E7E3);
@@ -29,7 +29,7 @@ class KinetixColorSchemeDark {
   static const warningForeground = Color(0xFF2A1A00);
   static const border = Color(0xFF395A70);
   static const input = Color(0xFF395A70);
-  static const ring = Color(0xFF92B2C8);
+  static const ring = Color(0xFF60A5FA);
   static const chart1 = Color(0xFF92B2C8);
   static const chart2 = Color(0xFF90A08F);
   static const chart3 = Color(0xFFFFC975);
@@ -40,12 +40,12 @@ class KinetixColorSchemeDark {
   static const chart8 = Color(0xFF748873);
   static const sidebar = Color(0xFF0B1821);
   static const sidebarForeground = Color(0xFFF0F7FF);
-  static const sidebarPrimary = Color(0xFF92B2C8);
+  static const sidebarPrimary = Color(0xFF60A5FA);
   static const sidebarPrimaryForeground = Color(0xFF050C11);
   static const sidebarAccent = Color(0xFF102432);
   static const sidebarAccentForeground = Color(0xFFF0F7FF);
   static const sidebarBorder = Color(0xFF395A70);
-  static const sidebarRing = Color(0xFF92B2C8);
+  static const sidebarRing = Color(0xFF60A5FA);
   static const tertiary = Color(0xFF395A70);
   static const tertiaryForeground = Color(0xFFF0F7FF);
   static const info = Color(0xFF92B2C8);

package/dist/flutter/kinetix_color_scheme.dart

@@ -13,14 +13,14 @@ class KinetixColorScheme {
   static const cardForeground = Color(0xFF050C11);
   static const popover = Color(0xFFFFFFFF);
   static const popoverForeground = Color(0xFF050C11);
-  static const primary = Color(0xFF1B3C53);
+  static const primary = Color(0xFF1D4ED8);
   static const primaryForeground = Color(0xFFF0F7FF);
-  static const secondary = Color(0xFFF1F3F1);
-  static const secondaryForeground = Color(0xFF5D6D5C);
+  static const secondary = Color(0xFFC7CFC7);
+  static const secondaryForeground = Color(0xFF465245);
   static const muted = Color(0xFFF6F6F6);
   static const mutedForeground = Color(0xFF6D6D6D);
   static const accent = Color(0xFFF0F7FF);
-  static const accentForeground = Color(0xFF1B3C53);
+  static const accentForeground = Color(0xFF1D4ED8);
   static const destructive = Color(0xFFC60A0A);
   static const destructiveForeground = Color(0xFFFEF3F2);
   static const success = Color(0xFF5D6D5C);
@@ -29,7 +29,7 @@ class KinetixColorScheme {
   static const warningForeground = Color(0xFFFFF8EB);
   static const border = Color(0xFF92B2C8);
   static const input = Color(0xFF92B2C8);
-  static const ring = Color(0xFF1B3C53);
+  static const ring = Color(0xFF1D4ED8);
   static const chart1 = Color(0xFF1B3C53);
   static const chart2 = Color(0xFF748873);
   static const chart3 = Color(0xFFFFBC53);
@@ -40,12 +40,12 @@ class KinetixColorScheme {
   static const chart8 = Color(0xFF465245);
   static const sidebar = Color(0xFFFAFAFA);
   static const sidebarForeground = Color(0xFF050C11);
-  static const sidebarPrimary = Color(0xFF1B3C53);
+  static const sidebarPrimary = Color(0xFF1D4ED8);
   static const sidebarPrimaryForeground = Color(0xFFF0F7FF);
   static const sidebarAccent = Color(0xFFF0F7FF);
-  static const sidebarAccentForeground = Color(0xFF1B3C53);
+  static const sidebarAccentForeground = Color(0xFF1D4ED8);
   static const sidebarBorder = Color(0xFFE0E0E0);
-  static const sidebarRing = Color(0xFF1B3C53);
+  static const sidebarRing = Color(0xFF1D4ED8);
   static const tertiary = Color(0xFFB0B0B0);
   static const tertiaryForeground = Color(0xFFF0F7FF);
   static const info = Color(0xFF57778D);

package/dist/ios/KinetixColors.swift

@@ -10,7 +10,7 @@ import SwiftUI
 
 public enum KinetixColor {
     public static let colorAccent = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
-    public static let colorAccentForeground = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** synth: = primary for readable text on accent */
+    public static let colorAccentForeground = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** synth: = primary for readable text on accent (#1d4ed8 on accent #f0f7ff ~5.7:1) */
     public static let colorAmber0 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorAmber100 = UIColor(red: 1.000, green: 0.949, blue: 0.867, alpha: 1)
     public static let colorAmber1000 = UIColor(red: 0.165, green: 0.102, blue: 0.000, alpha: 1)
@@ -26,6 +26,21 @@ public enum KinetixColor {
     public static let colorAmber850 = UIColor(red: 0.416, green: 0.294, blue: 0.098, alpha: 1)
     public static let colorAmber900 = UIColor(red: 0.333, green: 0.227, blue: 0.067, alpha: 1)
     public static let colorAmber950 = UIColor(red: 0.247, green: 0.165, blue: 0.031, alpha: 1)
+    public static let colorAzure0 = UIColor(red: 0.969, green: 0.980, blue: 1.000, alpha: 1)
+    public static let colorAzure100 = UIColor(red: 0.859, green: 0.918, blue: 0.996, alpha: 1)
+    public static let colorAzure1000 = UIColor(red: 0.059, green: 0.090, blue: 0.165, alpha: 1)
+    public static let colorAzure150 = UIColor(red: 0.804, green: 0.882, blue: 0.992, alpha: 1)
+    public static let colorAzure200 = UIColor(red: 0.749, green: 0.859, blue: 0.996, alpha: 1)
+    public static let colorAzure300 = UIColor(red: 0.576, green: 0.773, blue: 0.992, alpha: 1)
+    public static let colorAzure400 = UIColor(red: 0.376, green: 0.647, blue: 0.980, alpha: 1)
+    public static let colorAzure50 = UIColor(red: 0.937, green: 0.965, blue: 1.000, alpha: 1)
+    public static let colorAzure500 = UIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
+    public static let colorAzure600 = UIColor(red: 0.145, green: 0.388, blue: 0.922, alpha: 1)
+    public static let colorAzure700 = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
+    public static let colorAzure800 = UIColor(red: 0.118, green: 0.251, blue: 0.686, alpha: 1)
+    public static let colorAzure850 = UIColor(red: 0.106, green: 0.220, blue: 0.592, alpha: 1)
+    public static let colorAzure900 = UIColor(red: 0.118, green: 0.227, blue: 0.541, alpha: 1)
+    public static let colorAzure950 = UIColor(red: 0.090, green: 0.145, blue: 0.329, alpha: 1)
     public static let colorBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** figma: surfaceContainerLowest #ffffff */
     public static let colorBlue0 = UIColor(red: 0.965, green: 0.984, blue: 1.000, alpha: 1)
     public static let colorBlue100 = UIColor(red: 0.573, green: 0.698, blue: 0.784, alpha: 1)
@@ -105,8 +120,8 @@ public enum KinetixColor {
     public static let colorNeutral900 = UIColor(red: 0.122, green: 0.122, blue: 0.122, alpha: 1)
     public static let colorPopover = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** synth: no Figma popover token; = background */
     public static let colorPopoverForeground = UIColor(red: 0.020, green: 0.047, blue: 0.067, alpha: 1) /** synth: = foreground */
-    public static let colorPrimary = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
-    public static let colorPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
+    public static let colorPrimary = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** was Figma 'Primay' navy (blue.500 -> blue.700). Swapped for a bright action blue #1d4ed8 (6.55:1 on bg) so primary buttons/links pop rather than reading as near-black. Dark uses a lighter step (#60a5fa) — navy/this hue would fail on the dark surface. */
+    public static let colorPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground (on #1d4ed8 primary ~6:1) */
     public static let colorRed0 = UIColor(red: 1.000, green: 0.976, blue: 0.976, alpha: 1)
     public static let colorRed100 = UIColor(red: 0.957, green: 0.788, blue: 0.788, alpha: 1)
     public static let colorRed1000 = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
@@ -122,9 +137,9 @@ public enum KinetixColor {
     public static let colorRed850 = UIColor(red: 0.231, green: 0.012, blue: 0.012, alpha: 1)
     public static let colorRed900 = UIColor(red: 0.157, green: 0.008, blue: 0.008, alpha: 1)
     public static let colorRed950 = UIColor(red: 0.078, green: 0.004, blue: 0.004, alpha: 1)
-    public static let colorRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: focus state draws a 2px 'Primay' border */
-    public static let colorSecondary = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    public static let colorSecondaryForeground = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
+    public static let colorRing = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** focus ring — tracks --primary (#1d4ed8, 6.55:1 on bg) */
+    public static let colorSecondary = UIColor(red: 0.780, green: 0.812, blue: 0.780, alpha: 1) /** figma secondaryContainer was green.50 #f1f3f1 (invisible on bg); deepened to green.200 #c7cfc7 so a secondary button/chip clearly stands off the white page — same sage hue */
+    public static let colorSecondaryForeground = UIColor(red: 0.275, green: 0.322, blue: 0.271, alpha: 1) /** green.700 #465245 on secondary green.200 #c7cfc7 clears ~5.2:1 */
     public static let colorSemanticError = UIColor(red: 0.925, green: 0.314, blue: 0.278, alpha: 1) /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     public static let colorSemanticErrorContainer = UIColor(red: 0.996, green: 0.953, blue: 0.949, alpha: 1) /** figma: errorContainer */
     public static let colorSemanticInfoContainer = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
@@ -138,12 +153,12 @@ public enum KinetixColor {
     public static let colorSemanticWarningContainer = UIColor(red: 1.000, green: 0.973, blue: 0.922, alpha: 1) /** figma: warningContainer */
     public static let colorSidebar = UIColor(red: 0.980, green: 0.980, blue: 0.980, alpha: 1)
     public static let colorSidebarAccent = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorSidebarAccentForeground = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarAccentForeground = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorSidebarBorder = UIColor(red: 0.878, green: 0.878, blue: 0.878, alpha: 1)
     public static let colorSidebarForeground = UIColor(red: 0.020, green: 0.047, blue: 0.067, alpha: 1)
-    public static let colorSidebarPrimary = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarPrimary = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorSidebarPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorSidebarRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarRing = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorStaticBlack = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorStaticWhite = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorSuccess = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */

package/dist/ios/KinetixColorsSwiftUI.dark.swift

@@ -11,7 +11,7 @@ public enum KinetixColorsSwiftUIDark {
     public static let cardForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let popover = Color(red: 0.043, green: 0.094, blue: 0.129)
     public static let popoverForeground = Color(red: 0.941, green: 0.969, blue: 1)
-    public static let primary = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let primary = Color(red: 0.376, green: 0.647, blue: 0.98)
     public static let primaryForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
     public static let secondary = Color(red: 0.18, green: 0.212, blue: 0.18)
     public static let secondaryForeground = Color(red: 0.89, green: 0.906, blue: 0.89)
@@ -27,7 +27,7 @@ public enum KinetixColorsSwiftUIDark {
     public static let warningForeground = Color(red: 0.165, green: 0.102, blue: 0)
     public static let border = Color(red: 0.224, green: 0.353, blue: 0.439)
     public static let input = Color(red: 0.224, green: 0.353, blue: 0.439)
-    public static let ring = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let ring = Color(red: 0.376, green: 0.647, blue: 0.98)
     public static let chart1 = Color(red: 0.573, green: 0.698, blue: 0.784)
     public static let chart2 = Color(red: 0.565, green: 0.627, blue: 0.561)
     public static let chart3 = Color(red: 1, green: 0.788, blue: 0.459)
@@ -38,12 +38,12 @@ public enum KinetixColorsSwiftUIDark {
     public static let chart8 = Color(red: 0.455, green: 0.533, blue: 0.451)
     public static let sidebar = Color(red: 0.043, green: 0.094, blue: 0.129)
     public static let sidebarForeground = Color(red: 0.941, green: 0.969, blue: 1)
-    public static let sidebarPrimary = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let sidebarPrimary = Color(red: 0.376, green: 0.647, blue: 0.98)
     public static let sidebarPrimaryForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
     public static let sidebarAccent = Color(red: 0.063, green: 0.141, blue: 0.196)
     public static let sidebarAccentForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let sidebarBorder = Color(red: 0.224, green: 0.353, blue: 0.439)
-    public static let sidebarRing = Color(red: 0.573, green: 0.698, blue: 0.784)
+    public static let sidebarRing = Color(red: 0.376, green: 0.647, blue: 0.98)
     public static let tertiary = Color(red: 0.224, green: 0.353, blue: 0.439)
     public static let tertiaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let info = Color(red: 0.573, green: 0.698, blue: 0.784)

package/dist/ios/KinetixColorsSwiftUI.swift

@@ -11,14 +11,14 @@ public enum KinetixColorsSwiftUI {
     public static let cardForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
     public static let popover = Color(red: 1, green: 1, blue: 1)
     public static let popoverForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
-    public static let primary = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let primary = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let primaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
-    public static let secondary = Color(red: 0.945, green: 0.953, blue: 0.945)
-    public static let secondaryForeground = Color(red: 0.365, green: 0.427, blue: 0.361)
+    public static let secondary = Color(red: 0.78, green: 0.812, blue: 0.78)
+    public static let secondaryForeground = Color(red: 0.275, green: 0.322, blue: 0.271)
     public static let muted = Color(red: 0.965, green: 0.965, blue: 0.965)
     public static let mutedForeground = Color(red: 0.427, green: 0.427, blue: 0.427)
     public static let accent = Color(red: 0.941, green: 0.969, blue: 1)
-    public static let accentForeground = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let accentForeground = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let destructive = Color(red: 0.776, green: 0.039, blue: 0.039)
     public static let destructiveForeground = Color(red: 0.996, green: 0.953, blue: 0.949)
     public static let success = Color(red: 0.365, green: 0.427, blue: 0.361)
@@ -27,7 +27,7 @@ public enum KinetixColorsSwiftUI {
     public static let warningForeground = Color(red: 1, green: 0.973, blue: 0.922)
     public static let border = Color(red: 0.573, green: 0.698, blue: 0.784)
     public static let input = Color(red: 0.573, green: 0.698, blue: 0.784)
-    public static let ring = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let ring = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let chart1 = Color(red: 0.106, green: 0.235, blue: 0.325)
     public static let chart2 = Color(red: 0.455, green: 0.533, blue: 0.451)
     public static let chart3 = Color(red: 1, green: 0.737, blue: 0.325)
@@ -38,12 +38,12 @@ public enum KinetixColorsSwiftUI {
     public static let chart8 = Color(red: 0.275, green: 0.322, blue: 0.271)
     public static let sidebar = Color(red: 0.98, green: 0.98, blue: 0.98)
     public static let sidebarForeground = Color(red: 0.02, green: 0.047, blue: 0.067)
-    public static let sidebarPrimary = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let sidebarPrimary = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let sidebarPrimaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let sidebarAccent = Color(red: 0.941, green: 0.969, blue: 1)
-    public static let sidebarAccentForeground = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let sidebarAccentForeground = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let sidebarBorder = Color(red: 0.878, green: 0.878, blue: 0.878)
-    public static let sidebarRing = Color(red: 0.106, green: 0.235, blue: 0.325)
+    public static let sidebarRing = Color(red: 0.114, green: 0.306, blue: 0.847)
     public static let tertiary = Color(red: 0.69, green: 0.69, blue: 0.69)
     public static let tertiaryForeground = Color(red: 0.941, green: 0.969, blue: 1)
     public static let info = Color(red: 0.341, green: 0.467, blue: 0.553)

package/dist/ios/Theme.swift

@@ -10,7 +10,7 @@ import SwiftUI
 
 public class KinetixTheme {
     public static let colorAccent = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
-    public static let colorAccentForeground = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** synth: = primary for readable text on accent */
+    public static let colorAccentForeground = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** synth: = primary for readable text on accent (#1d4ed8 on accent #f0f7ff ~5.7:1) */
     public static let colorBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** figma: surfaceContainerLowest #ffffff */
     public static let colorBorder = UIColor(red: 0.573, green: 0.698, blue: 0.784, alpha: 1) /** figma: outline #92b2c8 */
     public static let colorCard = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** synth: no Figma card token; = background */
@@ -33,11 +33,11 @@ public class KinetixTheme {
     public static let colorMutedForeground = UIColor(red: 0.427, green: 0.427, blue: 0.427, alpha: 1) /** figma: onSurfaceVariant #6d6d6d */
     public static let colorPopover = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1) /** synth: no Figma popover token; = background */
     public static let colorPopoverForeground = UIColor(red: 0.020, green: 0.047, blue: 0.067, alpha: 1) /** synth: = foreground */
-    public static let colorPrimary = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
-    public static let colorPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
-    public static let colorRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1) /** figma: focus state draws a 2px 'Primay' border */
-    public static let colorSecondary = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-    public static let colorSecondaryForeground = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
+    public static let colorPrimary = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** was Figma 'Primay' navy (blue.500 -> blue.700). Swapped for a bright action blue #1d4ed8 (6.55:1 on bg) so primary buttons/links pop rather than reading as near-black. Dark uses a lighter step (#60a5fa) — navy/this hue would fail on the dark surface. */
+    public static let colorPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1) /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground (on #1d4ed8 primary ~6:1) */
+    public static let colorRing = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1) /** focus ring — tracks --primary (#1d4ed8, 6.55:1 on bg) */
+    public static let colorSecondary = UIColor(red: 0.780, green: 0.812, blue: 0.780, alpha: 1) /** figma secondaryContainer was green.50 #f1f3f1 (invisible on bg); deepened to green.200 #c7cfc7 so a secondary button/chip clearly stands off the white page — same sage hue */
+    public static let colorSecondaryForeground = UIColor(red: 0.275, green: 0.322, blue: 0.271, alpha: 1) /** green.700 #465245 on secondary green.200 #c7cfc7 clears ~5.2:1 */
     public static let colorSemanticError = UIColor(red: 0.925, green: 0.314, blue: 0.278, alpha: 1) /** figma: error (NOT red.500 #c60a0a — Figma keeps error as its own value) */
     public static let colorSemanticErrorContainer = UIColor(red: 0.996, green: 0.953, blue: 0.949, alpha: 1) /** figma: errorContainer */
     public static let colorSemanticInfoContainer = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
@@ -51,12 +51,12 @@ public class KinetixTheme {
     public static let colorSemanticWarningContainer = UIColor(red: 1.000, green: 0.973, blue: 0.922, alpha: 1) /** figma: warningContainer */
     public static let colorSidebar = UIColor(red: 0.980, green: 0.980, blue: 0.980, alpha: 1)
     public static let colorSidebarAccent = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorSidebarAccentForeground = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarAccentForeground = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorSidebarBorder = UIColor(red: 0.878, green: 0.878, blue: 0.878, alpha: 1)
     public static let colorSidebarForeground = UIColor(red: 0.020, green: 0.047, blue: 0.067, alpha: 1)
-    public static let colorSidebarPrimary = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarPrimary = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorSidebarPrimaryForeground = UIColor(red: 0.941, green: 0.969, blue: 1.000, alpha: 1)
-    public static let colorSidebarRing = UIColor(red: 0.106, green: 0.235, blue: 0.325, alpha: 1)
+    public static let colorSidebarRing = UIColor(red: 0.114, green: 0.306, blue: 0.847, alpha: 1)
     public static let colorSuccess = UIColor(red: 0.365, green: 0.427, blue: 0.361, alpha: 1) /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */
     public static let colorSuccessForeground = UIColor(red: 0.945, green: 0.953, blue: 0.945, alpha: 1) /** synth */
     public static let colorTertiary = UIColor(red: 0.690, green: 0.690, blue: 0.690, alpha: 1) /** figma: tertiary — switch off-track */

package/dist/web/extras.css

@@ -5,7 +5,7 @@
   --shadow-md: 0 1px 1px 0 #0000001f, 0 2px 5px 0 #676e7614;
   --shadow-lg: 0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000f;
   --shadow-xl: 0 4px 24px 0 #0000001f;
-  --shadow-focus: 0 0 0 1px #1b3c53, 0 0 0 4px #1b3c5333;
+  --shadow-focus: 0 0 0 1px #1d4ed8, 0 0 0 4px #1d4ed833;
   --shadow-focus-destructive: 0 0 0 1px #ec5047, 0 0 0 4px #ec504733;
   --shadow-focus-success: 0 0 0 1px #5d6d5c, 0 0 0 4px #5d6d5c33;
   --shadow-focus-warning: 0 0 0 1px #f97907, 0 0 0 4px #f9790733;

package/dist/web/extras.dark.css

@@ -1,7 +1,7 @@
 /* Generated by Style Dictionary — shadow + typography composites. */
 
 .dark {
-  --shadow-focus: 0 0 0 1px #92b2c8, 0 0 0 4px #92b2c852;
+  --shadow-focus: 0 0 0 1px #60a5fa, 0 0 0 4px #60a5fa52;
   --shadow-focus-destructive: 0 0 0 1px #dd6a6a, 0 0 0 4px #dd6a6a52;
   --shadow-focus-success: 0 0 0 1px #90a08f, 0 0 0 4px #90a08f52;
   --shadow-focus-warning: 0 0 0 1px #ffc975, 0 0 0 4px #ffc97552;

package/dist/web/globals.css

@@ -3,6 +3,21 @@
  */
 
 :root {
+  --azure-0: 218 100% 98%;
+  --azure-50: 214 100% 97%;
+  --azure-100: 214 95% 93%;
+  --azure-150: 215 92% 90%;
+  --azure-200: 213 97% 87%;
+  --azure-300: 212 96% 78%;
+  --azure-400: 213 94% 68%;
+  --azure-500: 217 91% 60%;
+  --azure-600: 221 83% 53%;
+  --azure-700: 224 76% 48%;
+  --azure-800: 226 71% 40%;
+  --azure-850: 226 70% 35%;
+  --azure-900: 224 64% 33%;
+  --azure-950: 226 57% 21%;
+  --azure-1000: 222 47% 11%;
   --blue-0: 207 100% 98%;
   --blue-50: 212 100% 97%;
   --blue-100: 204 33% 68%;
@@ -184,14 +199,14 @@
   --card-foreground: var(--blue-900); /** synth: = foreground */
   --popover: var(--neutral-0); /** synth: no Figma popover token; = background */
   --popover-foreground: var(--blue-900); /** synth: = foreground */
-  --primary: var(--blue-500); /** figma: 'Primay' (sic) #1b3c53 -> renamed primary */
-  --primary-foreground: var(--blue-50); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground */
-  --secondary: var(--green-50); /** figma: secondaryContainer #f1f3f1 (our 'secondary' == Figma container role) */
-  --secondary-foreground: var(--green-600); /** figma onSecondaryContainer was green.500 (#748873) = 3.42:1 on secondary (AA-large only); green.600 (#5d6d5c) = 4.95:1 */
+  --primary: var(--azure-700); /** was Figma 'Primay' navy (blue.500 -> blue.700). Swapped for a bright action blue #1d4ed8 (6.55:1 on bg) so primary buttons/links pop rather than reading as near-black. Dark uses a lighter step (#60a5fa) — navy/this hue would fail on the dark surface. */
+  --primary-foreground: var(--blue-50); /** figma: 'On Primary' #f0f7ff -> renamed primary-foreground (on #1d4ed8 primary ~6:1) */
+  --secondary: var(--green-200); /** figma secondaryContainer was green.50 #f1f3f1 (invisible on bg); deepened to green.200 #c7cfc7 so a secondary button/chip clearly stands off the white page — same sage hue */
+  --secondary-foreground: var(--green-700); /** green.700 #465245 on secondary green.200 #c7cfc7 clears ~5.2:1 */
   --muted: var(--neutral-100); /** figma: surfaceContainer #f6f6f6 */
   --muted-foreground: var(--neutral-600); /** figma: onSurfaceVariant #6d6d6d */
   --accent: var(--blue-50); /** figma: 'LightBlue' #f0f7ff (the hover fill used by Outline/Ghost buttons) */
-  --accent-foreground: var(--blue-500); /** synth: = primary for readable text on accent */
+  --accent-foreground: var(--azure-700); /** synth: = primary for readable text on accent (#1d4ed8 on accent #f0f7ff ~5.7:1) */
   --destructive: var(--red-500); /** a11y: figma error #ec5047 is 3.33:1 under on-error / 3.62:1 as text on the page — fails WCAG AA. red.500 #c60a0a clears 5.6:1 / 6.1:1. See ACCESSIBILITY-AUDIT.md. */
   --destructive-foreground: var(--semantic-on-error); /** figma: onError #fef3f2 */
   --success: var(--green-600); /** synth: no Figma success token; green ramp step 6 (distinct from secondary) */
@@ -200,7 +215,7 @@
   --warning-foreground: var(--semantic-warning-container); /** figma: warningContainer #fff8eb */
   --border: var(--blue-100); /** figma: outline #92b2c8 */
   --input: var(--blue-100); /** figma: outline #92b2c8 (same as border) */
-  --ring: var(--blue-500); /** figma: focus state draws a 2px 'Primay' border */
+  --ring: var(--azure-700); /** focus ring — tracks --primary (#1d4ed8, 6.55:1 on bg) */
   --chart-1: var(--blue-500); /** synth: brand ramps for data viz */
   --chart-2: var(--green-500);
   --chart-3: var(--amber-500);
@@ -211,12 +226,12 @@
   --chart-8: var(--green-700); /** synth: 8th data-viz hue — deep green, distinct from chart-2 */
   --sidebar: var(--neutral-50);
   --sidebar-foreground: var(--blue-900);
-  --sidebar-primary: var(--blue-500);
+  --sidebar-primary: var(--azure-700);
   --sidebar-primary-foreground: var(--blue-50);
   --sidebar-accent: var(--blue-50);
-  --sidebar-accent-foreground: var(--blue-500);
+  --sidebar-accent-foreground: var(--azure-700);
   --sidebar-border: var(--neutral-300);
-  --sidebar-ring: var(--blue-500);
+  --sidebar-ring: var(--azure-700);
   --tertiary-foreground: var(--blue-50);
   --info: var(--blue-300); /** synth: steel blue, distinct from navy primary */
   --info-foreground: var(--blue-50);

package/dist/web/globals.dark.css

@@ -9,8 +9,8 @@
   --card-foreground: 212 100% 97%;
   --popover: 205 50% 9%;
   --popover-foreground: 212 100% 97%;
-  --primary: 204 33% 68%;
-  --primary-foreground: 205 55% 4%;
+  --primary: 213 94% 68%; /** light-theme primary is a bright #1d4ed8; on the near-black dark surface that would be ~2.9:1, so dark uses a lighter step of the same blue (#60a5fa, ~7.6:1 on bg). Two independent palettes — this is not a flip of the light value. */
+  --primary-foreground: 205 55% 4%; /** near-black text on the light-blue dark --primary (~7:1) */
   --secondary: 120 8% 20%;
   --secondary-foreground: 120 8% 90%;
   --muted: 205 52% 13%;
@@ -25,7 +25,7 @@
   --warning-foreground: 37 100% 8%;
   --border: 204 33% 33%;
   --input: 204 33% 33%;
-  --ring: 204 33% 68%;
+  --ring: 213 94% 68%; /** focus ring — tracks dark --primary (#60a5fa) */
   --chart-1: 204 33% 68%;
   --chart-2: 116 8% 59%;
   --chart-3: 37 100% 73%;
@@ -36,12 +36,12 @@
   --chart-8: 117 8% 49%;
   --sidebar: 205 50% 9%;
   --sidebar-foreground: 212 100% 97%;
-  --sidebar-primary: 204 33% 68%;
+  --sidebar-primary: 213 94% 68%;
   --sidebar-primary-foreground: 205 55% 4%;
   --sidebar-accent: 205 52% 13%;
   --sidebar-accent-foreground: 212 100% 97%;
   --sidebar-border: 204 33% 33%;
-  --sidebar-ring: 204 33% 68%;
+  --sidebar-ring: 213 94% 68%;
   --tertiary: 204 33% 33%;
   --tertiary-foreground: 212 100% 97%;
   --info: 204 33% 68%;

package/dist/web/tokens.d.ts

@@ -1,6 +1,23 @@
 // Generated by pnpm build:tokens — do not edit.
 declare const tokens: {
   "color": {
+    "azure": {
+      "0": "#f7faff",
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "150": "#cde1fd",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "850": "#1b3897",
+      "900": "#1e3a8a",
+      "950": "#172554",
+      "1000": "#0f172a"
+    },
     "blue": {
       "0": "#f6fbff",
       "50": "#f0f7ff",
@@ -127,14 +144,14 @@ declare const tokens: {
     "card-foreground": "#050c11",
     "popover": "#ffffff",
     "popover-foreground": "#050c11",
-    "primary": "#1b3c53",
+    "primary": "#1d4ed8",
     "primary-foreground": "#f0f7ff",
-    "secondary": "#f1f3f1",
-    "secondary-foreground": "#5d6d5c",
+    "secondary": "#c7cfc7",
+    "secondary-foreground": "#465245",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",
-    "accent-foreground": "#1b3c53",
+    "accent-foreground": "#1d4ed8",
     "destructive": "#c60a0a",
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
@@ -143,7 +160,7 @@ declare const tokens: {
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
-    "ring": "#1b3c53",
+    "ring": "#1d4ed8",
     "semantic": {
       "error": "#ec5047",
       "on-error": "#fef3f2",
@@ -167,12 +184,12 @@ declare const tokens: {
     "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
-    "sidebar-primary": "#1b3c53",
+    "sidebar-primary": "#1d4ed8",
     "sidebar-primary-foreground": "#f0f7ff",
     "sidebar-accent": "#f0f7ff",
-    "sidebar-accent-foreground": "#1b3c53",
+    "sidebar-accent-foreground": "#1d4ed8",
     "sidebar-border": "#e0e0e0",
-    "sidebar-ring": "#1b3c53",
+    "sidebar-ring": "#1d4ed8",
     "tertiary": "#b0b0b0",
     "tertiary-foreground": "#f0f7ff",
     "info": "#57778d",
@@ -308,14 +325,14 @@ declare const tokens: {
     ],
     "focus": [
       {
-        "color": "#1b3c53",
+        "color": "#1d4ed8",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",
         "spread": "1"
       },
       {
-        "color": "#1b3c5333",
+        "color": "#1d4ed833",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",

package/dist/web/tokens.js

@@ -1,6 +1,23 @@
 // Generated by pnpm build:tokens — do not edit.
 export const tokens = {
   "color": {
+    "azure": {
+      "0": "#f7faff",
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "150": "#cde1fd",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "850": "#1b3897",
+      "900": "#1e3a8a",
+      "950": "#172554",
+      "1000": "#0f172a"
+    },
     "blue": {
       "0": "#f6fbff",
       "50": "#f0f7ff",
@@ -127,14 +144,14 @@ export const tokens = {
     "card-foreground": "#050c11",
     "popover": "#ffffff",
     "popover-foreground": "#050c11",
-    "primary": "#1b3c53",
+    "primary": "#1d4ed8",
     "primary-foreground": "#f0f7ff",
-    "secondary": "#f1f3f1",
-    "secondary-foreground": "#5d6d5c",
+    "secondary": "#c7cfc7",
+    "secondary-foreground": "#465245",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",
-    "accent-foreground": "#1b3c53",
+    "accent-foreground": "#1d4ed8",
     "destructive": "#c60a0a",
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
@@ -143,7 +160,7 @@ export const tokens = {
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
-    "ring": "#1b3c53",
+    "ring": "#1d4ed8",
     "semantic": {
       "error": "#ec5047",
       "on-error": "#fef3f2",
@@ -167,12 +184,12 @@ export const tokens = {
     "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
-    "sidebar-primary": "#1b3c53",
+    "sidebar-primary": "#1d4ed8",
     "sidebar-primary-foreground": "#f0f7ff",
     "sidebar-accent": "#f0f7ff",
-    "sidebar-accent-foreground": "#1b3c53",
+    "sidebar-accent-foreground": "#1d4ed8",
     "sidebar-border": "#e0e0e0",
-    "sidebar-ring": "#1b3c53",
+    "sidebar-ring": "#1d4ed8",
     "tertiary": "#b0b0b0",
     "tertiary-foreground": "#f0f7ff",
     "info": "#57778d",
@@ -308,14 +325,14 @@ export const tokens = {
     ],
     "focus": [
       {
-        "color": "#1b3c53",
+        "color": "#1d4ed8",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",
         "spread": "1"
       },
       {
-        "color": "#1b3c5333",
+        "color": "#1d4ed833",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",

package/dist/web/tokens.ts

@@ -2,6 +2,23 @@
 
 export const tokens = {
   "color": {
+    "azure": {
+      "0": "#f7faff",
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "150": "#cde1fd",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "850": "#1b3897",
+      "900": "#1e3a8a",
+      "950": "#172554",
+      "1000": "#0f172a"
+    },
     "blue": {
       "0": "#f6fbff",
       "50": "#f0f7ff",
@@ -128,14 +145,14 @@ export const tokens = {
     "card-foreground": "#050c11",
     "popover": "#ffffff",
     "popover-foreground": "#050c11",
-    "primary": "#1b3c53",
+    "primary": "#1d4ed8",
     "primary-foreground": "#f0f7ff",
-    "secondary": "#f1f3f1",
-    "secondary-foreground": "#5d6d5c",
+    "secondary": "#c7cfc7",
+    "secondary-foreground": "#465245",
     "muted": "#f6f6f6",
     "muted-foreground": "#6d6d6d",
     "accent": "#f0f7ff",
-    "accent-foreground": "#1b3c53",
+    "accent-foreground": "#1d4ed8",
     "destructive": "#c60a0a",
     "destructive-foreground": "#fef3f2",
     "success": "#5d6d5c",
@@ -144,7 +161,7 @@ export const tokens = {
     "warning-foreground": "#fff8eb",
     "border": "#92b2c8",
     "input": "#92b2c8",
-    "ring": "#1b3c53",
+    "ring": "#1d4ed8",
     "semantic": {
       "error": "#ec5047",
       "on-error": "#fef3f2",
@@ -168,12 +185,12 @@ export const tokens = {
     "chart-8": "#465245",
     "sidebar": "#fafafa",
     "sidebar-foreground": "#050c11",
-    "sidebar-primary": "#1b3c53",
+    "sidebar-primary": "#1d4ed8",
     "sidebar-primary-foreground": "#f0f7ff",
     "sidebar-accent": "#f0f7ff",
-    "sidebar-accent-foreground": "#1b3c53",
+    "sidebar-accent-foreground": "#1d4ed8",
     "sidebar-border": "#e0e0e0",
-    "sidebar-ring": "#1b3c53",
+    "sidebar-ring": "#1d4ed8",
     "tertiary": "#b0b0b0",
     "tertiary-foreground": "#f0f7ff",
     "info": "#57778d",
@@ -309,14 +326,14 @@ export const tokens = {
     ],
     "focus": [
       {
-        "color": "#1b3c53",
+        "color": "#1d4ed8",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",
         "spread": "1"
       },
       {
-        "color": "#1b3c5333",
+        "color": "#1d4ed833",
         "offsetX": "0",
         "offsetY": "0",
         "blur": "0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/tokens",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "KinetixUI design tokens — CSS variables, a TypeScript object, and native SwiftUI / Jetpack Compose / Flutter text styles, compiled by Style Dictionary.",
   "keywords": [
     "design-tokens",