diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e62669a..e54077f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,8 +9,8 @@ on:
       - main
 
 jobs:
-  lint-css:
-    name: Lint CSS
+  quality:
+    name: Lint, Build, Unit Tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -25,5 +25,44 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run stylelint
-        run: npm run lint:css
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+  playwright:
+    name: Playwright E2E
+    needs: quality
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          if-no-files-found: ignore
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index 2a4766d..ffdd770 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -1,33 +1,72 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
+name: Publish to npm
 
 on:
   release:
     types: [created]
 
+permissions:
+  contents: read
+
 jobs:
-  build:
+  verify:
+    name: Verify Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
         with:
           node-version: 20
-      - run: npm ci
-      - run: npm test
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
 
   publish-npm:
-    needs: build
+    name: Publish Package
+    needs: verify
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Ensure npm token exists
+        shell: bash
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          if [[ -z "${NPM_TOKEN}" ]]; then
+            echo "::error::Missing NPM_TOKEN secret."
+            exit 1
+          fi
+
+      - name: Publish package
+        run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/release-version-alignment.yml b/.github/workflows/release-version-alignment.yml
index b6286fb..803805f 100644
--- a/.github/workflows/release-version-alignment.yml
+++ b/.github/workflows/release-version-alignment.yml
@@ -25,6 +25,24 @@ jobs:
           node-version: 20
           registry-url: https://registry.npmjs.org
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint checks
+        run: npm run lint
+
+      - name: Build dist assets
+        run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Install Playwright browser
+        run: npm run test:e2e:install:ci
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
       - name: Restrict manual runs to main
         if: github.event_name == 'workflow_dispatch' && github.ref != 'refs/heads/main'
         shell: bash
@@ -75,11 +93,12 @@ jobs:
         if: steps.npm_check.outputs.already_published == 'false'
         shell: bash
         env:
-          PACKAGE_NAME: ${{ steps.version.outputs.package_name }}
-          PACKAGE_VERSION: ${{ steps.version.outputs.package_version }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          echo "::error::Missing NPM_TOKEN secret; cannot publish ${PACKAGE_NAME}@${PACKAGE_VERSION}."
-          exit 1
+          if [[ -z "${NPM_TOKEN}" ]]; then
+            echo "::error::Missing NPM_TOKEN secret."
+            exit 1
+          fi
 
       - name: Publish package to npm
         if: steps.npm_check.outputs.already_published == 'false'
diff --git a/.gitignore b/.gitignore
index 872d5f6..c7eeedf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,6 +24,11 @@ coverage
 
 # nyc test coverage
 .nyc_output
+playwright-report/
+test-results/
+blob-report/
+.playwright-cache/
+.playwright-browsers/
 
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74dda25..ca71438 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,13 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.4] - 2026-05-26
+
+### Changed
+
+- Bumped package version to `1.0.4` for a clean npm republish after failed `1.0.2` / `1.0.3` attempts.
+- Synced release metadata in `package.json` and `package-lock.json` to `1.0.4`.
+
 ## [1.0.3] - 2026-05-26
 
 ### Fixed
 
 - Standardized changelog formatting and version notation for the latest patch release entry.
+- Replaced legacy demo image references with branded assets (`logo.png`, `assets/seo/social-card.png`).
 
-## [1.0.2]-2026-05-25
+## [1.0.2] - 2026-05-25
 
 ### Added
 
@@ -41,8 +49,8 @@ All notable changes to this project will be documented in this file.
   - `site.webmanifest`
   - `browserconfig.xml`
   - `.nojekyll`
-  - `favicon.svg`
-  - `assets/seo/og-preview.svg`
+  - `logo.png`
+  - `assets/seo/social-card.png`
 - `llms.txt`
 - Professional repository scaffolding:
   - `CONTRIBUTING.md`
