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

# Insta360 · Design System

> Bright product storytelling with a bold yellow signal

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://www.insta360.com/ · **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._

Insta360 pairs an airy white canvas with immersive product imagery, rounded product cards, and crisp dark typography. A small hit of vivid yellow marks the Store action while black purchase buttons keep shopping calls to action clear.

## North star

Keep the interface bright and restrained, using bold product imagery for impact and yellow only as a precise shopping signal.

## Overview

The page uses white as its dominant canvas, letting large promotional media and product imagery carry the visual energy. Pale blue-gray surfaces distinguish product cards, utility panels, and the enterprise band without making the page feel segmented. Near-black text provides a firm, readable contrast; the saturated yellow Store button is a focused brand signal, while blue accents appear sparingly in promotional artwork and links. Poppins Num supplies rounded, friendly letterforms across headings, body copy, and controls. Large semibold headlines establish each section, with compact supporting text and labels. The layout alternates full-width campaign imagery with centered product grids, interest cards, and paired utility panels. Generous white space separates these blocks, while rounded card corners soften the catalog structure. Product photography and video remain prominent and largely unframed, with restrained borders and shadows so imagery—not decorative interface chrome—sets the mood.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, open space around campaign media, and many text or icon treatments. |
| Cloud Panel | `#f8f9fc` | `--color-cloud-panel` | surface | Softly contrasting product cards, finder and accessory panels, and the enterprise section band. |
| Quiet Slate | `#76767f` | `--color-quiet-slate` | neutral | Muted navigation, secondary links, and supporting text that should remain lower emphasis. |
| Graphite Ink | `#262629` | `--color-graphite-ink` | brand | Primary body and heading text, with dark text on the yellow Store control. |
| Mist Gray | `#e0e0e2` | `--color-mist-gray` | neutral | Subtle control and section edges; not a dominant page color. |
| Soft Divider | `#edeff2` | `--color-soft-divider` | neutral | Hairlines around inputs and other quiet interface boundaries. |
| Sky Signal | `#0ea5e9` | `--color-sky-signal` | accent | Sparse blue link accent; brighter blues in the hero artwork are promotional imagery, not a broad UI color. |
| Store Yellow | `#ffe100` | `--color-store-yellow` | accent | Distinctive yellow Store button in the top navigation. |
| Charcoal Edge | `#4b4b4c` | `--color-charcoal-edge` | neutral | Secondary dark border or control detail, not a main surface. |
| Silver Gray | `#9d9d9d` | `--color-silver-gray` | semantic | Muted gray detected in gradient and decorative details; not a defining interface color. |
| Shadow Gray | `#7f7f7f` | `--color-shadow-gray` | semantic | Gray sampled within gradients or media detail, rather than a primary UI role. |
| Lavender Haze | `#b6b6c0` | `--color-lavender-haze` | semantic | Minor gray-violet text or gradient sample; use only for subordinate detail when needed. |
| Pale Silver | `#d5d5d5` | `--color-pale-silver` | semantic | Gradient or decorative sample, not a recurring structural color. |
| Soft Steel | `#aaaaaa` | `--color-soft-steel` | semantic | Low-emphasis gray found in gradient or section details. |
| Cloud Gray | `#c7c7c7` | `--color-cloud-gray` | semantic | Minor gradient sample; avoid using as a defining brand surface. |
| Muted Iron | `#636465` | `--color-muted-iron` | neutral | Secondary link and text tone for supporting interface content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f9fc` (Cloud Panel) · `--color-text` → `#262629` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#76767f` (Quiet Slate) · `--color-border` → `#edeff2` (Soft Divider) · `--color-accent` → `#ffe100` (Store Yellow) · `--color-accent-2` → `#0ea5e9` (Sky Signal) · `--color-on-accent` → `#262629` (Graphite Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#262629` | `#ffffff` | 15.09:1 | AAA |
| `#262629` | `#f8f9fc` | 14.33:1 | AAA |
| `#ffffff` | `#f8f9fc` | 1.05:1 | fail |
| `#76767f` | `#ffffff` | 4.5:1 | AA |
| `#76767f` | `#f8f9fc` | 4.27:1 | AA-large |
| `#ffe100` | `#ffffff` | 1.31:1 | fail |
| `#ffe100` | `#f8f9fc` | 1.24:1 | fail |

### Gradients

