@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/tabs/tabs.stories.js

@@ -23,12 +23,12 @@ Componentă Lit pentru afișarea de feature-uri în taburi cu coloane de accordi
   <bd-tab-panel title="Windows">
     <bd-features>
       <bd-feature-col title="Protection">
-        <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-        <bd-p kind="small" slot="description">Descriere coloana</bd-p>
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">Descriere coloana</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Feature 1" open>
-            <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">NEW</bd-badge>
-            <bd-p kind="small">Detalii</bd-p>
+            <bd-badge slot="badge" tone="primary" variant="fill" size="sm">NEW</bd-badge>
+            <bd-p variant="small">Detalii</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -76,78 +76,78 @@ const windowsPanel = html`
     <bd-features>
 
       <bd-feature-col title="Protection">
-        <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-        <bd-p kind="small" slot="description">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">Bitdefender's unbeatable multi-layered protection keeps your devices safe from all new and existing cyber threats.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Complete Real-Time Data Protection" open>
-            <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">BLUE TAG</bd-badge>
-            <bd-p kind="small">Absolute power in the most efficient security bundle available today. Bitdefender Ultimate Security works against all e-threats.</bd-p>
+            <bd-badge slot="badge" tone="primary" variant="fill" size="sm">BLUE TAG</bd-badge>
+            <bd-p variant="small">Absolute power in the most efficient security bundle available today. Bitdefender Ultimate Security works against all e-threats.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Network Threat Prevention">
-            <bd-badge slot="badge" color="#43A047" size="sm" fontweight="700">INDUSTRY 1ST</bd-badge>
-            <bd-p kind="small">Proactive network monitoring and threat detection.</bd-p>
+            <bd-badge slot="badge" tone="success" variant="fill" size="sm">INDUSTRY 1ST</bd-badge>
+            <bd-p variant="small">Proactive network monitoring and threat detection.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Advanced Threat Defense">
-            <bd-p kind="small">Behavioral detection stops unknown threats before they execute.</bd-p>
+            <bd-p variant="small">Behavioral detection stops unknown threats before they execute.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Scam Copilot">
-            <bd-p kind="small">AI-powered scam detection and prevention.</bd-p>
+            <bd-p variant="small">AI-powered scam detection and prevention.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="E-mail Protection">
-            <bd-p kind="small">Scans incoming and outgoing emails for threats.</bd-p>
+            <bd-p variant="small">Scans incoming and outgoing emails for threats.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Multi-Layer Ransomware Protection">
-            <bd-p kind="small">Protects your files from unauthorized encryption.</bd-p>
+            <bd-p variant="small">Protects your files from unauthorized encryption.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Privacy">
-        <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-        <bd-p kind="small" slot="description">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
+        <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+        <bd-p variant="small" slot="description">Bitdefender Ultimate Security takes care of your online privacy and personal information.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Unlimited VPN Traffic" open>
-            <bd-p kind="small">Encrypt your connection and stay private online across all devices.</bd-p>
+            <bd-p variant="small">Encrypt your connection and stay private online across all devices.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Password Manager">
-            <bd-p kind="small">Store and autofill passwords securely across all devices.</bd-p>
+            <bd-p variant="small">Store and autofill passwords securely across all devices.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Anti-tracker">
-            <bd-p kind="small">Block trackers and keep your browsing activity private.</bd-p>
+            <bd-p variant="small">Block trackers and keep your browsing activity private.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Microphone Monitor">
-            <bd-p kind="small">Alerts you when apps try to access your microphone.</bd-p>
+            <bd-p variant="small">Alerts you when apps try to access your microphone.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Webcam Protection">
-            <bd-p kind="small">Prevent unauthorized access to your webcam.</bd-p>
+            <bd-p variant="small">Prevent unauthorized access to your webcam.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Privacy Firewall">
-            <bd-p kind="small">Advanced firewall protection for your network.</bd-p>
+            <bd-p variant="small">Advanced firewall protection for your network.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Identity Protection">
-        <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
-        <bd-p kind="small" slot="description">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
+        <bd-family-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-family-icon>
+        <bd-p variant="small" slot="description">Goes beyond credit monitoring to protect you against identity theft attacks you might not always recognize.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Continuous Dark Web & Surface Monitoring" open>
-            <bd-p kind="small">Get instant alerts if your data appears on the dark web.</bd-p>
+            <bd-p variant="small">Get instant alerts if your data appears on the dark web.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Digital Footprint Visualization">
-            <bd-p kind="small">See and reduce your digital exposure online.</bd-p>
+            <bd-p variant="small">See and reduce your digital exposure online.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Identity Protection Score">
-            <bd-p kind="small">Understand your identity risk at a glance.</bd-p>
+            <bd-p variant="small">Understand your identity risk at a glance.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Real Time Breach Notifications">
-            <bd-p kind="small">Be first to know when your accounts are compromised.</bd-p>
+            <bd-p variant="small">Be first to know when your accounts are compromised.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Credit Report Monitoring">
-            <bd-p kind="small">Track changes to your credit report in real time.</bd-p>
+            <bd-p variant="small">Track changes to your credit report in real time.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="SSN Tracker">
-            <bd-p kind="small">Monitor usage of your Social Security Number.</bd-p>
+            <bd-p variant="small">Monitor usage of your Social Security Number.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -161,34 +161,34 @@ const macosPanel = html`
     <bd-features>
 
       <bd-feature-col title="Protection">
