@kickstartds/ds-agency-premium 1.6.72--canary.56.2518.0 → 1.6.72--canary.43.2525.0

package/dist/tokens/branding-token-burgundy.css

@@ -0,0 +1,113 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: oklch(52.408% 0.21712 344.427);
+  --ks-brand-color-primary-inverted: oklch(56.86% 0.255 257.57);
+
+  --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
+  --ks-brand-color-on-primary-inverted: var(--ks-color-fg-inverted);
+
+  --ks-brand-color-bg: oklch(97.386% 0.01826 336.224);
+  --ks-brand-color-bg-inverted: #0f203e;
+
+  --ks-brand-color-fg: #06081f;
+  --ks-brand-color-fg-inverted: #fff;
+
+  --ks-brand-color-link: oklch(52.408% 0.21712 344.427);
+  --ks-brand-color-link-inverted: #98b2e0;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor: 1.5;
+  --ks-brand-font-size-display-grow-factor: 1.5;
+  --ks-brand-font-size-display-bp-factor: 1.5;
+
+  --ks-brand-font-size-copy-base: 16px;
+  --ks-brand-font-size-copy-shrink-factor: 1.5;
+  --ks-brand-font-size-copy-grow-factor: 1.5;
+  --ks-brand-font-size-copy-bp-factor: 1.5;
+
+  --ks-brand-font-size-interface-base: 16px;
+  --ks-brand-font-size-interface-shrink-factor: 1.5;
+  --ks-brand-font-size-interface-grow-factor: 1.5;
+  --ks-brand-font-size-interface-bp-factor: 1.5;
+
+  --ks-brand-font-size-mono-base: 16px;
+  --ks-brand-font-size-mono-shrink-factor: 1.5;
+  --ks-brand-font-size-mono-grow-factor: 1.5;
+  --ks-brand-font-size-mono-bp-factor: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 16px;
+  --ks-brand-spacing-shrink-factor: 1.5;
+  --ks-brand-spacing-grow-factor: 1.5;
+  --ks-brand-spacing-bp-factor: 1.5;
+}
+
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: 0;
+  --ks-brand-border-radius-card: 0;
+  --ks-brand-border-radius-surface: 0;
+}

package/dist/tokens/branding-token-coffee.css

@@ -0,0 +1,114 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: rgb(255, 169, 89);
+  --ks-brand-color-primary-inverted: rgb(255, 169, 89);
+
+  --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
+  --ks-brand-color-on-primary-inverted: black;
+
+  --ks-brand-color-bg: oklch(24% 0.023 329.708);
+  --ks-brand-color-bg-inverted: #0f203e;
+
+  --ks-brand-color-fg: rgb(255, 169, 89);
+  --ks-brand-color-fg-inverted: oklch(24% 0.023 329.708);
+
+  --ks-brand-color-link: oklch(90.382% 0.06694 65.317);
+  --ks-brand-color-link-inverted: #98b2e0;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor: 1.5;
+  --ks-brand-font-size-display-grow-factor: 1.5;
+  --ks-brand-font-size-display-bp-factor: 1.5;
+
+  --ks-brand-font-size-copy-base: 14px;
+  --ks-brand-font-size-copy-shrink-factor: 1.5;
+  --ks-brand-font-size-copy-grow-factor: 1.5;
+  --ks-brand-font-size-copy-bp-factor: 1.5;
+
+  --ks-brand-font-size-interface-base: 14px;
+  --ks-brand-font-size-interface-shrink-factor: 1.5;
+  --ks-brand-font-size-interface-grow-factor: 1.5;
+  --ks-brand-font-size-interface-bp-factor: 1.5;
+
+  --ks-brand-font-size-mono-base: 14px;
+  --ks-brand-font-size-mono-shrink-factor: 1.5;
+  --ks-brand-font-size-mono-grow-factor: 1.5;
+  --ks-brand-font-size-mono-bp-factor: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 16px;
+  --ks-brand-spacing-shrink-factor: 1.5;
+  --ks-brand-spacing-grow-factor: 1.5;
+  --ks-brand-spacing-bp-factor: 1.5;
+}
+
+/* Border */
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: var(--ks-spacing-xs);
+  --ks-brand-border-radius-card: var(--ks-spacing-s);
+  --ks-brand-border-radius-surface: var(--ks-spacing-m);
+}

package/dist/tokens/branding-token-mint.css