- `linear-gradient(360deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.494) 6.67%, rgba(0, 0, 0, 0.482) 13.33%, rgba(0, 0, 0, 0.46) 20%, rgba(0, 0, 0, 0.427) 26.67%, rgba(0, 0, 0, 0.384) 33.33%, rgba(0, 0, 0, 0.333) 40%, rgba(0, 0,`
- `linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.004) 6.67%, rgba(0, 0, 0, 0.016) 13.33%, rgba(0, 0, 0, 0.03) 20%, rgba(0, 0, 0, 0.06) 26.67%, rgba(0, 0, 0, 0.094) 33.33%, rgba(0, 0, 0, 0.133) 40%, rgba(0, 0, 0, 0`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.004) 6.67%, rgba(0, 0, 0, 0.02) 13.33%, rgba(0, 0, 0, 0.047) 20%, rgba(0, 0, 0, 0.082) 26.67%, rgba(0, 0, 0, 0.13) 33.33%, rgba(0, 0, 0, 0.184) 40%, rgba(0, 0, 0, 0.247) `

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Poppins Num | `--font-body` | webfont | 400, 500, 600 | Shared display, heading, body, caption, button, and link typography. | Poppins |

- **Poppins Num:** Rounded geometric sans; headings are semibold, body regular, controls medium, with generally neutral tracking and sentence case.

### Type scale — Major Third (ratio ≈ 1.285, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1.07 | 0 | — | Poppins Num | Large campaign or promotional headline where present. |
| h1 | 40px | 600 | 1.1 | 0 | — | Poppins Num | Primary page or section heading. |
| h2 | 36px | 600 | 1.22 | 0 | — | Poppins Num | Major section heading such as the technology introduction. |
| h3 | 32px | 600 | 1.13 | 0 | — | Poppins Num | Product group or prominent feature heading. |
| h4 | 28px | 500 | 1.14 | 0 | — | Poppins Num | Supporting card or subsection title. |
| body | 16px | 400 | 1.25 | 0 | — | Poppins Num | Product descriptions and general explanatory copy. |
| caption | 13px | 400 | 2.31 | 0 | — | Poppins Num | Compact labels, card details, and supporting metadata. |
| button | 18px | 500 | 3.11 | 0.028em | — | Poppins Num | Prominent action labels and large calls to action. |
| link | 13px | 400 | 2.31 | 0 | — | Poppins Num | Compact navigation, secondary actions, and text links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 16, 20, 24, 28, 32, 40, 48, 52, 128 px.
- Section rhythm 64px · element gap 24px · card padding 43px · max content width 1312px.

The homepage spans wide, full-bleed campaign media and then shifts into centered, modular shopping sections. A measured page max width of 1312px anchors the content; the product catalog uses a nine-column structure and the editorial feed a twelve-column structure. Sections alternate between broad media, multi-column cards, and two-panel utilities, with comfortable density and generous vertical separation. Headings align to the content edge, while product tiles and interest cards form consistent rows. Keep whitespace visible rather than filling every gap.

## Shape & elevation

- Radius: button `8px` · input `6px` · card `24px` · link `24px` · xs `4px` · sm `6px` · md `8px` · lg `20px` · xl `24px` · pill `9999px`
- Shadow `md` (other): `rgba(25, 28, 33, 0.1) 0px 6px 14px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: pale surfaces and whitespace create grouping instead of heavy shadows. Fine gray borders define inputs and quiet controls. Cards rely primarily on their light background and rounded corners; the measured shadow is subtle and should not become a repeated, conspicuous effect. Layer campaign text over media only where needed for contrast.

## Imagery

Large campaign areas use photography, video, and product composites to make cameras and creator scenarios the main attraction. Catalog tiles isolate devices against pale surfaces, while interest cards use tall lifestyle photography with labels near the bottom. Imagery is vivid and full-bleed where appropriate; keep overlays limited to legibility and avoid adding ornamental illustrations beyond the source material.

## Components

### Store navigation action

A compact #ffe100 button with #262629 text and a lightly rounded shape; it is the main yellow interface accent.

### Buy now button

A dark #1d1d1f purchase button with white medium-weight text, small rounded corners, and no prominent shadow.

### Product card

A #f8f9fc tile with a 24px measured radius, centered product image, concise title and detail, plus secondary and purchase actions.

### Interest card

A tall lifestyle image card with a rounded crop and a short category label placed over its lower edge.