-        <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-        <bd-p kind="small" slot="description">Protection description for macOS.</bd-p>
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">Protection description for macOS.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Real-Time Data Protection" open>
-            <bd-p kind="small">Content for macOS protection.</bd-p>
+            <bd-p variant="small">Content for macOS protection.</bd-p>
           </bd-accordion-item>
           <bd-accordion-item title="Network Threat Prevention">
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Privacy">
-        <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-        <bd-p kind="small" slot="description">Privacy description for macOS.</bd-p>
+        <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+        <bd-p variant="small" slot="description">Privacy description for macOS.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="VPN Traffic" open>
-            <bd-p kind="small">Content for macOS privacy.</bd-p>
+            <bd-p variant="small">Content for macOS privacy.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Identity Protection">
-        <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
-        <bd-p kind="small" slot="description">macOS identity description.</bd-p>
+        <bd-family-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-family-icon>
+        <bd-p variant="small" slot="description">macOS identity description.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Dark Web Monitoring" open>
-            <bd-p kind="small">Content for macOS identity.</bd-p>
+            <bd-p variant="small">Content for macOS identity.</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -202,31 +202,31 @@ const iosPanel = html`
     <bd-features>
 
       <bd-feature-col title="Protection">
-        <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-        <bd-p kind="small" slot="description">iOS protection.</bd-p>
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">iOS protection.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="iOS Real-Time Protection" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Privacy">
-        <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-        <bd-p kind="small" slot="description">iOS privacy.</bd-p>
+        <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+        <bd-p variant="small" slot="description">iOS privacy.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="iOS VPN" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Identity Protection">
-        <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
-        <bd-p kind="small" slot="description">iOS identity.</bd-p>
+        <bd-family-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-family-icon>
+        <bd-p variant="small" slot="description">iOS identity.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="iOS Dark Web" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -240,31 +240,31 @@ const androidPanel = html`
     <bd-features>
 
       <bd-feature-col title="Protection">
-        <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-        <bd-p kind="small" slot="description">Android protection.</bd-p>
+        <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+        <bd-p variant="small" slot="description">Android protection.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Android Real-Time Protection" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Privacy">
-        <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-        <bd-p kind="small" slot="description">Android privacy.</bd-p>
+        <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+        <bd-p variant="small" slot="description">Android privacy.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Android VPN" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
 
       <bd-feature-col title="Identity Protection">
-        <bd-family-icon slot="icon" size="40" color="#006DFF"></bd-family-icon>
-        <bd-p kind="small" slot="description">Android identity.</bd-p>
+        <bd-family-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-family-icon>
+        <bd-p variant="small" slot="description">Android identity.</bd-p>
         <bd-accordion-section no-container>
           <bd-accordion-item title="Android Dark Web" open>
-            <bd-p kind="small">Content here</bd-p>
+            <bd-p variant="small">Content here</bd-p>
           </bd-accordion-item>
         </bd-accordion-section>
       </bd-feature-col>
