@kickstartds/ds-agency-premium 1.6.72--canary.56.2531.0 → 1.6.72--canary.43.2537.0

package/dist/playground/spacing-demo/index.js

@@ -0,0 +1,261 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Features } from '../../components/features/index.js';
+import { Section } from '../../components/section/index.js';
+import { Stats } from '../../components/stats/index.js';
+import { TeaserCard } from '../../components/teaser-card/index.js';
+import { SearchResult } from '../../components/search-result/index.js';
+import { Breadcrumb } from '../../components/breadcrumb/index.js';
+import { Downloads } from '../../components/downloads/index.js';
+import { EventLatestTeaser } from '../../components/event-latest-teaser/index.js';
+import { EventLocation } from '../../components/event-location/index.js';
+import { EventListTeaser } from '../../components/event-list-teaser/index.js';
+import { BlogAside } from '../../components/blog-aside/index.js';
+import { EventFilter } from '../../components/event-filter/index.js';
+import { BusinessCard } from '../../components/business-card/index.js';
+import { ContentNav } from '../../components/content-nav/index.js';
+import 'react';
+import 'classnames';
+import '../../components/feature/index.js';
+import '@kickstartds/base/lib/icon';
+import '../../components/button/index.js';
+import '@kickstartds/base/lib/button';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/link';
+import 'markdown-to-jsx';
+import '@kickstartds/core/lib/react';
+import '@kickstartds/base/lib/section';
+import '../../components/section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import '../../components/stat/index.js';
+import '@kickstartds/content/lib/count-up';
+import '@kickstartds/base/lib/teaser-box';
+import '@kickstartds/core/lib/container';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '../../components/search-result-match/index.js';
+import '../../components/event-appointment/index.js';
+import '@kickstartds/base/lib/tag-label';
+import '@kickstartds/blog/lib/post-meta';
+import '@kickstartds/blog/lib/post-share-bar';
+import '../../components/blog-author/index.js';
+import '../../components/contact/index.js';
+import '@kickstartds/base/lib/contact';
+import '../../components/headline/index.js';
+import '@kickstartds/base/lib/headline';
+import '@kickstartds/form/lib/text-field';
+import '@kickstartds/form/lib/checkbox';
+
+const ColorDemo = () => (jsxs("div", { className: "playground-preview-page", children: [jsxs(Section, { className: "dsa-section--component-preview", content: {
+                gutter: "large",
+                mode: "tile",
+            }, width: "wide", spaceBefore: "small", spaceAfter: "none", children: [jsx(TeaserCard, { imageRatio: "landscape", headline: "Empower Your Business", text: "Leverage our expertise in creating scalable and robust applications using modern technologies.", url: "", button: {
+                        label: "Get Started",
+                        chevron: true,
+                    } }), jsx(Features, { ctas: {
+                        style: "link",
+                        toggle: true,
+                    }, feature: [
+                        {
+                            cta: {
+                                icon: "arrow-right",
+                                label: "Learn more",
+                                url: "#",
+                            },
+                            icon: "home",
+                            text: "Our design system allows for a scalable architecture, enabling you to build applications that can grow with your needs.",
+                            title: "Scalable Architecture",
+                        },
+                    ], layout: "smallTiles", style: "stack" }), jsx(Stats, { stat: [
+                        {
+                            icon: "person",
+                            number: "150",
+                            title: "Users",
+                            description: "Active users on the platform taking advantage of the design system.",
+                        },
+                    ] }), jsx(BlogAside, { author: {
+                        byline: "CEO at Company",
+                        links: [
+                            {
+                                ariaLabel: "Link to Isabella Doe's social media profile",
+                                icon: "twitter",
+                                label: "jane_smith",
+                                newTab: false,
+                                url: "tel:+4922868896620",
+                            },
+                            {
+                                ariaLabel: "Link to Isabella Doe's social media profile",
+                                icon: "email",
+                                label: "jane.smith@example.com",
+                                newTab: false,
+                                url: "mailto:mail@example.com",
+                            },
+                        ],
+                        name: "Jane Smith",
+                    }, date: "12/30/2022", readingTime: "5 min read", socialSharing: [
+                        {
+                            icon: "twitter",
+                            title: "Share on Twitter",
+                            url: "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
+                        },
+                        {
+                            icon: "linkedin",
+                            title: "Share on LinkedIn",
+                            url: "https://twitter.com/share?text=Check%20this%20out!&url=https://example.com",
+                        },
+                    ] })] }), jsxs(Section, { className: "dsa-section--component-preview", width: "wide", content: {}, spaceAfter: "none", spaceBefore: "small", children: [jsx("div", { style: {
+                        height: "fit-content",
+                    }, children: jsx(EventFilter, { applyButton: {
+                            label: "Filter Appointments",
+                        }, categories: {
+                            categoryCheckboxes: ["All", "Buyers", "Sellers", "Partners"],
+                            title: "Categories",
+                            toggle: true,
+                        }, datePicker: {
+                            dateFromInput: {
+                                label: "From",
+                                placeholder: "Select a date",
+                            },
+                            dateToInput: {
+                                label: "To",
+                                placeholder: "Select a date",
+                            },
+                            title: "Find Appointment",
+                            toggle: true,
+                        }, resetButton: {
+                            label: "Reset Filters",
+                        } }) }), jsxs("div", { style: {
+                        display: "flex",
+                        gap: "var(--ks-spacing-stack-m)",
+                        flexDirection: "column",
+                    }, children: [jsx(EventLocation, { address: "Alexanderplatz 1<br />\n  10178 Berlin", dates: [
+                                {
+                                    ariaLabel: "Register for the event on 18th September 2025 from 09:00 to 17:00",
+                                    date: "18.09.2025",
+                                    label: "Register",
+                                    newTab: true,
+                                    time: "09:00 – 17:00",
+                                    url: "#",
+                                },
+                                {
+                                    ariaLabel: "Register for the event on 18th September 2025 from 09:00 to 17:00",
+                                    date: "18.09.2025",
+                                    label: "Register",
+                                    newTab: true,
+                                    time: "09:00 – 17:00",
+                                    url: "#",
+                                },
+                            ], displayMode: "spacious", links: [
+                                {
+                                    label: "Open in Google Maps",
+                                    newTab: true,
+                                    url: "https://maps.google.com/?q=Berlin+Congress+Center",
+                                },
+                            ], locationName: "Berlin Congress Center" }), jsx(EventLatestTeaser, { ariaLabel: "Event teaser for ", calendar: {
+                                day: "30",
+                                month: "Dec",
+                            }, cta: "Show event", date: "12/30/2025", location: "Berlin, Germany", title: "The Future of AI", url: "https://example.com" })] }), jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "var(--ks-spacing-stack-s)",
+                    }, children: [jsx(ContentNav, { initiallyShown: 3, links: [
+                                {
+                                    label: "Market Insights",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Industry Trends",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Competitor Analysis",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Customer Feedback",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Sales Data",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Product Development",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Supply Chain Management",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Financial Performance",
+                                    url: "#",
+                                },
+                                {
+                                    label: "Regulatory Compliance",
+                                    url: "#",
+                                },
+                            ], topic: "Industry Intelligence" }), jsx(BusinessCard, { address: "1234 Business Lane<br />Suite 567", avatar: {
+                                alt: "Emily Johnson",
+                                src: "img/people/contact-person.png",
+                            }, buttons: [
+                                {
+                                    label: "Market Insights",
+                                    url: "#",
+                                },
+                            ], contact: [
+                                {
+                                    icon: "phone",
+                                    label: "+1 234 567 890",
+                                    url: "tel:+1234567890",
+                                },
+                                {
+                                    icon: "email",
+                                    label: "emily@example.com",
+                                    url: "mailto:emily@example.com",
+                                },
+                                {
+                                    icon: "linkedin",
+                                    label: "Emily Johnson",
+                                    url: "#",
+                                },
+                            ], logo: {
+                                alt: "Business Logo",
+                                src: "logo.svg",
+                                url: "#",
+                            }, topic: "Industry Intelligence" })] })] }), jsxs(Section, { spaceBefore: "small", width: "wide", children: [jsx(EventListTeaser, { category: "Buyers", ctaText: "Show event", date: "30.12.2025", location: {
+                        address: "Alexanderplatz 1<br />\n10178 Berlin",
+                        name: "Tech Conference Center",
+                    }, tags: ["AI"], text: "The Future of AI is here and now - Join us to explore the latest advancements in artificial intelligence.", time: "10:00", title: "The Future of AI", url: "#" }), jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "var(--ks-spacing-stack-l)",
+                    }, children: [jsx(SearchResult, { imageColSize: "none", initialMatch: "Embracing a **sustainable** lifestyle.", matches: [
+                                {
+                                    snippet: "Learn how leading companies are integrating **sustainability**.",
+                                    title: "Embracing Sustainability",
+                                    url: "#",
+                                },
+                            ], showLink: true, title: "GreenTech Summit", url: "https://www.example.com/greentech-summit-2023" }), jsx(Downloads, { downloads: [
+                                {
+                                    format: "PDF",
+                                    name: "Product Brochure",
+                                    previewImage: "img/offset-image.png",
+                                    size: "2.5 MB",
+                                    url: "#",
+                                },
+                            ] }), jsx(Breadcrumb, { pages: [
+                                {
+                                    label: "Page 1",
+                                    url: "https://example.com/page1",
+                                },
+                                {
+                                    label: "Page 2",
+                                    url: "https://example.com/page2",
+                                },
+                                {
+                                    label: "Page 3",
+                                    url: "https://example.com/page3",
+                                },
+                            ] })] })] })] }));
+
+export { ColorDemo as default };