@@ -0,0 +1,114 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: #02816e;
+  --ks-brand-color-primary-inverted: #4e83e0;
+
+  --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
+  --ks-brand-color-on-primary-inverted: var(--ks-color-fg);
+
+  --ks-brand-color-bg: oklch(98.71% 0.02 123.72);
+  --ks-brand-color-bg-inverted: #0f203e;
+
+  --ks-brand-color-fg: #06081f;
+  --ks-brand-color-fg-inverted: #fff;
+
+  --ks-brand-color-link: #007e6c;
+  --ks-brand-color-link-inverted: #98b2e0;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor: 1.5;
+  --ks-brand-font-size-display-grow-factor: 1.5;
+  --ks-brand-font-size-display-bp-factor: 1.5;
+
+  --ks-brand-font-size-copy-base: 18px;
+  --ks-brand-font-size-copy-shrink-factor: 1.5;
+  --ks-brand-font-size-copy-grow-factor: 1.5;
+  --ks-brand-font-size-copy-bp-factor: 1.5;
+
+  --ks-brand-font-size-interface-base: 18px;
+  --ks-brand-font-size-interface-shrink-factor: 1.5;
+  --ks-brand-font-size-interface-grow-factor: 1.5;
+  --ks-brand-font-size-interface-bp-factor: 1.5;
+
+  --ks-brand-font-size-mono-base: 18px;
+  --ks-brand-font-size-mono-shrink-factor: 1.5;
+  --ks-brand-font-size-mono-grow-factor: 1.5;
+  --ks-brand-font-size-mono-bp-factor: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 16px;
+  --ks-brand-spacing-shrink-factor: 1.5;
+  --ks-brand-spacing-grow-factor: 1.5;
+  --ks-brand-spacing-bp-factor: 1.5;
+}
+
+/* Border */
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: var(--ks-spacing-xxs);
+  --ks-brand-border-radius-card: var(--ks-spacing-xs);
+  --ks-brand-border-radius-surface: var(--ks-spacing-s);
+}

package/dist/tokens/branding-token-neon.css

@@ -0,0 +1,113 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: #e21879;
+  --ks-brand-color-primary-inverted: #4d25ef;
+
+  --ks-brand-color-on-primary: var(--ks-color-fg);
+  --ks-brand-color-on-primary-inverted: var(--ks-color-fg-inverted);
+
+  --ks-brand-color-bg: #06081f;
+  --ks-brand-color-bg-inverted: #f1f1f3;
+
+  --ks-brand-color-fg: #fff;
+  --ks-brand-color-fg-inverted: #06081f;
+
+  --ks-brand-color-link: #b7a5ff;
+  --ks-brand-color-link-inverted: #6642f6;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor-input: 1.5;
+  --ks-brand-font-size-display-grow-factor-input: 1.5;
+  --ks-brand-font-size-display-bp-factor-input: 1.5;
+
+  --ks-brand-font-size-copy-base: 18px;
+  --ks-brand-font-size-copy-shrink-factor-input: 1.5;
+  --ks-brand-font-size-copy-grow-factor-input: 1.5;
+  --ks-brand-font-size-copy-bp-factor-input: 1.5;
+
+  --ks-brand-font-size-interface-base: 18px;
+  --ks-brand-font-size-interface-shrink-factor-input: 1.5;
+  --ks-brand-font-size-interface-grow-factor-input: 1.5;
+  --ks-brand-font-size-interface-bp-factor-input: 1.5;
+
+  --ks-brand-font-size-mono-base: 18px;
+  --ks-brand-font-size-mono-shrink-factor-input: 1.5;
+  --ks-brand-font-size-mono-grow-factor-input: 1.5;
+  --ks-brand-font-size-mono-bp-factor-input: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 18px;
+  --ks-brand-spacing-shrink-factor: 1.5;
+  --ks-brand-spacing-grow-factor: 1.5;
+  --ks-brand-spacing-bp-factor: 1.5;
+}
+
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: var(--ks-spacing-xs);
+  --ks-brand-border-radius-card: var(--ks-spacing-s);
+  --ks-brand-border-radius-surface: var(--ks-spacing-m);
+}

package/dist/tokens/branding-token-water.css

@@ -0,0 +1,114 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: rgb(93, 136, 236);
+  --ks-brand-color-primary-inverted: rgb(0, 18, 61);
+
+  --ks-brand-color-on-primary: var(--ks-color-primary-inverted);
+  --ks-brand-color-on-primary-inverted: black;
+
+  --ks-brand-color-bg: rgb(0, 16, 54);
+  --ks-brand-color-bg-inverted: #0f203e;
+
+  --ks-brand-color-fg: rgb(210, 216, 232);
+  --ks-brand-color-fg-inverted: oklch(24% 0.023 329.708);
+
+  --ks-brand-color-link: var(--ks-color-primary);
+  --ks-brand-color-link-inverted: #98b2e0;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor: 1.5;
+  --ks-brand-font-size-display-grow-factor: 1.5;
+  --ks-brand-font-size-display-bp-factor: 1.5;
+
+  --ks-brand-font-size-copy-base: 14px;
+  --ks-brand-font-size-copy-shrink-factor: 1.5;
+  --ks-brand-font-size-copy-grow-factor: 1.5;
+  --ks-brand-font-size-copy-bp-factor: 1.5;
+
+  --ks-brand-font-size-interface-base: 14px;
+  --ks-brand-font-size-interface-shrink-factor: 1.5;
+  --ks-brand-font-size-interface-grow-factor: 1.5;
+  --ks-brand-font-size-interface-bp-factor: 1.5;
+
+  --ks-brand-font-size-mono-base: 14px;
+  --ks-brand-font-size-mono-shrink-factor: 1.5;
+  --ks-brand-font-size-mono-grow-factor: 1.5;
+  --ks-brand-font-size-mono-bp-factor: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 18px;
+  --ks-brand-spacing-shrink-factor: 1.35;
+  --ks-brand-spacing-grow-factor: 1.35;
+  --ks-brand-spacing-bp-factor: 1.75;
+}
+
+/* Border */
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: var(--ks-border-radius-pill);
+  --ks-brand-border-radius-card: var(--ks-spacing-m);
+  --ks-brand-border-radius-surface: var(--ks-spacing-l);
+}

