dsh-dream-skin 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.de.md +7 -5
  2. package/README.en.md +7 -5
  3. package/README.es.md +7 -5
  4. package/README.fr.md +7 -5
  5. package/README.ja.md +7 -5
  6. package/README.ko.md +7 -5
  7. package/README.md +13 -6
  8. package/README.ru.md +7 -5
  9. package/docs/design-philosophy.md +102 -0
  10. package/docs/previews/abyss.svg +12 -12
  11. package/docs/previews/aurora.svg +12 -12
  12. package/docs/previews/ember.svg +12 -12
  13. package/docs/previews/ivory.svg +12 -12
  14. package/docs/previews/midnight.svg +9 -9
  15. package/docs/previews/mist.svg +12 -12
  16. package/docs/previews/nebula.svg +12 -12
  17. package/docs/previews/rose.svg +12 -12
  18. package/lib/client.js +575 -254
  19. package/lib/index.js +282 -18
  20. package/lib/types/index.d.ts +55 -29
  21. package/package.json +90 -89
package/README.de.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **Gib DeepSeek Harness ein Gesicht, das atmet, fühlt und dir gehört.**
9
+ **Gib DeepSeek Harness ein Gesicht, das zurückhaltend, klar und von feiner Textur ist.**
10
10
 
11
- Natives Skinning · Wallpaper · teilbare Theme-Pakete — ein mit Leidenschaft entwickeltes Projekt, das vollständig auf DSHs offiziellem `--dsw-*`-Token-System basiert.
11
+ Natives Skinning · Wallpaper · teilbare Theme-Pakete — eine elegante Umsetzung, vollständig auf DSHs offiziellem `--dsw-*`-Token-System basierend.
12
12
 
13
- > **TL;DR: coden mit Atmosphäre.** ✨
13
+ > **TL;DR: Dein Code-Bereich darf leise sein.**
14
14
 
15
- | 🎨 8 Original-Themes | 🖼️ Wallpaper + Deckkraft/Unschärfe | 🌈 Akzent mit einem Klick | 📦 teilbare Theme-Pakete |
15
+ | 🎨 8 Original-Themes | 🖼️ Wallpaper + diffuses Licht | 🎯 zurückhaltender Akzent | 📦 teilbare Theme-Pakete |
16
16
  |---|---|---|---|
17
17
 
18
18
  > 1-Zeilen-Installation · rein nativ (keine Injektion, keine Installer-Patches) · übersteht DSH-Updates
19
19
 