diff --git a/README.md b/README.md
index 0173e1e..0724ee4 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,16 @@ Extended documentation lives in [`wiki/`](wiki/):
 
 ```bash
 npm install
+npm run build
 npm run lint:css
+npm test
+```
+
+Run Playwright tests:
+
+```bash
+npm run test:e2e:install
+npm run test:e2e
 ```
 
 Auto-fix style issues:
@@ -48,6 +57,12 @@ Auto-fix style issues:
 npm run lint:css:fix
 ```
 
+Full release gate:
+
+```bash
+npm run verify
+```
+
 ## Demo SEO Files
 
 The demo page includes production SEO/social metadata plus supporting files for GitHub Pages:
@@ -58,8 +73,8 @@ The demo page includes production SEO/social metadata plus supporting files for
 - `site.webmanifest`
 - `browserconfig.xml`
 - `.nojekyll`
-- `favicon.svg`
-- `assets/seo/og-preview.svg`
+- `logo.png`
+- `assets/seo/social-card.png`
 
 ## Install
 
@@ -163,7 +178,7 @@ ui-style-kit-css/
   CODE_OF_CONDUCT.md
   LICENSE
   index.html
-  favicon.svg
+  logo.png
   llms.txt
   robots.txt
   sitemap.xml
@@ -171,7 +186,7 @@ ui-style-kit-css/
   browserconfig.xml
   assets/
     seo/
-      og-preview.svg
+      social-card.png
   .stylelintrc.json
   .stylelintignore
   .editorconfig
diff --git a/assets/seo/og-preview.svg b/assets/seo/og-preview.svg
deleted file mode 100644
index e7c59f4..0000000
--- a/assets/seo/og-preview.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-labelledby="title desc">
-  <title id="title">UI Style Kit CSS</title>
-  <desc id="desc">Open Graph image for UI Style Kit CSS demo page.</desc>
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0f172a" />
-      <stop offset="50%" stop-color="#111827" />
-      <stop offset="100%" stop-color="#020617" />
-    </linearGradient>
-    <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#22d3ee" />
-      <stop offset="100%" stop-color="#3b82f6" />
-    </linearGradient>
-    <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="16" result="blur" />
-      <feMerge>
-        <feMergeNode in="blur" />
-        <feMergeNode in="SourceGraphic" />
-      </feMerge>
-    </filter>
-  </defs>
-  <rect width="1200" height="630" fill="url(#bg)" />
-  <circle cx="1080" cy="90" r="170" fill="#0ea5e9" opacity="0.18" filter="url(#softGlow)" />
-  <circle cx="120" cy="560" r="220" fill="#22d3ee" opacity="0.14" filter="url(#softGlow)" />
-  <rect x="80" y="72" width="1040" height="486" rx="34" fill="#0b1220" opacity="0.85" />
-  <rect x="120" y="118" width="196" height="196" rx="42" fill="#0f172a" stroke="#22d3ee" stroke-opacity="0.4" />
-  <rect x="156" y="162" width="126" height="30" rx="10" fill="#f8fafc" />
-  <rect x="156" y="206" width="94" height="18" rx="7" fill="#bae6fd" />
-  <rect x="156" y="234" width="118" height="18" rx="7" fill="#67e8f9" />
-  <text x="350" y="220" font-size="68" font-family="Segoe UI, Inter, Arial, sans-serif" fill="#f8fafc" font-weight="700">UI Style Kit CSS</text>
-  <text x="350" y="280" font-size="34" font-family="Segoe UI, Inter, Arial, sans-serif" fill="#cbd5e1">
-    11 UI systems · 10 themes · light/dark/contrast
-  </text>
-  <rect x="350" y="322" width="700" height="8" rx="4" fill="url(#accent)" opacity="0.95" />
-  <text x="350" y="380" font-size="28" font-family="Segoe UI, Inter, Arial, sans-serif" fill="#e2e8f0">
-    CSS-only visual style library demo on GitHub Pages
-  </text>
-  <g fill="#93c5fd" opacity="0.95">
-    <rect x="350" y="430" width="120" height="44" rx="14" />
-    <rect x="484" y="430" width="120" height="44" rx="14" />
-    <rect x="618" y="430" width="120" height="44" rx="14" />
-  </g>
-</svg>
diff --git a/assets/seo/social-card.png b/assets/seo/social-card.png
new file mode 100644
index 0000000..60be88d
Binary files /dev/null and b/assets/seo/social-card.png differ
diff --git a/browserconfig.xml b/browserconfig.xml
index 16725a2..c5f541f 100644
--- a/browserconfig.xml
+++ b/browserconfig.xml
@@ -2,7 +2,7 @@
 <browserconfig>
   <msapplication>
     <tile>
-      <square150x150logo src="/ui-style-kit-css/favicon.svg" />
+      <square150x150logo src="/ui-style-kit-css/logo.png" />
       <TileColor>#0b0f19</TileColor>
     </tile>
   </msapplication>
diff --git a/favicon.svg b/favicon.svg
deleted file mode 100644
index 99ab209..0000000
--- a/favicon.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby="title desc">
-  <title id="title">UI Style Kit CSS</title>
-  <desc id="desc">Rounded square logo with layered UI panels.</desc>
-  <defs>
-    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#3b82f6" />
-      <stop offset="50%" stop-color="#0ea5e9" />
-      <stop offset="100%" stop-color="#22d3ee" />
-    </linearGradient>
-  </defs>
-  <rect width="256" height="256" rx="48" fill="#0b1220" />
-  <rect x="34" y="34" width="188" height="188" rx="34" fill="url(#g1)" opacity="0.2" />
-  <rect x="56" y="62" width="144" height="36" rx="12" fill="#f8fafc" />
-  <rect x="56" y="112" width="88" height="22" rx="8" fill="#bae6fd" />
-  <rect x="56" y="146" width="126" height="22" rx="8" fill="#67e8f9" />
-  <rect x="56" y="180" width="66" height="22" rx="8" fill="#e0f2fe" />
-</svg>
diff --git a/index.html b/index.html
index 025ea3f..c5b9d50 100644
--- a/index.html
+++ b/index.html
@@ -59,8 +59,8 @@
   <link rel="stylesheet" href="styles/cyberpunk.css" />
   <link rel="stylesheet" href="styles/y2k.css" />
   <link rel="stylesheet" href="styles/retro-glass.css" />
-  <link rel="icon" href="favicon.svg" type="image/svg+xml" />
-  <link rel="apple-touch-icon" href="favicon.svg" />
+  <link rel="icon" href="logo.png" type="image/png" sizes="1254x1254" />
+  <link rel="apple-touch-icon" href="logo.png" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="UI Style Kit CSS" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -78,9 +78,9 @@
     content="Try every UI Style Kit CSS visual system, switch shared themes and modes, and preview native element coverage."
   />
   <meta property="og:url" content="https://foscat.github.io/ui-style-kit-css/" />
-  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
-  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
-  <meta property="og:image:type" content="image/svg+xml" />
+  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
+  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
+  <meta property="og:image:type" content="image/png" />
   <meta property="og:image:alt" content="UI Style Kit CSS social preview image" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
@@ -88,7 +88,7 @@
     name="twitter:description"
     content="CSS-only UI style library demo with multi-style switching, shared themes, and accessibility-focused native HTML coverage."
   />
-  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/og-preview.svg" />
+  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
   <meta name="twitter:image:alt" content="UI Style Kit CSS social preview image" />
   <script type="application/ld+json">
     {
diff --git a/package-lock.json b/package-lock.json
index 37edce8..8616785 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ui-style-kit-css",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ui-style-kit-css",
-      "version": "1.0.2",
+      "version": "1.0.4",
       "license": "MIT",
       "dependencies": {
         "ajv": "~8.20.0",
@@ -109,6 +109,8 @@
         "write-file-atomic": "~5.0.1"
       },
       "devDependencies": {
+        "@playwright/test": "^1.54.0",
+        "lightningcss": "^1.30.2",
         "stylelint": "^17.12.0"
       },
       "engines": {
@@ -379,6 +381,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
@@ -597,6 +615,16 @@
         }
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -727,6 +755,21 @@
       "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
@@ -1039,6 +1082,267 @@
       "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
       "license": "MIT"
     },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -1191,6 +1495,38 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.15",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
diff --git a/package.json b/package.json
index 92f6bd9..cb26d14 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,20 @@
     "retrofuturism"
   ],
   "scripts": {
+    "build": "node scripts/build-css.js",
     "lint": "npm run lint:css",
     "lint:css": "stylelint \"styles/**/*.css\"",
-    "lint:css:fix": "stylelint \"styles/**/*.css\" --fix"
+    "lint:css:fix": "stylelint \"styles/**/*.css\" --fix",
+    "prepublishOnly": "npm run lint && npm run build && npm run test:unit",
+    "test": "npm run test:unit",
+    "test:ci": "npm run lint && npm run build && npm run test:unit && npm run test:e2e",
+    "test:e2e": "node scripts/playwright-cli.js test",
+    "test:e2e:headed": "node scripts/playwright-cli.js test --headed",
+    "test:e2e:install": "node scripts/playwright-cli.js install chromium",
+    "test:e2e:install:ci": "node scripts/playwright-cli.js install --with-deps chromium",
+    "test:e2e:ui": "node scripts/playwright-cli.js test --ui",
+    "test:unit": "node --test tests/package-integrity.test.js",
+    "verify": "npm run lint && npm run build && npm run test:unit && npm run test:e2e"
   },
   "license": "MIT",
   "engines": {
@@ -80,6 +91,8 @@
   },
   "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
   "devDependencies": {
+    "@playwright/test": "^1.54.0",
+    "lightningcss": "^1.30.2",
     "stylelint": "^17.12.0"
   },
   "dependencies": {
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 0000000..db1cda1
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,25 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: './tests/e2e',
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+});
diff --git a/scripts/build-css.js b/scripts/build-css.js
new file mode 100644
index 0000000..54319de
--- /dev/null
+++ b/scripts/build-css.js
@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { transform } = require('lightningcss');
+
+const rootDir = path.resolve(__dirname, '..');
+const stylesDir = path.join(rootDir, 'styles');
+const distDir = path.join(rootDir, 'dist');
+
+const styleFiles = [
+  'minimal-saas.css',
+  'bento.css',
+  'maximalist.css',
+  'bauhaus.css',
+  'tactile.css',
+  'neumorphism.css',
+  'retrofuturism.css',
+  'brutalism.css',
+  'cyberpunk.css',
+  'y2k.css',
+  'retro-glass.css'
+];
+
+const fullBanner = [
+  '/* =========================================================',
+  '   UI Style Kit CSS',
+  '   All-in-one library build.',
+  '   UI systems: Minimal SaaS, Bento, Maximalist, Bauhaus, Tactile, Neumorphism,',
+  '   Retrofuturism, Brutalism, Cyberpunk, Y2K, Retro Glass.',
+  '========================================================= */'
+].join('\n');
+
+const minBanner = [
+  '/*!',
+  ' * UI Style Kit CSS',
+  ' * All-in-one library build.',
+  ' * UI systems: Minimal SaaS, Bento, Maximalist, Bauhaus, Tactile, Neumorphism,',
+  ' * Retrofuturism, Brutalism, Cyberpunk, Y2K, Retro Glass.',
+  ' */'
+].join('\n');
+
+function readStyleFile(filename) {
+  const filePath = path.join(stylesDir, filename);
+  if (!fs.existsSync(filePath)) {
+    throw new Error(`Missing style source file: ${filePath}`);
+  }
+
+  const content = fs.readFileSync(filePath, 'utf8').trim();
+  if (!content) {
+    throw new Error(`Style source file is empty: ${filePath}`);
+  }
+
+  return content;
+}
+
+function build() {
+  const cssChunks = styleFiles.map(readStyleFile);
+  const fullCss = `${fullBanner}\n\n${cssChunks.join('\n\n')}\n`;
+
+  fs.mkdirSync(distDir, { recursive: true });
+
+  const fullOutputPath = path.join(distDir, 'ui-style-kit.css');
+  fs.writeFileSync(fullOutputPath, fullCss, 'utf8');
+
+  const { code } = transform({
+    filename: 'ui-style-kit.css',
+    code: Buffer.from(fullCss),
+    minify: true,
+    sourceMap: false
+  });
+
+  const minOutputPath = path.join(distDir, 'ui-style-kit.min.css');
+  fs.writeFileSync(minOutputPath, `${minBanner}\n${code.toString()}`, 'utf8');
+
+  console.log(`Built ${path.relative(rootDir, fullOutputPath)} and ${path.relative(rootDir, minOutputPath)}.`);
+}
+
+build();
diff --git a/scripts/playwright-cli.js b/scripts/playwright-cli.js
new file mode 100644
index 0000000..788a9eb
--- /dev/null
+++ b/scripts/playwright-cli.js
@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const path = require('node:path');
+const { spawnSync } = require('node:child_process');
+
+const rootDir = path.resolve(__dirname, '..');
+const runner = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+
+const args = process.argv.slice(2);
+if (!args.length) {
+  console.error('Usage: node scripts/playwright-cli.js <playwright-args...>');
+  process.exit(1);
+}
+
+const env = {
+  ...process.env,
+  PWTEST_CACHE_DIR: process.env.PWTEST_CACHE_DIR || path.join(rootDir, '.playwright-cache'),
+  PLAYWRIGHT_BROWSERS_PATH:
+    process.env.PLAYWRIGHT_BROWSERS_PATH || path.join(rootDir, '.playwright-browsers')
+};
+
+const result = spawnSync(runner, ['playwright', ...args], {
+  stdio: 'inherit',
+  env,
+  shell: process.platform === 'win32'
+});
+
+if (result.error) {
+  throw result.error;
+}
+
+process.exit(result.status ?? 1);
diff --git a/site.webmanifest b/site.webmanifest
index 9dd716c..4ed3a7b 100644
--- a/site.webmanifest
+++ b/site.webmanifest
@@ -11,15 +11,15 @@
   "lang": "en-US",
   "icons": [
     {
-      "src": "favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
+      "src": "logo.png",
+      "sizes": "1254x1254",
+      "type": "image/png"
     },
     {
-      "src": "favicon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml",
-      "purpose": "any"
+      "src": "logo.png",
+      "sizes": "1254x1254",
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ]
 }
diff --git a/tests/e2e/demo.spec.js b/tests/e2e/demo.spec.js
new file mode 100644
index 0000000..7c19d62
--- /dev/null
+++ b/tests/e2e/demo.spec.js
@@ -0,0 +1,32 @@
+const { test, expect } = require('@playwright/test');
+const path = require('node:path');
+const { pathToFileURL } = require('node:url');
+
+const demoUrl = pathToFileURL(path.resolve(__dirname, '..', '..', 'index.html')).href;
+
+test('demo loads with default theme settings', async ({ page }) => {
+  await page.goto(demoUrl);
+
+  await expect(page).toHaveTitle(/UI Style Kit CSS Demo/i);
+
+  await expect(page.locator('body')).toHaveAttribute('data-ui', 'minimal-saas');
+  await expect(page.locator('body')).toHaveAttribute('data-theme', 'midnight-gold');
+  await expect(page.locator('body')).toHaveAttribute('data-mode', 'light');
+
+  await expect(page.getByRole('heading', { level: 1, name: 'UI Style Kit CSS' })).toBeVisible();
+});
+
+test('switching demo controls updates body attributes and rendered classes', async ({ page }) => {
+  await page.goto(demoUrl);
+
+  await page.selectOption('#uiSelect', 'cyberpunk');
+  await page.selectOption('#themeSelect', 'midnight-gold');
+  await page.selectOption('#modeSelect', 'contrast');
+
+  await expect(page.locator('body')).toHaveAttribute('data-ui', 'cyberpunk');
+  await expect(page.locator('body')).toHaveAttribute('data-theme', 'midnight-gold');
+  await expect(page.locator('body')).toHaveAttribute('data-mode', 'contrast');
+
+  await expect(page.locator('#main .cyber-title')).toBeVisible();
+  await expect(page.locator('#main .cyber-button.cyber-button-primary')).toHaveCount(1);
+});
diff --git a/tests/package-integrity.test.js b/tests/package-integrity.test.js
new file mode 100644
index 0000000..9fa6fb7
--- /dev/null
+++ b/tests/package-integrity.test.js
@@ -0,0 +1,60 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const rootDir = path.resolve(__dirname, '..');
+const packageJson = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json'), 'utf8'));
+
+function assertFileExists(relativePath) {
+  const absolutePath = path.join(rootDir, relativePath);
+  assert.ok(fs.existsSync(absolutePath), `Expected file to exist: ${relativePath}`);
+}
+
+test('package entry points point to dist output', () => {
+  assert.equal(packageJson.main, 'dist/ui-style-kit.css');
+  assert.equal(packageJson.style, 'dist/ui-style-kit.css');
+  assert.equal(packageJson.unpkg, 'dist/ui-style-kit.min.css');
+  assert.equal(packageJson.jsdelivr, 'dist/ui-style-kit.min.css');
+
+  assertFileExists(packageJson.main);
+  assertFileExists(packageJson.unpkg);
+});
+
+test('export targets map to real files', () => {
+  for (const [exportPath, targetPath] of Object.entries(packageJson.exports || {})) {
+    assert.equal(typeof targetPath, 'string', `Expected string export target for ${exportPath}`);
+    assertFileExists(targetPath.replace(/^\.\//, ''));
+  }
+});
+
+test('dist CSS contains expected style system markers', () => {
+  const css = fs.readFileSync(path.join(rootDir, 'dist', 'ui-style-kit.css'), 'utf8');
+  const minCss = fs.readFileSync(path.join(rootDir, 'dist', 'ui-style-kit.min.css'), 'utf8');
+
+  const uiNames = [
+    'minimal-saas',
+    'bento',
+    'maximalist',
+    'bauhaus',
+    'tactile',
+    'neumorphism',
+    'retrofuturism',
+    'brutalism',
+    'cyberpunk',
+    'y2k',
+    'retro-glass'
+  ];
+
+  for (const uiName of uiNames) {
+    assert.match(css, new RegExp(`\\[data-ui="${uiName}"\\]`));
+    assert.match(minCss, new RegExp(`\\[data-ui=${uiName}\\]`));
+  }
+});
+
+test('package files include required publish assets', () => {
+  const requiredFiles = ['dist', 'styles', 'README.md', 'LICENSE'];
+  for (const item of requiredFiles) {
+    assert.ok(packageJson.files.includes(item), `package.json files[] should include ${item}`);
+  }
+});
diff --git a/wiki/Installation-and-Setup.md b/wiki/Installation-and-Setup.md
index ac62108..07735da 100644
--- a/wiki/Installation-and-Setup.md
+++ b/wiki/Installation-and-Setup.md
@@ -30,6 +30,21 @@ Local build:
 <link rel="stylesheet" href="dist/ui-style-kit.css" />
 ```
 
+## Package Maintenance Scripts
+
+```bash
+npm run build
+npm run lint
+npm test
+```
+
+Playwright E2E:
+
+```bash
+npm run test:e2e:install
+npm run test:e2e
+```
+
 ## Minimal Markup Contract
 
 1. Apply all three attributes on your root container (usually `<body>`): `data-ui`, `data-theme`, `data-mode`.