package/dist/tokens/branding-token.css

@@ -0,0 +1,113 @@
+:root {
+  /* Colors */
+  --ks-brand-color-primary: #3065c0;
+  --ks-brand-color-primary-inverted: #4e83e0;
+
+  --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
+  --ks-brand-color-on-primary-inverted: var(--ks-color-fg);
+
+  --ks-brand-color-bg: #fff;
+  --ks-brand-color-bg-inverted: #0f203e;
+
+  --ks-brand-color-fg: #06081f;
+  --ks-brand-color-fg-inverted: #fff;
+
+  --ks-brand-color-link: #3065c0;
+  --ks-brand-color-link-inverted: #98b2e0;
+
+  --ks-brand-color-positive: #23831b;
+  --ks-brand-color-positive-inverted: #6edb64;
+
+  --ks-brand-color-negative: #ff1a57;
+  --ks-brand-color-negative-inverted: #d21d48;
+
+  --ks-brand-color-informative: #64c2db;
+  --ks-brand-color-informative-inverted: #00718f;
+
+  --ks-brand-color-notice: #64c2db;
+  --ks-brand-color-notice-inverted: #00718f;
+
+  --ks-brand-color-scale-9: 5%;
+  --ks-brand-color-scale-8: 15%;
+  --ks-brand-color-scale-7: 27%;
+  --ks-brand-color-scale-6: 39%;
+  --ks-brand-color-scale-5: 50%;
+  --ks-brand-color-scale-4: 61%;
+  --ks-brand-color-scale-3: 73%;
+  --ks-brand-color-scale-2: 85%;
+  --ks-brand-color-scale-1: 95%;
+}
+
+:root {
+  /* Font Families */
+  --ks-brand-font-family-display: Montserrat, Baskerville,
+    "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
+    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
+    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
+    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
+    "Liberation Sans", sans-serif;
+  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+    Consolas, "Liberation Mono", monospace;
+
+  /* Font Weights */
+  --ks-brand-font-weight-light: 300;
+  --ks-brand-font-weight-regular: 400;
+  --ks-brand-font-weight-medium: 500;
+  --ks-brand-font-weight-semi-bold: 600;
+  --ks-brand-font-weight-bold: 700;
+}
+
+/* Normalized user input tokens (range: 1-2) */
+
+/*
+Shrink Factor:      Determine scaling from m to xxs
+Grow Factor:        Determine scaling from m to xxl
+Breakpoint Factor:  Higher bp factor means large spacings increase
+                    more at bigger screen sizes than small spacings
+*/
+
+/* Font Size */
+:root {
+  --ks-brand-font-size-display-base: 20px;
+  --ks-brand-font-size-display-shrink-factor: 1.5;
+  --ks-brand-font-size-display-grow-factor: 1.5;
+  --ks-brand-font-size-display-bp-factor: 1.5;
+
+  --ks-brand-font-size-copy-base: 16px;
+  --ks-brand-font-size-copy-shrink-factor: 1.5;
+  --ks-brand-font-size-copy-grow-factor: 1.5;
+  --ks-brand-font-size-copy-bp-factor: 1.5;
+
+  --ks-brand-font-size-interface-base: 16px;
+  --ks-brand-font-size-interface-shrink-factor: 1.5;
+  --ks-brand-font-size-interface-grow-factor: 1.5;
+  --ks-brand-font-size-interface-bp-factor: 1.5;
+
+  --ks-brand-font-size-mono-base: 16px;
+  --ks-brand-font-size-mono-shrink-factor: 1.5;
+  --ks-brand-font-size-mono-grow-factor: 1.5;
+  --ks-brand-font-size-mono-bp-factor: 1.5;
+}
+
+/* Spacing */
+:root {
+  --ks-brand-spacing-base: 16px;
+  --ks-brand-spacing-shrink-factor: 1.5;
+  --ks-brand-spacing-grow-factor: 1.5;
+  --ks-brand-spacing-bp-factor: 1.5;
+}
+
+:root {
+  --ks-brand-border-width-default: 1px;
+  --ks-brand-border-width-emphasized: 2px;
+
+  --ks-brand-border-radius-control: var(--ks-spacing-xs);
+  --ks-brand-border-radius-card: var(--ks-spacing-s);
+  --ks-brand-border-radius-surface: var(--ks-spacing-m);
+}