### Category pills

A horizontal row of rounded category filters; the selected item is dark with light text and inactive items are pale.

### Utility panels

Paired pale panels for product finder and accessories, each using a short title, supporting copy, action, and product imagery.

### Text action

A compact secondary link such as Learn more, used beside the darker purchase button without competing with it.

### Measured component styles

- **Primary button** (“Store”): background #ffe100 · text #262629 · radius 4px · padding 0px 20px 0px 18px · 500 13px Poppins Num
- **Secondary button** (“Buy now”): background #1d1d1f · text #ffffff · radius 6px · padding 0px 20px · 500 14px Poppins Num
- **Link** (“Insta360 Mic Pro Your voice. Your style.”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Poppins Num
- **Input**: transparent background · text #262629 · border 1px solid #edeff2 · radius 6px · padding 0px 14px · 400 12px Poppins Num
- **Card** (“Insta360 X6 NEW Flagship 8K 360 camera. ”): background #f8f9fc · text #000000 · radius 24px · padding 52px 40px 40px 40px · 400 16px Poppins Num

## Do

- Use white as the dominant page canvas.
- Reserve #ffe100 for a focused Store-style action.
- Use #f8f9fc to separate cards and utility panels.
- Let product and creator imagery carry promotional impact.
- Set headings in Poppins-style semibold with dark ink.
- Use rounded cards and controls with restrained borders.
- Leave visible whitespace between major homepage blocks.

## Don't

- Do not turn the page into a dark interface.
- Do not spread the yellow accent across large surfaces.
- Do not use heavy shadows on every card.
- Do not add decorative gradients as a substitute for imagery.
- Do not crowd product cards with long descriptions.
- Do not treat illustration-only gray samples as core brand colors.

## Agent prompt

Build a new consumer-electronics page in the Insta360 visual style. Use Gallery White (#ffffff) as the main canvas and Cloud Panel (#f8f9fc) for product tiles and utility bands. Set headings and body copy in a Poppins-like rounded sans, with Graphite Ink (#262629) for primary text and Quiet Slate (#76767f) for secondary content. Keep Store Yellow (#ffe100) for one high-salience shopping control; use dark purchase buttons with white text for product actions. Organize content in a broad centered frame, alternating full-bleed campaign media with orderly product cards and lifestyle image rows. Keep cards generously rounded, section spacing comfortable, and borders subtle in Soft Divider (#edeff2). Prioritize authentic device photography and creator scenes; avoid heavy shadows, decorative gradients, and unnecessary interface clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign carousel with copy on the left and creator/product imagery to the right. | carousel navigation, countdown timer, primary purchase action | full-bleed media, dark CTA, blue promotional artwork |
| 2 | product-grid | Section heading and horizontal category pills above a three-column product card grid. | category filters, product browsing, view all | pale rounded cards, centered product imagery, compact action links |
| 3 | feature-split | Wide campaign panel with product copy on one side and drone imagery on the other. | learn more, buy now | wide pale panel, large product image, paired actions |
| 4 | category-nav | Horizontal strip of tall, image-led category cards with adjacent carousel controls. | interest browsing, horizontal carousel | lifestyle photography, bottom-aligned labels, rounded image crops |
| 5 | feature-grid | Two side-by-side pale panels for the product finder and accessories. | compare products, take a quiz, shop accessories | paired utility cards, short copy, product imagery |
| 6 | feature-split | Full-width service campaign with branding and copy paired with device and editing imagery. | learn more | full-bleed media, service logo, soft blue imagery |
| 7 | content-feed | Editorial heading above a horizontal row of large story cards. | browse stories, carousel navigation | wide image cards, media-led headlines, dark image overlays |
| 8 | feature-split | Pale section band with business-focused copy on the left and a multi-image collage on the right. | learn more | soft section surface, image collage, compact CTA |
| 9 | feature-grid | Four evenly sized service tiles in a horizontal row. | expert chat, support access, downloads | simple line icons, pale tiles, centered labels |
| 10 | footer | Multi-column link directory with newsletter form and a compact legal and social row. | newsletter signup, site navigation, locale selection | dense text links, small input field, social icons |

## Source CSS custom properties (selected)

```css
--title-font-family: "Poppins Old","","Roboto";
--content-font-family: "Roboto","","Poppins Old";
--new-font-family: "Poppins Num","MiSans VF";
```

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