Overview
Meta's commerce surfaces (homepage, Quest configurator, Ray-Ban product detail, prescription page) read as a confident hardware merchandiser. The brand voice is photography-first: large, full-bleed product imagery dominates above-the-fold real estate, with white space and tight typographic hierarchy carrying the rest. The system has a recognizable dual-CTA pattern — a black pill-shaped primary on marketing surfaces shifting to a saturated cobalt blue ({colors.primary}) inside the buy-now flows, paired with an outlined ghost button for secondary navigation.
Optimistic VF — Meta's variable display face — anchors the entire system, ranging from a 64px hero display down to a 12px caption. The face's `ss01` and `ss02` stylistic sets are switched on across every heading role, contributing to the brand's slightly humanist, friendly geometric character. Below 768px the system collapses cleanly: hero stacks, pill nav becomes a hamburger, three-up feature grids flatten to a single column, and product configurators drop their right-rail summary into a sticky bottom bar.
**Key Characteristics:**
- Stark white canvas ({colors.canvas}) carrying full-bleed product photography with `{rounded.xxxl}` (32px) corner softening on showcase tiles
- Two-tier primary button system: marketing CTAs use {colors.ink-button} pills; commerce CTAs use {colors.primary} cobalt pills inside buy-now panels
- Optimistic VF as the universal display + body face with consistent `ss01, ss02` OpenType features
- Pill-shaped buttons ({rounded.full}) and `{rounded.xxxl}`/`{rounded.feature}` cards as the dominant geometric signature
- Saturated promotional banners (yellow {colors.warning}, dark {colors.ink-deep}) used sparingly above the nav for time-bound offers
- Photographic feature cards with no card chrome (no border, no shadow) — the product imagery IS the surface treatment
Colors
> Source pages: meta.com/ (homepage), /ai-glasses/ray-ban-meta-skyler-gen-2/ (PDP), /quest/quest-3s/buy-now/ (configurator), /ai-glasses/prescription/ (lens upsell). Token coverage was identical across all four pages — the design system is genuinely unified.
Brand & Accent
- **Cobalt Primary** ({colors.primary}): The buy-now CTA color. Used on every "Add to cart", "Configure", "Pre-order" button inside the commerce flow and the right-rail purchase panel.
- **Deep Cobalt** ({colors.primary-deep}): Pressed-state and dark-surface variant of the cobalt primary; also the active link color.
- **Soft Cobalt** ({colors.primary-soft}): Translucent background tint for informational callouts (`{colors.primary-soft}` at 15% alpha).
- **Facebook Blue** ({colors.fb-blue}): Selected radio/checkbox state and inline form-control activation color.
- **Meta Link Blue** ({colors.meta-link}): Reserved for legacy navigation and footer link affordances.
- **Oculus Purple** ({colors.oculus-purple}): VR product accent — used inside Quest-branded surfaces for category emphasis.
Surface
- **Canvas White** ({colors.canvas}): Page background and primary card surface.
- **Soft Cloud** ({colors.surface-soft}): Subtle product-thumbnail and warranty-card background; also the search-pill rest state.
- **Hairline Gray** ({colors.hairline}): 1px input border and form-control divider.
- **Hairline Soft** ({colors.hairline-soft}): Quieter divider used on cards, footer separators, and section breaks.
Text
- **Deep Ink** ({colors.ink-deep}): Primary headline and body text on light surfaces.
- **Ink** ({colors.ink}): Standard body and secondary headline text.
- **Charcoal** ({colors.charcoal}): Tertiary body text and form-button labels.
- **Slate** ({colors.slate}): Section-header copy and supporting microcopy.
- **Steel** ({colors.steel}): Quieter caption text and footer link hierarchy.
- **Stone** ({colors.stone}): Disabled or de-emphasized labels.
Semantic
- **Success** ({colors.success}): "In stock", "Free returns" affirmations.
- **Attention** ({colors.attention}): Mid-priority alerts and timed callouts.
- **Warning** ({colors.warning}): Promotional banners ("Get 25% off…") and limited-time tags.
- **Critical** ({colors.critical}): Validation errors, destructive feedback.
- **Critical Strong** ({colors.critical-strong}): Form-input error border and inline error labels.
Typography
Font Family
**Optimistic VF** is Meta's proprietary variable display face. Fallbacks: Montserrat, Helvetica, Arial, Noto Sans. The variable axes carry from 300 (light heading-md, used for editorial intro headlines like "Look forward") through 500 (display, hero, heading-sm) up to 700 (subtitle, body emphasis, button labels). Stylistic sets `ss01` and `ss02` are switched on across every heading role — they soften the geometry and give the type a slightly humanist breathing.
A secondary Helvetica fallback chain is used for technical microcopy (12px) inside spec sheets and footer fine print.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | OpenType | Use |
|---|---|---|---|---|---|---|
| `{typography.hero-display}` | 64px | 500 | 1.16 | 0 | ss01, ss02 | Homepage hero ("Get 25% off…", category opener) |
| `{typography.display-lg}` | 48px | 500 | 1.17 | 0 | ss01, ss02 | Section-opener display ("Made for prescriptions. Built for comfort.") |
| `{typography.heading-lg}` | 36px | 500 | 1.28 | 0 | ss01, ss02 | Subsection headlines ("Why buy from Meta", "Tech specs") |
| `{typography.heading-md}` | 28px | 300 | 1.21 | 0 | ss01, ss02 | Editorial subheads in lighter weight ("Look forward", "Built for prescriptions") |
| `{typography.heading-sm}` | 24px | 500 | 1.25 | 0 | ss01, ss02 | Card titles, feature-tile headers |
| `{typography.subtitle-lg}` | 18px | 700 | 1.44 | 0 | — | Bold callouts, FAQ question titles |
| `{typography.subtitle-md}` | 18px | 400 | 1.44 | 0 | — | Body lead and longer-line subtitles |
| `{typography.body-md}` | 16px | 400 | 1.50 | -0.16px | — | Primary body text |
| `{typography.body-md-bold}` | 16px | 700 | 1.50 | -0.16px | — | Body emphasis and link-md |
| `{typography.body-sm}` | 14px | 400 | 1.43 | -0.14px | — | Secondary body, helper text |
| `{typography.body-sm-bold}` | 14px | 700 | 1.43 | -0.14px | — | Pill tab labels, footer headings |
| `{typography.caption-bold}` | 12px | 700 | 1.33 | 0 | — | Badge labels, timestamps |
| `{typography.caption}` | 12px | 400 | 1.33 | 0 | — | Footer fine print, legal microcopy |
| `{typography.button-md}` | 14px | 700 | 1.43 | -0.14px | — | Pill button labels |
| `{typography.link-md}` | 16px | 700 | 1.50 | -0.16px | — | Inline navigation links |
Principles
- Negative letter-spacing on body roles (`-0.14px` to `-0.16px`) tightens the type fractionally — Optimistic VF was designed for this snug-but-not-condensed setting.
- Editorial subheads use the 300 weight to introduce visual rest between the 500-weight display headlines and the 400-weight body, creating a three-tier visual rhythm.
- All headings carry `ss01, ss02` stylistic sets together — the design treats them as a paired alternates package, never one without the other.
- Buttons, pill tabs, and footer headings share `{typography.body-sm-bold}` (14px / 700 / -0.14px), creating a tight visual relationship between interactive elements.
Layout
Spacing System
- **Base unit**: 4px increment with 8px as the dominant primary step.
- **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (10px) · `{spacing.md}` (12px) · `{spacing.base}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (80px) · `{spacing.hero}` (120px).
- **Section rhythm**: Marketing sections separate at `{spacing.section-lg}` (80px); product detail sections compress to `{spacing.section}` (64px); FAQ stacks tighten further to `{spacing.xxl}` (32px).
- **Card internal padding**: Standard `{spacing.xxl}` (32px); icon-feature tiles compress to `{spacing.xl}` (24px); promo-strip cards expand to `{spacing.section}` (64px) for hero presence.
Grid & Container
- Marketing page max-width sits around 1280px with 32–48px gutters.
- The PDP layout uses a 2-column split: hero gallery (~58% width) + sticky purchase rail (~42%, with `max-width: 380px` on the rail).
- Three-up feature grids ("Why buy from Meta") use a 24px column gap; six-up product thumbnail rows (color/SKU pickers) use a 12px gap.
Whitespace Philosophy
Whitespace is product-photography-first. Hero sections give product imagery 50–70% of the viewport height; copy is given oxygen to breathe in `{spacing.xxl}` to `{spacing.xxxl}` blocks above and below. Inside the configurator, whitespace tightens — the buy-now panel is information-dense, with `{spacing.base}` to `{spacing.lg}` rhythm between option groups.
Elevation & Depth
The system runs predominantly flat. Elevation is reserved for two interaction layers:
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow; `{rounded.xxxl}` rounding + `{colors.hairline-soft}` border | Default product cards, why-buy tiles |
| 1 (subtle) | `rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` | Pill-tab activation indicator |
| 2 (sticky panel) | `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP right-rail purchase summary, sticky mobile checkout bar |
Decorative Depth
- Photography-as-depth: full-bleed product imagery on `{rounded.xxxl}` cards creates atmospheric layering without shadows.
- Translucent overlays (`rgba(255, 255, 255, 0.1)` to `rgba(10, 19, 23, 0.12)`) cover dark hero photography to lift legibility of overlaid text.
- Decorative pastel tints inside accessory cards — soft pink, ice-blue, mint — appear briefly behind product cutouts but are NOT formalized as system tokens (treated as photographic content).
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 2px | Inline checkbox marks, fine UI corners |
| `{rounded.sm}` | 4px | Tags, micro-controls |
| `{rounded.md}` | 6px | Square thumbnail rounding |
| `{rounded.lg}` | 8px | Form inputs, radio-option containers |
| `{rounded.xl}` | 16px | Standard feature cards, FAQ accordion items |
| `{rounded.xxl}` | 24px | Warranty / accessory tiles, ghost-style action cards |
| `{rounded.xxxl}` | 32px | Photographic feature cards, big promo strips |
| `{rounded.feature}` | 40px | Accessory hero panels, "Built for prescriptions" cards |
| `{rounded.full}` | 100px | Pill buttons, tab chips, badges |
| `{rounded.circle}` | 50% | Color swatches, circular icon buttons |
Photography Geometry
- Product hero photography sits in `{rounded.xxxl}` (32px) frames more often than rectangles.
- Color/material swatches are perfect circles (`{rounded.circle}`, 32px diameter, 2px white border ring when selected).
- Square product thumbnails (`aspect-ratio: 1/1`) use `{rounded.xl}` rounding.
- Six-up "color & SKU" picker rows use 1:1 aspect tiles with `{rounded.lg}` (8px) corners — tighter than the hero photography frames to differentiate selection-grid context from showcase context.
Components
> Per the no-hover policy, hover states are NOT documented for any component below. Default and pressed/active states only.
Buttons
**`button-primary`** — Black pill primary CTA for marketing surfaces ("Shop", "Pre-order").
- Background `{colors.ink-button}`, text `{colors.on-ink-button}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
- Pressed state `button-primary-pressed` flips background to `{colors.charcoal}`.
- Disabled state `button-primary-disabled` uses `{colors.disabled-text}` background.
**`button-buy-cta`** — Cobalt pill primary CTA for commerce flows ("Add to cart", "Configure", "Continue").
- Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `14px 30px`, rounded `{rounded.full}`.
- Pressed state `button-buy-cta-pressed` deepens background to `{colors.primary-deep}`.
- This variant ONLY appears inside the buy-now configurator and PDP purchase rail. Marketing surfaces use `button-primary` instead.
**`button-secondary`** — Outlined ghost CTA, often paired with primary in dual-CTA hero patterns.
- Background transparent, text `{colors.ink-deep}`, border `2px solid {colors.ink-deep}`, typography `{typography.button-md}`, padding `12px 28px`, rounded `{rounded.full}`.
**`button-ghost`** — Quieter outlined variant used for tertiary CTAs.
- Background transparent, text `{colors.ink-deep}`, border `2px solid rgba(10, 19, 23, 0.12)`, typography `{typography.button-md}`, padding `10px 22px`, rounded `{rounded.full}`.
**`button-pill-tab`** + **`button-pill-tab-active`** — Top-of-page category navigation pills ("Glasses / Quest / Apps").
- Inactive: background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, padding `8px 16px`, rounded `{rounded.full}`.
- Active: background `{colors.ink-deep}`, text `{colors.canvas}`. No border in active state — the dark fill replaces it.
**`button-icon-circular`** — 40×40px circular utility buttons (carousel arrows, share, favorite).
- Background `{colors.canvas}`, icon color `{colors.ink}`, rounded `{rounded.circle}`.
Cards & Containers
**`card-product-feature`** — White feature card with product photography and copy (homepage "Designed for sport", "Advanced. Inside and out.").
- Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.
**`card-feature-photo`** — Edge-to-edge photographic showcase tile with NO chrome (homepage "Built for prescriptions" full-bleed glasses card).
- Background `{colors.canvas}` (visible only at the corners), rounded `{rounded.xxxl}`, no padding, no border. The image fills the card; copy is overlaid bottom-left in white.
**`card-promo-strip`** — Dark full-width promo card with embedded copy + CTAs (homepage "Meta Quest brings the magic of virtual reality" wide strip).
- Background `{colors.ink-deep}`, text `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.section}`.
**`card-icon-feature`** — Three-up feature tile with line icon, headline, and short copy ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.
**`card-checkout-summary`** — PDP right-rail sticky summary with title, price, color picker, "Add to cart" button.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px`.
**`product-thumbnail`** — Square product image cell used in color/SKU pickers and "People also bought" rows.
- Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding `{spacing.base}`, aspect-ratio `1 / 1`.
**`warranty-card`** — Promo callout for warranty + finance offers ("1y Warranty", "Meta Horizon+").
- Background `{colors.surface-soft}`, rounded `{rounded.xxl}`, padding `{spacing.xxl}`. Uses pastel-tinted variants for additional perks.
**`why-buy-tile`** — 4-up reassurance tile row in the lower marketing zone.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl} {spacing.xl}`, border `1px solid {colors.hairline-soft}`. Heading in `{typography.subtitle-lg}`, body in `{typography.body-sm}`.
Inputs & Forms
**`text-input`** — Standard form field (footer email subscribe, support form).
- Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.lg}`, padding `{spacing.md}`, height 44px.
**`text-input-focused`** — Activated state.
- Border switches to `2px solid {colors.fb-blue}`.
**`text-input-error`** — Validation error state.
- Border switches to `1px solid {colors.critical-strong}`; error label below in `{colors.critical-strong}` `{typography.body-sm}`.
**`search-pill`** — Top-nav search field.
- Background `{colors.surface-soft}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.full}`, height 40px.
**`radio-option`** + **`radio-option-selected`** — Configurator option cards (storage, color variant, shipping option).
- Inactive: background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg}`, border `1px solid rgba(10, 19, 23, 0.12)`.
- Selected: border switches to `2px solid #0143b5` (deep cobalt) — the cobalt theme persists into form-control selection signaling.
**`color-swatch-circle`** — Round color/material picker (Ray-Ban frame finishes, glass colors).
- 32px diameter, `{rounded.circle}`, `2px solid {colors.canvas}` ring on selection over the swatch's own fill color.
Badges & Status
**`badge-promo-yellow`** — Limited-time offer chip ("Limited time", "Sale").
- Background `{colors.warning}`, text `{colors.ink-deep}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-attention`** — Mid-priority status indicator ("Almost gone", "Selling fast").
- Background `{colors.attention}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-success`** — Affirmative status ("In stock", "Verified", "Free shipping").
- Background `{colors.success}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`badge-critical`** — Urgent/destructive label ("Out of stock", "Discontinued", error chips).
- Background `{colors.critical}`, text `{colors.canvas}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.
**`promo-banner`** — Sticky full-width promotional strip ABOVE the top nav ("Get 25% off the #1 selling AI glasses").
- Background `{colors.ink-deep}` (or `{colors.warning}` for yellow promo variants), text `{colors.canvas}` (or `{colors.ink-deep}` on yellow), typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy plus an inline CTA link.
Navigation
**Top Navigation (Desktop)** — Sticky white bar with category pill tabs, search, account, cart.
- Background `{colors.canvas}`, height ~64px with bottom `1px solid {colors.hairline-soft}`.
- Left: Meta wordmark logo (61×14px). Center: pill-tab category nav. Right: search-pill + circular icon buttons (account, cart).
**Top Navigation (Mobile)** — Compressed to logo + hamburger + cart icon. Pill-tab nav slides into a full-screen drawer below 768px.
**Promo Banner** — Full-width strip ABOVE the nav for time-bound offers.
- Background `{colors.ink-deep}` or `{colors.warning}` (yellow), text `{colors.canvas}` or `{colors.ink-deep}`, typography `{typography.body-sm-bold}`, padding `{spacing.md} {spacing.xl}`. Carries one-line offer copy + inline link.
**Breadcrumb (PDP)** — Inline path above the product hero ("Glasses › Ray-Ban Meta › Skyler (Gen 2)").
- Typography `{typography.body-sm}`, separator dot in `{colors.stone}`, active leaf in `{colors.ink}`, parent links in `{colors.steel}`.
Signature Components
**`hero-band-marketing`** — Full-bleed photographic hero with overlaid copy + dual-CTA pair.
- Edge-to-edge product photography on a dark or photographic background. Overlay copy in `{typography.hero-display}` white. Below the title: 1-line subtitle in `{typography.subtitle-md}` then `button-primary` + `button-secondary` pair.
**`product-gallery-pdp`** — Product detail page main hero: 4-up vertical thumbnail strip on the left, large product image center, sticky purchase rail right.
- Thumbnails: 80×80px, `{rounded.lg}`, `{colors.surface-soft}` background, 1px `{colors.hairline-soft}` border (active border switches to `{colors.ink-deep}`).
- Main image area: ~720×720px on desktop, `{rounded.xxxl}` rounding, photographic surface.
- Sticky rail uses `card-checkout-summary`.
**`color-sku-picker-row`** — Six-up grid of square product variants with name + price below each.
- Tile background `{colors.surface-soft}`, rounded `{rounded.lg}`, image padded `{spacing.base}`. Active tile border switches to `2px solid {colors.ink-deep}`. Below the tile: variant name in `{typography.body-sm-bold}` and price in `{typography.body-sm}`.
**`feature-icon-row`** — Four reassurance benefits ("Free 2-day delivery", "Free 30-day returns", "Worry-free warranty", "Buy now, pay later").
- 4-column grid, each cell uses `card-icon-feature` chrome with a 32px line icon at top, headline `{typography.subtitle-lg}`, body `{typography.body-sm}`.
**`faq-accordion`** — Vertical stack of expandable Q&A items.
- Each item uses `faq-accordion-item` chrome. Question in `{typography.subtitle-lg}` left, chevron icon (`{colors.steel}`, 20px) right. Expanded answer drops in `{typography.body-md}` text below with `{spacing.base}` top padding.
**`tech-specs-table`** — Two-column key/value table for product specifications.
- Row layout: spec label (`{typography.body-sm-bold}` `{colors.ink}`) left, spec value (`{typography.body-sm}` `{colors.charcoal}`) right. Row separator `1px solid {colors.hairline-soft}`. Section headers in `{typography.heading-sm}` above each spec group.
**`testimonial-customer-card`** — Small editorial card with author + quote + photo.
- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`. Avatar circle 40px, byline in `{typography.body-sm-bold}`, quote in `{typography.body-md}`.
**`footer-region`** — Dense multi-column site footer.
- Background `{colors.canvas}`, top border `1px solid {colors.hairline-soft}`, padding `{spacing.section} {spacing.xxl}`. Six column groups with section headings in `{typography.body-sm-bold}` `{colors.ink}` and link lists in `{typography.body-sm}` `{colors.steel}`. Bottom row contains language picker, region selector, legal links in `{typography.caption}` `{colors.stone}`.
Do's and Don'ts
Do
- Reserve `{colors.primary}` (cobalt) for buy-now CTAs only — its visual weight is meaningful precisely because it doesn't appear on marketing pages.
- Use `{colors.ink-button}` (black) for marketing-surface primary CTAs. Pair with `{colors.button-secondary}` ghost outline for the secondary action.
- Apply `{rounded.full}` to every button, every category pill, every badge, every chip — buttons are NEVER squared in Meta's system.
- Apply `{rounded.xxxl}` to photographic product cards and `{rounded.xl}` to icon-feature tiles to maintain the visible card-hierarchy contrast.
- Switch on `ss01, ss02` together for any Optimistic VF heading. Never one stylistic set without the other.
- Use the 300-weight `{typography.heading-md}` for editorial subheads — it creates the brand's signature visual rhythm against the 500-weight displays.
Don't
- Don't use `{colors.primary}` (cobalt) for marketing-surface primary buttons — it conflicts with Meta's brand-history positioning of black-CTA-on-white-canvas marketing.
- Don't introduce additional accent colors beyond cobalt + Oculus purple. The hardware brand is deliberately monochromatic outside its product photography.
- Don't soften the corners of pill buttons below `{rounded.full}`. The pill is a brand signature.
- Don't run feature cards without rounding — `{rounded.xxxl}` is the minimum for any photographic surface.
- Don't reduce `{typography.body-md}` line-height below 1.50 — the negative letter-spacing already tightens the metric and any further compression breaks legibility.
- Don't apply heavy shadows to marketing cards. Elevation is a commerce-flow signal, not a marketing flourish.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile (small) | < 480px | Single column. Hero text drops to `{typography.display-lg}` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |
| Mobile (large) | 480 – 767px | Same as small but feature tiles render two-up. |
| Tablet | 768 – 1023px | Two-column feature grids. Pill-tab nav returns. PDP gallery + purchase rail render side-by-side at compressed proportions (~60/40). |
| Desktop | 1024 – 1359px | Full three- and four-up feature grids; full pill-tab category nav; PDP at standard 58/42 split. |
| Wide Desktop | ≥ 1360px | Same as desktop with wider hero gutters and larger product photography. |
Touch Targets
- Pill buttons render at 40–44px effective height (with the 14px button text + `14px 30px` padding). Above the WCAG AAA 44px floor.
- Circular icon buttons are 40×40px — at the AA floor; bumps to 44×44px on mobile via override.
- Color swatch circles are 32×32px. To hit AAA, the swatch carries a 12px clear hit zone around it (effective hit target ~56px).
- Form inputs render at 44px height to align with primary button height.
Collapsing Strategy
- **Promo banner** stays full-width on all breakpoints; truncates with ellipsis on small mobile, retains the inline link affordance.
- **Pill-tab nav** below 768px collapses into a hamburger drawer; the active tab is rendered as a label inside the closed nav.
- **PDP layout**: gallery stacks above the purchase summary at < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
- **Feature grids** (3-up, 4-up) collapse to 2-up at 768–1023px and 1-up at < 768px. Card padding compresses from `{spacing.xxl}` to `{spacing.xl}` at the 1-up breakpoint.
- **Hero typography**: `{typography.hero-display}` (64px) drops to `{typography.heading-lg}` (36px) at < 768px and `{typography.heading-sm}` (24px) at < 480px.
- **Footer**: 6-column desktop layout reflows to 2-column at tablet and accordion-collapsed groups at mobile.
Image Behavior
- Product photography uses 1:1 (thumbnails, color pickers), 4:3 (PDP gallery), and 16:9 (homepage promo strips) ratios.
- Hero photography is full-bleed with `{rounded.xxxl}` corners; lazy-loaded below the fold.
- Product variant images preserve their `{rounded.lg}` thumbnails across all breakpoints — they never go full-width on mobile.
Iteration Guide
1. Focus on ONE component at a time. The system has high internal consistency — small precision wins compound.
2. Reference component names and tokens directly (`{colors.primary}`, `{component-name}-pressed`, `{rounded.full}`) — do not paraphrase.
3. Run `npx @google/design.md lint DESIGN.md` after edits to catch broken refs, contrast issues, orphaned tokens.
4. Add new variants as separate `components:` entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.
5. Default to `{typography.body-md}` for body and `{typography.subtitle-lg}` for emphasis. Headlines step down through `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
6. Keep `{colors.primary}` (cobalt) scarce. If it appears outside the buy-now flow on a viewport, ask whether the surface really needs to look like a checkout panel.
7. Pill-shaped buttons (`{rounded.full}`) always; squared buttons signal "third-party widget" in this design language and should be filtered out of any work surface.
Known Gaps
- Selected/checked states for non-button form controls (toggle, multi-select) were not visible on the captured surfaces — implement following the cobalt-on-white pattern from `radio-option-selected`.
- Animation/transition timings are not extracted; recommend 150–250ms ease-out for primary surface transitions and 300ms ease-in-out for accordion expand/collapse.
- Specific dark-mode token values for canvas, surface, ink, and hairline are not defined; the brand has not surfaced a published dark-mode token set on these commerce pages.
- Pastel decorative tints inside accessory cards (soft pink, ice blue, mint) appear visually but are not formalized — treat them as photographic content, not as system colors.
개요
Meta의 커머스 표면(홈페이지, Quest 구성기, Ray-Ban 제품 세부 정보, 처방 페이지)은 자신감 있는 하드웨어 머천다이저처럼 읽혀집니다. 브랜드 목소리는 사진 우선입니다. 크고 완전한 제품 이미지가 스크롤 없이 볼 수 있는 공간을 지배하고 나머지 공간은 공백과 타이트한 인쇄 계층 구조로 구성됩니다. 시스템에는 인식 가능한 듀얼 CTA 패턴이 있습니다. 마케팅 표면의 검은색 알약 모양의 기본 패턴이 지금 구매 흐름 내에서 포화 코발트 블루({colors.primary})로 바뀌고 보조 탐색을 위한 윤곽선 고스트 버튼과 쌍을 이룹니다.
Optimistic VF — Meta의 가변 디스플레이 면 —은 64px 히어로 디스플레이에서 12px 캡션까지 전체 시스템을 고정합니다. 얼굴의 `ss01` 및 `ss02` 스타일 세트는 모든 제목 역할에 걸쳐 활성화되어 브랜드의 약간 휴머니스트적이고 친근한 기하학적 특성에 기여합니다. 768px 미만에서는 시스템이 깔끔하게 붕괴됩니다. Hero 스택, 알약 탐색이 햄버거가 되고, 3개 기능 그리드가 단일 열로 평면화되고, 제품 구성자가 오른쪽 레일 요약을 끈끈한 하단 표시줄에 놓습니다.
**주요 특성:**
- 쇼케이스 타일에 ``(32px) 코너 소프트닝을 적용한 풀 블리드 제품 사진을 담은 순백색 캔버스({colors.canvas})
- 2단계 기본 버튼 시스템: 마케팅 CTA는 {colors.ink-button} 알약을 사용합니다. 상거래 CTA는 즉시 구매 패널 내에 {colors.primary} 코발트 알약을 사용합니다
- 일관된 `ss01, ss02` OpenType 기능을 갖춘 범용 디스플레이 + 본체 페이스로서의 낙관적인 VF
- 알약 모양의 버튼({rounded.full}) 및 ``/`` 카드가 주요 기하학적 서명으로 사용됨
- 시간 제한이 있는 제안을 위해 탐색 위에 드물게 사용되는 포화 프로모션 배너(노란색 {colors.warning}, 어두운 {colors.ink-deep})
- 카드 크롬이 없는 사진 기능 카드(경계 없음, 그림자 없음) - 제품 이미지는 표면 처리입니다
색상
> 소스 페이지: Meta.com/(홈페이지), /ai-glasses/ray-ban-meta-skyler-gen-2/(PDP), /quest/quest-3s/buy-now/(구성자), /ai-glasses/prescription/(렌즈 상향 판매). 토큰 적용 범위는 4개 페이지 모두 동일했습니다. 디자인 시스템은 완전히 통합되었습니다.
브랜드 및 액센트
- **코발트 프라이머리** ({colors.primary}): 즉시 구매 가능한 CTA 색상입니다. 상거래 흐름 및 오른쪽 구매 패널 내부의 모든 "장바구니에 추가", "구성", "선주문" 버튼에 사용됩니다.
- **딥 코발트** ({colors.primary-deep}): 코발트 원색의 압착 상태 및 어두운 표면 변형; 활성 링크 색상도 표시됩니다.
- **부드러운 코발트**({colors.primary-soft}): 정보 설명선을 위한 반투명 배경 색조(15% 알파에서``).
- **Facebook Blue** ({colors.fb-blue}): 선택된 라디오/체크박스 상태 및 인라인 양식 제어 활성화 색상.
- **메타 링크 블루**({colors.meta-link}): 레거시 탐색 및 바닥글 링크 어포던스를 위해 예약되었습니다.
- **Oculus Purple** ({colors.oculus-purple}): VR 제품 강조 — 카테고리 강조를 위해 Quest 브랜드 표면 내부에 사용됩니다.
표면
- **캔버스 화이트**({colors.canvas}): 페이지 배경 및 기본 카드 표면.
- **소프트 클라우드**({colors.surface-soft}): 미묘한 제품 썸네일 및 보증 카드 배경; 또한 검색 알약 휴식 상태입니다.
- **헤어라인 그레이** ({colors.hairline}): 1px 입력 테두리 및 양식 제어 구분선.
- **가는 선 소프트**({colors.hairline-soft}): 카드, 바닥글 구분 기호 및 섹션 나누기에 사용되는 조용한 구분선입니다.
텍스트
- **진한 잉크**({colors.ink-deep}): 밝은 표면의 기본 헤드라인 및 본문 텍스트입니다.
- **잉크** ({colors.ink}): 표준 본문 및 보조 헤드라인 텍스트.
- **차콜**({colors.charcoal}): 3차 본문 텍스트 및 양식 버튼 레이블.
- **슬레이트**({colors.slate}): 섹션 헤더 사본 및 지원 마이크로카피.
- **스틸**({colors.steel}): 캡션 텍스트 및 바닥글 링크 계층 구조가 더 조용해졌습니다.
- **Stone** ({colors.stone}): 비활성화되거나 덜 강조된 라벨.
의미
- **성공** ({colors.success}): "재고 있음", "무료 반품" 확인.
- **주의**({colors.attention}): 우선순위가 중간인 알림 및 시간 제한 콜아웃.
- **경고**({colors.warning}): 프로모션 배너("25% 할인 받기...") 및 기간 한정 태그.
- **위험**({colors.critical}): 유효성 검사 오류, 파괴적인 피드백.
- **Critical Strong** ({colors.critical-strong}): 양식 입력 오류 테두리 및 인라인 오류 레이블.
타이포그래피
글꼴군
**Optimistic VF**는 메타의 독자적인 변수 디스플레이 페이스입니다. 폴백: Montserrat, Helvetica, Arial, Noto Sans. 가변 축은 300("앞으로 보기"와 같은 편집 소개 헤드라인에 사용되는 가벼운 제목-md)부터 500(표시, 영웅, 제목-SM), 최대 700(자막, 본문 강조, 버튼 레이블)까지 전달됩니다. 스타일 세트 `ss01` 및 `ss02`은 모든 제목 역할에 걸쳐 활성화됩니다. 이는 기하학을 부드럽게 하고 문자에 약간 휴머니즘적인 호흡을 부여합니다.
2차 Helvetica 폴백 체인은 사양 시트 및 바닥글 작은 글씨 내부의 기술적인 마이크로카피(12px)에 사용됩니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | 오픈타입 | |
사용
|---|---|---|---|---|---|---|
| _`` | 64px | 500 | 1.16 | 0 | SS01, SS02 | 홈페이지 히어로("25% 할인 받기…", 카테고리 오프너) |
| _`` | 48px | 500 | 1.17 | 0 | SS01, SS02 | 섹션 오프너 디스플레이("처방전용으로 제작되었습니다. 편안함을 위해 제작되었습니다.") |
| _`` | 36px | 500 | 1.28 | 0 | SS01, SS02 | 하위 섹션 헤드라인("메타에서 구입해야 하는 이유", "기술 사양") |
| _`` | 28px | 300 | 1.21 | 0 | SS01, SS02 | 더 가벼운 편집 부제목("기대", "처방전을 위해 제작됨") |
| _`` | 24px | 500 | 1.25 | 0 | SS01, SS02 | 카드 제목, 기능 타일 헤더 |
| _`` | 18px | 700 | 1.44 | 0 | — | 굵은 콜아웃, FAQ 질문 제목 |
| _`` | 18px | 400 | 1.44 | 0 | — | 본문 리드 및 긴 줄 자막 |
| _`` | 16px | 400 | 1.50 | -0.16px | — | 기본 본문 텍스트 |
| _`` | 16px | 700 | 1.50 | -0.16px | — | 본문 강조 및 링크-md |
| _`` | 14px | 400 | 1.43 | -0.14px | — | 보조 본문, 도우미 텍스트 |
| _`` | 14px | 700 | 1.43 | -0.14px | — | 알약 탭 레이블, 바닥글 제목 |
| _`` | 12px | 700 | 1.33 | 0 | — | 배지 라벨, 타임스탬프 |
| _`` | 12px | 400 | 1.33 | 0 | — | 바닥글 작은 글씨, 법적 마이크로카피 |
| _`` | 14px | 700 | 1.43 | -0.14px | — | 알약 버튼 라벨 |
| _`` | 16px | 700 | 1.50 | -0.16px | — | 인라인 탐색 링크 |
원칙
- 본문 역할의 음수 문자 간격(`-0.14px` ~ `-0.16px`)으로 인해 문자가 부분적으로 조여집니다. 낙관적 VF는 이 편안하지만 압축되지 않은 설정을 위해 설계되었습니다.
- 사설 부제목은 300 가중치를 사용하여 500 가중치 디스플레이 헤드라인과 400 가중치 본문 사이에 시각적 휴식을 도입하여 3단계 시각적 리듬을 만듭니다.
- 모든 제목에는 `ss01, ss02` 스타일 세트가 함께 포함됩니다. 디자인에서는 이를 한 쌍의 대체 패키지로 취급하며, 다른 제목 없이는 결코 처리하지 않습니다.
- 버튼, 알약 탭 및 바닥글 제목은 ``(14px / 700 / -0.14px)을 공유하여 대화형 요소 간에 긴밀한 시각적 관계를 만듭니다.
레이아웃
간격 시스템
- **기본 단위**: 주요 기본 단계로 8px를 포함하여 4px 증분.
- **토큰**: ``(4px) · ``(8px) · ``(10px) · ``(12px) · ``(16px) · `` (20px) · `` (24px) · `` (32px) · `` (40px) · `` (48px) · `` (64px) · `` (80px) · ``(120px).
- **섹션 리듬**: 마케팅 섹션은 ``(80px)에서 구분됩니다. 제품 세부 정보 섹션은 ``(64px)으로 압축됩니다. FAQ 스택은 ``(32px)로 더욱 강화되었습니다.
- **카드 내부 패딩**: 표준 ``(32px); 아이콘 기능 타일은 ``(24px)으로 압축됩니다. 프로모션 스트립 카드는 영웅 존재를 위해 ``(64px)로 확장됩니다.
그리드 및 컨테이너
- 마케팅 페이지 최대 너비는 32~48픽셀 여백을 포함하여 약 1280픽셀입니다.
- PDP 레이아웃은 2열 분할을 사용합니다. 히어로 갤러리(폭 ~58%) + 고정 구매 레일(~42%, 레일에 `max-width: 380px` 포함)
- 3개 기능 그리드("메타에서 구입해야 하는 이유")는 24px 열 간격을 사용합니다. 6개 제품 썸네일 행(색상/SKU 선택기)은 12픽셀 간격을 사용합니다.
공백 철학
공백은 제품 사진 우선입니다. 히어로 섹션은 뷰포트 높이의 50~70%에 해당하는 제품 이미지를 제공합니다. 복사본에는 위와 아래의 `` 블록에서 `` 블록까지 호흡할 수 있는 산소가 공급됩니다. 구성기 내에서 공백이 빡빡해집니다. 즉시 구매 패널은 정보가 밀집되어 있으며 옵션 그룹 사이에 `` ~ `` 리듬이 있습니다.
고도 및 깊이
시스템은 대부분 플랫하게 실행됩니다. 고도는 두 개의 상호작용 레이어용으로 예약되어 있습니다:
| 레벨 | 치료 | |
사용
|---|---|---|
| 0(플랫) | 그림자가 없습니다. _`` 반올림 + `` 테두리 | 기본 제품 카드, 타일을 구매해야 하는 이유 |
| 1(미묘함) | _`rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` | 알약 탭 활성화 표시기 |
| 2(고정 패널) | _`rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP 우측 레일 구매 요약, 고정된 모바일 체크아웃 바 |
장식적 깊이
- 깊이 있는 사진: `` 카드의 전체 제품 이미지는 그림자 없이 분위기 있는 레이어를 만듭니다.
- 반투명 오버레이(`rgba(255, 255, 255, 0.1)`~`rgba(10, 19, 23, 0.12)`)는 어두운 영웅 사진을 덮어 오버레이된 텍스트의 가독성을 높입니다.
- 액세서리 카드 내부의 장식용 파스텔 색조(소프트 핑크, 아이스 블루, 민트)는 제품 컷아웃 뒤에 잠시 표시되지만 시스템 토큰으로 공식화되지는 않습니다(사진 콘텐츠로 처리).
도형
경계 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 2픽셀 | 인라인 체크박스 표시, 미세한 UI 모서리 |
| _`` | 4픽셀 | 태그, 마이크로 컨트롤 |
| _`` | 6픽셀 | 정사각형 미리보기 이미지 반올림 |
| _`` | 8픽셀 | 양식 입력, 라디오 옵션 컨테이너 |
| _`` | 16px | 표준 기능 카드, FAQ 아코디언 항목 |
| _`` | 24px | 보증/액세서리 타일, 고스트 스타일 액션 카드 |
| _`` | 32px | 사진 기능 카드, 대형 프로모션 스트립 |
| _`` | 40px | 액세서리 히어로 패널, '처방전용' 카드 |
| _`` | 100px | 알약 버튼, 탭 칩, 배지 |
| _`` | 50% | 색상 견본, 원형 아이콘 버튼 |
사진 기하학
- 제품 영웅 사진은 직사각형보다 ``(32px) 프레임에 더 자주 사용됩니다.
- 색상/재료 견본은 완벽한 원입니다(``, 직경 32px, 선택 시 흰색 테두리 링 2px).
- 정사각형 곱 축소판(`aspect-ratio: 1/1`)은 `` 반올림을 사용합니다.
- 6개의 "색상 및 SKU" 선택기 행은 ``(8px) 모서리가 있는 1:1 가로세로 타일을 사용합니다. 영웅 사진 프레임보다 더 빡빡하여 선택 그리드 컨텍스트와 쇼케이스 컨텍스트를 구별합니다.
구성요소
> 마우스를 올리지 않는 정책에 따라 마우스를 올리면 아래 구성 요소에 대한 상태가 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.
버튼
**`button-primary`** — 마케팅 표면("쇼핑", "선주문")을 위한 검은 알약 기본 CTA.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `14px 30px`, 반올림 ``.
- 누른 상태 `button-primary-pressed` 배경이 ``로 반전됩니다.
- 비활성화 상태 `button-primary-disabled`는 `` 배경을 사용합니다.
**`button-buy-cta`** — 상거래 흐름을 위한 코발트 알약 기본 CTA("장바구니에 추가", "구성", "계속").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `14px 30px`, 반올림 ``.
- 누른 상태 `button-buy-cta-pressed` 배경을 ``로 심화시킵니다.
- 이 변형은 지금 구매 구성기 및 PDP 구매 레일 내부에만 나타납니다. 마케팅 표면은 대신 `button-primary`을 사용합니다.
**`button-secondary`** — 개요가 있는 고스트 CTA는 종종 이중 CTA 영웅 패턴의 기본 CTA와 쌍을 이룹니다.
- 배경 투명, 텍스트 ``, 테두리 `2px solid `, 타이포그래피 ``, 패딩 `12px 28px`, 둥근 ``.
**`button-ghost`** — 3차 CTA에 사용되는 더 조용한 윤곽의 변형입니다.
- 배경 투명, 텍스트 ``, 테두리 `2px solid rgba(10, 19, 23, 0.12)`, 타이포그래피 ``, 패딩 `10px 22px`, 둥근 ``.
**`button-pill-tab`** + **`button-pill-tab-active`** — 페이지 상단 카테고리 탐색 알약("안경/퀘스트/앱").
- 비활성: 배경 ``, 텍스트 ``, 테두리 `1px solid `, 패딩 `8px 16px`, 반올림 ``.
- 활성: 배경 ``, 텍스트 ``. 활성 상태에서는 테두리가 없습니다. 어두운 채우기가 테두리를 대체합니다.
**`button-icon-circular`** — 40×40px 원형 유틸리티 버튼(회전식 화살표, 공유, 즐겨찾기).
- 배경 ``, 아이콘 색상 ``, 반올림 ``.
카드 및 용기
**`card-product-feature`** — 제품 사진과 문구가 포함된 흰색 기능 카드(홈페이지 "스포츠를 위한 디자인", "고급. 내부 및 외부.").
- 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
_**`card-feature-photo`** — 크롬이 없는 가장자리 전체 사진 쇼케이스 타일(홈페이지 "처방전을 위해 제작" 풀 블리드 안경 카드).
- 배경 ``(모서리에서만 표시), 둥근 ``, 패딩 없음, 테두리 없음. 이미지가 카드를 채웁니다. 사본은 왼쪽 하단에 흰색으로 겹쳐져 있습니다.
**`card-promo-strip`** — 카피 + CTA가 포함된 어두운 전폭 프로모션 카드(홈페이지 "Meta Quest는 가상 현실의 마법을 가져옵니다" 와이드 스트립).
- 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.
**`card-icon-feature`** — 선 아이콘, 헤드라인 및 짧은 카피("2일 무료 배송", "30일 무료 반품", "걱정 없는 보증", "지금 구입하고 나중에 지불")가 포함된 3개 기능 타일.
- 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.
**`card-checkout-summary`** — 제목, 가격, 색상 선택기, '장바구니에 추가' 버튼이 포함된 PDP 오른쪽 레일 고정 요약입니다.
- 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid `, 그림자 `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px`.
_**`product-thumbnail`** — 색상/SKU 선택기 및 "구매한 사람" 행에 사용되는 정사각형 제품 이미지 셀.
- 배경 ``, 반올림 ``, 패딩 ``, 가로 세로 비율 `1 / 1`.
**`warranty-card`** — 보증 + 금융 제안에 대한 프로모션 콜아웃('1년 보증', 'Meta Horizon+').
- 배경 ``, 반올림 ``, 패딩 ``. 추가 혜택을 위해 파스텔 색조 변형을 사용합니다.
**`why-buy-tile`** — 하단 마케팅 영역의 4업 안심 타일 행.
- 배경 ``, 둥근 ``, 패딩 ` `, 테두리 `1px solid `. 제목은 ``, 본문은 ``.
입니다.
입력 및 양식
**`text-input`** — 표준 양식 필드(바닥글 이메일 구독, 지원 양식).
- 배경 ``, 텍스트 ``, 테두리 `1px solid `, 둥근 ``, 패딩 ``, 높이 44px.
**`text-input-focused`** — 활성화된 상태.
- 경계가 `2px solid `.
(으)로 전환됩니다.
**`text-input-error`** — 유효성 검사 오류 상태.
- 경계가 `1px solid `로 전환됩니다. `` ``.
의 아래 오류 라벨
**`search-pill`** — 상단 탐색 검색 필드.
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 40px.
**`radio-option`** + **`radio-option-selected`** — 구성기 옵션 카드(스토리지, 색상 변형, 배송 옵션).
- 비활성: 배경 ``, 반올림 ``, 패딩 ``, 테두리 `1px solid rgba(10, 19, 23, 0.12)`.
- 선택됨: 테두리가 `2px solid `(진한 코발트)로 전환됩니다. 코발트 테마가 양식 제어 선택 신호에 지속됩니다.
**`color-swatch-circle`** — 원형 색상/재료 선택기(Ray-Ban 프레임 마감, 유리 색상).
- 32px 직경, ``, `2px solid ` 견본 자체 채우기 색상 위에 선택 항목에 대한 링
배지 및 상태
**`badge-promo-yellow`** — 기간 한정 제안 칩("기간 한정", "세일").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-attention`** — 중간 우선순위 상태 표시기("거의 없음", "빠른 판매").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-success`** — 긍정 상태("재고 있음", "확인됨", "무료 배송").
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`badge-critical`** — 긴급/파괴 라벨("품절", "단종", 오류 칩).
- 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.
**`promo-banner`** — 상단 탐색 메뉴 위의 끈적끈적한 전폭 프로모션 스트립("1위 AI 안경 판매 25% 할인").
- 배경 ``(또는 노란색 프로모션 변형의 경우 ``), 텍스트 ``(또는 노란색의 ``), 타이포그래피 ``, 패딩 ` `. 한 줄짜리 제안 사본과 인라인 CTA 링크를 제공합니다.
탐색
**상단 탐색(데스크톱)** — 카테고리 알약 탭, 검색, 계정, 장바구니가 있는 흰색 고정 막대
- 배경 ``, 높이 ~64픽셀(하단 `1px solid `.
)
- 왼쪽: 메타 워드마크 로고(61×14px). 가운데: 알약 탭 카테고리 탐색 오른쪽: 검색 알약 + 원형 아이콘 버튼(계정, 장바구니).
**상단 탐색(모바일)** — 로고 + 햄버거 + 장바구니 아이콘으로 압축되었습니다. 알약 탭 탐색은 768px 아래의 전체 화면 서랍으로 미끄러집니다.
**프로모션 배너** — 시간 제한이 있는 제안을 위해 탐색 위의 전체 너비 스트립입니다.
- 배경 `` 또는 ``(노란색), 텍스트 `` 또는 ``, 타이포그래피 ``, 패딩 ` `. 한 줄짜리 제안 문구 + 인라인 링크를 제공합니다.
**탐색경로(PDP)** — 제품 영웅 위의 인라인 경로("안경 › Ray-Ban Meta › Skyler(Gen 2)").
- 타이포그래피 ``, ``의 구분선, ``의 활성 리프, ``의 상위 링크.
서명 구성요소
_**`hero-band-marketing`** — 오버레이된 카피 + 듀얼 CTA 쌍을 갖춘 풀 블리드 사진 영웅.
- 어두운 배경이나 사진 배경에서 가장자리까지 제품을 촬영합니다. `` 흰색의 오버레이 사본. 제목 아래: ``, 그 다음 `button-primary` + `button-secondary` 쌍의 한 줄 자막.
**`product-gallery-pdp`** — 제품 세부 정보 페이지 메인 히어로: 왼쪽의 4업 수직 썸네일 스트립, 대형 제품 이미지 중앙, 오른쪽 고정 구매 레일.
- 썸네일: 80×80px, ``, `` 배경, 1px `` 테두리(활성 테두리가 ``로 전환됨).
- 기본 이미지 영역: 데스크톱에서 ~720×720픽셀, `` 반올림, 사진 표면.
- 고정 레일은 `card-checkout-summary`을 사용합니다.
**`color-sku-picker-row`** — 이름과 가격이 각각 아래에 있는 정사각형 제품 변형의 6업 그리드.
- 타일 배경 ``, 둥근 ``, 이미지 패딩 ``. 활성 타일 테두리가 `2px solid `로 전환됩니다. 타일 아래: ``의 변형 이름 및 ``.
의 가격
**`feature-icon-row`** — 4가지 보장 혜택("2일 무료 배송", "30일 무료 반품", "걱정 없는 보증", "지금 구매하고 나중에 결제").
- 4열 그리드, 각 셀은 상단에 32px 라인 아이콘이 있는 `card-icon-feature` 크롬, 헤드라인 ``, 본문 ``.
을 사용합니다.
**`faq-accordion`** — 확장 가능한 Q&A 항목의 수직 스택.
- 각 항목은 `faq-accordion-item` 크롬을 사용합니다. 질문은 왼쪽 ``, 오른쪽 갈매기형 아이콘(``, 20px)입니다. 확장된 답변은 아래 `` 텍스트에 `` 상단 패딩
으로 표시됩니다.
**`tech-specs-table`** — 제품 사양에 대한 2열 키/값 테이블.
- 행 레이아웃: 왼쪽 사양 레이블(`` ``), 오른쪽 사양 값(`` ``). 행 구분 기호 `1px solid `. 각 사양 그룹 위 ``의 섹션 헤더.
**`testimonial-customer-card`** — 저자 + 인용문 + 사진이 포함된 작은 편집 카드.
- 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `. 아바타 원 40px, 작성자 이름 ``, 인용문 ``.
**`footer-region`** — 조밀한 다중 열 사이트 바닥글.
- 배경 ``, 상단 테두리 `1px solid `, 패딩 ` `. `` ``의 섹션 제목과 `` ``의 링크 목록이 있는 6개의 열 그룹입니다. 맨 아래 행에는 `` ``.
의 언어 선택기, 지역 선택기, 법적 링크가 포함되어 있습니다.
해야 할 일과 하지 말아야 할 일
하라
- 지금 구매 CTA용으로만 ``(코발트)을 예약하세요. 시각적 가중치는 마케팅 페이지에 표시되지 않기 때문에 의미가 있습니다.
- 마케팅 노출 기본 CTA에는 ``(검은색)을 사용하세요. 보조 작업을 위해 `` 고스트 윤곽선과 페어링합니다.
- 모든 버튼, 모든 카테고리 알약, 모든 배지, 모든 칩에 ``을 적용하세요. 버튼은 Meta 시스템에서 절대 제곱되지 않습니다.
- 사진 제품 카드에 ``을 적용하고 아이콘 기능 타일에 ``을 적용하여 가시적인 카드 계층 구조 대비를 유지합니다.
- 낙관적 VF 방향에 대해 `ss01, ss02`을 함께 켭니다. 다른 스타일 없이 하나의 스타일 세트만 사용하지 마세요.
- 사설 부제목에 300중량 ``을 사용하세요. 이는 500중량 디스플레이에 대해 브랜드의 시그니처 시각적 리듬을 만들어냅니다.
하지 마세요
- 마케팅 표면 기본 버튼에 ``(코발트)을 사용하지 마십시오. 이는 Meta의 브랜드 역사 포지셔닝인 흰색 바탕에 검은색 CTA 마케팅과 충돌합니다.
- 코발트 + Oculus 보라색 이외의 추가 강조 색상을 도입하지 마세요. 하드웨어 브랜드는 제품 사진 외부에서 의도적으로 단색을 사용합니다.
- `` 아래 알약 버튼 모서리를 부드럽게 하지 마세요. 알약은 브랜드 시그니처입니다.
- 반올림 없이 기능 카드를 실행하지 마세요 — ``는 사진 표면의 최소값입니다.
- 줄 높이를 1.50 미만으로 줄이지 마세요. `` 줄 높이를 1.50 이하로 줄이세요. 음수 문자 간격으로 인해 이미 측정항목이 좁아지고 더 이상 압축하면 가독성이 떨어집니다.
- 마케팅 카드에 무거운 그림자를 적용하지 마세요. 상승은 마케팅 활동이 아닌 상거래 흐름의 신호입니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 모바일(소형) | _< 480px | Single column. Hero text drops to `` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |
| 모바일(대형) | 480 – 767px | 작은 것과 동일하지만 기능 타일은 투업을 렌더링합니다. |_
| 태블릿 | 768 – 1023px | 2열 특성 그리드. 알약 탭 탐색이 반환됩니다. PDP 갤러리 + 구매 레일이 압축된 비율(~60/40)로 나란히 렌더링됩니다. |_
| 데스크탑 | 1024 – 1359px | 전체 3개 및 4개 기능 그리드; 전체 알약 탭 카테고리 탐색; 표준 58/42 분할의 PDP. |_
| 와이드 데스크탑 | ≥ 1360px | 더 넓은 영웅 홈통과 더 큰 제품 사진을 갖춘 데스크탑과 동일합니다. |_
터치 대상
- 알약 버튼은 40~44px 유효 높이로 렌더링됩니다(14px 버튼 텍스트 + `14px 30px` 패딩 사용). WCAG AAA 44px 바닥 위.
- 원형 아이콘 버튼의 크기는 40×40픽셀 — AA 층에 있습니다. 재정의를 통해 모바일에서 44×44px로 증가합니다.
- 색상 견본 원은 32×32픽셀입니다. AAA를 달성하기 위해 견본은 주변에 12px의 명확한 히트 영역을 전달합니다(유효 히트 타겟 ~56px).
- 양식 입력은 기본 버튼 높이에 맞게 44픽셀 높이로 렌더링됩니다.
축소 전략
- **프로모션 배너**는 모든 중단점에서 전체 너비를 유지합니다. 소형 모바일에서는 줄임표로 자르고 인라인 링크 어포던스를 유지합니다.
- **768px 미만의 알약 탭 탐색**은 햄버거 서랍으로 축소됩니다. 활성 탭은 닫힌 탐색 내부의 레이블로 렌더링됩니다.
- **PDP 레이아웃**: < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
의 구매 요약 위에 갤러리 스택이 있습니다.
- **피처 그리드**(3-up, 4-up)는 768~1023px에서 2-up, < 768px. Card padding compresses from `` to `` at the 1-up breakpoint.
에서 1-up으로 축소됩니다.
- **히어로 타이포그래피**: ``(64px)는 < 768px and `` (24px) at < 480px.
에서 ``(36px)로 떨어집니다.
- **바닥글**: 6열 데스크톱 레이아웃은 태블릿에서 2열로 리플로우되고 모바일에서는 아코디언 접힌 그룹으로 리플로우됩니다.
이미지 동작
- 제품 사진은 1:1(썸네일, 색상 선택기), 4:3(PDP 갤러리), 16:9(홈페이지 프로모션 스트립) 비율을 사용합니다.
- 영웅 사진은 `` 모서리로 풀 블리드됩니다. 스크롤 없이 볼 수 있는 부분 아래에 지연 로드됨
- 제품 변형 이미지는 모든 중단점에서 `` 미리보기 이미지를 유지하며 모바일에서는 전체 너비로 표시되지 않습니다.
반복 가이드
1. 한 번에 하나의 구성 요소에만 집중하세요. 시스템은 내부 일관성이 높습니다. 정밀도가 낮으면 복합적인 결과가 나옵니다.
2. 구성요소 이름 및 토큰을 직접 참조하십시오(``, `-pressed`, ``). 다른 말로 표현하지 마세요.
3. 손상된 참조, 대비 문제, 고아 토큰을 찾으려면 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행하세요.
4. 새 변형을 별도의 `components:` 항목(`-pressed`, `-disabled`, `-focused`)으로 추가합니다. 산문 안에 묻어두지 마세요.
5. 기본값은 본문의 경우 ``이고 강조의 경우 ``입니다. 헤드라인은 `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
을 통해 단계적으로 내려갑니다.
6. ``(코발트)을 부족하게 유지하세요. 뷰포트의 지금 구매 흐름 외부에 나타나는 경우 표면이 실제로 결제 패널처럼 보여야 하는지 물어보세요.
7. 알약 모양의 버튼(``)은 항상; 사각형 버튼은 이 디자인 언어에서 "타사 위젯"을 나타내므로 모든 작업 표면에서 필터링되어야 합니다.
알려진 격차
- 버튼이 아닌 양식 컨트롤(토글, 다중 선택)에 대한 선택/선택된 상태가 캡처된 표면에 표시되지 않았습니다. `radio-option-selected`의 흰색 바탕에 코발트 패턴을 따라 구현합니다.
- 애니메이션/전환 타이밍은 추출되지 않습니다. 기본 표면 전환에는 150~250ms Ease-Out을 권장하고 아코디언 확장/축소에는 300ms EEASY-OUT을 권장합니다.
- 캔버스, 표면, 잉크 및 가는선에 대한 특정 다크 모드 토큰 값은 정의되지 않습니다. 브랜드는 이러한 상거래 페이지에 게시된 다크 모드 토큰 세트를 표시하지 않았습니다.
- 액세서리 카드 내부의 파스텔 장식 색조(소프트 핑크, 아이스 블루, 민트)는 시각적으로 표시되지만 형식화되지는 않습니다. 시스템 색상이 아닌 사진 콘텐츠로 처리됩니다.
概要
Meta のコマース サーフェス (ホームページ、クエスト コンフィギュレーター、レイバン製品の詳細、処方箋ページ) は、自信に満ちたハードウェア マーチャンダイザーとして読み取れます。ブランドの主張は写真第一です。大きく、フルブリードの製品画像がアバブザフォールドの領域を占め、空白スペースとタイトなタイポグラフィーの階層が残りを担っています。このシステムには、認識可能なデュアル CTA パターンがあり、マーケティング画面上の黒い錠剤の形のプライマリが、購入フロー内で飽和したコバルト ブルー ({colors.primary}) に変化し、セカンダリ ナビゲーション用の輪郭を描かれたゴースト ボタンと組み合わされています。
_Optimistic VF — Meta の可変表示面 — は、64 ピクセルのヒーロー ディスプレイから 12 ピクセルのキャプションに至るまで、システム全体を固定します。顔の `ss01` および `ss02` のスタイル セットは、すべての見出しの役割にわたってオンになっており、ブランドのややヒューマニストで親しみやすい幾何学的な特徴に貢献しています。 768 ピクセル未満では、システムはきれいに崩壊します。ヒーローはスタックされ、ピル ナビゲーションはハンバーガーになり、スリーアップ機能グリッドは 1 つの列に平坦になり、製品コンフィギュレーターは右側のレールの概要を下部の粘着バーにドロップします。
**主な特徴:**
- 真っ白なキャンバス ({colors.canvas}) に、__CODEBCK_873___ (32 ピクセル) コーナーをソフト化したフルブリードの製品写真がショーケースのタイルに表示されています
- 2 層のプライマリ ボタン システム: マーケティング CTA は {colors.ink-button} 錠剤を使用します。コマース CTA は、今すぐ購入パネル内で {colors.primary} コバルト錠剤を使用しています
- 一貫した__CODEBCK_874___ OpenType機能
を備えたユニバーサルディスプレイ+ボディフェイスとしてのオプティミスティックVF
- 錠剤型ボタン ({rounded.full}) および主要な幾何学的シグネチャとしての ``/`` カード
- 彩度の高いプロモーション バナー (黄色 {colors.warning}、濃い {colors.ink-deep}) は、時間制限のあるオファーのためにナビゲーションの上に控えめに使用されます
- カードクロムなしの写真機能カード (境界線なし、影なし) — 製品画像は表面処理です
色
> ソース ページ:meta.com/ (ホームページ)、/ai-glasses/ray-ban-meta-skyler-gen-2/ (PDP)、/quest/quest-3s/buy-now/ (コンフィギュレーター)、/ai-glasses/prescription/ (レンズのアップセル)。トークンの適用範囲は 4 ページすべてで同一でした。デザイン システムは完全に統一されています。
ブランドとアクセント
- **コバルト プライマリ** ({colors.primary}): 今すぐ購入できる CTA カラー。 コマース フロー内のすべての [カートに追加]、[設定]、[予約注文] ボタンと右側のレールの購入パネルで使用されます。
- **ディープ コバルト** ({colors.primary-deep}): コバルト原色のプレス状態で表面が暗い変種。アクティブなリンクの色も。
- **ソフト コバルト** ({colors.primary-soft}): 情報吹き出し用の半透明の背景の色合い (``、15% アルファ)。
- **Facebook ブルー** ({colors.fb-blue}): 選択されたラジオ/チェックボックスの状態とインライン フォーム コントロールのアクティブ化色。
- **メタ リンク ブルー** ({colors.meta-link}): 従来のナビゲーションとフッター リンク アフォーダンス用に予約されています。
- **Oculus Purple** ({colors.oculus-purple}): VR 製品のアクセント — カテゴリを強調するために Quest ブランドの表面内で使用されます。
サーフェス
- **キャンバス ホワイト** ({colors.canvas}): ページの背景と主要なカード表面。
- _**ソフト クラウド** ({colors.surface-soft}): 微妙な製品サムネイルと保証カードの背景。検索ピルの休止状態も同様です。
- **ヘアライン グレー** ({colors.hairline}): 1 ピクセルの入力境界線とフォーム コントロールの分割線。
- **ヘアライン ソフト** ({colors.hairline-soft}): カード、フッター区切り、セクション区切りで使用される静かな分割線。
テキスト
- **ディープ インク** ({colors.ink-deep}): 明るい表面上の主要な見出しと本文テキスト。
- **インク** ({colors.ink}): 標準本文および二次見出しテキスト。
- **Charcoal** ({colors.charcoal}): 三次本文テキストとフォーム ボタン ラベル。
- **スレート** ({colors.slate}): セクションヘッダーのコピーとサポートされるマイクロコピー。
- **スチール** ({colors.steel}): キャプション テキストとフッター リンクの階層が静かになりました。
- **ストーン** ({colors.stone}): ラベルが無効になっているか、強調されていません。
セマンティック
- **成功** ({colors.success}): 「在庫あり」、「返品無料」の確認。
- **注意** ({colors.attention}): 中優先度のアラートと時間指定のコールアウト。
- **警告** ({colors.warning}): プロモーション バナー (「25% オフ…」) および期間限定タグ。
- **重大** ({colors.critical}): 検証エラー、破壊的なフィードバック。
- **重大な強力** ({colors.critical-strong}): フォーム入力エラー境界線とインライン エラー ラベル。
タイポグラフィ
フォント ファミリー
**Optimistic VF** は、Meta 独自の可変表示面です。フォールバック: Montserrat、Helvetica、Arial、Noto Sans。変数軸は、300 (明るい見出し-md、「楽しみにしてください」などの編集上のイントロ見出しに使用) から 500 (表示、ヒーロー、見出し-sm) まで、最大 700 (字幕、本文強調、ボタン ラベル) まで続きます。 スタイル セット `ss01` と `ss02` は、すべての見出しの役割にわたってオンになっています。これらは、ジオメトリを柔らかくし、文字にわずかに人間味のある息づかいを与えます。
セカンダリ Helvetica フォールバック チェーンは、スペック シート内の技術的なマイクロコピー (12 ピクセル) とフッターの詳細な印刷に使用されます。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 |オープンタイプ | |
を使用します
|---|---|---|---|---|---|---|
| `` | 64ピクセル | 500 | 1.16 | 0 | ss01、ss02 |ホームページのヒーロー (「25% オフ…」、カテゴリ オープナー) |
| `` | 48ピクセル | 500 | 1.17 | 0 | ss01、ss02 |セクションオープナー表示 (「処方箋用に作られました。 快適さを追求して作られています。") |
| `` | 36ピクセル | 500 | 1.28 | 0 | ss01、ss02 |サブセクションの見出し (「メタから購入する理由」、「技術仕様」) |
| `` | 28ピクセル | 300 | 1.21 | 0 | ss01、ss02 |編集用小見出しの軽量化 (「今後の展望」、「処方箋用に構築」) |
| `` | 24ピクセル | 500 | 1.25 | 0 | ss01、ss02 |カード タイトル、機能タイル ヘッダー |
| `` | 18ピクセル | 700 | 1.44 | 0 | — |太字の吹き出し、よくある質問のタイトル |
| `` | 18ピクセル | 400 | 1.44 | 0 | — |本文リードと長めの字幕 |
| `` | 16ピクセル | 400 | 1.50 | -0.16ピクセル | — |主要な本文テキスト |
| `` | 16ピクセル | 700 | 1.50 | -0.16ピクセル | — |本文の強調とリンクMD |
| `` | 14ピクセル | 400 | 1.43 | -0.14ピクセル | — |セカンダリ本文、ヘルパー テキスト |
| `` | 14ピクセル | 700 | 1.43 | -0.14ピクセル | — |ピルタブのラベル、フッターの見出し |
| `` | 12ピクセル | 700 | 1.33 | 0 | — |バッジのラベル、タイムスタンプ |
| `` | 12ピクセル | 400 | 1.33 | 0 | — |フッターの細字、法定マイクロコピー |
| `` | 14ピクセル | 700 | 1.43 | -0.14ピクセル | — |ピル ボタンのラベル |
| `` | 16ピクセル | 700 | 1.50 | -0.16ピクセル | — |インライン ナビゲーション リンク |
原則
- 本文の役割 (`-0.14px` から `-0.16px`) の負の文字間隔により、タイプが部分的に狭くなります — Optimistic VF は、このぴったりとした、しかし凝縮されていない設定用に設計されました。
- 編集の小見出しは 300 のウェイトを使用して、500 のウェイトの表示見出しと 400 のウェイトの本文の間に視覚的な休息を導入し、3 層の視覚的なリズムを作成します。
- すべての見出しには__CODEBCK_897___ スタイル セットがまとめられています。デザインでは、これらをペアになった代替パッケージとして扱います。一方が他方を欠くことはありません。
- ボタン、ピルタブ、およびフッター見出しは__CODEBCK_898___ (14px / 700 / -0.14px) を共有し、インタラクティブな要素間に緊密な視覚的関係を作成します。
レイアウト
間隔システム
- **基本単位**: 主要な主ステップとして 8 ピクセルで 4 ピクセルずつ増分します。
- _**トークン**: `` (4px) · `` (8px) · `` (10px) · `` (12px) · `` (16px) · `` (20px) · `` (24 ピクセル) · `` (32 ピクセル) · `` (40 ピクセル) · `` (48 ピクセル) · `` (64 ピクセル) · `` (80 ピクセル) · `` (120 ピクセル).
- **セクションのリズム**: マーケティング セクションは `` (80 ピクセル) で区切られます。製品詳細セクションは `` (64px) に圧縮されます。 FAQ スタックは__CODEBCK_914___ (32px).
までさらに強化されます。
- **カード内部パディング**: 標準 `` (32 ピクセル);アイコン機能タイルは `` (24px) に圧縮されます。プロモーション ストリップ カードは、ヒーローの存在を示すために `` (64 ピクセル) に拡張されます。
グリッドとコンテナ
- マーケティング ページの最大幅は約 1280 ピクセルで、32 ～ 48 ピクセルの余白があります。
- PDP レイアウトは 2 列分割を使用します: ヒーロー ギャラリー (幅約 58%) + スティッキー購入レール (レール上に `max-width: 380px` を含む約 42%)。
- スリーアップ フィーチャ グリッド (「メタから購入する理由」) は 24 ピクセルの列ギャップを使用します。 6 つの製品サムネイル行 (カラー/SKU ピッカー) は 12 ピクセルのギャップを使用します。
ホワイトスペースの哲学
ホワイトスペースは商品写真第一です。 ヒーロー セクションでは、製品画像がビューポートの高さの 50 ～ 70% になります。コピーには、上下の `` から `` ブロック内で呼吸するために酸素が与えられます。コンフィギュレーター内では空白が狭まり、今すぐ購入パネルには情報がぎっしりと詰まっており、オプション グループ間には `` から `` のリズムが存在します。
標高と深さ
システムはほぼフラットに動作します。標高は 2 つのインタラクション レイヤー用に予約されています:
|レベル |治療 | |
を使用します
|---|---|---|
| 0 (フラット) |影はありません。 `` 丸め + `` 境界線 |デフォルトの製品カード、購入理由タイル |
| 1 (微妙) | `rgba(0, 0, 0, 0.2) 1px 1px 0px 0px` |ピルタブ アクティベーション インジケーター |
| 2 (粘着パネル) | `rgba(20, 22, 26, 0.3) 0px 1px 4px 0px` | PDP 右レールの購入概要、スティッキー モバイル チェックアウト バー |
装飾の深さ_
- 奥行きのある写真: `` カード上のフルブリードの製品画像は、影のない雰囲気のあるレイヤーを作成します。
- 半透明のオーバーレイ (`rgba(255, 255, 255, 0.1)` ～ `rgba(10, 19, 23, 0.12)`) はダーク ヒーローの写真をカバーし、オーバーレイされたテキストの可読性を高めます。
- アクセサリー カード内の装飾的なパステルの色合い (ソフト ピンク、アイスブルー、ミント) は、製品の切り抜きの背後に一時的に表示されますが、システム トークンとして正式化されていません (写真コンテンツとして扱われます)。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 2ピクセル |インライン チェックボックス マーク、細かい UI コーナー |
| `` | 4ピクセル |タグ、マイクロコントロール |
| `` | 6ピクセル |正方形のサムネイルの丸め |
| `` | 8ピクセル |フォーム入力、ラジオ オプション コンテナ |
| `` | 16ピクセル |標準機能カード、FAQ アコーディオン項目 |
| `` | 24ピクセル |保証/付属品タイル、ゴーストスタイルのアクションカード |
| `` | 32ピクセル |写真入りのカード、大きなプロモーション ストリップ |
| `` | 40ピクセル |アクセサリ ヒーロー パネル、「処方箋用に構築」カード |
| `` | 100ピクセル |ピル ボタン、タブ チップ、バッジ |
| `` | 50% |色見本、円形のアイコン ボタン |
写真の幾何学
- プロダクト ヒーローの写真は、長方形よりも__CODEBCK_940___ (32 ピクセル) フレームに収まることが多いです。
- 色/材質見本は完全な円です (``、直径 32 ピクセル、選択した場合は 2 ピクセルの白い境界線リング)。
- 正方形の商品サムネイル (`aspect-ratio: 1/1`) は `` の四捨五入を使用します。
- 6 つの「カラーと SKU」ピッカー行は、__CODEBCK_944___ (8 ピクセル) コーナーを持つ 1:1 アスペクト タイルを使用します。これは、選択グリッド コンテキストとショーケース コンテキストを区別するために、ヒーローの写真フレームよりもタイトです。
コンポーネント
> ホバー禁止ポリシーにより、以下のコンポーネントのホバー状態は文書化されません。 デフォルトおよび押下/アクティブ状態のみ。
ボタン
**`button-primary`** — マーケティング サーフェス (「ショップ」、「予約注文」) 用の黒い錠剤のプライマリ CTA。
- 背景__CODEBCK_946___、テキスト__CODEBCK_947___、タイポグラフィ__CODEBCK_948___、パディング__CODEBCK_949___、丸め__CODEBCK_950___.
- 押された状態__CODEBCK_951___は背景を__CODEBCK_952___に反転します。
- 無効状態__CODEBCK_953___は__CODEBCK_954___背景を使用します。
**`button-buy-cta`** — コマース フロー用のコバルト ピルのプライマリ CTA (「カートに追加」、「構成」、「続行」)。
- 背景__CODEBCK_956___、テキスト__CODEBCK_957___、タイポグラフィ__CODEBCK_958___、パディング__CODEBCK_959___、丸め__CODEBCK_960___.
- 押された状態__CODEBCK_961___は__CODEBCK_962___の背景を深めます。
- _このバリアントは、今すぐ購入コンフィギュレーターおよび PDP 購入レール内にのみ表示されます。マーケティング サーフェスでは、代わりに `button-primary` を使用します。
**`button-secondary`** — アウトライン付きゴースト CTA。デュアル CTA ヒーロー パターンではプライマリとペアになることがよくあります。
- 背景透明、テキスト__CODEBCK_965___、境界線__CODEBCK_966___、タイポグラフィ__CODEBCK_967___、パディング__CODEBCK_968___、角丸__CODEBCK_969___.
**`button-ghost`** — 三次 CTA に使用される、より静かなアウトラインのバリアント。
- 背景透明、テキスト__CODEBCK_971___、境界線__CODEBCK_972___、タイポグラフィ__CODEBCK_973___、パディング__CODEBCK_974___、角丸__CODEBCK_975___.
_**`button-pill-tab`** + **`button-pill-tab-active`** — ページのトップのカテゴリ ナビゲーション ピル (「メガネ / クエスト / アプリ」)。
- 非アクティブ: 背景__CODEBCK_978___、テキスト__CODEBCK_979___、境界線__CODEBCK_980___、パディング__CODEBCK_981___、丸め__CODEBCK_982___.
- アクティブ: 背景__CODEBCK_983___、テキスト__CODEBCK_984___。アクティブな状態では境界線がありません。濃い色の塗りつぶしが代わりに表示されます。
_**`button-icon-circular`** — 40×40 ピクセルの円形ユーティリティ ボタン (カルーセル矢印、共有、お気に入り)。
- 背景__CODEBCK_986___、アイコン色__CODEBCK_987___、角丸__CODEBCK_988___.
カードとコンテナ
**`card-product-feature`** — 製品の写真とコピーが記載された白い特徴カード (ホームページ「スポーツ向けに設計」、「先進的。内も外も。」)。
- 背景__CODEBCK_990___、角丸__CODEBCK_991___、パディング__CODEBCK_992___、境界線__CODEBCK_993___.
**`card-feature-photo`** — クロムを使用しない端から端までの写真ショーケース タイル (ホームページの「処方箋用に作られた」フルブリード メガネ カード)。
- 背景__CODEBCK_995___ (角でのみ表示)、角丸__CODEBCK_996___、パディングなし、境界線なし。 画像がカード全体に表示されます。コピーは左下に白でオーバーレイされます。
**`card-promo-strip`** — コピーと CTA が埋め込まれたダーク全幅プロモーション カード (ホームページ「メタ クエストが仮想現実の魔法をもたらす」ワイド ストリップ)。
- 背景__CODEBCK_998___、テキスト__CODEBCK_999___、丸め__CODEBCK_1000___、パディング__CODEBCK_1001___.
_**`card-icon-feature`** — 線アイコン、見出し、短いコピーを含む 3 つの機能タイル (「2 日以内の無料配達」、「30 日間の無料返品」、「安心保証」、「今すぐ購入、後で支払い」)。
- 背景__CODEBCK_1003___、角丸__CODEBCK_1004___、パディング__CODEBCK_1005___、境界線__CODEBCK_1006___.
**`card-checkout-summary`** — タイトル、価格、カラー ピッカー、[カートに追加] ボタンを含む PDP 右レールの付箋概要。
- 背景__CODEBCK_1008___、角丸__CODEBCK_1009___、パディング__CODEBCK_1010___、境界線__CODEBCK_1011___、影__CODEBCK_1012___.
**`product-thumbnail`** — カラー/SKU ピッカーと「こんな商品も購入しています」行で使用される正方形の商品画像セル。
- 背景__CODEBCK_1014___、丸め__CODEBCK_1015___、パディング__CODEBCK_1016___、アスペクト比__CODEBCK_1017___.
**`warranty-card`** — 保証 + ファイナンス オファー (「1 年保証」、「Meta Horizon+」) のプロモーション コールアウト。
- 背景__CODEBCK_1019___、丸め__CODEBCK_1020___、パディング__CODEBCK_1021___。追加特典としてパステルカラーのバリエーションを使用します。
**`why-buy-tile`** — 下部マーケティング ゾーンの 4 アップの安心タイル行。
- 背景__CODEBCK_1023___、角丸__CODEBCK_1024___、パディング__CODEBCK_1025___、境界線__CODEBCK_1026___。 見出しは__CODEBCK_1027___、本文は__CODEBCK_1028___.
入力とフォーム
**`text-input`** — 標準フォーム フィールド (フッター メール購読、サポート フォーム)。
- 背景__CODEBCK_1030___、テキスト__CODEBCK_1031___、境界線__CODEBCK_1032___、角丸__CODEBCK_1033___、パディング__CODEBCK_1034___、高さ44ピクセル
**`text-input-focused`** — アクティブ化された状態。
- 境界線が__CODEBCK_1036___に切り替わります。
**`text-input-error`** — 検証エラー状態。
- 境界線が__CODEBCK_1038___に切り替わります。 `` ``.
の下のエラー ラベル
**`search-pill`** — トップナビゲーションの検索フィールド。
- 背景__CODEBCK_1042___、テキスト__CODEBCK_1043___、タイポグラフィ__CODEBCK_1044___、角丸__CODEBCK_1045___、高さ40ピクセル
**`radio-option`** + **`radio-option-selected`** — コンフィギュレーター オプション カード (ストレージ、カラー バリエーション、配送オプション)。
- 非アクティブ: 背景__CODEBCK_1048___、丸め__CODEBCK_1049___、パディング__CODEBCK_1050___、境界線__CODEBCK_1051___.
- 選択: 境界線が `2px solid ` (濃いコバルト) に切り替わります — コバルトのテーマはフォーム コントロールの選択信号に残ります。
_**`color-swatch-circle`** — ラウンドカラー/マテリアルピッカー (Ray-Ban フレーム仕上げ、ガラスカラー)。
- 32px の直径、__CODEBCK_1054___、__CODEBCK_1055___ は、スウォッチ独自の塗りつぶしの色の上に選択したときにリングされます。
バッジとステータス
**`badge-promo-yellow`** — 期間限定のオファー チップ (「期間限定」、「セール」)。
- 背景__CODEBCK_1057___、テキスト__CODEBCK_1058___、タイポグラフィ__CODEBCK_1059___、角丸__CODEBCK_1060___、パディング__CODEBCK_1061___.
**`badge-attention`** — 中優先度のステータス インジケーター (「もうすぐなくなります」、「すぐに売れます」)。
- 背景__CODEBCK_1063___、テキスト__CODEBCK_1064___、タイポグラフィ__CODEBCK_1065___、角丸__CODEBCK_1066___、パディング__CODEBCK_1067___.
**`badge-success`** — 肯定的なステータス (「在庫あり」、「確認済み」、「送料無料」)。
- 背景__CODEBCK_1069___、テキスト__CODEBCK_1070___、タイポグラフィ__CODEBCK_1071___、角丸__CODEBCK_1072___、パディング__CODEBCK_1073___.
_**`badge-critical`** — 緊急/破壊的なラベル (「在庫切れ」、「製造中止」、エラー チップ)。
- 背景__CODEBCK_1075___、テキスト__CODEBCK_1076___、タイポグラフィ__CODEBCK_1077___、角丸__CODEBCK_1078___、パディング__CODEBCK_1079___.
**`promo-banner`** — 上部ナビゲーションの上に貼り付けられた全幅のプロモーション ストリップ (「売上ナンバー 1 の AI メガネが 25% オフ」)。
- 背景 `` (または黄色のプロモーション バリエーションの場合は ``)、テキスト `` (または黄色の ``)、タイポグラフィ ``、パディング ` `。 1 行のオファー コピーとインライン CTA リンクを掲載します。
ナビゲーション
**トップ ナビゲーション (デスクトップ)** — ピルタブ、検索、アカウント、カートのカテゴリを含むスティッキーな白いバー。
- 背景__CODEBCK_1087___、高さ約64ピクセル（下部含む）__CODEBCK_1088___.
- 左: メタ ワードマーク ロゴ (61×14px)。中央: 錠剤カテゴリのナビゲーション。右: 検索ピル + 円形のアイコン ボタン (アカウント、カート)。
**トップ ナビゲーション (モバイル)** — ロゴ + ハンバーガー + カート アイコンに圧縮されます。ピルタブ ナビゲーションは、768 ピクセル未満の全画面ドロワーにスライドします。
**プロモーション バナー** — ナビゲーションの上にある期間限定のオファーの全幅ストリップ。
- 背景__CODEBCK_1089___または__CODEBCK_1090___ (黄色)、テキスト__CODEBCK_1091___または__CODEBCK_1092___、タイポグラフィ__CODEBCK_1093___、パディング__CODEBCK_1094___。 1 行のオファー コピーとインライン リンクを掲載します。
**ブレッドクラム (PDP)** — 製品ヒーローの上のインライン パス (「メガネ › Ray-Ban メタ › Skyler (Gen 2)」)。
- タイポグラフィ__CODEBCK_1095___、区切りドット__CODEBCK_1096___、アクティブリーフ__CODEBCK_1097___、親リンク__CODEBCK_1098___。
署名コンポーネント
**`hero-band-marketing`** — オーバーレイされたコピーとデュアル CTA ペアを備えたフルブリード写真のヒーロー。
- 暗い背景または写真の背景での端から端までの製品写真。 `` 白のオーバーレイ コピー。タイトルの下: `` の後に `button-primary` + `button-secondary` のペアで 1 行のサブタイトル。
**`product-gallery-pdp`** — 製品詳細ページのメイン ヒーロー: 左側に 4 アップの垂直サムネイル ストリップ、大きな製品画像中央、右側に粘着購入レール。
- サムネイル: 80×80px、__CODEBCK_1105___、__CODEBCK_1106___ 背景、1 ピクセル `` 境界線 (アクティブな境界線は `` に切り替わります)。
- メイン画像領域: デスクトップ上で約 720×720 ピクセル、__CODEBCK_1109___ 丸め、写真面。
- スティッキー レールは__CODEBCK_1110___を使用します。
**`color-sku-picker-row`** — それぞれの下に名前と価格が記載された正方形の商品バリエーションの 6 分割グリッド。
- タイル背景__CODEBCK_1112___、丸みを帯びた__CODEBCK_1113___、埋め込まれた画像__CODEBCK_1114___。アクティブなタイルの境界線が `2px solid ` に切り替わります。タイルの下: バリアント名 (__CODEBCK_1116___)、価格 (__CODEBCK_1117___)。
_**`feature-icon-row`** — 4 つの安心特典 (「2 日以内の無料配達」、「30 日間の無料返品」、「安心保証」、「今すぐ購入、後払い」)。
- 4 列グリッド、各セルは上部に 32 ピクセルの線アイコンが付いた `card-icon-feature` クロムを使用、見出し ``、本文 ``.
**`faq-accordion`** — 展開可能な Q&A アイテムの垂直スタック。
- 各アイテムは__CODEBCK_1123___ クロムを使用しています。左が__CODEBCK_1124___の質問、右がシェブロンアイコン(``、20ピクセル)です。 展開された回答は、__CODEBCK_1127___ 上部のパディングを使用して、__CODEBCK_1126___ テキストの下にドロップされます。
**`tech-specs-table`** — 製品仕様の 2 列のキー/値テーブル。
- 行レイアウト: 仕様ラベル (`` ``) 左、仕様値 (`` ``)。行区切り文字__CODEBCK_1133___。各仕様グループの上の `` のセクション ヘッダー。
**`testimonial-customer-card`** — 著者、引用、写真を含む小さな編集カード。
- 背景__CODEBCK_1136___、角丸__CODEBCK_1137___、パディング__CODEBCK_1138___、境界線__CODEBCK_1139___。アバター サークル 40 ピクセル、署名欄 ``、引用文 ``.
**`footer-region`** — 高密度の複数列のサイト フッター。
- 背景__CODEBCK_1143___、上枠__CODEBCK_1144___、パディング__CODEBCK_1145___。 `` `` にセクション見出しがあり、__CODEBCK_1148___ `` にリンク リストがある 6 つの列グループ。下の行には、言語ピッカー、地域セレクター、__CODEBCK_1150___ ``.
の法的リンクが含まれています
推奨事項と禁止事項
実行
- __CODEBCK_1152___ (コバルト) は、今すぐ購入する CTA のみに予約してください。マーケティング ページには表示されないからこそ、視覚的な重みが重要になります。
- マーケティング画面のプライマリ CTA には `` (黒) を使用します。二次アクションの `` ゴースト アウトラインと組み合わせます。
- __CODEBCK_1155___ をすべてのボタン、すべてのカテゴリの錠剤、すべてのバッジ、すべてのチップに適用します。Meta のシステムではボタンが四角形になることはありません。
- __CODEBCK_1156___ を写真の商品カードに適用し、__CODEBCK_1157___ をアイコン機能タイルに適用して、目に見えるカード階層のコントラストを維持します。
- オプティミスティック VF 見出しの場合は、__CODEBCK_1158___ を一緒にオンにします。 1 つのスタイル セットを他のスタイル セットなしで使用することはできません。
- 編集の小見出しには 300 ウェイトの `` を使用します。これにより、500 ウェイトの表示に対してブランドの特徴的な視覚的リズムが作成されます。
しないでください
- _`` (コバルト) をマーケティング画面のプライマリ ボタンに使用しないでください。これは、白のキャンバスに黒の CTA マーケティングという Meta のブランドの歴史上の位置づけと矛盾します。
- コバルト + Oculus パープルを超える追加のアクセント カラーを導入しないでください。このハードウェア ブランドは、製品写真以外では意図的に単色になっています。
- `` の下のピル ボタンの角を柔らかくしないでください。錠剤はブランドの象徴です。
- 四捨五入せずにフィーチャ カードを実行しないでください — `` は、どの写真面でも最小値です。
- _`` 行の高さを 1.50 未満に減らさないでください。負の文字間隔によりすでにメトリックが狭くなり、これ以上圧縮すると読みにくくなります。
- マーケティング カードには濃い影を適用しないでください。昇格はコマース フローのシグナルであり、マーケティングの隆盛を示すものではありません。
応答動作
ブレークポイント
|名前 |幅 |主な変更点 |
|---|---|---|
|モバイル（小） | < 480px | Single column. Hero text drops to `` or smaller. Pill tabs collapse into hamburger drawer. PDP gallery stacks above purchase rail; rail becomes sticky bottom bar. |
|モバイル（大） | 480 – 767ピクセル |小さいものと同じですが、フィーチャー タイルはツーアップでレンダリングされます。 |
|タブレット | 768 – 1023ピクセル | 2 列のフィーチャ グリッド。ピルタブナビが戻ります。 PDP ギャラリー + 購入したレールは、圧縮された比率 (~60/40) で並べてレンダリングされます。 |
|デスクトップ | 1024 – 1359ピクセル |完全な 3 つおよび 4 つのフィーチャー グリッド。完全な錠剤カテゴリのナビゲーション。標準の 58/42 分割の PDP。 |
|ワイドデスクトップ | ≥ 1360 ピクセル |デスクトップと同じで、ヒーローのガターが広くなり、製品写真が大きくなります。 |
タッチターゲット_
- _ピル ボタンは 40 ～ 44 ピクセルの有効高さでレンダリングされます (14 ピクセルのボタン テキスト + `14px 30px` パディングを含む)。 WCAG AAA 44 ピクセル フロアの上。
- 円形のアイコン ボタンは 40×40 ピクセルで、AA フロアにあります。モバイルではオーバーライドにより 44×44 ピクセルに増加します。
- 色見本の円は 32×32 ピクセルです。 AAA にヒットするために、スウォッチの周囲に 12 ピクセルのクリア ヒット ゾーンが設定されます (有効ヒット ターゲット ~56 ピクセル)。
- フォーム入力は、主ボタンの高さに合わせて 44 ピクセルの高さでレンダリングされます。
戦略の崩壊
- **プロモーション バナー** はすべてのブレークポイントで全幅のままになります。小型モバイルでは省略記号で切り詰められ、インライン リンク アフォーダンスが維持されます。
- **768 ピクセル未満のピルタブ ナビゲーション** はハンバーガーの引き出しに折りたたまれます。アクティブなタブは、閉じたナビゲーション内のラベルとしてレンダリングされます。
- **PDP レイアウト**: < 1024px; the summary becomes a sticky bottom bar with price + "Add to cart" button at < 768px. The full summary remains scrollable above the sticky bar.
の購入概要の上にギャラリー スタックが表示されます
- **フィーチャ グリッド** (3 アップ、4 アップ) は 768 ～ 1023 ピクセルで 2 アップ、__HTMLTAG_827___ で 1 アップに折りたたまれます。
- _**ヒーロー タイポグラフィ**: < 768px and `` (24px) at < 480px.
では `` (64 ピクセル) が `` (36 ピクセル) に低下します。
- **フッター**: 6 列のデスクトップ レイアウトがタブレットでは 2 列にリフローされ、モバイルではアコーディオンで折りたたまれたグループになります。
画像の動作
- 商品写真では、1:1 (サムネイル、カラー ピッカー)、4:3 (PDP ギャラリー)、および 16:9 (ホームページのプロモーション ストリップ) の比率が使用されます。
- ヒーローの写真は__CODEBCK_1167___のコーナーでフルブリードされています。
スクロールしないと見えない部分の下に遅延読み込みされます。
- 商品バリエーションの画像は、すべてのブレークポイントにわたって__CODEBCK_1168___のサムネイルを保持します。モバイルでは全幅になることはありません。
_反復ガイド
1。一度に 1 つのコンポーネントに焦点を当てます。システムは内部一貫性が高く、小さな精度が複合的な効果をもたらします。
2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_1170___、__CODEBCK_1171___) - 言い換えはしないでください。
3.編集後に__CODEBCK_1172___を実行して、壊れた参照、コントラストの問題、孤立したトークンを検出します。
4.新しいバリアントを個別の `components:` エントリ (`-pressed`、__CODEBCK_1175___、__CODEBCK_1176___) として追加します。散文の中に埋め込まないでください。
5.デフォルトは本文の場合は__CODEBCK_1177___、強調の場合は__CODEBCK_1178___です。 `hero-display → display-lg → heading-lg → heading-md → heading-sm`.
まで見出しが下がります
6. `` (コバルト) を希少にしておきます。ビューポート上の今すぐ購入フローの外側に表示される場合は、その表面を本当にチェックアウト パネルのように見せる必要があるかどうかを確認してください。
7。 錠剤型ボタン (``) は常に;四角いボタンは、このデザイン言語では「サードパーティのウィジェット」であることを示すため、作業面から除外する必要があります。
既知のギャップ
- ボタン以外のフォーム コントロール (トグル、複数選択) の選択/チェック状態がキャプチャされたサーフェスに表示されませんでした — `radio-option-selected` の白地にコバルトのパターンに従って実装してください。
- アニメーション/遷移のタイミングは抽出されません。プライマリ サーフェスのトランジションには 150 ～ 250 ミリ秒のイーズアウト、アコーディオンの展開/折りたたみには 300 ミリ秒のイーズインアウトを推奨します。
- _キャンバス、サーフェス、インク、ヘアラインの特定のダークモード トークン値は定義されていません。ブランドは、これらのコマース ページに設定された公開されたダークモード トークンを公開していません。
- アクセサリ カード内のパステルの装飾色合い (ソフト ピンク、アイス ブルー、ミント) は視覚的には表示されますが、形式化されていません。システム カラーではなく、写真コンテンツとして扱います。