Roborock-inspired

# Visual style inspired by Roborock's storefront (Robotic Cleaners)

A full style reference in DESIGN.md format: tokens in the front matter, then type scale, components, layout, do's and don'ts. Use it for colour, type, spacing and components only — never Roborock's name, logo, product photos, copy or trademarks.

---
version: alpha
name: "Roborock"
description: |-
  Robot vacuum silhouettes float in LiDAR-cold studio light above near-black fields (#161616, #313131) — the product is the hero, and Roborock's digital canvas is engineered to serve it. Primary interactive voltage runs through a medium cobalt blue (#4b71d9): it carries every add-to-cart button, active filter chip, and account link, sitting with authority against both the dark product stages and the light #f6f6f6 specification panels. A cluster of promotional reds (#ea0029, #d93840, #f92c50) marks sale pricing and countdown timers, functioning as a second signal layer rather than brand identity — the blue owns identity, the reds own urgency. A single status green (#68d44f) appears in product UI mockups and cleaning-map illustrations, calibrated to the same chromatic weight as the error red, suggesting the design team derived both from a shared HCI palette rather than brand spontaneity. Type runs proxima-nova throughout — geometric but not precious, legible at the small sizes that product specification grids demand — with Noto Sans KR as a first-class alternative for the Korean market where Roborock has significant share. Surface architecture is binary: sections either go white-adjacent (#f6f6f6, #f8f8f8) for spec comparisons and editorial content, or drop to near-black (#161616) for cinematic product reveals. Rounded corners stay moderate ({rounded.sm} 8px on inputs and cards, {rounded.md} 12px on larger containers), consistent with an engineering-forward identity — precise, not clinical. Promotional modules break the grid with full-bleed imagery and overlaid CTA pills ({rounded.full}), anchoring campaign content in a marketplace-familiar grammar that still reads premium against the product photography. No hard-cornered brutalism, no exaggerated softness — Roborock lands deliberately between the two.

colors:
  primary: "#4b71d9"
  primary-active: "#3a5cb8"
  primary-disabled: "#a8bcee"
  ink: "#161616"
  body: "#313131"
  muted: "#5f6772"
  muted-soft: "#6c6d6e"
  hairline: "#e1e1e1"
  hairline-soft: "#efefef"
  canvas: "#ffffff"
  surface-soft: "#f6f6f6"
  surface-card: "#f8f8f8"
  surface-page: "#f5f7fa"
  on-primary: "#ffffff"
  on-dark: "#ffffff"
  accent-red: "#ea0029"
  accent-red-hover: "#d10024"
  promo-red: "#f92c50"
  status-green: "#68d44f"
  dark-stage: "#161616"
  dark-stage-mid: "#313131"
  dark-stage-secondary: "#464646"
  border-mid: "#babfc3"
  border-soft: "#d4d4d4"

typography:
  display-xl:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-lg:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.3px
  display-md:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.2px
  display-sm:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  title-md:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0
  title-sm:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.375
    letterSpacing: 0
  body-md:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0
  caption:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  spec-label:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1px
  badge:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.2px
    textTransform: uppercase
  overline:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.2px
    textTransform: uppercase
  price-display:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.2px
  button-md:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  button-sm:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  nav-link:
    fontFamily: "'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 48px
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
  button-primary-disabled:
    backgroundColor: "{colors.primary-disabled}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.primary}"
    padding: 11px 23px
    height: 48px
  button-secondary-dark:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.on-dark}"
    padding: 11px 23px
    height: 48px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    border: "1px solid {colors.hairline}"
    padding: 10px 14px
    height: 44px
    focusBorder: "1px solid {colors.primary}"
    placeholderColor: "{colors.muted}"
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    height: 64px
    borderBottom: "1px solid {colors.hairline-soft}"
    logoAreaWidth: 140px
  product-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
    imageBg: "{colors.surface-soft}"
    titleTypography: "{typography.title-sm}"
    priceTypography: "{typography.price-display}"
    captionTypography: "{typography.body-sm}"
    border: "1px solid {colors.hairline-soft}"
  hero-dark:
    backgroundColor: "{colors.dark-stage}"
    textColor: "{colors.on-dark}"
    titleTypography: "{typography.display-xl}"
    subtitleTypography: "{typography.body-md}"
    minHeight: 600px
    paddingY: "{spacing.section}"
  hero-split:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    titleTypography: "{typography.display-md}"
    subtitleTypography: "{typography.body-md}"
    layout: "50/50 text-left image-right"
    paddingY: "{spacing.section}"
  spec-table:
    backgroundColor: "{colors.surface-soft}"
    headerBg: "{colors.dark-stage}"
    headerTextColor: "{colors.on-dark}"
    rowAltBg: "{colors.canvas}"
    textColor: "{colors.body}"
    labelTypography: "{typography.spec-label}"
    valueTypography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    border: "1px solid {colors.hairline}"
  badge-sale:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 3px 8px
  badge-new:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 3px 8px
  badge-bestseller:
    backgroundColor: "{colors.dark-stage}"
    textColor: "{colors.on-dark}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 3px 8px
  status-indicator:
    activeColor: "{colors.status-green}"
    errorColor: "{colors.accent-red}"
    typography: "{typography.caption}"
    dotSize: 8px
  category-tab:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    activeTextColor: "{colors.ink}"
    typography: "{typography.title-sm}"
    activeBorderBottom: "2px solid {colors.primary}"
    padding: 12px 0
  feature-callout:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.body}"
    iconColor: "{colors.primary}"
    titleTypography: "{typography.title-sm}"
    bodyTypography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.lg}"
  promo-banner:
    backgroundColor: "{colors.dark-stage}"
    textColor: "{colors.on-dark}"
    accentColor: "{colors.promo-red}"
    titleTypography: "{typography.display-md}"
    bodyTypography: "{typography.body-md}"
    ctaTypography: "{typography.button-md}"
    paddingY: "{spacing.xxl}"
  search-bar:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    border: "1px solid {colors.hairline}"
    padding: 10px 20px
    height: 44px
    iconColor: "{colors.muted}"
  comparison-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    highlightBorder: "2px solid {colors.primary}"
    neutralBorder: "1px solid {colors.hairline}"
    rounded: "{rounded.md}"
    titleTypography: "{typography.title-md}"
    priceTypography: "{typography.price-display}"
    specTypography: "{typography.spec-label}"
    padding: "{spacing.xl}"
  footer:
    backgroundColor: "{colors.dark-stage}"
    textColor: "{colors.on-dark}"
    linkColor: "{colors.border-mid}"
    headingTypography: "{typography.title-sm}"
    bodyTypography: "{typography.body-sm}"
    paddingY: "{spacing.section}"