@@ -320,32 +320,32 @@ export const WithBadges = {
       <bd-tab-panel title="Windows">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">Protection description.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">Protection description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="Complete Real-Time Data Protection" open>
-                <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">BLUE TAG</bd-badge>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-badge slot="badge" tone="primary" variant="fill" size="sm">BLUE TAG</bd-badge>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Network Threat Prevention">
-                <bd-badge slot="badge" color="#43A047" size="sm" fontweight="700">INDUSTRY 1ST</bd-badge>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-badge slot="badge" tone="success" variant="fill" size="sm">INDUSTRY 1ST</bd-badge>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Advanced Threat Defense">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
           <bd-feature-col title="Privacy">
-            <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-            <bd-p kind="small" slot="description">Privacy description.</bd-p>
+            <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+            <bd-p variant="small" slot="description">Privacy description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="Unlimited VPN Traffic" open>
-                <bd-badge slot="badge" variant="bd-light-blue" size="sm" fontweight="700">NEW</bd-badge>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-badge slot="badge" tone="primary" variant="fill" size="sm">NEW</bd-badge>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Password Manager">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
@@ -354,11 +354,11 @@ export const WithBadges = {
       <bd-tab-panel title="macOS">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">macOS protection.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">macOS protection.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="Real-Time Protection" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
@@ -380,26 +380,26 @@ export const TwoColumns = {
       <bd-tab-panel title="Windows">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">Protection description.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">Protection description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="Real-Time Protection" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Network Threat Prevention">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
           <bd-feature-col title="Privacy">
-            <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-            <bd-p kind="small" slot="description">Privacy description.</bd-p>
+            <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+            <bd-p variant="small" slot="description">Privacy description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="VPN Traffic" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Password Manager">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
@@ -408,20 +408,20 @@ export const TwoColumns = {
       <bd-tab-panel title="macOS">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">macOS protection.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">macOS protection.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="macOS Protection" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
           <bd-feature-col title="Privacy">
-            <bd-globe-icon slot="icon" size="40" color="#006DFF"></bd-globe-icon>
-            <bd-p kind="small" slot="description">macOS privacy.</bd-p>
+            <bd-globe-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-globe-icon>
+            <bd-p variant="small" slot="description">macOS privacy.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="macOS Privacy" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
@@ -443,17 +443,17 @@ export const OneColumn = {
       <bd-tab-panel title="Windows">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">Single column protection description.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">Single column protection description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="Real-Time Protection" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Network Threat Prevention">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
               <bd-accordion-item title="Advanced Threat Defense">
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>
@@ -462,11 +462,11 @@ export const OneColumn = {
       <bd-tab-panel title="macOS">
         <bd-features>
           <bd-feature-col title="Protection">
-            <bd-individual-icon slot="icon" size="40" color="#006DFF"></bd-individual-icon>
-            <bd-p kind="small" slot="description">macOS single column description.</bd-p>
+            <bd-individual-icon slot="icon" size="40" color="var(--color-blue-500)"></bd-individual-icon>
+            <bd-p variant="small" slot="description">macOS single column description.</bd-p>
             <bd-accordion-section no-container>
               <bd-accordion-item title="macOS Protection" open>
-                <bd-p kind="small">Content here</bd-p>
+                <bd-p variant="small">Content here</bd-p>
               </bd-accordion-item>
             </bd-accordion-section>
           </bd-feature-col>

package/src/components/tag/tag.css.js

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+
+/** Styled entirely from design tokens — see npm run lint:tokens. */
+export const tagCSS = css`
+  :host { display: inline-flex; }
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-4);
+    font-family: var(--typography-fontFamily-sans);
+    font-size: var(--typography-label-small-fontSize);
+    font-weight: var(--typography-label-small-fontWeight);
+    line-height: var(--typography-label-small-lineHeight);
+    letter-spacing: var(--typography-label-small-letterSpacing);
+    padding: var(--spacing-2) var(--spacing-8);
+    border-radius: var(--radius-full);
+    border: var(--border-width-1) solid var(--status-neutral-border);
+    color: var(--status-neutral-text);
+    background: var(--status-neutral-surface);
+  }
+
+  :host([tone='brand']) span {
+    color: var(--status-brand-text);
+    background: var(--status-brand-surface);
+    border-color: var(--status-brand-border);
+  }
+
+  :host([tone='success']) span {
+    color: var(--status-success-text);
+    background: var(--status-success-surface);
+    border-color: var(--status-success-border);
+  }
+
+  :host([tone='warning']) span {
+    color: var(--status-warning-text);
+    background: var(--status-warning-surface);
+    border-color: var(--status-warning-border);
+  }
+
+  :host([tone='error']) span {
+    color: var(--status-error-text);
+    background: var(--status-error-surface);
+    border-color: var(--status-error-border);
+  }
+
+  :host([tone='info']) span {
+    color: var(--status-info-text);
+    background: var(--status-info-surface);
+    border-color: var(--status-info-border);
+  }
+`;
+
+export default tagCSS;

package/src/components/tag/tag.js

@@ -0,0 +1,32 @@
+import { LitElement, html } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import '../../tokens/tokens.js';
+import { tagCSS } from './tag.css.js';
+
+/** The six tones bd-badge and bd-alert also use. */
+const TONES = ['neutral', 'brand', 'success', 'warning', 'error', 'info'];
+
+export class BdTag extends LitElement {
+  static styles = [tagCSS];
+
+  static properties = {
+    tone: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.tone = 'neutral';
+  }
+
+  willUpdate(changed) {
+    if (changed.has('tone') && !TONES.includes(this.tone)) this.tone = 'neutral';
+  }
+
+  render() {
+    return html`
+      <span><slot></slot></span>
+    `;
+  }
+}
+
+customElements.define('bd-tag', BdTag);

package/src/components/tag/tag.stories.js

@@ -0,0 +1,126 @@
+import { html } from 'lit';
+import './tag.js';
+import '../badge/badge.js';
+
+export default {
+  title     : 'Atoms/Tag',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdTag** is a small label for categorising or filtering — a keyword, a
+category, a selected filter.
+
+### Usage
+\`\`\`html
+<bd-tag>Windows</bd-tag>
+<bd-tag tone="brand">New</bd-tag>
+<bd-tag tone="success">Protected</bd-tag>
+<bd-tag tone="warning">Review</bd-tag>
+<bd-tag tone="error">At risk</bd-tag>
+\`\`\`
+
+### Props
+| Prop | Values | Default |
+|---|---|---|
+| \`tone\` | \`neutral\`, \`brand\`, \`success\`, \`warning\`, \`error\` | \`neutral\` |
+
+The text is slotted.
+
+### Tag or badge
+They look similar and mean different things. A **tag** classifies — it is a
+keyword attached to a thing. A **badge** reports state or a count on something
+else, like "3 unread" or "NEW" on a menu item. If it could be removed by the
+user or used as a filter, it is a tag.
+
+### Tag and badge share their tone colours
+A tag and a \`bd-badge\` of the same tone use the **same text colour**, so the
+two read as one family. They differ in two deliberate ways: a tag carries a
+\`--border-width-1\` border and sits on the lighter \`-50\` tint, where a badge
+has no border and takes the heavier \`-100\`. The lighter fill is what lets the
+tag's border read.
+
+**Brand is the one exception.** Its heavier tint would be blue-100, which is
+info's, so a brand badge would be indistinguishable from an info badge. A brand
+badge therefore sits on the lighter tint, like a brand tag, and the two differ
+only by the tag's border. There is no \`--status-brand-surface-strong\`.
+
+Both now use the same six names — \`neutral\`, \`brand\`, \`success\`,
+\`warning\`, \`error\`, \`info\` — and read the same \`--status-*\` roles, so the
+shared text colour is shared by construction rather than by coincidence. The
+badge's earlier \`default\` and \`primary\` still resolve, to \`neutral\` and
+\`brand\`.
+
+### Notes
+Every tone pairs a text colour and a tint that clear 4.5:1, the lowest being
+5.59. \`tone\` is not the only carrier of meaning — the tag's own words are —
+so it stays readable without colour perception.
+
+The border is faint by design at the \`-200\` step, between 1.21 and 1.97
+against the page. That is not a contrast failure, because a tag is static
+content rather than a control and the tint and text already identify it, but
+it does mean the border reads as a subtle edge rather than a strong outline.
+
+It is not interactive. There is no removable variant and no click handling, so
+for a dismissible filter chip you would need a button inside the slot, or a
+component built for it.
+        `
+      }
+    }
+  },
+  argTypes: {
+    tone: {
+      control    : { type: 'select' },
+      options    : ['neutral', 'brand', 'success', 'warning', 'error', 'info'],
+      description: 'Semantic colour pairing. The wording should carry the meaning too.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "neutral" }, category: 'Appearance' }
+    }
+  }
+};
+
+export const Tones = () => html`
+    <bd-tag>Neutral</bd-tag>
+    <bd-tag tone="brand">Brand</bd-tag>
+    <bd-tag tone="success">Success</bd-tag>
+    <bd-tag tone="warning">Warning</bd-tag>
+    <bd-tag tone="error">Error</bd-tag>
+  `;
+
+/**
+ * A tag is a single inline-flex row with no wrapping rule of its own, so a long
+ * keyword stays on one line and pushes the row wider rather than breaking. In a
+ * narrow column that is what overflows.
+ */
+export const LongLabel = () => html`
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-8); max-width: 22ch">
+      <bd-tag>Windows</bd-tag>
+      <bd-tag tone="brand">Cross-platform protection</bd-tag>
+      <bd-tag tone="success">Up to date</bd-tag>
+    </div>
+  `;
+
+/**
+ * The comparison the docs above describe, rendered rather than asserted: same
+ * tone, same text colour, different fill step and border. Any change to either
+ * component's tone colours shows up here as a difference between the rows.
+ */
+export const AgainstBadge = () => html`
+    <div style="display: grid; gap: var(--spacing-12); justify-items: start">
+      <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8)">
+        <bd-tag>Neutral</bd-tag>
+        <bd-tag tone="brand">Brand</bd-tag>
+        <bd-tag tone="success">Success</bd-tag>
+        <bd-tag tone="warning">Warning</bd-tag>
+        <bd-tag tone="error">Error</bd-tag>
+      </div>
+      <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8)">
+        <bd-badge>Default</bd-badge>
+        <bd-badge tone="primary">Primary</bd-badge>
+        <bd-badge tone="success">Success</bd-badge>
+        <bd-badge tone="warning">Warning</bd-badge>
+        <bd-badge tone="error">Error</bd-badge>
+        <bd-badge tone="info">Info</bd-badge>
+      </div>
+    </div>
+  `;