@ebrains/components 2.4.0 → 3.0.0

package/dist/components/token-list2.js

@@ -4,7 +4,22 @@ import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const colors = {
   tokens: {
-    // grey
+    // Brand Colors - New EBRAINS Visual System
+    'brand-black': '#07140D',
+    'brand-green': '#00FF9D',
+    'brand-green-dark': '#00C87B',
+    
+    // Neutrals
+    'grey-light': '#ECECEC',
+    'grey-dark': '#7A7B7A',
+    
+    // Base
+    black: '#000000',
+    white: '#FFFFFF',
+    transparent: 'transparent',
+    current: 'currentColor',
+
+    // Legacy grey scale (keeping for gradual migration)
     'grey-100': '#f8f8f8',
     'grey-200': '#f2f2f2',
     'grey-300': '#e6e6e6',
@@ -15,7 +30,8 @@ const colors = {
     'grey-800': '#4d4d4d',
     'grey-900': '#242424',
 
-    // green
+    // Secondary colors (de-emphasized but available if needed)
+    // Green variants
     'green-100': '#eaffee',
     'green-200': '#d3ffdc',
     'green-300': '#9dffb4',
@@ -26,7 +42,7 @@ const colors = {
     'green-800': '#007734',
     'green-900': '#004f23',
 
-    // yellow
+    // Yellow
     'yellow-100': '#fefee5',
     'yellow-200': '#ffffcb',
     'yellow-300': '#fdfdaa',
@@ -37,7 +53,7 @@ const colors = {
     'yellow-800': '#9a9a1e',
     'yellow-900': '#636313',
 
-    // orange
+    // Orange
     'orange-100': '#fff4ee',
     'orange-200': '#ffeade',
     'orange-300': '#ffdcc5',
@@ -48,7 +64,7 @@ const colors = {
     'orange-800': '#995f1e',
     'orange-900': '#653f14',
 
-    // red
+    // Red
     'red-100': '#feefef',
     'red-200': '#ffe0e1',
     'red-300': '#ffc7c9',
@@ -59,7 +75,7 @@ const colors = {
     'red-800': '#a3001a',
     'red-900': '#6f0011',
 
-    // purple
+    // Purple
     'purple-100': '#f9f3ff',
     'purple-200': '#f4e8ff',
     'purple-300': '#e9ceff',
@@ -70,7 +86,7 @@ const colors = {
     'purple-800': '#8337b1',
     'purple-900': '#3d1e4f',
 
-    // blue
+    // Blue
     'blue-100': '#eff0ff',
     'blue-200': '#dee0ff',
     'blue-300': '#caceff',
@@ -81,7 +97,7 @@ const colors = {
     'blue-800': '#002799',
     'blue-900': '#001a65',
 
-    // cyan
+    // Cyan
     'cyan-100': '#E0EEFF',
     'cyan-200': '#D3E6FF',
     'cyan-300': '#B5D8FF',
@@ -90,57 +106,53 @@ const colors = {
     'cyan-600': '#3FA9F5',
     'cyan-700': '#267FBE',
     'cyan-800': '#1F689B',
-    'cyan-900': '#15496D',
-
-    // Generics
-    black: '#000000',
-    white: '#ffffff',
-    transparent: 'transparent',
-    current: 'currentColor'
+    'cyan-900': '#15496D'
   },
   border: {
-    default: 'black',
+    default: 'brand-black',
     inverse: 'white',
     'inverse-soft': 'rgba(255, 255, 255, 0.3)',
     'inverse-softer': 'rgba(255, 255, 255, 0.15)',
-    soft: 'rgba(0, 0, 0, .15 )',
-    softer: 'rgba(0, 0, 0, .1 )',
-    softest: 'rgba(0, 0, 0, .05 )',
-    accent: 'green-500',
+    soft: 'rgba(0, 0, 0, .15)',
+    softer: 'rgba(0, 0, 0, .1)',
+    softest: 'rgba(0, 0, 0, .05)',
+    accent: 'brand-green',
+    'accent-dark': 'brand-green-dark',
     error: 'red-700',
     current: 'currentColor',
-    transparent: 'transparent'
+    transparent: 'transparent',
+    grey: 'grey-light',
+    'grey-dark': 'grey-dark'
   },
   text: {
+    default: 'brand-black',
     inverse: 'white',
-    default: 'black',
     current: 'currentColor',
     transparent: 'transparent',
-    light: 'grey-700',
-    lighter: 'grey-600',
+    light: 'grey-dark',
+    lighter: 'grey-light',
     lightest: 'grey-500',
     'extra-light': 'grey-300',
     success: 'green-800',
     warning: 'yellow-900',
     error: 'red-700',
-    accent: 'green-500',
-    'on-gradient': 'rgba(0, 0, 0, 0.55)'
+    accent: 'brand-green',
+    'accent-dark': 'brand-green-dark',
+    'on-gradient': 'rgba(0, 0, 0, 0.55)',
+    'on-dark': 'white'
   },
   background: {
-    default: 'grey-200',
+    default: 'brand-black',
     inverse: 'white',
-    'inverse-soft': 'rgba(255, 255, 255, .2)',
-    'inverse-softer': 'rgba(255, 255, 255, .15)',
-    dark: 'grey-300',
-    darker: 'grey-400',
+    'inverse-soft': 'rgba(0, 0, 0, .05)',
+    dark: 'grey-light',
+    darker: 'grey-dark',
     strong: 'grey-700',
     'strong-dark': 'grey-800',
     stronger: 'grey-900',
-    strongest: 'black',
-    'strongest-soft': 'rgba(0, 0, 0, .05)',
-    accent: 'green-500',
-    'accent-dark': 'green-600',
-    'accent-darker': 'green-800',
+    strongest: 'brand-black',
+    accent: 'brand-green',
+    'accent-dark': 'brand-green-dark',
     success: 'green-200',
     warning: 'yellow-200',
     error: 'red-200',
@@ -151,13 +163,18 @@ const colors = {
     'on-dark': 'rgba(255, 255, 255, 0.2)'
   },
   underline: {
-    accent: 'green-500',
-    light: 'grey-700',
+    accent: 'brand-green',
+    'accent-dark': 'brand-green-dark',
+    light: 'grey-dark',
     lighter: 'grey-600',
     lightest: 'grey-500',
     'extra-light': 'grey-300'
   },
-  outline: { default: 'black', accent: 'green-500' },
+  outline: { 
+    default: 'brand-black', 
+    accent: 'brand-green',
+    'accent-dark': 'brand-green-dark'
+  },
   /**
    * Gradients token are created manually inside gradients.css utility file.
    * This mapping is here to generate gradients view inside storybook
@@ -243,7 +260,7 @@ const TokenList = /*@__PURE__*/ proxyCustomElement(class TokenList extends HTMLE
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (h("section", { key: '2fcc5dd08b84b47b561c6f32f49c65b90560069f', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'b95825988f64556481b66203bcd8fb281b88d2a9', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/components/token-radii2.js

@@ -17,7 +17,7 @@ const TokenRadii = /*@__PURE__*/ proxyCustomElement(class TokenRadii extends HTM
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '2afbed04fa53695bfc13275ab6d6f77d314e4d14', class: "w-full mt-28" }, h("ul", { key: '87490ba0d46027993d10cdf5f5deef419cc147c1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: '8b1c08f1c32236156eea1d1d1f78a9bad3a202cb', class: "w-full mt-28" }, h("ul", { key: 'b995ce086b3c9b7796f161c29bd206534a3e5316', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
 }, [0, "token-radii"]);
 function defineCustomElement() {

package/dist/components/token-ratios.js

@@ -17,7 +17,7 @@ const TokenRatios$1 = /*@__PURE__*/ proxyCustomElement(class TokenRatios extends
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '4dcf52cac610208030db8af7681cfee611f02a62', class: "w-full" }, h("eds-section-core", { key: 'cb571aba92bc59c7b458281258362ca91becc09b', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '734f5db424dce811f5b6508c49c9f4c9ea4f4474', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: '9ab666342a801e51b3a75c979bceadccf4d9736e', class: "w-full" }, h("eds-section-core", { key: '4eea7a8b3b8e3b0404108345756d11806ea2805d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'faa065acac9bce28073f709d147c9b2725150da5', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/components/token-shadows2.js

@@ -3,16 +3,41 @@ import { d as defineCustomElement$2 } from './eds-code-block2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
 const shadows = {
-  small: '0px 1.5px 2px rgba(0, 0, 0, 0.1)',
-  hover: '0px 0px 16px rgba(0, 0, 0, 0.2)',
-  accent: '0px 0px 12px rgba(0, 201, 89, 0.6)',
-  podium: '0px 0px 8px 8px rgb(0 0 0 / 25%);',
-  border: '0 10px 10px rgba(0, 0, 0, 0.15);',
-  'border-top': '0 -10px 10px rgba(0, 0, 0, 0.15);'
+  // Subtle elevation for cards and containers
+  small: '0px 1px 3px rgba(7, 20, 13, 0.1)',
+  
+  // Medium elevation for dropdowns, modals
+  medium: '0px 4px 12px rgba(7, 20, 13, 0.15)',
+  
+  // Hover state for interactive elements
+  hover: '0px 8px 24px rgba(7, 20, 13, 0.2)',
+  
+  // Accent shadow with brand green glow
+  accent: '0px 0px 16px rgba(0, 255, 157, 0.5)',
+  
+  // Green accent for focus states
+  'accent-focus': '0 0 0 3px rgba(0, 255, 157, 0.3)',
+  
+  // Subtle border-like shadow
+  border: '0 1px 3px rgba(7, 20, 13, 0.1)',
+  'border-top': '0 -1px 3px rgba(7, 20, 13, 0.1)',
+  
+  // For elevated components (navigation, sticky headers)
+  elevated: '0px 2px 8px rgba(7, 20, 13, 0.12)',
+  
+  // Strong shadow for modals/overlays
+  overlay: '0px 16px 48px rgba(7, 20, 13, 0.3)',
+  
+  // None - for flat design elements
+  none: 'none'
 };
 
 const dropShadows = {
-  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
+  small: '0px 2px 8px rgba(7, 20, 13, 0.15)',
+  medium: '0px 4px 16px rgba(7, 20, 13, 0.2)',
+  
+  // Green glow for images/icons
+  'accent-glow': '0px 0px 24px rgba(0, 255, 157, 0.6)'
 };
 
 const shadowTokens = {
@@ -26,7 +51,7 @@ const TokenShadows = /*@__PURE__*/ proxyCustomElement(class TokenShadows extends
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '56dcf320ff3ee79c493757a3cfe27c1f7bca33d9', class: "w-full mt-28" }, h("ul", { key: '8113c23d2eaab9abd28acb618c9599d5be1262a6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '60745a5eb31e7ce043c3d69cd8246b752cd66520', class: "w-full mt-28" }, h("ul", { key: '4c8ce259916cf36fc240c0ae3f22d32571a919f8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
 }, [0, "token-shadows"]);
 function defineCustomElement() {

package/dist/components/token-spacing.js

@@ -6,7 +6,7 @@ const TokenSpacing$1 = /*@__PURE__*/ proxyCustomElement(class TokenSpacing exten
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: '45442561f72445e84c257ebc9d30f2147303427a', class: "w-full" }, h("ul", { key: 'cca0cba4260ddebb2b0f1e39a9cc96d067d3fa73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '8c38c0e0802683d9ba2cb38dff013aa02650bbe0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '406aac1f24a9a812b7405b5e323e3cb73574fb79', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ec7f90ce92020a91b57e28545ede5d782d4a7dcc', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'e84d0c8ccc0c6be14ca41bceece9cc63a8137dfb', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: 'dce507afa0eac9ddd430d8b2034b943e844a9b32', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cc986ee89d249ac351c6ed81650668a8ba8ab139', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '1778c2032e322a0cde34987e5ecaaeec38933892', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '8ee98a9847db2baf69adf1e5919ecefa86a1dea8', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '589485906ebebf8fdc348e995e6aae0dcd4124fd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'b94fe2cd4f93f7e52fc82423d728f5ffd3cb7dd1', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5c6ed8a3c4573eb4f7644e18a4e6c10cab958e2a', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: 'bec15bc9092c36295bf012f82fd34e8eee5954cf', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'e9568891252c4597431f117f0f8c9136d30c3658', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1fac252cd3bfd2cb1f9aa3b419e04f570f57f4e8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd59e7e5f180ab164837c5b94cf3f61a7084a6385', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '73dc397292ae7ff9c532b4c6c9f2a42c35945493', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'af9c0e9fb5fd5c314d34f2cf6b2bdc9a63133c0d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '498a46c66ec671f41681f458615d69a741784761', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6e511b973ff53d748e99728fb1b186796437bbca', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'cae79c38937cae94930fa8750fb308ab4329de45', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '67e0ec47dfcbaf8c51969973137c4ba87ee6337d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'aa8003ce3db28c8697d57728c02797324dffbf1f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'aeaa333a1e0fbfaf5d2fcc49c4e8180e94b91b03', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '708a18ad1ebeb0a24fcea4d06aa42c024bb2258a', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '8ebe0d888150e5fefd1d3047cc82548f12f47f9f', class: "w-full" }, h("ul", { key: 'c57af77dfb437bafaf060a6c6ebece84c4683409', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6ca948268bd07e50409334b84eeeb362287f131e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f33f8feec6657d21a4e4a1973d4c46cf4f6c526', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '194c9d5367c75c35f021d0b5c64601a72d1141fd', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '252af2371d58a8364718210563b7aa9a76a551a6', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '833a8373bbe4db4514c84d4e299e2103b37bc75e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd364398230aca7af47273a654a8f138d70361c75', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '707e0b62f500c16dc2d72da8e0bd85adabd7280b', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '846c07af2613e90c3acd1fa66aa422db14a95526', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '107899eab78bbb70f62b0aa2df8573f7a940024c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'fb007ac46524cfda56c1033869b3fd7edeec96b8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4312aaa901f7ad1075056517b2d8b0902e708aec', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '62a87119afea530831e3bcbb45da16f3a3cfb1b8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '279e6f5af470cf3f969c37f715def542e4d13140', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '057bcacd976a4d7f0a69ccba3b469e79f6e8c86a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '379423e5ef1b3f5be2a322493266305f2cf46b9d', class: "spacing-sample p-32 bg-strong" }, h("span", { key: 'a3bd9db6ab5dd4f6204d5009c4328f617f44b78c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '526411b8ab854f67873964446dee7191949f5d54', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '93e0422c2304a0d3a158ba086aa9235a05d621f0', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'dca707847134a421d60930307613a6528a009f9d', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a132977bdf19ba79401ccc05f248711eb2793497', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2fad0e796528bce6c021cbb9d3036d4a23226b82', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'be02958fc44ca651c348078dfc84fabbe92afaa1', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '6c94b77b470a1dd9de4dad7a6900d2e053236f52', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 }, [0, "token-spacing"]);
 function defineCustomElement$1() {

package/dist/components/token-typography.js

@@ -5,8 +5,8 @@ import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 const headings = {
   'heading-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '42px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -23,8 +23,8 @@ const headings = {
   },
   'heading-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '36px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -38,8 +38,8 @@ const headings = {
   },
   'heading-03': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '36px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -50,8 +50,8 @@ const headings = {
   },
   'heading-04': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '28px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -62,8 +62,8 @@ const headings = {
   },
   'heading-05': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '28px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -71,8 +71,8 @@ const headings = {
   },
   'heading-06': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '22px',
       lineHeight: '120%'
     }
@@ -82,8 +82,8 @@ const headings = {
 const bodies = {
   'body-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '20px',
       lineHeight: '140%',
       letterSpacing: '-0.01em'
@@ -91,8 +91,16 @@ const bodies = {
   },
   'body-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
+      fontSize: '17px',
+      lineHeight: '150%'
+    }
+  },
+  'body-03': {
+    sm: {
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '17px',
       lineHeight: '150%'
     }
@@ -102,8 +110,8 @@ const bodies = {
 const uis = {
   'ui-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '18px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -111,8 +119,8 @@ const uis = {
   },
   'ui-02': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '16px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -120,8 +128,8 @@ const uis = {
   },
   'ui-02-light': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '16px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -129,8 +137,8 @@ const uis = {
   },
   'ui-03': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '14px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -138,8 +146,8 @@ const uis = {
   },
   'ui-03-light': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 600,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '14px',
       lineHeight: '130%',
       letterSpacing: '-0.01em'
@@ -147,8 +155,8 @@ const uis = {
   },
   'ui-04': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '12px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -156,8 +164,8 @@ const uis = {
   },
   'ui-05': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '10px',
       lineHeight: '110%',
       letterSpacing: '-0.01em'
@@ -165,19 +173,27 @@ const uis = {
   },
   caption: {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--plex-sans)',
+      fontWeight: 400,
       fontSize: '12px',
       lineHeight: '120%'
     }
+  },
+  code: {
+    sm: {
+      fontFamily: 'var(--plex-mono)',
+      fontWeight: 400,
+      fontSize: '14px',
+      lineHeight: '140%'
+    }
   }
 };
 
 const displays = {
   'display-01': {
     sm: {
-      fontFamily: 'var(--sans)',
-      fontWeight: 800,
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
       fontSize: '120px',
       lineHeight: '100%',
       letterSpacing: '-0.01em'
@@ -185,12 +201,26 @@ const displays = {
     lg: {
       fontSize: '150px'
     }
+  },
+  'display-02': {
+    sm: {
+      fontFamily: 'var(--inter)',
+      fontWeight: 300,
+      fontSize: '120px',
+      lineHeight: '100%',
+      letterSpacing: '-0.02em'
+    },
+    lg: {
+      fontSize: '150px'
+    }
   }
 };
 
 const typography = {
   families: {
-    sans: 'Inter, Helvetica, Arial, sans-serif'
+    inter: 'Inter, Helvetica, Arial, sans-serif',
+    'plex-sans': '"IBM Plex Sans", Inter, Helvetica, Arial, sans-serif',
+    'plex-mono': '"IBM Plex Mono", "Courier New", Courier, monospace'
   },
   typesets: {
     ...headings,
@@ -206,23 +236,24 @@ const TokenTypography$1 = /*@__PURE__*/ proxyCustomElement(class TokenTypography
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '859a416f39219fa58601b57eab3d3ceeceb072fa', class: "w-full" }, h("ul", { key: '3c29d182685328e8bf1ae8b46909426c2b2164cf', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'a3698b57da5e26052bf013daef956ff5f9e0bd1c', class: "w-full" }, h("ul", { key: '924a82c721a636370a15e7a47ca73264c8e1d30e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
-            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
-                fontFamily: typography.families.sans,
+            .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 flex flex-col mt-16" }, h("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, h("div", { style: {
+                fontFamily: style.fontFamily || typography.families['plex-sans'],
                 fontWeight: style.fontWeight,
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default" }, `${typeKey}`), h("div", { style: { fontSize: '12px', fontWeight: '400', color: '#7A7B7A', marginTop: '4px', fontFamily: '"IBM Plex Mono", monospace' } }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", { code: [
+                `/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
                 style.fontWeight && `font-weight: ${style.fontWeight};`,
-                style.fontFamily && `font-family: ${style.fontFamily};`
+                `font-family: "IBM Plex Sans", sans-serif;`
             ]
-                .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
+                .filter(Boolean)
+                .join('\n'), language: "css" }))))))))));
     }
 }, [0, "token-typography"]);
 function defineCustomElement$1() {