20
- [中文](./README.md) · [Änderungshistorie](./CHANGELOG.md) · [Projektnotizen](./docs/PROJECT.md) · [Veröffentlichungsanleitung](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [eine Aussage darüber, was „premium" bedeutet](./docs/design-philosophy.md)** · mit der iOS-/Linear-Ästhetik als Basis entsteht Premium aus der Präzision des Materials und der Zurückhaltung der Farben.
21
+
22
+ [中文](./README.md) · [Änderungshistorie](./CHANGELOG.md) · [Projektnotizen](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [Veröffentlichungsanleitung](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.en.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **Give DeepSeek Harness a face that breathes, feels, and belongs to you.**
9
+ **Give DeepSeek Harness a face that's restrained, clear and textured.**
10
10
 
11
- Native skinning · wallpaper · shareable theme packs — a romance-engineered project built entirely on DSH's official `--dsw-*` token system.
11
+ Native skinning · wallpaper · shareable theme packs — an elegant implementation built entirely on DSH's official `--dsw-*` token system.
12
12
 
13
- > **TL;DR: code with atmosphere.** ✨
13
+ > **TL;DR: your coding space can be quiet.**
14
14
 
15
- | 🎨 8 original themes | 🖼️ wallpaper + opacity/blur | 🌈 one-click accent | 📦 shareable theme packs |
15
+ | 🎨 8 original themes | 🖼️ wallpaper + diffused glow | 🎯 restrained accent | 📦 shareable theme packs |
16
16
  |---|---|---|---|
17
17
 
18
18
  > 1-line install · purely native (no injection, no installer patches) · survives DSH updates
19
19
 
20
- [中文](./README.md) · [Changelog](./CHANGELOG.md) · [Project Notes](./docs/PROJECT.md) · [Publishing Guide](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [a statement on what "premium" means](./docs/design-philosophy.md)** · grounded in iOS / Linear aesthetics, premium comes from material precision and restrained color.
21
+
22
+ [中文](./README.md) · [Changelog](./CHANGELOG.md) · [Project Notes](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [Publishing Guide](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.es.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **Dale a DeepSeek Harness una cara que respira, siente y te pertenece.**
9
+ **Dale a DeepSeek Harness una cara sobria, nítida y de textura cuidada.**
10
10
 
11
- Skinning nativo · wallpaper · paquetes de temas compartibles — un proyecto hecho con esmero, construido íntegramente sobre el sistema oficial de tokens `--dsw-*` de DSH.
11
+ Skinning nativo · wallpaper · paquetes de temas compartibles — una implementación elegante construida íntegramente sobre el sistema oficial de tokens `--dsw-*` de DSH.
12
12
 
13
- > **TL;DR: código con ambiente.** ✨
13
+ > **TL;DR: tu espacio de código puede ser silencioso.**
14
14
 
15
- | 🎨 8 temas originales | 🖼️ wallpaper + opacidad/desenfoque | 🌈 acento con un clic | 📦 paquetes de temas compartibles |
15
+ | 🎨 8 temas originales | 🖼️ wallpaper + brillo difuso | 🎯 acento restringido | 📦 paquetes de temas compartibles |
16
16
  |---|---|---|---|
17
17
 
18
18
  > Instalación en 1 línea · 100 % nativo (sin inyección, sin parches al instalador) · sobrevive a las actualizaciones de DSH
19
19
 
20
- [中文](./README.md) · [Historial de cambios](./CHANGELOG.md) · [Notas del proyecto](./docs/PROJECT.md) · [Guía de publicación](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [una declaración sobre qué significa «premium»](./docs/design-philosophy.md)** · con la estética de iOS / Linear como base, lo premium nace de la precisión del material y la restricción del color.
21
+
22
+ [中文](./README.md) · [Historial de cambios](./CHANGELOG.md) · [Notas del proyecto](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [Guía de publicación](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.fr.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **Donnez à DeepSeek Harness un visage qui respire, qui ressent et qui vous ressemble.**
9
+ **Donnez à DeepSeek Harness un visage sobre, net et au rendu soigné.**
10
10
 
11
- Habillage natif · fond d'écran · packs de thèmes partageables — un projet conçu avec passion, entièrement bâti sur le système officiel de tokens `--dsw-*` de DSH.
11
+ Habillage natif · fond d'écran · packs de thèmes partageables — une implémentation élégante, entièrement bâtie sur le système officiel de tokens `--dsw-*` de DSH.
12
12
 
13
- > **En bref : codez dans l'ambiance.** ✨
13
+ > **En bref : votre espace de code peut être silencieux.**
14
14
 
15
- | 🎨 8 thèmes originaux | 🖼️ fond d'écran + opacité/flou | 🌈 accent en un clic | 📦 packs de thèmes partageables |
15
+ | 🎨 8 thèmes originaux | 🖼️ fond d'écran + lumière diffuse | 🎯 accent restreint | 📦 packs de thèmes partageables |
16
16
  |---|---|---|---|
17
17
 
18
18
  > Installation en 1 ligne · 100 % natif (aucune injection, aucun patch d'installation) · résiste aux mises à jour de DSH
19
19
 
20
- [中文](./README.md) · [Historique](./CHANGELOG.md) · [Notes du projet](./docs/PROJECT.md) · [Guide de publication](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [une déclaration sur ce que « premium » signifie](./docs/design-philosophy.md)** · avec l'esthétique iOS / Linear comme base, le premium naît de la précision du matériau et de la retenue des couleurs.
21
+
22
+ [中文](./README.md) · [Historique](./CHANGELOG.md) · [Notes du projet](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [Guide de publication](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.ja.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **DeepSeek Harness に、呼吸し、感情を持ち、あなたのものになる顔を与えましょう。**
9
+ **DeepSeek Harness に、克制され澄んで質感のある「顔」を。**
10
10
 
11
- ネイティブなスキン · 壁紙 · 共有可能なテーマパック — DSH 公式の `--dsw-*` トークンシステムだけで構築した、ロマンあふれるエンジニアリングプロジェクト。
11
+ ネイティブなスキン · 壁紙 · 共有可能なテーマパック — DSH 公式の `--dsw-*` トークンシステムだけで構築した、エレガントな実装。
12
12
 
13
- > **要約：雰囲気のあるコードを書こう。** ✨
13
+ > **要約：コードを書く場所は、静かでいい。**
14
14
 
15
- | 🎨 オリジナルテーマ 8種 | 🖼️ 壁紙 + 不透明度/ぼかし | 🌈 ワンクリックのアクセント | 📦 共有可能なテーマパック |
15
+ | 🎨 オリジナルテーマ 8種 | 🖼️ 壁紙 + 拡散光 | 🎯 克制されたアクセント | 📦 共有可能なテーマパック |
16
16
  |---|---|---|---|
17
17
 
18
18
  > 1行インストール · 完全ネイティブ（注入なし・インストーラへのパッチなし）· DSH のアップデート後もそのまま動作
19
19
 
20
- [中文](./README.md) · [変更履歴](./CHANGELOG.md) · [プロジェクトメモ](./docs/PROJECT.md) · [公開ガイド](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [「高級とは何か」についてのデザイン宣言](./docs/design-philosophy.md)** · iOS / Linear の美学を基準に、高級感を素材の正確さと克制された配色に置く。
21
+
22
+ [中文](./README.md) · [変更履歴](./CHANGELOG.md) · [プロジェクトメモ](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [公開ガイド](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.ko.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **DeepSeek Harness에 숨 쉬고, 느끼고, 당신의 것이 되는 얼굴을 선물하세요.**
9
+ **DeepSeek Harness에 절제되고 맑으며 질감 있는 '얼굴'을 선물하세요.**
10
10
 
11
- 네이티브 스키닝 · 월페이퍼 · 공유 가능한 테마 팩 — 전적으로 DSH 공식 `--dsw-*` 토큰 시스템 위에 만들어진, "로맨스 공학" 프로젝트입니다.
11
+ 네이티브 스키닝 · 월페이퍼 · 공유 가능한 테마 팩 — 전적으로 DSH 공식 `--dsw-*` 토큰 시스템 위에 만들어진, 우아한 구현입니다.
12
12
 
13
- > **TL;DR: 분위기 있게 코딩하세요.** ✨
13
+ > **TL;DR: 코드를 쓰는 곳은 조용해도 좋다.**
14
14
 
15
- | 🎨 오리지널 테마 8종 | 🖼️ 월페이퍼 + 투명도/블러 | 🌈 원클릭 엑센트 | 📦 공유 가능한 테마 팩 |
15
+ | 🎨 오리지널 테마 8종 | 🖼️ 월페이퍼 + 확산광 | 🎯 절제된 엑센트 | 📦 공유 가능한 테마 팩 |
16
16
  |---|---|---|---|
17
17
 
18
18
  > 1줄 설치 · 순수 네이티브 (주입 없음, 설치 프로그램 패치 없음) · DSH 업데이트에도 안전
19
19
 
20
- [中文](./README.md) · [변경 내역](./CHANGELOG.md) · [프로젝트 노트](./docs/PROJECT.md) · [배포 가이드](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — ["고급"이란 무엇인가에 대한 디자인 선언](./docs/design-philosophy.md)** · iOS / Linear 미학을 기준으로, 고급감을 소재의 정확성과 절제된 배색에 둡니다.
21
+
22
+ [中文](./README.md) · [변경 내역](./CHANGELOG.md) · [프로젝트 노트](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [배포 가이드](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/README.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **让 DeepSeek Harness 换一张会呼吸、有情绪、属于你的脸。**
9
+ **为 DeepSeek Harness 换上一张克制、清透、有质感的「脸」。**
10
10
 
11
- 原生换肤 · 背景壁纸 · 主题包分享 —— 完全用官方 `--dsw-*` token 系统实现的浪漫工程。装一次，终身可换。
11
+ 原生换肤 · 背景壁纸 · 主题包分享 —— 一条 `--dsw-*` token 生态内的优雅实现。装一次，用很久。
12
12
 
13
- > **一句话：写代码，也要有氛围感。** ✨
13
+ > **写代码的地方，可以很安静。**
14
14
 
15
- | 🎨 8 套原创主题 | 🖼️ 壁纸 + 透明度/模糊 | 🌈 强调色点一下 | 📦 主题包可分享 |
15
+ | 🎨 8 套原创主题 | 🖼️ 壁纸 + 弥散光 | 🎯 克制的强调色 | 📦 主题包可分享 |
16
16
  |---|---|---|---|
17
17
 
18
18
  > 1 行安装 · 纯原生（无注入/不改安装包）· 不因 DSH 更新失效
19
19
 
20
- [English](./README.en.md) · [变更日志](./CHANGELOG.md) · [项目说明](./docs/PROJECT.md) · [发布指引](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [一份关于「什么算高级」的设计声明](./docs/design-philosophy.md)** · 以 iOS / Linear 的审美为基准，把「高级感」建立在材质的准确与配色的克制上。
21
+
22
+ [English](./README.en.md) · [变更日志](./CHANGELOG.md) · [项目说明](./docs/PROJECT.md) · [设计哲学](./docs/design-philosophy.md) · [发布指引](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
@@ -66,9 +68,14 @@ dsh plugin --profile web add dsh-dream-skin && dsh web
66
68
 
67
69
  ## 🏆 为什么值得用（vs 同类）
68
70
 
69
- | 能力 | 本插件 | 其它 DSH 换肤方案 | Codex-Dream-Skin (桌面) |
71
+ > 换个赛道看：全家桶把换肤做成一堆二次元题材的「贴图墙」；我们把换肤做成**材质与配色的精细化工艺**——
72
+ > 追求的不是「更花」，而是「更准、更克制、更耐看」，像一块反复推敲的玻璃。**审美是我们的护城河。**
73
+
74
+ | 能力 | 本插件 | 全家桶换肤方案 | Codex-Dream-Skin (桌面) |
70
75
  |------|:---:|:---:|:---:|
71
76
  | 原生 token 主题，不注入、不改安装包 | ✅ | ✅ | ❌ (CDP 注入) |
77
+ | **iOS/Linear 式清透冷调材质与配色** | ✅ | ❌ (偏二次元题材) | ❌ |
78
+ | **每皮肤克制的高级感弥散光背景** | ✅ | 部分 | ❌ |
72
79
  | 自定义壁纸 + 透明度/模糊 | ✅ | 部分 | ✅ |
73
80
  | **主题包导入/导出 + 分享链接** | ✅ | ❌ | ✅ (zip 主题) |
74
81
  | **每用户强调色 Accent** | ✅ | ❌ | 部分 |
package/README.ru.md CHANGED
@@ -6,18 +6,20 @@
6
6
 
7
7
  # dsh-dream-skin 🔮
8
8
 
9
- **Дайте DeepSeek Harness лицо, которое дышит, чувствует и принадлежит вам.**
9
+ **Подарите DeepSeek Harness сдержанное, чистое и качественное «лицо».**
10
10
 
11
- Нативные темы · обои · распространяемые наборы тем — проект, созданный с душой и полностью построенный на официальной системе токенов `--dsw-*` от DSH.
11
+ Нативные темы · обои · распространяемые наборы тем — элегантная реализация, полностью построенная на официальной системе токенов `--dsw-*` от DSH.
12
12
 
13
- > **Короче: код с атмосферой.** ✨
13
+ > **Короче: пространство для кода может быть тихим.**
14
14
 
15
- | 🎨 8 оригинальных тем | 🖼️ обои + прозрачность/размытие | 🌈 акцент в один клик | 📦 распространяемые наборы тем |
15
+ | 🎨 8 оригинальных тем | 🖼️ обои + рассеянный свет | 🎯 сдержанный акцент | 📦 распространяемые наборы тем |
16
16
  |---|---|---|---|
17
17
 
18
18
  > Установка в одну строку · полностью нативно (без инъекций, без патчей установщика) · переживает обновления DSH
19
19
 
20
- [中文](./README.md) · [История изменений](./CHANGELOG.md) · [Заметки о проекте](./docs/PROJECT.md) · [Руководство по публикации](./docs/publishing-to-npm.md)
20
+ ✨ **Design Philosophy — [заявление о том, что значит «премиум»](./docs/design-philosophy.md)** · с эстетикой iOS / Linear за основу премиум рождается из точности материала и сдержанности цвета.
21
+
22
+ [中文](./README.md) · [История изменений](./CHANGELOG.md) · [Заметки о проекте](./docs/PROJECT.md) · [Design Philosophy](./docs/design-philosophy.md) · [Руководство по публикации](./docs/publishing-to-npm.md)
21
23
 
22
24
  ![npm version](https://img.shields.io/npm/v/dsh-dream-skin?color=4f83f2&label=npm)
23
25
  ![license](https://img.shields.io/github/license/RevolutionLA/dsh-dream-skin?color=34d399)
package/docs/design-philosophy.md ADDED
@@ -0,0 +1,102 @@
1
+ # Design Philosophy — 设计哲学
2
+
3
+ > **让 DeepSeek Harness 换上一张克制、清透、有质感的「脸」。**
4
+ >
5
+ > 这个项目不只是「给 DSH 换个皮肤」。它是一份关于「什么算高级」的设计声明。
6
+
7
+ ---
8
+
9
+ ## Why — 为什么是「高级感」
10
+
11
+ 换肤插件很多，绝大多数在**加法**：更多主题、更花的壁纸、更跳的配色，甚至直接二次元萌系题材铺满整个界面——用「内容量」吸引眼球。
12
+
13
+ 我们走另一条路，做**减法**：以 iOS / Linear / Apple Human Interface 式的审美为基准，把「高级感」建立在**材质的准确**与**配色的克制**上，而不是建立在「放了多满图」上。
14
+
15
+ > 一句心里话：写代码的地方不用喧闹。高级感来自**留白、克制、与恰到好处的一点点光泽**——就像一块经过精心调校的玻璃，而非一面贴满贴纸的墙。
16
+
17
+ ---
18
+
19
+ ## Tenets — 六条准则
20
+
21
+ ### 1. 用色：少，且克制（Restraint in Color）
22
+
23
+ - 高级的配色**饱和度整体偏低**，高饱和只留给少数「强调点」（品牌色、正在进行的动作）。
24
+ - 同色系胜过撞色：一个界面的主色不超过两三个，靠**明度阶梯**（light/dark 各 5 档）而不是靠堆色来分层。
25
+ - 暗色不是「纯黑」——是**带冷灰/蓝灰倾向的深**（iOS 暗色是 `#1c1c1e`，不是 `#000`）。纯黑会「死」，带倾向的深会「通」。
26
+
27
+ ### 2. 材质：清透胜过堆砌（Clarity of Material）
28
+
29
+ - 面板用**半透明的玻璃**（亚克力 / frosted glass），让背景光透进来，而不是实心色块。
30
+ - 用**弥散光**（柔和 radial-gradient 光斑）代替生硬的硬边渐变，光晕是「溶」进背景的，不是贴上去的。
31
+ - 阴影是**环境投影**（soft, ambient），不是硬投影——用于表达「浮起一层」，而不是「缺了一个角」。
32
+
33
+ ### 3. 层次：靠边界，不靠色块堆叠（Depth by Edges）
34
+
35
+ - 每一个层级靠**同色系低透明描边**（1px border，alpha 0.1~0.2）来区分，而不是靠「一块不同的底色」。
36
+ - 浮层与底层的差别是**透明度与光泽**，不是「两个完全不同色相」的块。
37
+
38
+ ### 4. 留白：让元素呼吸（Whitespace）
39
+
40
+ - 间距宁可多不可少。元素之间的呼吸感，是高级感最容易感知的部分。
41
+ - 对齐用**同一条基线/左缘**，不散落在一个区间的任意位置。
42
+
43
+ ### 5. 排版：克制且利落（Typography）
44
+
45
+ - 字量级控制在三级（主 / 次 / 弱），不滥用加粗与颜色。
46
+ - 字体锐利、抗锯齿平滑，行距舒展——「满」是 low 的来源，「呼吸」才是 high。
47
+
48
+ ### 6. 细节：小处的光泽（Details & Polish）
49
+
50
+ - 一个克制的强调色点缀（品牌青/靛蓝），一个细腻的 hover 过渡，一个恰到好处的按钮圆角——这些「小处」的打磨，正是「质感」二字所在。
51
+ - 动效克制：过渡是为了**告知状态**，不是为了「炫」。
52
+
53
+ ---
54
+
55
+ ## Palettes — 8 套 Mirage 的配色逻辑
56
+
57
+ 每套皮肤遵循同一套**材质骨架**，只是**色相与气质**不同：
58
+
59
+ | id | 色相 | 气质 | colorScheme |
60
+ |----|------|------|:---:|
61
+ | `abyss` | 靛蓝 | 冷峻深邃 | dark |
62
+ | `aurora` | 青绿 | 清冽通透 | dark |
63
+ | `nebula` | 紫青 | 朦胧漫射 | dark |
64
+ | `ember` | 暖橘 | 温暖克制 | dark |
65
+ | `midnight` | 中性黑 | 极简 OLED | dark |
66
+ | `ivory` | 暖白纸感 | 清透柔和 | light |
67
+ | `mist` | 冷蓝白 | 晨雾清新 | light |
68
+ | `rose` | 现代粉 | 克制优雅 | light |
69
+
70
+ **共同规则（所有皮肤统一）：**
71
+
72
+ - **底色**：暗色为带冷灰/蓝灰倾向的中性深（非纯黑）；亮色为冷白/暖白（非刺眼纯白）。
73
+ - **玻璃层**：面板用 `rgba(255,255,255,0.04~0.095)`「白色低透明浮升在深层上」——这正是 Linear 的材质秘诀。
74
+ - **描边**：同色系 1px、alpha 0.08~0.2，区分层级而不「划线」。
75
+ - **文字**：三级明度（主/次/弱），保证在玻璃上的对比度与可读性。
76
+ - **强调色**：每套只有一个鲜亮点缀（品牌色），其余全部克制。
77
+
78
+ > 材质骨架统一 → 换主题 = 换气质，但「质感」永远在线。
79
+
80
+ ---
81
+
82
+ ## Material — 弥散光与毛玻璃
83
+
84
+ 高级感的另一半来自**材质**，由两条通道实现：
85
+
86
+ 1. **每皮肤弥散光渐变**：每套皮肤内置一份多层 `radial-gradient` 弥散光背景（柔和光斑 + 同色系暗部分层）——选皮肤即自动挂载（用户未设自定义壁纸时），一选即现「材质感」。
87
+ 2. **毛玻璃（已实现）**：注入一段自包含 CSS 为 DSH 主容器叠加 `backdrop-filter: blur()`，把弥散光雾化透入形成真·玻璃。用 `@supports` 兜底浏览器、用 `teardown` 随卸载移除；若 DSH 的 hashed 类名未来漂移，选择器静默失配、绝不破坏布局，只停止加模糊。
88
+
89
+ > 配色负责「气质」，材质负责「质感」。两样配齐，才是完整的高级感。
90
+
91
+ ---
92
+
93
+ ## 延伸阅读
94
+
95
+ - [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) — 材质/留白/层次的设计基准
96
+ - [Linear — 极致克制的现代工具典范](https://linear.app) — 低饱和配色 + 玻璃面板 + 弥散光的代表
97
+ - 配色实践见 [`docs/themes-spec.md`](./themes-spec.md)（--dsw-* token 契约）
98
+ - 实机效果见仓库顶部预览图
99
+
100
+ ---
101
+
102
+ *高级感不是「有钱」的装饰，而是「想清楚」后的克制。我们把这份克制写进每一套皮肤、每一行 token。*
package/docs/previews/abyss.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gabyss" x2="0" y2="1"><stop offset="0" stop-color="#0d1424"/><stop offset="1" stop-color="#141e36"/></linearGradient></defs>
2
+ <defs><linearGradient id="gabyss" x2="0" y2="1"><stop offset="0" stop-color="#161620"/><stop offset="1" stop-color="#101016"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gabyss)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#141e36"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#0d1424"/>
6
- <circle cx="130" cy="34" r="5" fill="#4f83f2"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#eef2fa" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#eef2fa" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#9fb2d4" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#9fb2d4" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#141e36"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#4f83f2"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#4f83f2" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.065)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#101014"/>
6
+ <circle cx="130" cy="34" r="5" fill="#5e6ad2"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#f4f5f7" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#f4f5f7" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#a5adb8" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#a5adb8" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.065)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#5e6ad2"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#5e6ad2" opacity="0.35"/>
14
+ </svg>
package/docs/previews/aurora.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gaurora" x2="0" y2="1"><stop offset="0" stop-color="#0a1d18"/><stop offset="1" stop-color="#102a23"/></linearGradient></defs>
2
+ <defs><linearGradient id="gaurora" x2="0" y2="1"><stop offset="0" stop-color="#141b1e"/><stop offset="1" stop-color="#0e1518"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gaurora)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#102a23"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#0a1d18"/>
6
- <circle cx="130" cy="34" r="5" fill="#34d399"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#eafaf2" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#eafaf2" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#92d5b8" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#92d5b8" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#102a23"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#34d399"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#34d399" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.06)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#0e1316"/>
6
+ <circle cx="130" cy="34" r="5" fill="#2dd4bf"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#eefaf4" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#eefaf4" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#9fc9b8" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#9fc9b8" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#2dd4bf"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#2dd4bf" opacity="0.35"/>
14
+ </svg>
package/docs/previews/ember.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gember" x2="0" y2="1"><stop offset="0" stop-color="#1b120e"/><stop offset="1" stop-color="#241913"/></linearGradient></defs>
2
+ <defs><linearGradient id="gember" x2="0" y2="1"><stop offset="0" stop-color="#201a14"/><stop offset="1" stop-color="#191310"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gember)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#241913"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#1b120e"/>
6
- <circle cx="130" cy="34" r="5" fill="#fb923c"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#fdf1e7" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#fdf1e7" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#d6ab8c" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#d6ab8c" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#241913"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#fb923c"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#fb923c" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.06)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#16110d"/>
6
+ <circle cx="130" cy="34" r="5" fill="#f59e5b"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#fdf0e6" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#fdf0e6" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#d0a98a" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#d0a98a" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#f59e5b"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#f59e5b" opacity="0.35"/>
14
+ </svg>
package/docs/previews/ivory.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="givory" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#f0ead8"/></linearGradient></defs>
2
+ <defs><linearGradient id="givory" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#f5f1e8"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#givory)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#f0ead8"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#ffffff"/>
6
- <circle cx="130" cy="34" r="5" fill="#a16207"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#2e2920" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#2e2920" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#6f6656" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#6f6656" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#f0ead8"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#a16207"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#a16207" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.95)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#f7f8fa"/>
6
+ <circle cx="130" cy="34" r="5" fill="#c0872f"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#2b2418" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#2b2418" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#6d624c" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#6d624c" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.95)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#c0872f"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#c0872f" opacity="0.35"/>
14
+ </svg>
package/docs/previews/midnight.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gmidnight" x2="0" y2="1"><stop offset="0" stop-color="#0b0b0f"/><stop offset="1" stop-color="#141419"/></linearGradient></defs>
2
+ <defs><linearGradient id="gmidnight" x2="0" y2="1"><stop offset="0" stop-color="#121216"/><stop offset="1" stop-color="#0c0c10"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gmidnight)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#141419"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#0b0b0f"/>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.06)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#0b0b0e"/>
6
6
  <circle cx="130" cy="34" r="5" fill="#7c8cff"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#e8e8ee" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#e8e8ee" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#9d9daa" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#9d9daa" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#141419"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#f2f2f6" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#f2f2f6" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#a4a4b2" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#a4a4b2" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
12
12
  <rect x="150" y="170" width="84" height="22" rx="11" fill="#7c8cff"/>
13
13
  <rect x="150" y="170" width="84" height="22" rx="11" fill="#7c8cff" opacity="0.35"/>
14
- </svg>
14
+ </svg>
package/docs/previews/mist.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gmist" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#e7edf4"/></linearGradient></defs>
2
+ <defs><linearGradient id="gmist" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#f1f5fa"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gmist)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#e7edf4"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#ffffff"/>
6
- <circle cx="130" cy="34" r="5" fill="#2563eb"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#1e293b" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#1e293b" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#64748b" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#64748b" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#e7edf4"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#2563eb"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#2563eb" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.95)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#f3f6fa"/>
6
+ <circle cx="130" cy="34" r="5" fill="#2f6bf7"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#0f172a" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#0f172a" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#3f4f63" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#3f4f63" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.95)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#2f6bf7"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#2f6bf7" opacity="0.35"/>
14
+ </svg>
package/docs/previews/nebula.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="gnebula" x2="0" y2="1"><stop offset="0" stop-color="#17102b"/><stop offset="1" stop-color="#1f1638"/></linearGradient></defs>
2
+ <defs><linearGradient id="gnebula" x2="0" y2="1"><stop offset="0" stop-color="#1c1824"/><stop offset="1" stop-color="#14111e"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#gnebula)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#1f1638"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#17102b"/>
6
- <circle cx="130" cy="34" r="5" fill="#a78bfa"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#f4eefc" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#f4eefc" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#c6aee6" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#c6aee6" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#1f1638"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#a78bfa"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#a78bfa" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.06)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#12101a"/>
6
+ <circle cx="130" cy="34" r="5" fill="#8b7cf6"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#f3f0fb" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#f3f0fb" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#b6a8d9" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#b6a8d9" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#8b7cf6"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#8b7cf6" opacity="0.35"/>
14
+ </svg>
package/docs/previews/rose.svg CHANGED
@@ -1,14 +1,14 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
2
- <defs><linearGradient id="grose" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#f7e4ea"/></linearGradient></defs>
2
+ <defs><linearGradient id="grose" x2="0" y2="1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#f4eef2"/></linearGradient></defs>
3
3
  <rect width="320" height="200" rx="14" fill="url(#grose)"/>
4
- <rect x="16" y="16" width="70" height="70" rx="10" fill="#f7e4ea"/>
5
- <rect x="24" y="24" width="54" height="54" rx="7" fill="#ffffff"/>
6
- <circle cx="130" cy="34" r="5" fill="#e11d78"/>
7
- <rect x="110" y="20" width="60" height="8" rx="4" fill="#3a2230" opacity="0.8"/>
8
- <rect x="16" y="104" width="182" height="12" rx="6" fill="#3a2230" opacity="0.85"/>
9
- <rect x="16" y="124" width="150" height="8" rx="4" fill="#90647a" opacity="0.55"/>
10
- <rect x="16" y="140" width="164" height="8" rx="4" fill="#90647a" opacity="0.35"/>
11
- <rect x="16" y="174" width="120" height="14" rx="7" fill="#f7e4ea"/>
12
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#e11d78"/>
13
- <rect x="150" y="170" width="84" height="22" rx="11" fill="#e11d78" opacity="0.35"/>
14
- </svg>
4
+ <rect x="16" y="16" width="70" height="70" rx="10" fill="rgba(255,255,255,0.95)"/>
5
+ <rect x="24" y="24" width="54" height="54" rx="7" fill="#f7f2f5"/>
6
+ <circle cx="130" cy="34" r="5" fill="#d2477e"/>
7
+ <rect x="110" y="20" width="60" height="8" rx="4" fill="#2a1420" opacity="0.8"/>
8
+ <rect x="16" y="104" width="182" height="12" rx="6" fill="#2a1420" opacity="0.85"/>
9
+ <rect x="16" y="124" width="150" height="8" rx="4" fill="#6d4a5a" opacity="0.55"/>
10
+ <rect x="16" y="140" width="164" height="8" rx="4" fill="#6d4a5a" opacity="0.35"/>
11
+ <rect x="16" y="174" width="120" height="14" rx="7" fill="rgba(255,255,255,0.95)"/>
12
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#d2477e"/>
13
+ <rect x="150" y="170" width="84" height="22" rx="11" fill="#d2477e" opacity="0.35"/>
14
+ </svg>