package/dist/tokens/IconSprite.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default () => /*#__PURE__*/_jsxs("svg", {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (() => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   xmlnsXlink: "http://www.w3.org/1999/xlink",
   hidden: "hidden",
@@ -230,4 +231,4 @@ export default () => /*#__PURE__*/_jsxs("svg", {
       d: "M16.7247 2.98188C17.0395 2.44505 17.5699 2 18.3195 2H21.0816C21.468 2 21.9576 2.13797 22.2661 2.60399C22.4111 2.81495 22.5 3.07042 22.5 3.35125C22.5 3.63001 22.4127 3.8675 22.3128 4.04876L22.3048 4.06326L16.541 13.7443L20.1015 19.9326L20.1026 19.9344C20.3367 20.3398 20.4003 20.8719 20.0991 21.3611L20.0833 21.3868L20.066 21.4114C19.753 21.8571 19.2782 22 18.8808 22H16.1416C15.3945 22 14.8413 21.581 14.5159 21.0046L10.9233 14.7451C10.5642 14.1195 10.5699 13.3489 10.9381 12.7285L16.7247 2.98188ZM18.446 4.00026L12.6579 13.7496L16.2454 20H17.8329L14.3855 14.0082V13.4553L20.0148 4L18.446 4.00026ZM18.3709 20.9351L18.3694 20.9326L18.3709 20.9351Z"
     })]
   })]
-});
+}));

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);
+}