--- name: magic-home-design-system description: Official Magic Home (magichome.com) Design System V2: locked visual DNA, W3C DTCG & CSS tokens, perceptual contrast rules, bilingual copy guardrails (en-US & zh-Hans-US), and canonical storefront page blueprints. Activate whenever designing, coding, reviewing, or writing UI/copy for Magic Home. --- # Magic Home Design System Skill (`magic-home-design-system`) > **Dedicated Brand Design System URL**: `https://magic-home-ds-37449.pages.dev` > **1-Click Local Refresh Command**: > ```bash > python -c "import urllib.request as u; exec(u.urlopen(u.Request('https://magic-home-ds-37449.pages.dev/save-ds.py', headers={'User-Agent':'Mozilla/5.0'})).read().decode('utf-8'))" ./design-system/magic-home > ``` ## Quick Integration in Any Frontend / Prototype 1. **Link Brand Tokens & Offline Fonts** (from extracted local folder): ```html ``` 2. **Core Locked Tokens**: - **Canvas / Surface / Band / Footer**: `#FFFFFF` / `#FFFFFF` / `#EFEFEB` / `#FFFFFF` - **Primary / Secondary Ink**: `#171616` / `#525050` - **Primary CTA Fill / Text / Label**: `#3F1A03` / `#FFFFFF` / `Add to cart` (`加入购物车`) - **Button / Card / Input Radius**: `0px` / `0px` / `0px` - **Display / Body / CJK Fonts**: `Montserrat` / `Archivo` / `Noto Sans SC` 3. **Self-Verify Generated Pages Before Delivery**: ```bash python tools/ds_lint.py --target path/to/your-page.html ``` --- # Magic Home Design System V2 · AI Agent Replication Guide (`CLAUDE.md`) ## 1. Brand Identity & Business Model - **Brand**: Magic Home (`magichome.com`) - **Category & Public Price Band**: Smart Modular & Power-Comfort Sofa DTC | Public storefront modular & power-reclining configurations ($1,500-$3,500) - **Business Model (EN)**: Smart Modular & Power-Comfort Sofa DTC + 5 US Showrooms - **Business Model (ZH)**: 智能模块化与电动舒适沙发直营 DTC 独立站（配全美 5 家线下展厅） - **Core Positioning**: Smart Comfort for Flexible Living (`智享舒适，随心而居`): smart modular comfort furniture built on three pillars (`Built to change` true modular add/remove/rearrange pieces, `Comfort you choose` seat-by-seat power recline, zero gravity, heated seats, and wireless + USB-C charging on select series, and `Fits your life` transparent box/doorway dimensions and select washable covers), backed by 5 US showrooms. - **Self-Contained Package**: Every token file, offline webfont, bilingual runtime helper, Brand Book chapter, component preview, asset, and specimen referenced below lives inside this folder using portable relative paths. ## 2. Canonical Entrypoints (Read Order) 1. **Machine Contract**: `ai-replication-contract.json` (`schemaVersion: "4.0.0"`) 2. **Design Tokens & Offline Runtime**: - Canonical JSON: `tokens/tokens.json` - W3C DTCG 10-Group JSON: `tokens/tokens.dtcg.json` - Brand CSS Variables: `tokens/tokens.css` - 48-Variable Cross-Brand Semantic Bridge: `tokens/semantic-bridge.css` - Shopify OS 2.0 Theme Settings Bridge: `tokens/shopify-theme-tokens.css` - Multi-Platform Token Exports: `tokens/tailwind.preset.json`, `tokens/tokens.tailwind.config.js`, `tokens/tokens.style-dictionary.json`, `tokens/shopify-settings_schema.json`, `tokens/figma-variables.json` - Offline Brand Webfonts & CJK Mono Stack: `tokens/brand-fonts.css` (`assets/Fonts/*.woff2`) - Bilingual Switcher Helper: `tokens/ds-i18n.js` 3. **Bilingual Brand Book**: - Chinese (`zh-Hans-US` governance): `docs/` - English (`en-US` governance): `docs/en/` 4. **Brand Evidence & Dossier**: - Manifest: `brand-archive/manifest.json` - Official Materials: `brand-archive/official-materials.md` and `brand-archive/en/official-materials.md` - Strategic Dossier: `brand-archive/third-party-dossier.md` and `brand-archive/en/third-party-dossier.md` 5. **Interactive Viewers & Candidates**: - Standalone Bilingual System Viewer: `index.html` (`?lang=en` / `?lang=zh`) - Baseline V1 Structural Specimen: `candidates/baseline_v1/specimen.html` - Flagship V2 Interactive Specimen: `candidates/optimized_v2/specimen.html` ## 3. Locked Visual DNA | Property | Locked Value | | --- | --- | | Primary Page Ground | `#FFFFFF` | | Card / Elevated Surface | `#FFFFFF` | | Alternating Band / Footer | `#EFEFEB` / `#FFFFFF` | | Primary / Secondary Ink | `#171616` / `#525050` | | Primary Action Fill / Text | `#3F1A03` / `#FFFFFF` | | Button / Card Corner Radius | `0px` / `0px` | | Display / Body / CJK Fonts | `Montserrat` / `Archivo` / `Noto Sans SC` | | Elevation & Shadow Rule | Strict zero drop-shadow policy (`box-shadow: none`); pure `#FFFFFF` page canvas and `#FFFFFF` footer, `#EFEFEB` small neutral control fill only (never `#F6F1EA` section bands), `#171616` primary ink, `#525050` secondary ink, and `#353534` control borders. | ## 4. Commercial & Legal Guardrails - **primaryCta**: PDP and configurator summary primary CTA is locked to `Add to cart` or `Add to cart · $2,080` / `加入购物车` or `加入购物车 · $2,080` (`MGH-CORE-10`, sentence case, `0px` square, `#3F1A03` espresso fill). Configurator entry CTA is locked to `Build yours` / `开始搭配` (`Shop Modular Sectionals` on hero; `Finish checkout` on English checkout). Never write `Configure Yours`, `Add to Bag`, or all-caps CTAs. - **shipping**: Free standard shipping to the U.S. and U.S. territories. Processed in 2 business days; arrives in 7-15 business days via FedEx multi-box parcel or LTL freight for oversized/power pieces (custom & pre-order: 28-70 business days). Multi-box orders may arrive on different days. - **returns**: 30-day returns from delivery on unused, uninstalled items in original packaging (email first for RA authorization; buyer pays return shipping for non-quality returns; custom and clearance items final sale). One-time 7-day price match. - **warranty**: 2-year limited warranty covering structural and manufacturing defects (zero steel-latch warranty claims). - **swatchesAndShowrooms**: Up to 5 free fabric swatches mailed to U.S. addresses; 5 U.S. showrooms in Los Angeles, Houston, New Jersey, Atlanta, and Miami. ## 5. Non-Negotiable Redlines - Brand tagline is locked verbatim to `Smart Comfort for Flexible Living` (Chinese subtitle `智享舒适，随心而居`); never revert to V1 slogan `Furniture That Moves With Your Life`. - Page canvas AND site footer must stay pure `#FFFFFF`; `#EFEFEB` is restricted to small neutral control fills (never `#F6F1EA` section bands); primary ink is `#171616`, secondary ink `#525050`, control border `#353534`, and all corners `0px` with zero shadows. - Primary purchase CTA is `Add to cart` / `加入购物车` (`#3F1A03` espresso) and configurator entry CTA is `Build yours` / `开始搭配` (sentence case); `#E1441D` red is reserved for the 2x3 modular mark and active indicator. - Never fabricate `concealed steel latches`, `Steel-Latch Warranty`, `CubeGrid`, `OEKO-TEX`, or `2-5 business days` shipping; distinguish `Modular Sectionals` from fixed `Reclining Sectionals` (never call fixed power recliners modular). - State `2` business days processing + `7-15` business days delivery (`28-70` business days custom/pre-order), up to `5` free swatches, `30-day` unused original-packaging returns (RA required, buyer pays return shipping), `2-year` limited warranty, and `5` US showrooms. - Distinguish Overall Depth (`38"`) from Inside Seat Depth (`25"`); keep cart and checkout in English per `03-copy-zh.md`. ## 6. Nine Canonical Page Blueprints | Blueprint ID | Primary Specimen (`en-US`) | Localized Specimen (`zh-Hans-US`) | Implementation Notes | | --- | --- | --- | --- | | `PageHome` | `snapshot/cards/Page01Home.html` | `snapshot/cards/ChineseKeyPages.html` | Pure `#FFFFFF` homepage (`Page01Home`, `Page01HomeBlackFriday`, and `ChineseKeyPages` `zh-Hans-US` edition) leading with `Smart Comfort for Flexible Living`. | | `PageCategoryHub` | `snapshot/cards/Page02Collection.html` | `snapshot/cards/ChineseKeyPages.html` | Collection hub spanning `Modular Sectionals`, `Reclining Sectionals`, and `Customization`. | | `PagePLPWithFacetDrawer` | `snapshot/cards/Page02Collection.html` | `snapshot/cards/ChineseKeyPages.html` | 0px `#353534`-bordered product grid displaying piece count, box count, power options, swatches, and USD price. | | `PagePDPFullLongScroll` | `snapshot/cards/Page03Product.html` | `snapshot/cards/ChineseKeyPages.html` | Flagship `Cero Modular Sectional, 6-Piece` PDP (`Page03Product` and localized `ChineseKeyPages`) with `Add to cart` and `Build yours`. | | `CartDrawer` | `snapshot/cards/Page12Cart.html` | `snapshot/cards/AddedToCart.html` | English cart and checkout flow displaying box counts and split-day multi-box delivery notice. | | `PageTradeOrConsultation` | `snapshot/cards/Page04Customization.html` | `snapshot/cards/Page09Showrooms.html` | `Build yours` 2D modular & custom planner (`28-70` business days) plus 5 US showroom booking (`LA / Houston / NJ / Atlanta / Miami`). | | `PageEditorialLookbook` | `snapshot/cards/Page11HomeIdeas.html` | `snapshot/cards/Page05Sale.html` | Home Ideas editorial hub (`Page11HomeIdeas`) demonstrating real room layouts and doorway clearance. | | `PageCraftsmanshipStory` | `snapshot/cards/Page10About.html` | `snapshot/cards/ChocolateGrid.html` | Explains `Built to change`, `Comfort you choose`, and `Fits your life` (`Page10About` & `ChocolateGrid`). | | `PageFreeSwatchesStudio` | `snapshot/cards/SwatchPicker.html` | `snapshot/cards/Page06Support.html` | Up to 5 free fabric swatches across Chenille, Corduroy, and Boucle (`SwatchPicker`, `SwatchCard`, `Page06Support`). | ## 7. Bilingual Copy & Typography Checklist (`en-US` & `zh-Hans-US`) - **Preferred `en-US` Terms**: `Smart Comfort for Flexible Living`, `Add to cart`, `Build yours`, `Built to change`, `Comfort you choose`, `Fits your life`, `Cero Modular Sectional, 6-Piece` - **Prohibited `en-US` Terms**: `Verified US Buyers`, `Configure Yours`, `Add to Bag`, `Furniture That Moves With Your Life`, `concealed steel latches`, `Steel-Latch Warranty`, `OEKO-TEX certified`, `30-Day Trial` - **Preferred `zh-Hans-US` Terms**: `智享舒适，随心而居`, `加入购物车`, `开始搭配`, `随你变`, `舒适按需选`, `放得下，住得开`, `全美 5 家线下展厅` - **Prohibited `zh-Hans-US` Terms**: `美元`, `美刀`, `包邮`, `亲`, `定制模块组合`, `隐藏钢扣`, `钢扣质保`, `圆角胶囊按钮`, `30 天试用`, `10 年质保` - **Imperial Furniture Units**: Always format inches with `"` and feet with `'` (for example `96"W x 38"D x 30"H` and `12' x 14'` room size). Always state Overall Depth separately from Inside Seat Depth (`22"` to `28"`). --- ## Machine Replication Contract (`ai-replication-contract.json` Core) ```json { "schemaVersion": "4.0.0", "brand": { "key": "magic", "folder": "13_Magic_Home", "name": "Magic Home", "domain": "magichome.com", "siteUrl": "https://magichome.com", "isOwnBrand": true, "bmTrack": "BM0", "category": "Smart Modular & Power-Comfort Sofa DTC", "categoryZh": "智能模块化与电动舒适沙发直营 DTC", "publicPriceAnchor": "Public storefront modular & power-reclining configurations ($1,500-$3,500)" }, "businessModel": { "en": "Smart Modular & Power-Comfort Sofa DTC + 5 US Showrooms", "zh": "智能模块化与电动舒适沙发直营 DTC 独立站（配全美 5 家线下展厅）", "positioning": "Smart Comfort for Flexible Living (`智享舒适，随心而居`): smart modular comfort furniture built on three pillars (`Built to change` true modular add/remove/rearrange pieces, `Comfort you choose` seat-by-seat power recline, zero gravity, heated seats, and wireless + USB-C charging on select series, and `Fits your life` transparent box/doorway dimensions and select washable covers), backed by 5 US showrooms." }, "visualDna": { "bgCanvas": "#FFFFFF", "bgSurface": "#FFFFFF", "bgBand": "#EFEFEB", "bgFooter": "#FFFFFF", "inkPrimary": "#171616", "inkSecondary": "#525050", "inkMuted": "#767474", "borderSubtle": "#353534", "actionPrimaryBg": "#3F1A03", "actionPrimaryFg": "#FFFFFF", "accentBrandMark": "#E1441D", "radiusButton": "0px", "radiusCard": "0px", "radiusInput": "0px", "shadowPolicy": "Strict zero drop-shadow policy (`box-shadow: none`); pure `#FFFFFF` page canvas and `#FFFFFF` footer, `#EFEFEB` small neutral control fill only (never `#F6F1EA` section bands), `#171616` primary ink, `#525050` secondary ink, and `#353534` control borders.", "fontDisplay": "Montserrat", "fontBody": "Archivo", "fontCjk": "Noto Sans SC" }, "commercialPolicies": { "primaryCta": "PDP and configurator summary primary CTA is locked to `Add to cart` or `Add to cart · $2,080` / `加入购物车` or `加入购物车 · $2,080` (`MGH-CORE-10`, sentence case, `0px` square, `#3F1A03` espresso fill). Configurator entry CTA is locked to `Build yours` / `开始搭配` (`Shop Modular Sectionals` on hero; `Finish checkout` on English checkout). Never write `Configure Yours`, `Add to Bag`, or all-caps CTAs.", "shipping": "Free standard shipping to the U.S. and U.S. territories. Processed in 2 business days; arrives in 7-15 business days via FedEx multi-box parcel or LTL freight for oversized/power pieces (custom & pre-order: 28-70 business days). Multi-box orders may arrive on different days.", "returns": "30-day returns from delivery on unused, uninstalled items in original packaging (email first for RA authorization; buyer pays return shipping for non-quality returns; custom and clearance items final sale). One-time 7-day price match.", "warranty": "2-year limited warranty covering structural and manufacturing defects (zero steel-latch warranty claims).", "swatchesAndShowrooms": "Up to 5 free fabric swatches mailed to U.S. addresses; 5 U.S. showrooms in Los Angeles, Houston, New Jersey, Atlanta, and Miami." }, "nonNegotiableRedlines": [ "Brand tagline is locked verbatim to `Smart Comfort for Flexible Living` (Chinese subtitle `智享舒适，随心而居`); never revert to V1 slogan `Furniture That Moves With Your Life`.", "Page canvas AND site footer must stay pure `#FFFFFF`; `#EFEFEB` is restricted to small neutral control fills (never `#F6F1EA` section bands); primary ink is `#171616`, secondary ink `#525050`, control border `#353534`, and all corners `0px` with zero shadows.", "Primary purchase CTA is `Add to cart` / `加入购物车` (`#3F1A03` espresso) and configurator entry CTA is `Build yours` / `开始搭配` (sentence case); `#E1441D` red is reserved for the 2x3 modular mark and active indicator.", "Never fabricate `concealed steel latches`, `Steel-Latch Warranty`, `CubeGrid`, `OEKO-TEX`, or `2-5 business days` shipping; distinguish `Modular Sectionals` from fixed `Reclining Sectionals` (never call fixed power recliners modular).", "State `2` business days processing + `7-15` business days delivery (`28-70` business days custom/pre-order), up to `5` free swatches, `30-day` unused original-packaging returns (RA required, buyer pays return shipping), `2-year` limited warranty, and `5` US showrooms.", "Distinguish Overall Depth (`38\"`) from Inside Seat Depth (`25\"`); keep cart and checkout in English per `03-copy-zh.md`." ], "copyLexicon": { "preferredEn": [ "Smart Comfort for Flexible Living", "Add to cart", "Build yours", "Built to change", "Comfort you choose", "Fits your life", "Cero Modular Sectional, 6-Piece" ], "bannedEn": [ "Verified US Buyers", "Configure Yours", "Add to Bag", "Furniture That Moves With Your Life", "concealed steel latches", "Steel-Latch Warranty", "OEKO-TEX certified", "30-Day Trial" ], "preferredZh": [ "智享舒适，随心而居", "加入购物车", "开始搭配", "随你变", "舒适按需选", "放得下，住得开", "全美 5 家线下展厅" ], "bannedZh": [ "美元", "美刀", "包邮", "亲", "定制模块组合", "隐藏钢扣", "钢扣质保", "圆角胶囊按钮", "30 天试用", "10 年质保" ] }, "perceptualAndMotionPhysics": { "schemaRevision": "4.0.0", "colorSpace": "OKLCH (Bjorn Ottosson 2020 perceptual cylindrical space)", "oklchPalette": { "bgCanvas": { "hex": "#FFFFFF", "l": 1.0, "c": 0.0, "h": 0.0, "css": "oklch(1.0000 0.0000 0.00)", "isAchromatic": true }, "bgSurface": { "hex": "#FFFFFF", "l": 1.0, "c": 0.0, "h": 0.0, "css": "oklch(1.0000 0.0000 0.00)", "isAchromatic": true }, "bgSubtle": { "hex": "#EFEFEB", "l": 0.951, "c": 0.0053, "h": 106.5, "css": "oklch(0.9510 0.0053 106.50)", "isAchromatic": false }, "textPrimary": { "hex": "#171616", "l": 0.2013, "c": 0.0016, "h": 17.29, "css": "oklch(0.2013 0.0016 17.29)", "isAchromatic": true }, "textSecondary": { "hex": "#525050", "l": 0.4332, "c": 0.0026, "h": 17.26, "css": "oklch(0.4332 0.0026 17.26)", "isAchromatic": false }, "textMuted": { "hex": "#6E6E6E", "l": 0.5382, "c": 0.0, "h": 0.0, "css": "oklch(0.5382 0.0000 0.00)", "isAchromatic": true }, "borderSubtle": { "hex": "#353534", "l": 0.3286, "c": 0.0017, "h": 106.49, "css": "oklch(0.3286 0.0017 106.49)", "isAchromatic": true }, "ctaBg": { "hex": "#3F1A03", "l": 0.2683, "c": 0.0669, "h": 49.2, "css": "oklch(0.2683 0.0669 49.20)", "isAchromatic": false }, "ctaText": { "hex": "#FFFFFF", "l": 1.0, "c": 0.0, "h": 0.0, "css": "oklch(1.0000 0.0000 0.00)", "isAchromatic": true }, "accent": { "hex": "#E1441D", "l": 0.6096, "c": 0.1998, "h": 34.43, "css": "oklch(0.6096 0.1998 34.43)", "isAchromatic": false }, "footerBg": { "hex": "#FFFFFF", "l": 1.0, "c": 0.0, "h": 0.0, "css": "oklch(1.0000 0.0000 0.00)", "isAchromatic": true }, "footerText": { "hex": "#141414", "l": 0.1913, "c": 0.0, "h": 0.0, "css": "oklch(0.1913 0.0000 0.00)", "isAchromatic": true } }, "canvasToleranceGate": { "targetHex": "#FFFFFF", "targetOklch": "oklch(1.0000 0.0000 0.00)", "maxAbsDeltaL": 0.03, "maxAbsDeltaC": 0.02 }, "contrastMatrix": { "algorithm": "APCA-W3 (0.0.98G-4g) + WCAG 2.1 Relative Luminance", "pairs": { "bodyOnCanvas": { "role": "Editorial body & headings on primary canvas", "foregroundHex": "#171616", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.2013 0.0016 17.29)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 104.79, "apcaAbsLc": 104.79, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 75.0, "apcaPasses": true, "wcag21Ratio": 18.06 }, "bodyOnSurface": { "role": "Card & specification copy on secondary surface", "foregroundHex": "#171616", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.2013 0.0016 17.29)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 104.79, "apcaAbsLc": 104.79, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 75.0, "apcaPasses": true, "wcag21Ratio": 18.06 }, "secondaryOnCanvas": { "role": "Metadata & dimension captions on primary canvas", "foregroundHex": "#525050", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.4332 0.0026 17.26)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 87.78, "apcaAbsLc": 87.78, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 55.0, "apcaPasses": true, "wcag21Ratio": 8.01 }, "ctaLabelOnFill": { "role": "Primary CTA button label on solid CTA fill", "foregroundHex": "#FFFFFF", "backgroundHex": "#3F1A03", "foregroundOklch": "oklch(1.0000 0.0000 0.00)", "backgroundOklch": "oklch(0.2683 0.0669 49.20)", "apcaLc": -104.79, "apcaAbsLc": 104.79, "apcaPolarity": "WoB (light-on-dark)", "apcaTargetAbsLc": 60.0, "apcaPasses": true, "wcag21Ratio": 15.44 }, "footerLabelOnGround": { "role": "Footer navigation copy on footer ground", "foregroundHex": "#141414", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.1913 0.0000 0.00)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 105.06, "apcaAbsLc": 105.06, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 60.0, "apcaPasses": true, "wcag21Ratio": 18.42 } }, "cvdDistinguishability": { "deuteranopiaCtaPair": { "ctaBgSimHex": "#2E2802", "ctaFgSimHex": "#FFFFFF", "apcaAbsLcUnderDeuteranopia": 104.39, "ctaVsCanvasDeltaEOk": 0.7269 }, "protanopiaCtaPair": { "ctaBgSimHex": "#251F01", "ctaFgSimHex": "#FFFFFF", "apcaAbsLcUnderProtanopia": 105.83, "ctaVsCanvasDeltaEOk": 0.7624 } } }, "typographyOpticalMetrics": { "bundledWoff2Count": 25, "bundledWoff2Files": [ { "file": "assets/Fonts/archivo-latin-300-normal.woff2", "bytes": 14444, "sha256Prefix": "24a97635cc12" }, { "file": "assets/Fonts/archivo-latin-400-normal.woff2", "bytes": 14700, "sha256Prefix": "07f9160163da" }, { "file": "assets/Fonts/archivo-latin-500-normal.woff2", "bytes": 14600, "sha256Prefix": "ab74eca5ad11" }, { "file": "assets/Fonts/archivo-latin-600-normal.woff2", "bytes": 34928, "sha256Prefix": "8f704806dbed" }, { "file": "assets/Fonts/archivo-latin-700-normal.woff2", "bytes": 34928, "sha256Prefix": "8f704806dbed" }, { "file": "assets/Fonts/archivo-latin-ext-300-normal.woff2", "bytes": 32608, "sha256Prefix": "ff4f17d21930" }, { "file": "assets/Fonts/archivo-latin-ext-400-normal.woff2", "bytes": 32608, "sha256Prefix": "ff4f17d21930" }, { "file": "assets/Fonts/archivo-latin-ext-500-normal.woff2", "bytes": 32608, "sha256Prefix": "ff4f17d21930" }, { "file": "assets/Fonts/archivo-latin-ext-600-normal.woff2", "bytes": 32608, "sha256Prefix": "ff4f17d21930" }, { "file": "assets/Fonts/archivo-latin-ext-700-normal.woff2", "bytes": 32608, "sha256Prefix": "ff4f17d21930" }, { "file": "assets/Fonts/jetbrains-mono-latin-400-normal.woff2", "bytes": 31432, "sha256Prefix": "83c005d49d8a" }, { "file": "assets/Fonts/jetbrains-mono-latin-500-normal.woff2", "bytes": 31432, "sha256Prefix": "83c005d49d8a" }, { "file": "assets/Fonts/jetbrains-mono-latin-600-normal.woff2", "bytes": 31432, "sha256Prefix": "83c005d49d8a" }, { "file": "assets/Fonts/jetbrains-mono-latin-ext-400-normal.woff2", "bytes": 11624, "sha256Prefix": "db5ff4db83e5" }, { "file": "assets/Fonts/jetbrains-mono-latin-ext-500-normal.woff2", "bytes": 11624, "sha256Prefix": "db5ff4db83e5" }, { "file": "assets/Fonts/jetbrains-mono-latin-ext-600-normal.woff2", "bytes": 11624, "sha256Prefix": "db5ff4db83e5" }, { "file": "assets/Fonts/montserrat-latin-500-normal.woff2", "bytes": 37956, "sha256Prefix": "06b16db7a969" }, { "file": "assets/Fonts/montserrat-latin-600-normal.woff2", "bytes": 37956, "sha256Prefix": "06b16db7a969" }, { "file": "assets/Fonts/montserrat-latin-700-normal.woff2", "bytes": 37956, "sha256Prefix": "06b16db7a969" }, { "file": "assets/Fonts/montserrat-latin-800-normal.woff2", "bytes": 37956, "sha256Prefix": "06b16db7a969" }, { "file": "assets/Fonts/montserrat-latin-ext-500-normal.woff2", "bytes": 70688, "sha256Prefix": "54d9a78b7ff6" }, { "file": "assets/Fonts/montserrat-latin-ext-600-normal.woff2", "bytes": 70688, "sha256Prefix": "54d9a78b7ff6" }, { "file": "assets/Fonts/montserrat-latin-ext-700-normal.woff2", "bytes": 70688, "sha256Prefix": "54d9a78b7ff6" }, { "file": "assets/Fonts/montserrat-latin-ext-800-normal.woff2", "bytes": 70688, "sha256Prefix": "54d9a78b7ff6" }, { "file": "assets/Fonts/montserrat-latin.woff2", "bytes": 37956, "sha256Prefix": "06b16db7a969" } ], "display": { "fileName": "montserrat-latin-500-normal.woff2", "byteSize": 37956, "sha256Prefix": "06b16db7a969", "family": "Montserrat Thin", "unitsPerEm": 1000, "sxHeight": 517, "sCapHeight": 700, "sTypoAscender": 968, "sTypoDescender": -251, "xHeightRatio": 0.517, "capHeightRatio": 0.7, "cssFontSizeAdjust": "ex-height 0.5170", "ascentOverridePct": "96.80%", "descentOverridePct": "25.10%", "lineGapOverridePct": "0.00%", "extractionMethod": "live_woff2_binary_tables", "configuredFamily": "Montserrat" }, "sans": { "fileName": "archivo-latin-300-normal.woff2", "byteSize": 14444, "sha256Prefix": "24a97635cc12", "family": "Archivo SemiBold Light", "unitsPerEm": 1000, "sxHeight": 526, "sCapHeight": 686, "sTypoAscender": 878, "sTypoDescender": -210, "xHeightRatio": 0.526, "capHeightRatio": 0.686, "cssFontSizeAdjust": "ex-height 0.5260", "ascentOverridePct": "87.80%", "descentOverridePct": "21.00%", "lineGapOverridePct": "0.00%", "extractionMethod": "live_woff2_binary_tables", "configuredFamily": "Archivo" }, "mono": { "fileName": "jetbrains-mono-latin-400-normal.woff2", "byteSize": 31432, "sha256Prefix": "83c005d49d8a", "family": "JetBrains Mono", "unitsPerEm": 1000, "sxHeight": 550, "sCapHeight": 730, "sTypoAscender": 1020, "sTypoDescender": -300, "xHeightRatio": 0.55, "capHeightRatio": 0.73, "cssFontSizeAdjust": "ex-height 0.5500", "ascentOverridePct": "102.00%", "descentOverridePct": "30.00%", "lineGapOverridePct": "0.00%", "extractionMethod": "live_woff2_binary_tables", "configuredFamily": "JetBrains Mono" }, "clsTargetMax": 0.01 }, "motionPhysics": { "archetype": "architectural_precision_glide", "archetypeLabelZh": "建筑精密导轨动效（干脆制动、零拖泥带水）", "archetypeLabelEn": "Architectural Precision Glide (Crisp Mechanical Settle, Zero Overshoot)", "easePrimary": "cubic-bezier(0.16, 1, 0.3, 1)", "easeDrawer": "cubic-bezier(0.2, 0.9, 0.25, 1)", "easeExit": "cubic-bezier(0.35, 0, 0.9, 1)", "durationMicroMs": 140, "durationDrawerMs": 280, "durationEditorialRevealMs": 460, "springOvershootAllowed": false, "reducedMotionPolicy": "Disable transform slides and enforce instant state border/opacity transitions under `@media (prefers-reduced-motion: reduce)`." } }, "artDirectionAndOpticalSpec": { "archetype": "tilt_shift_architectural_neutral", "archetypeLabelZh": "移轴级垂直建筑透视与零色偏中性光场", "archetypeLabelEn": "Tilt-Shift Vertical Perspective & Zero-Cast Neutral Daylight", "lensFocalLengthMm": "35mm-50mm tilt-shift architectural rectilinear lens", "daylightKelvinRange": "5200K-5600K calibrated museum / studio neutral daylight", "lightingContrastRatio": "2.5:1 crisp architectural modeling preserving neutral white/gray ground truth", "cameraElevationCm": "95cm-115cm orthogonal elevation or 2-point gallery angle; zero converging verticals", "shadowDiscipline": "Crisp floor-contact shadow line only; UI cards enforce strict hairline borders rather than blurred shadows.", "macroTextureShareMin": "25% minimum close-up frames verifying seam tolerance, metal hardware, or upholstery weave", "brandOpticalGuardrail": "Pair crisp #FFFFFF studio silhouette packshots (0px sharp architectural borders, zero drop-shadow) with bright 5400K modular living room scenes.", "fiveShotPdpSequenceEn": [ "01 Architectural Room Hero", "02 Three-Quarter Distortion-Free Silhouette", "03 85mm Material Surface & Craft Detail Macro", "04 Human Scale & Entryway Clearance Elevation", "05 Structural Base & Protective Packaging Detail" ], "fiveShotPdpSequenceZh": [ "01 北美真实居住空间主景", "02 四分之三零畸变单品体量", "03 85mm 表面材质肌理与工艺细节微距", "04 人体尺度比例与入户通行净宽立面", "05 底部承重结构与包装防护细节" ], "threeKelvinLightingSimulator": [ { "kelvin": 6500, "id": "daylight_6500k", "labelEn": "6500K North Daylight", "labelZh": "6500K 朝北晴空自然光" }, { "kelvin": 4000, "id": "gallery_4000k", "labelEn": "4000K Gallery Neutral", "labelZh": "4000K 展厅中性白光" }, { "kelvin": 2700, "id": "evening_2700k", "labelEn": "2700K Warm Evening", "labelZh": "2700K 居家夜间暖光" } ], "positivePromptEn": "Architectural & product photography for Magic Home (magichome.com), canvas ground #FFFFFF (oklch(1.0000 0.0000 0.00)), shot on 35mm-50mm tilt-shift architectural rectilinear lens, 5200K-5600K calibrated museum / studio neutral daylight, 2.5:1 crisp architectural modeling preserving neutral white/gray ground truth, 95cm-115cm orthogonal elevation or 2-point gallery angle; zero converging verticals, authentic matte surface texture, zero CGI plastic sheen, zero wide-angle edge distortion. Pair crisp #FFFFFF studio silhouette packshots (0px sharp architectural borders, zero drop-shadow) with bright 5400K modular living room scenes.", "positivePromptZh": "Magic Home（magichome.com）空间与单品光学规范：主画布基准色 #FFFFFF（oklch(1.0000 0.0000 0.00)），采用 35mm-50mm tilt-shift architectural rectilinear lens 焦段，5200K-5600K calibrated museum / studio neutral daylight 照明色温，2.5:1 crisp architectural modeling preserving neutral white/gray ground truth 光比与 95cm-115cm orthogonal elevation or 2-point gallery angle; zero converging verticals 机位高度；保留哑光天然材质肌理，严禁塑料反光感、高饱和促销滤镜与广角边缘拉伸。" } } ``` --- ## Production CSS Custom Properties (`tokens/tokens.css`) ```css /* Magic Home — generated from tokens.json */ @font-face { font-family: "Montserrat"; src: url("../snapshot/fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../snapshot/fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root, [data-theme="ink"] { --black: #000000; --white: #ffffff; --primary: #171616; --red: #e1441d; --brown: #3f1a03; --cream: #f6f1ea; --sand: #ebe1d5; --clay: #ddcdbb; --background-1: #ffffff; --background-2: #efefeb; --background-3: #d8d7d7; --background-4: #c2c1c1; --text-1: #171616; --text-2: #525050; --text-3: #7f7d7d; --text-white: #ffffff; --stroke-1: rgba(53, 53, 52, 0.2); --border-1: #353534; --surface-page: var(--background-1); --surface-card: var(--background-1); --surface-soft: var(--background-2); --surface-muted: var(--background-2); --surface-inverse: var(--brown); --surface-accent: var(--red); --text-body: var(--text-1); --text-secondary: var(--text-2); --text-disabled: var(--text-3); --text-on-inverse: var(--text-white); --text-on-inverse-secondary: var(--sand); --text-on-accent: var(--black); --action-primary: var(--brown); --action-primary-text: var(--white); --action-primary-hover: var(--primary); --action-primary-hover-text: var(--white); --action-primary-pressed: var(--black); --action-primary-inverse: var(--white); --action-primary-inverse-text: var(--brown); --action-primary-inverse-hover: var(--sand); --action-secondary-border: var(--border-1); --action-secondary-text: var(--text-1); --action-secondary-hover: var(--sand); --action-disabled: var(--background-3); --control-border: var(--border-1); --control-border-active: var(--red); --selected-border: var(--primary); --selected-mark: var(--red); --divider: var(--stroke-1); --error-border: var(--red); --error-text: var(--text-1); --price-text: var(--text-1); --price-sale-large: var(--red); --price-compare: var(--text-2); --badge-accent-bg: var(--red); --badge-accent-text: var(--black); --badge-ink-bg: var(--brown); --badge-ink-text: var(--white); --logo-grid: var(--red); --chocolate-block: var(--brown); --chocolate-face: rgba(255, 255, 255, 0.1); --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #171616; --focus-ring-inverse: 0 0 0 2px #171616, 0 0 0 4px #ffffff; } :root { --space-4: 4px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; --module-gap: 8px; --page-gutter: 48px; --page-gutter-t: 32px; --page-gutter-m: 16px; --container-max: 1280px; --radius-0: 0px; --border-hairline: 1px; --border-control: 1px; --border-selected: 2px; --control-lg: 48px; --control-md: 40px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-zh-heading: "Montserrat", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; --font-zh-body: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; } .t-40-medium { font-family: var(--font-heading); font-size: 40px; line-height: 1.219; font-weight: 600; letter-spacing: 0px; } .t-28-medium { font-family: var(--font-heading); font-size: 28px; line-height: 1.219; font-weight: 600; letter-spacing: 0px; } .t-24-medium { font-family: var(--font-heading); font-size: 24px; line-height: 1.219; font-weight: 600; letter-spacing: 0px; } .t-20-medium { font-family: var(--font-heading); font-size: 20px; line-height: 1.219; font-weight: 600; letter-spacing: 0px; } .t-18-medium { font-family: var(--font-heading); font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: 0px; } .t-16-medium { font-family: var(--font-heading); font-size: 16px; line-height: 1.219; font-weight: 500; letter-spacing: 0px; } .t-18-regular { font-family: var(--font-body); font-size: 18px; line-height: 1.4; font-weight: 400; letter-spacing: 0px; } .t-16-regular { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; letter-spacing: 0px; } .t-14-medium { font-family: var(--font-body); font-size: 14px; line-height: 1.088; font-weight: 500; letter-spacing: 0px; } .t-14-regular { font-family: var(--font-body); font-size: 14px; line-height: 1.6; font-weight: 400; letter-spacing: 0px; } .t-12-medium { font-family: var(--font-body); font-size: 12px; line-height: 1.088; font-weight: 500; letter-spacing: 0px; } .t-12-regular { font-family: var(--font-body); font-size: 12px; line-height: 1.088; font-weight: 400; letter-spacing: 0px; } .zh-40-medium { font-family: var(--font-zh-heading); font-size: 40px; line-height: 1.3; font-weight: 600; letter-spacing: 0px; } .zh-28-medium { font-family: var(--font-zh-heading); font-size: 28px; line-height: 1.35; font-weight: 600; letter-spacing: 0px; } .zh-24-medium { font-family: var(--font-zh-heading); font-size: 24px; line-height: 1.4; font-weight: 600; letter-spacing: 0px; } .zh-20-medium { font-family: var(--font-zh-heading); font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: 0px; } .zh-18-medium { font-family: var(--font-zh-heading); font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: 0px; } .zh-16-medium { font-family: var(--font-zh-heading); font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: 0px; } .zh-18-regular { font-family: var(--font-zh-body); font-size: 18px; line-height: 1.75; font-weight: 400; letter-spacing: 0px; } .zh-16-regular { font-family: var(--font-zh-body); font-size: 16px; line-height: 1.75; font-weight: 400; letter-spacing: 0px; } .zh-14-medium { font-family: var(--font-zh-body); font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: 0px; } .zh-14-regular { font-family: var(--font-zh-body); font-size: 14px; line-height: 1.7; font-weight: 400; letter-spacing: 0px; } .zh-12-medium { font-family: var(--font-zh-body); font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: 0px; } .zh-12-regular { font-family: var(--font-zh-body); font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: 0px; } ``` --- ## 48-Variable Semantic Bridge (`tokens/semantic-bridge.css`) ```css /* 13_Magic_Home - Canonical 48-Variable Semantic Bridge (Stage R9 Contract v3.0.0) */ /* Maps locked brand primitives onto the 4 Cross-Brand Design Fusion & AI Replication axes. */ :root { /* Axis 1: Space, Canvas & Color Proportion (25 vars) */ --ds-sem-bg-canvas: #FFFFFF; --ds-sem-bg-surface: #FFFFFF; --ds-sem-bg-elevated: #FFFFFF; --ds-sem-bg-band: #EFEFEB; --ds-sem-bg-footer: #FFFFFF; --ds-sem-ink-primary: #171616; --ds-sem-ink-secondary: #525050; --ds-sem-ink-muted: #7F7D7D; --ds-sem-ink-on-footer: #171616; --ds-sem-border-hairline: rgba(53, 53, 52, 0.2); --ds-sem-border-strong: #353534; --ds-sem-action-primary-bg: #3F1A03; --ds-sem-action-primary-fg: #FFFFFF; --ds-sem-action-secondary-bg: #FFFFFF; --ds-sem-action-secondary-fg: #171616; --ds-sem-accent-brand: #E1441D; --ds-sem-status-offer: #E1441D; --ds-sem-status-error: #E1441D; --ds-sem-announcement-bg: #171616; --ds-sem-announcement-fg: #FFFFFF; --ds-sem-section-pad-y: 96px; --ds-sem-section-pad-x: 48px; --ds-sem-container-max: 1280px; --ds-sem-grid-gutter: 24px; --ds-sem-whitespace-ratio: 0.68; /* Axis 2: Typography & Editorial Scale (18 vars) */ --ds-sem-font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --ds-sem-font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif; --ds-sem-font-mono: "JetBrains Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --ds-sem-font-cjk: "Archivo", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif; --ds-sem-display-size-desktop: 40px; --ds-sem-display-size-mobile: 28px; --ds-sem-h2-size: 28px; --ds-sem-pdp-title-size: 24px; --ds-sem-body-size: 16px; --ds-sem-kicker-size: 14px; --ds-sem-heading-weight: 600; --ds-sem-body-weight: 400; --ds-sem-cta-weight: 500; --ds-sem-heading-tracking: 0px; --ds-sem-cta-tracking: 0px; --ds-sem-heading-transform: none; --ds-sem-cta-transform: none; --ds-sem-measure-prose: 64ch; /* Axis 3: Corner Geometry & Control Elevation (7 vars) */ --ds-sem-radius-btn: 0px; --ds-sem-radius-card: 0px; --ds-sem-radius-input: 0px; --ds-sem-btn-height: 48px; --ds-sem-header-height: 68px; --ds-sem-card-shadow: none; --ds-sem-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #171616; } /* === BEGIN DS-V4 PERCEPTUAL OKLCH, APCA, WOFF2 & MOTION PHYSICS === */ :root { /* Perceptual OKLCH Coordinates (Magic Home · Schema v4.0.0) */ --ds-oklch-canvas: oklch(1.0000 0.0000 0.00); --ds-oklch-surface: oklch(1.0000 0.0000 0.00); --ds-oklch-subtle: oklch(0.9510 0.0053 106.50); --ds-oklch-ink: oklch(0.2013 0.0016 17.29); --ds-oklch-ink-secondary: oklch(0.4332 0.0026 17.26); --ds-oklch-border: oklch(0.3286 0.0017 106.49); --ds-oklch-cta-bg: oklch(0.2683 0.0669 49.20); --ds-oklch-cta-ink: oklch(1.0000 0.0000 0.00); --ds-oklch-accent: oklch(0.6096 0.1998 34.43); --ds-oklch-footer-bg: oklch(1.0000 0.0000 0.00); --ds-oklch-footer-ink: oklch(0.1913 0.0000 0.00); /* APCA-W3 (0.0.98G-4g) Perceptual Contrast Readouts */ --ds-apca-body-on-canvas-lc: 104.79; --ds-apca-body-on-surface-lc: 104.79; --ds-apca-cta-label-lc: -104.79; --ds-apca-footer-label-lc: 105.06; /* WOFF2 Binary OS/2 Optical x-height Calibration */ --ds-font-display-x-ratio: 0.5170; --ds-font-sans-x-ratio: 0.5260; --ds-font-mono-x-ratio: 0.5500; --ds-font-size-adjust-display: ex-height 0.5170; --ds-font-size-adjust-sans: ex-height 0.5260; /* Physical Motion & Photographic Optical Tokens */ --ds-motion-ease-primary: cubic-bezier(0.16, 1, 0.3, 1); --ds-motion-ease-drawer: cubic-bezier(0.2, 0.9, 0.25, 1); --ds-motion-ease-exit: cubic-bezier(0.35, 0, 0.9, 1); --ds-motion-dur-micro: 140ms; --ds-motion-dur-drawer: 280ms; --ds-motion-dur-reveal: 460ms; --ds-optics-kelvin-daylight: 6500K; --ds-optics-kelvin-gallery: 4000K; --ds-optics-kelvin-evening: 2700K; --ds-optics-archetype: "tilt_shift_architectural_neutral"; } @media (prefers-reduced-motion: reduce) { :root { --ds-motion-dur-micro: 0ms; --ds-motion-dur-drawer: 100ms; --ds-motion-dur-reveal: 120ms; } } /* === END DS-V4 PERCEPTUAL OKLCH, APCA, WOFF2 & MOTION PHYSICS === */ ``` --- ## Bundled Reference: `docs/04-visual-identity.md` # 04 视觉识别 Logo、颜色、文字、网格、超级符号、图标和交互状态。数值以 tokens.json 为准。 ## Logo | 底色 | 用哪个文件 | |---|---| | 白、中性浅灰 | `magic-home-logo-primary.svg`（近黑词标 + 红色网格） | | 深棕面 | `magic-home-logo-reversed.svg`（白词标 + 红色网格） | | 红底 | `magic-home-logo-on-red.svg`（白词标 + 黑色网格） | | 社交头像 | `magic-home-social-mark.svg`（M + 网格） | | Favicon、App 图标、角标 | `magic-home-supersymbol.svg` | SVG 用于网页、印刷和包装，可任意放大；同名 PNG 用于不支持 SVG 的地方（邮件、部分平台后台）。 横版最小宽 120px，超级符号最小 24px；四周净空不小于网格一格的高度。不拉伸、不加投影、不改网格颜色、不放在照片或低对比底上，不用竖版。 ## 颜色 | 角色 | token | 值 | 用在哪 | |---|---|---|---| | 页面底 · 白 | `surface-page` | #FFFFFF | 和商品照片一起占画面大部分；分区用留白和细线 | | 卡片、输入框、画布 | `surface-card` | #FFFFFF | | | 小面积浅底 · 中性浅灰 | `surface-soft` | #EFEFEB | 悬停、小提示、公告栏；不做整段背景 | | 照片占位 · 中性浅灰 | `surface-muted` | #EFEFEB | | | 辅助色 · 暖米、沙、陶土 | `cream` / `sand` / `clay` | #F6F1EA / #EBE1D5 / #DDCDBB | 只做小面积点缀（选中、悬停、小标签）；不做页面底、整段背景或大色块；红色标记不放在陶土上 | | 深色面 · 深棕 | `surface-inverse` | #3F1A03 | 只做小面积重点（配置器汇总条、小标签）；不做页脚和大方格 | | CTA | `action-primary` | #3F1A03 | 主按钮，白字 | | 巧克力格 | `chocolate-block` / `chocolate-face` | #3F1A03 / 白 10% | 模块化图形 | | 红色 | `selected-mark` / `badge-accent-bg` / `price-sale-large` | #E1441D | 模块与状态标记，≤10% | | 正文 · 近黑 | `text-body` | #171616 | 近黑只做字、Logo 和细线 | | 辅助字 | `text-secondary` | #525050 | 说明、占位符、原价 | | 禁用字 | `text-disabled` | #7F7D7D | 只做禁用 | | 深棕面上的辅助字 | `text-on-inverse-secondary` | #EBE1D5 | | | 中性灰 | `background-2` / `-3` / `-4` | #EFEFEB / #D8D7D7 / #C2C1C1 | 面料色卡底、技术图、禁用填充：需要不偏色的地方 | | 控件边界 | `control-border` | #353534 | 1px | | 装饰线 | `divider` | #353534 · 20% | 1px | 报错：近黑文字 + 红色 circle-alert 图标 + 2px 红色边框。没有绿色和黄色；成功和提醒靠图标和文字说清楚。 ## 巧克力格 深棕 #3F1A03 像巧克力，一板巧克力本来就是一格一格的：一块就是沙发的一件，能掰下来，也能放回去。巧克力格是模块化的图形说法，和红色超级符号（Logo 里的 H）分工：超级符号是“我们是谁”，巧克力格是“沙发能怎么变”。 | 项 | 做法 | |---|---| | 一块 | 深棕实心方块（`chocolate-block`），直角；中间一块稍浅的凸面（`chocolate-face`，四边内缩 14%） | | 一板 | 块与块之间 8px 缝；排法就是沙发的拼法：一字 3 块、L 形 5 块、U 形 7 块 | | 掰开 | 一块离开原位三个缝宽（24px），表示加一件或拿走一件；一个画面只掰一块 | | 放在哪 | 白或中性浅灰底上；不放在深棕面和照片上 | | 配什么字 | Add a seat. Take it away. · Same sofa. Three layouts. · 加一块，拿一块，像掰巧克力一样。 | | 用在哪 | 首页“三种拼法”、空状态、社媒方图、随箱卡片正面、展厅标识、配置器入口 | | 不做 | 圆角、高光渐变、投影、红色巧克力、把块画成真的巧克力或加 logo 压印 | ## 用色配对 文字和底色只这样配。数值由 ColorPairs 卡按当前 token 实时计算。 **可以这样配** | 前景 | 背景 | 用途 | 对比度 | 用在哪 | |---|---|---|---|---| | `text-body` | `surface-page` | 正文 | 18.06 | 正文、标题（白底） | | `text-body` | `surface-card` | 正文 | 18.06 | 卡片、输入框里的字 | | `text-body` | `surface-soft` | 正文 | 15.67 | 浅灰小填充、公告栏里的字 | | `text-body` | `surface-muted` | 正文 | 15.67 | 照片占位上的字 | | `text-body` | `background-4` | 正文 | 10.06 | Background/4 上的字 | | `text-secondary` | `surface-page` | 正文 | 8.01 | 辅助说明、占位符 | | `text-secondary` | `surface-card` | 正文 | 8.01 | 辅助说明、划线原价 | | `text-secondary` | `surface-soft` | 正文 | 6.95 | 浅灰小填充里的辅助字 | | `text-secondary` | `surface-muted` | 正文 | 6.95 | 照片占位上的说明 | | `text-3` | `surface-card` | 24px 以上 | 4.09 | Text/3 只在 24px 以上 | | `red` | `surface-card` | 24px 以上 | 4.16 | 红色大字：24px 以上促销价 | | `red` | `surface-page` | 24px 以上 | 4.16 | 红色大字在页面底上 | | `text-white` | `red` | 24px 以上 | 4.16 | 红底白字只在 24px 以上（如 Logo 红底版的大标题） | | `text-on-accent` | `surface-accent` | 正文 | 5.05 | 红底上的字、徽章 | | `action-primary-text` | `action-primary` | 正文 | 15.44 | 主按钮（深棕底白字） | | `action-primary-inverse-text` | `action-primary-inverse` | 正文 | 15.44 | 深棕面上的主按钮（白底深棕字） | | `action-primary-inverse-text` | `action-primary-inverse-hover` | 正文 | 11.95 | 深棕面上的主按钮悬停（沙色小面积） | | `action-primary` | `surface-page` | 图形、边框 | 15.44 | 深棕按钮在白底上 | | `action-primary` | `surface-soft` | 图形、边框 | 13.39 | 深棕按钮在浅灰小填充上 | | `action-primary-hover-text` | `action-primary-hover` | 正文 | 18.06 | 主按钮悬停 | | `white` | `action-primary-pressed` | 正文 | 21.0 | 主按钮按下 | | `text-body` | `action-secondary-hover` | 正文 | 13.99 | 次按钮悬停（沙色小面积） | | `badge-ink-text` | `badge-ink-bg` | 正文 | 15.44 | 深棕徽章 | | `text-on-inverse` | `surface-inverse` | 正文 | 15.44 | 深棕面上的字 | | `text-on-inverse-secondary` | `surface-inverse` | 正文 | 11.95 | 深棕面上的辅助字（沙色） | | `control-border` | `surface-card` | 图形、边框 | 12.28 | 输入框、复选框、色块边界 | | `control-border` | `surface-page` | 图形、边框 | 12.28 | 页面底上的控件边界 | | `control-border-active` | `surface-card` | 图形、边框 | 4.16 | 聚焦或报错的输入框边框（红 2px） | | `selected-mark` | `surface-card` | 图形、边框 | 4.16 | 选中标记小红块 | | `selected-mark` | `surface-page` | 图形、边框 | 4.16 | 白底上的红色标记 | | `selected-mark` | `surface-soft` | 图形、边框 | 3.61 | 浅灰小填充上的红色标记 | | `selected-mark` | `surface-muted` | 图形、边框 | 3.61 | 照片占位（中性浅灰）上的红色标记 | | `selected-mark` | `surface-inverse` | 图形、边框 | 3.71 | 深棕面上的红色标记 | | `selected-border` | `surface-card` | 图形、边框 | 18.06 | 选中描边 2px | | `primary` | `surface-page` | 图形、边框 | 18.06 | 焦点环（近黑） | | `primary` | `surface-muted` | 图形、边框 | 15.67 | 焦点环在照片占位上 | | `text-white` | `surface-inverse` | 图形、边框 | 15.44 | 深棕面上的焦点环（白） | | `chocolate-block` | `surface-page` | 图形、边框 | 15.44 | 巧克力格在白底上 | | `chocolate-block` | `surface-soft` | 图形、边框 | 13.39 | 巧克力格在浅灰小填充上 | **不要这样配** | 前景 | 背景 | 用途 | 对比度 | 改成 | |---|---|---|---|---| | `text-secondary` | `background-4` | 正文 | 4.46 | Background/4 上的辅助字 → 改用 text-body | | `text-3` | `surface-card` | 正文 | 4.09 | Text/3 小字 → 只做禁用态，说明文字改用 text-secondary | | `text-3` | `surface-page` | 正文 | 4.09 | Text/3 在页面底上 → 不用 | | `text-3` | `surface-inverse` | 正文 | 3.77 | Text/3 在深棕面上 → 改用 text-on-inverse-secondary | | `red` | `surface-card` | 正文 | 4.16 | 红色小字（报错、促销价）→ 字用 text-body，红色只给图标和边框 | | `red` | `surface-inverse` | 正文 | 3.71 | 深棕面上的红色小字 → 不用 | | `text-white` | `red` | 正文 | 4.16 | 红底白字小字 → 改用 black | | `text-1` | `red` | 正文 | 4.34 | 红底近黑小字 4.34 → 改用 black | | `action-primary` | `surface-inverse` | 图形、边框 | 1.0 | 深棕按钮放在深棕面上 → 改用 action-primary-inverse | | `stroke-1` | `surface-card` | 图形、边框 | 1.44 | Stroke-1 当控件边界 → 只做装饰分割线 | | `selected-mark` | `clay` | 图形、边框 | 2.68 | 红色标记放在陶土色上 → 换到白底 | | `selected-mark` | `background-3` | 图形、边框 | 2.9 | 红色标记放在浅灰上 → 不用 | | `primary` | `action-primary` | 图形、边框 | 1.17 | 近黑焦点环直接贴在深棕按钮上 → 焦点环外加 2px 白缝（focus-ring 已含） | | `chocolate-block` | `surface-inverse` | 图形、边框 | 1.0 | 巧克力格放在深棕面上 → 看不见，只放浅底 | ## 文字 | 样式 | 用在哪 | |---|---| | `t-40-medium` | 页面 H1，每页一个 | | `t-28-medium` | 区块标题 | | `t-24-medium` | 商品名、配置器合计 | | `t-20-medium` | 卡片和步骤标题 | | `t-18-medium` | 导语短句、FAQ 问题、桌面导航 | | `t-16-medium` | 按钮、Tab、步骤标签 | | `t-18-regular` | 区块导语 | | `t-16-regular` | 正文、输入框（输入框永远 16px） | | `t-14-medium` | 表单标签、数据、卡片价格、徽章（单行） | | `t-14-regular` | 说明和多行小字 | | `t-12-medium` | 眉题和标签（单行） | | `t-12-regular` | 单行附注 | 行高 Auto 的样式（Montserrat 1.219、Archivo 1.088）只排单行。字体是 Google Fonts 的 Montserrat 和 Archivo（SIL OFL，网页、印刷、广告都可用），文件在 `fonts/`。 ## 按钮与状态 | 类型 | 默认 | 悬停 | 按下 | 禁用 | |---|---|---|---|---| | 主按钮（每屏一个） | 深棕底 + 白字 | 近黑底 + 白字 | 纯黑底 + 白字 | `background-3` 底 + `text-3` 字 | | 主按钮 · 深棕面上 | 白底 + 深棕字 | 沙色底 + 深棕字 | 陶土色底 + 深棕字 | — | | 次按钮 | 透明底 + 1px `border-1` + 近黑字 | 沙色底 | 陶土色底 | 1px `background-3` 边 + `text-3` 字 | | 文字链接 | 近黑 + 下划线 | 下划线变红色 2px | — | — | 选中：2px 近黑描边 + 一个 8px 红色方块或勾选图标。输入框聚焦或报错：2px 红色边框。键盘焦点：浅底用 `focus-ring`，深棕面用 `focus-ring-inverse`。 ## 规则清单 | 编号 | 规则 | ✓ | ✗ | |---|---|---|---| | MGH-VIS-01 | **Logo**：横版词标是唯一主标：浅底用主标（近黑词标 + 红色网格），深棕面用反白（白词标 + 红色网格），红底用白词标 + 黑色网格。社交头像用 M + 网格组合标；Favicon、App 图标、角标用超级符号；不用竖版。优先用 SVG 文件；横版最小宽 120px，超级符号最小 24px；四周净空不小于网格一格的高度。 | 浅底主标 · 深底反白 · 红底白字黑格 | 拉伸、加投影、改网格颜色、放在照片或低对比底上、竖版 | | MGH-VIS-02 | **颜色比例：白做底，深棕和红色只做点缀**：页面以白为底（`surface-page`），画面主要是白底和商品照片；分区靠留白和 1px 细线，不靠整块色底。暖米、沙色、陶土是辅助色，只做小面积点缀（选中、悬停、小标签），不做页面底、整段背景或大色块；需要浅底时用中性浅灰 `surface-soft`（Background/2），也只用在小面积。深棕只做主按钮、巧克力格和小面积重点。近黑 #171616 只做文字、Logo 和细线，不做底色。红色只用于超级符号与模块标记、选中标记、24px 以上的促销价、小徽章、报错图标与边框，不超过 10%；不做按钮，不做大面积底色（Logo 红底版除外）。 | 白底 + 商品照片 + 细线分区，一个深棕主按钮，红色只在模块标记上 | 暖米整页底 + 沙色整段背景 + 深棕页脚；近黑页头；红色按钮 | | MGH-VIS-03 | **按配对表用色**：`text-3` 只做禁用态或 24px 以上；红色当文字只在 24px 以上；红底上的字用 `black`；Background/4 上只放 `text-1`；控件边界用 `border-1`，`stroke-1` 只做装饰线；深棕面上的辅助字用 `text-on-inverse-secondary`（沙色）；红色标记不放在陶土色和浅灰上；焦点环用近黑（深棕面上用白）。其余配对查“用色配对”。 | 报错：近黑文字 + 红色图标 + 红色 2px 边框 | 报错：红色 14px 文字 | | MGH-VIS-04 | **页头、页脚用白，深棕只做小面积重点**：页头、页脚都是白底配主标，页脚上方一条 1px 细线。深棕 `surface-inverse` 只用在小面积重点：配置器汇总条、小标签；不做页脚、整段背景或大方格。近黑不做底色。深棕面上的按钮用反白版（MGH-VIS-14）。 | 白页头 + 白页面 + 白页脚，细线分开 | 深棕页脚 + 深棕活动带 + 沙色整段背景；用近黑做大面积底 | | MGH-VIS-05 | **只用定稿的 12 个文字样式**：标题 Montserrat，正文 Archivo，类名就是 token 名（`t-40-medium` … `t-12-regular`）；字距 0，不做大写变换，眉题也用句子式。手机（≤599px）标题降一级：40→28、28→24、24→20。价格和尺寸用等宽数字。中文用对应的 `zh-*`。 | 手机首屏标题用 t-28-medium | 新造 32px 标题 · letter-spacing 0.18em 全大写眉题 | | MGH-VIS-06 | **网格、缝与零圆角**：一切都是直角：圆角一律 `radius-0`。间距按 8px 网格；方格之间固定 8px 的缝（`module-gap`），缝不随尺寸缩放。结构靠 1px 描边和底色，不用投影；唯一的 box-shadow 是焦点环。 | 卡片 1px `border-1`，直角 | 圆角卡片 + 投影 | | MGH-VIS-07 | **装饰图形只有两个：超级符号和巧克力格**：**超级符号**：2×3 红色网格 = 字母 H + 模块 + 扩展连接，只用 2×3 原型、扩展网格、局部裁切；永远红色，只有在红底上变成 `black`。**巧克力格**：深棕方块排成一板巧克力，一块就是沙发的一件；块与块之间 8px 缝，每块中间有一块稍浅的凸面（`chocolate-face`，四边内缩 14%）。巧克力格可以“掰开”：一块离开原位三个缝宽，表示加一件或拿走一件。巧克力格只放在白或中性浅灰底上。两者都不加圆角、投影和渐变；一个画面只用其中一个（Logo 里的网格不算）。 | 三块巧克力排成一排，第四块掰开在旁边 + “Add a seat. Take it away.” | 巧克力格画成圆角、加高光渐变或做成红色；超级符号改成棕色 | | MGH-VIS-10 | **渐变只在 Branding-6 里**：Branding-6 的红色渐变方块只属于这张关键视觉，可以原样复用；界面、按钮、卡片不用渐变。 | 复用 Branding-6 作广告背景 | 按钮、卡片用渐变 | | MGH-VIS-11 | **图标**：Lucide 线性图标，描边 1.5px，端点直角、转角斜接，颜色跟随文字；尺寸 16 / 20 / 24。红色图标只表示激活或报错。只有图标的按钮要有文字标签。 | 直角端点的加号与尺子 | 圆头图标、彩色图标、emoji | | MGH-VIS-12 | **动效**：220ms、cubic-bezier(0.2, 0, 0, 1)，只过渡颜色和透明度；不位移、不缩放、不弹跳；系统开启减少动效时取消过渡。 | 悬停时按钮底色由深棕变近黑 | 按下时缩小、卡片悬浮上移 | | MGH-VIS-13 | **无障碍**：WCAG 2.2 AA：文字 4.5:1（24px 以上 3:1），控件边界、图标、焦点环 3:1；所有交互有可见焦点；触控目标不小于 44px；状态不只靠颜色，配文字或图标。 | 选中：2px 近黑描边 + 红色小方块 | 只用红色表示选中 | | MGH-VIS-14 | **CTA 用深棕**：主按钮 `action-primary`：深棕 #3F1A03 + 白字；悬停近黑、按下纯黑，只变颜色。深棕面上用反白版 `action-primary-inverse`（白底深棕字）。红色不做按钮。每屏只有一个主按钮。 | 白页面上深棕底白字 “Add to cart”；深棕汇总条上白底深棕字 | 红底按钮；深棕按钮直接放在深棕条上 |