---

## Components

### Buttons

**`button-primary`** — Cobalt blue (#4b71d9) fill with white label at 16px/600 weight, 48px tall with {rounded.sm} corners and 24px horizontal padding. Hover darkens to #3a5cb8 (`button-primary-active`); disabled washes to #a8bcee with unchanged geometry. This is the sole high-intent CTA across PDPs, cart, and checkout.

**`button-secondary`** — White canvas with a 1px `{colors.primary}` border and matching blue label; mirrors primary dimensions exactly so CTA pairs align without optical size mismatch. On dark hero modules, `button-secondary-dark` swaps to a transparent background with white border and white text against `{colors.dark-stage}`.

**`button-ghost`** — Transparent background, primary blue label, no border; used for inline actions such as "Learn more" within product cards, feature callouts, and comparison rows where a full button weight would crowd the layout.

### Text Input

**`text-input`** — 44px height, 8px radius, 1px `{colors.hairline}` border on idle. Placeholder text renders in `{colors.muted}`. Focus shifts the border to `{colors.primary}` with no additional shadow — the single border-color change is sufficient at this font size. Used across search, email capture, account forms, and checkout address fields.

### Navigation Bar

**`nav-bar`** — 64px tall, white canvas, 1px hairline-soft bottom border. Logo occupies a reserved 140px zone at left; main category links spread center in `{typography.nav-link}` (14px/500); account, wishlist, and cart icons sit at right. On scroll the bar picks up a light drop shadow without a background change. Mobile collapses to hamburger + logo + cart — no category labels visible until the drawer is open.

### Product Card

**`product-card`** — Soft-white (#f8f8f8) background, 1px hairline-soft perimeter border, 12px radius. Product image renders on a `{colors.surface-soft}` swatch zone that prevents color-cast artifacts from white-background product photography. Title in `{typography.title-sm}`, price in `{typography.price-display}` cobalt, descriptive copy in `{typography.body-sm}` muted gray. `badge-sale` or `badge-new` pins to the top-left corner of the image zone. Entire card surface is tappable on mobile.

### Hero Modules

**`hero-dark`** — Full-bleed dark-stage (#161616) canvas, minimum 600px height. White display title in `{typography.display-xl}` (48px/700), subtitle in `{typography.body-md}`. Product renders center-right as a transparent-background cutout — no drop shadow, no halo — so the dark field reads as the product's natural environment. Primary CTA (`button-primary`) and secondary (`button-secondary-dark`) sit left-aligned below the headline at 24px gap.

**`hero-split`** — White canvas, 50/50 column split: text block left, product image right. Title in `{typography.display-md}` ink, subtitle in `{typography.body-md}`. Used for mid-page feature announcements and accessory callouts where product detail legibility outweighs drama.

### Spec Table

**`spec-table`** — Surface-soft (#f6f6f6) base with a `{colors.dark-stage}` header row carrying column titles in white `{typography.spec-label}` weight. Alternating row fills (surface-soft / white) aid line-by-line scansability. Spec labels in 13px/500, values in `{typography.body-sm}`. Rounded at {rounded.md}, 1px hairline border perimeter. On mobile the table scrolls horizontally with the label column sticky at left.

### Badges

**`badge-sale`** — Accent red (#ea0029), uppercase 11px/700, 4px radius, 3×8px padding. Appears on product cards and adjacent to struck-through original prices. **`badge-new`** — Same geometry in primary blue (#4b71d9); signals recent product launches. **`badge-bestseller`** — Dark-stage black background, same geometry; anchors authority claims without urgency color coding.

### Category Tabs

**`category-tab`** — Borderless horizontal tab row; inactive links in `{colors.muted}` 16px/600, active link in `{colors.ink}` with a 2px `{colors.primary}` underline. No background fill on any state — only text color and underline change. Padding 12px top and bottom. On mobile the tab strip becomes a horizontal scroll container with no clipping indicator.

### Feature Callout

**`feature-callout`** — Surface-soft tile, 12px radius, 24px padding. Primary-blue icon above a `{typography.title-sm}` heading and `{typography.body-sm}` body copy. Arranged in a 3–4 column grid on desktop, used in PDPs to itemize LiDAR precision, suction ratings, auto-empty docking, and mapping technology. The icon treatment is monoline at approximately 24px; icon library details are unconfirmed (see Known Gaps).

### Status Indicator

**`status-indicator`** — 8px filled dot (status-green #68d44f for active/charged states; accent-red #ea0029 for errors/alerts) followed by `{typography.caption}` label text. Appears inside cleaning-map UI illustrations and app-screenshot embeds on product detail pages; not used as a standalone web UI element outside of embedded app mockups.

### Promo Banner

**`promo-banner`** — Full-bleed dark-stage background, white display title in `{typography.display-md}`, promo-red (#f92c50) accent on countdown text or percentage-off callouts. CTA in `button-primary` or `button-secondary-dark`. 48px vertical padding top and bottom. Deployed at page top for sitewide sale events and above-the-fold campaign modules.

### Search Bar

**`search-bar`** — Pill-shaped ({rounded.full}), 44px height, surface-soft fill with hairline border and muted-gray search icon at left. Focus shifts border to `{colors.primary}`; the pill does not resize or relocate — it expands in place. Used in the desktop nav header and as a dedicated mobile search entry point at the top of category pages.

### Comparison Card

**`comparison-card`** — White canvas, 12px radius. The recommended model variant gets a 2px `{colors.primary}` border; all others use 1px hairline. Title in `{typography.title-md}`, price in `{typography.price-display}`, spec rows in `{typography.spec-label}`. 32px internal padding. Arranged 2–4 across on desktop for robot vacuum model comparison pages; collapses to a snap-scroll horizontal carousel on mobile.

### Footer

**`footer`** — Dark-stage (#161616) background, white primary text, `{colors.border-mid}` (#babfc3) secondary links. Column headings in `{typography.title-sm}` white/600, links in `{typography.body-sm}` border-mid. Social icons inline in the bottom link bar. 64px vertical padding. Certifications and legal copy render in `{typography.caption}` muted-soft at the very bottom.

---

## Responsive Behavior

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 744px | Single-column product grid; nav collapses to hamburger + logo + cart; hero-dark portrait-crops to 480px min-height with text stacked above product; spec-table scrolls horizontally with sticky label column; category tabs become horizontal scroll strip; comparison cards become snap-scroll carousel |
| Tablet | 744–1128px | 2-column product grid; nav shows top-level labels without mega-menu; hero-split stacks to image-over-text; feature-callout 2 per row; comparison cards 2-up |
| Desktop | 1128–1440px | 3–4 column product grid; full nav with mega-menu dropdowns; hero-dark full 600px height; spec-table full width; comparison cards 4-up |
| Wide | > 1440px | Content max-width 1440px centered; hero horizontal padding expands to expose more product image; product grid holds at 4 columns with increased card gap; generous lateral margins on editorial sections |

### Touch Targets

- All interactive elements minimum 44×44px on mobile
- Category tab strip expands to 48px touch height despite smaller visual text treatment
- Nav icons (cart, account, search) padded to 44px tap target with transparent hit area
- Product card entire surface is tappable on mobile — no separate image vs. title tap zones
- Badge elements are non-interactive; no minimum size constraint applies

### Collapsing Strategy

- Mega-menu nav collapses to a full-screen drawer on mobile; top-level categories become an accordion with chevron toggles
- Spec table wraps in a horizontal-scroll container; the first (label) column is sticky so spec names stay visible while values scroll
- Comparison cards collapse from 4-up grid to a single-card snap-scroll carousel with dot pagination
- Feature callout grid reflows 4-col → 3-col → 2-col → 1-col across breakpoints
- Promo banner maintains full-bleed at all widths; headline and CTA stack vertically on mobile with centered alignment
- Hero-dark drops from side-by-side to stacked (text above, product below) on mobile; product image crops to square aspect ratio

---

## Known Gaps

- **Agent usage policy:** Historical tokens are unverified. Do not use them as current-site measurements or claim a faithful reconstruction.






- **Historical provenance:** The original capture time and raw evidence are unavailable. Token values have not been freshly verified; the [collection manifest](../../data/manifest.json) records this entry as historical_unverified.

- No proprietary icon library identified; Roborock likely ships a custom glyph set not surfaced in CSS extraction — icon style (filled vs. outline, stroke weight, corner treatment) is inferred from engineering-brand context and cannot be confirmed
- Exact mega-menu dropdown background treatment (white canvas vs. surface-soft) could not be confirmed from static extraction
- Animation and transition timing (hover durations, parallax scroll on hero modules, drawer slide speed) are not recoverable from a static scrape
- In-app cleaning-map palette (room-zone fill colors, path trace colors, obstacle markers) lives in native app assets, not web tokens — only the status-green and accent-red are confirmed web-surfaced
- Proxima-nova weight axis loaded on site (whether a full variable font or discrete 400/600/700 instances) is unconfirmed; only those three weights are used above
- Dark-mode support undetermined — no `prefers-color-scheme` media query was detected in CSS extraction
- Shopify theme section padding overrides and custom section spacing may deviate from the spacing scale defined here; exact rhythm between page sections requires live inspection