---
title: "1X Tech — NEO Home Robot design system"
variant: extended
source: https://www.1x.tech/neo
captured_at: 2026-10-12
theme: light
industry: consumer-electronics
generator: Design DNA (https://four.wiralomi.com/style/1x-tech-neo)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# 1X Tech — NEO Home Robot · Design System

> Quiet neutrals, human warmth, and a capable home robot.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.1x.tech/neo · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained product story pairs a pale neutral canvas with cinematic scenes of NEO in real homes. Generous whitespace and concise centered copy let the photography carry the narrative.

## North star

Let human-centered, full-width imagery lead, and keep the interface quiet with pale neutrals, concise copy, and generous breathing room.

## Overview

The page uses a light, nearly white canvas for most of its long-form story, interrupted by a dark opening hero and matching dark footer. Charcoal text and soft gray secondary copy keep the interface low-contrast and calm; white appears mainly on dark photographic overlays and compact controls. The palette’s additional gray steps belong chiefly to the measured gradient treatment, not a colorful brand scheme. ABCDiatype sans-serif carries the page, with a medium display face for prominent headings and uppercase, tracked micro-labels for navigation and eyebrow text. The layout is a single-column editorial sequence: centered statements, broad media, small feature groupings, and occasional multi-column image carousels. Large gaps separate sections, while media uses generous rounded corners. Photography and video show NEO alongside people, in domestic interiors, or in close-up product scenes; subdued overlays preserve legibility without adding decorative interface chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Charcoal | `#454545` | `--color-soft-charcoal` | neutral | Main heading and body text; also the measured border color and dark filled Order button. |
| Gallery Mist | `#f7f7f7` | `--color-gallery-mist` | surface | Primary page canvas across the product story, navigation background, and light sections. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Inverse text and white controls on dark imagery; also measured as a light surface. |
| Muted Stone | `#928e8f` | `--color-muted-stone` | neutral | Secondary muted copy and footer details; also appears in subtle dark-section overlays. |
| Deep Graphite | `#222222` | `--color-deep-graphite` | surface | Dark opening hero and footer section bands. |
| Shadow Graphite | `#313131` | `--color-shadow-graphite` | neutral | Intermediate stop in the measured dark photographic gradient, not a defining interface color. |
| Coal Gray | `#3b3b3b` | `--color-coal-gray` | neutral | Intermediate stop in the measured dark photographic gradient, not a defining interface color. |
| Slate Gray | `#545454` | `--color-slate-gray` | neutral | Intermediate stop in the measured dark photographic gradient, not a defining interface color. |
| Iron Gray | `#656565` | `--color-iron-gray` | neutral | Intermediate stop in the measured dark photographic gradient, not a defining interface color. |
| Ash Gray | `#777777` | `--color-ash-gray` | neutral | Intermediate stop in the measured dark photographic gradient, not a defining interface color. |
| Silver Gray | `#9e9e9e` | `--color-silver-gray` | neutral | Pale middle stop in the measured gray gradient; not a primary UI color. |
| Pewter Gray | `#b1b1b1` | `--color-pewter-gray` | neutral | Pale middle stop in the measured gray gradient; not a primary UI color. |
| Cloud Gray | `#c4c4c4` | `--color-cloud-gray` | neutral | Light gradient stop, also visible in product imagery; not a brand accent. |
| Frost Gray | `#d4d4d4` | `--color-frost-gray` | neutral | Lightest measured stop in the gray gradient; not a primary UI color. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Gallery Mist) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#222222` (Deep Graphite) · `--color-text` → `#454545` (Soft Charcoal) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-text-subtle` → `#928e8f` (Muted Stone) · `--color-border` → `#454545` (Soft Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#454545` | `#f7f7f7` | 8.95:1 | AAA |
| `#454545` | `#ffffff` | 9.59:1 | AAA |
| `#454545` | `#222222` | 1.66:1 | fail |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#ffffff` | `#222222` | 15.91:1 | AAA |
| `#928e8f` | `#f7f7f7` | 3.02:1 | AA-large |
| `#928e8f` | `#ffffff` | 3.24:1 | AA-large |
| `#928e8f` | `#222222` | 4.92:1 | AA |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.79) 6.7%, rgba(0, 0, 0, 0.76) 13.3%, rgba(0, 0, 0, 0.718) 20%, rgba(0, 0, 0, 0.66) 26.7%, rgba(0, 0, 0, 0.592) 33.3%, rgba(0, 0, 0, 0.518) 40%, rgba(0, 0, 0,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCDiatype | `--font-body` | webfont | 400 | Default body, button, and light-weight page text. | Inter |
| ABCDiatypeMedium | `--font-display` | webfont | 500 | Display headings and uppercase navigation. | Inter |
| ABCDiatypeBold | `--font-abcdiatypebold` | webfont | 700 | Strong emphasis where bold text is required. | Inter |

- **ABCDiatype:** Regular weight is dominant; clear, compact sans-serif forms support short paragraphs and straightforward controls.
- **ABCDiatypeMedium:** Medium emphasis for display and navigation; navigation uses uppercase with visibly tracked lettering.
- **ABCDiatypeBold:** Bold is a minor part of the measured type mix; reserve it for concise emphasis rather than long copy.

### Type scale — Golden Ratio (ratio ≈ 1.673, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.2 | 0 | — | ABCDiatypeMedium | Centered major section headlines, such as product benefits and feature stories. |
| h1 | 24px | 400 | 1.3 | 0 | — | ABCDiatype | Light-weight introductory and product title text. |
| body | 20px | 400 | 1.3 | 0 | — | ABCDiatype | Feature descriptions and explanatory copy. |
| caption | 10px | 400 | 1 | 0.128em | uppercase | ABCDiatype | Uppercase micro-labels and media captions. |
| button | 20px | 400 | 1.3 | 0 | — | ABCDiatype | Purchase, FAQ, and other prominent action labels. |
| nav | 11px | 500 | 1.82 | 0.08em | uppercase | ABCDiatypeMedium | Small uppercase global navigation links. |
| eyebrow | 10px | 400 | 1 | 0.128em | uppercase | ABCDiatype | Compact uppercase labels introducing product story sections. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 14, 16, 20, 22, 24, 28, 32, 40, 80 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width —.

A long single-column product narrative alternates centered copy with broad media and occasional feature or carousel groupings. The measured page uses comfortable density and a recurring generous section gap; preserve the spacious rhythm rather than compressing content. Text is commonly center-aligned over or near full-bleed imagery, while the final product/order area shifts to a two-column arrangement. The screenshots show media inset within the light canvas as well as edge-to-edge scenes. A page maximum width is not measured, so follow the screenshot’s broad, restrained proportions without assuming a fixed value.

## Shape & elevation

- Radius: button `50%` · link `9999px` · xs `80px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: the light canvas and dark bands carry the visual structure rather than shadows. Rounded media frames and pill-shaped buttons provide the principal shape contrast. Use measured charcoal borders on outlined actions, with fine, restrained rules only where the page needs separation; avoid stacked cards and pronounced elevation.

## Imagery

Use cinematic, naturalistic photography and video of NEO in lived-in homes, alongside people, and in close product detail. Large scenes anchor the story; smaller framed images support feature callouts and the product carousel. Keep color treatment subdued and realistic. Apply a dark gradient only where white copy sits over media, and avoid illustrations or decorative graphic overlays that compete with the robot.

## Components

### Global navigation

Minimal uppercase links over the hero, using the measured small medium-weight nav face and no visible boxed treatment.

### Hero product story

Dark section band with full-bleed human-and-robot imagery and concise overlaid product identification and ordering action.

### Media feature frame

Large photographic or video content set apart by generous whitespace and softly rounded framing.

### Feature callouts

Small groups of short benefit headings and descriptions, aligned in columns with restrained iconography.

### Pill actions

Rounded Order and FAQ controls; use a charcoal filled primary action and a light outlined secondary action.

### Footer

Dark full-width band with a compact brand mark and grouped uppercase navigation and utility links.

### Measured component styles

- **Primary button** (“Order Now”): background #ffffff · text #000000 · radius 9999px · padding 16px 24px · 400 16px ABCDiatype
- **Secondary button** (“Order”): background #454545 · text #ffffff · radius 9999px · padding 16px 24px · 400 20px ABCDiatype
- **Link** (“W a t c h K e y n o t e”): background #f8f8f8 · text #ffffff · radius 9999px · padding 16px 0px · 400 16px ABCDiatype
- **Navigation item** (“NEO AI FACTORY STORIES CAREERS ABOUT”): transparent background · text #f8f8f8 · radius 0px · padding 0px · 500 11px ABCDiatypeMedium · uppercase

## Do

- Keep the light story canvas close to #f7f7f7.
- Use #454545 for primary text and understated borders.
- Reserve #222222 for dark section bands and footer areas.
- Let real-life product photography and video dominate each feature.
- Use centered, concise copy for the editorial feature sections.
- Give full-width media and section transitions generous breathing room.

## Don't

- Do not introduce bright accent colors absent from the measured interface.
- Do not turn the feature sequence into a dense dashboard or card grid.
- Do not add heavy shadows or layered panels.
- Do not use oversized decorative icons in place of product imagery.
- Do not place long blocks of copy over photographs.
- Do not treat gradient gray stops as separate brand accents.

## Agent prompt

Build a new product-story page in the 1X Tech NEO visual style. Use Gallery Mist (#f7f7f7) as the main canvas, Soft Charcoal (#454545) for readable copy and restrained borders, and Deep Graphite (#222222) for occasional dark bands. Use Clean White (#ffffff) for inverse text and controls where needed. Set typography in a clean sans-serif close to Inter, with medium-weight display headings and small uppercase tracked navigation or eyebrow labels. Organize the page as a spacious editorial sequence: concise centered copy, wide naturalistic product photography or video, and compact feature groups. Give media soft rounded framing and let real home scenes provide warmth. Keep controls pill-shaped and understated. Avoid decorative colors, heavy shadows, dense cards, and excessive interface chrome; use dark image overlays only to support legibility.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed opening hero with human-and-robot imagery and centered product details. | product introduction, order action | dark section band, overlaid white text, minimal top navigation |
| 2 | video | Light section with centered watch link and a large inset video. | watch keynote, play video | rounded media frame, light canvas, centered link |
| 3 | feature-grid | Compact three-column benefit row on the light canvas. | scan benefits, quick value summary | short headings, small icons, compact descriptions |
| 4 | product-showcase | Centered headline and description with a broad, full-width household media scene. | explore chores, see robot in use | centered text, full-bleed media, image overlay |
| 5 | feature-split | Large feature media with centered explanatory copy and small controls. | learn expert mode, navigate task examples | video and image sequence, overlaid text, pill controls |
| 6 | video | Light section with a centered watch link and large media frame. | watch design film, play video | rounded media frame, centered link, open whitespace |
| 7 | feature-grid | Centered introduction and media, followed by four compact feature columns. | understand product qualities, scan four benefits | large rounded media, small icons, four-column callouts |
| 8 | gallery | Six-item carousel-style gallery with a prominent center image and neighboring previews. | browse design details, move between slides | asymmetric image carousel, image labels, pagination dots |
| 9 | feature-grid | Centered companion headline and description with media and a three-column benefits row. | discover conversation uses, scan capabilities | centered heading, product imagery, three benefit columns |
| 10 | product-showcase | Centered introduction followed by a large, wide product video or image. | understand autonomy, view capability growth | eyebrow label, centered copy, rounded full-width media |
| 11 | product-detail | Two-column product closing area with order information and a robot image. | review product, open FAQ, place order | outlined FAQ pill, filled Order pill, product image |
| 12 | footer | Dark full-width footer with brand mark and four grouped link columns. | navigate site, access policies and support | dark band, small uppercase links, grouped columns |

## Source CSS custom properties (selected)

```css
--columnGap: 32px;
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card-foreground: 0 0% 3.9%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--radius: 0.5rem;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/1x-tech-neo