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

# SmallRig · Design System

> Creator gear, staged in cinematic open space

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

SmallRig’s global homepage pairs a clean, near-white canvas with expansive campaign imagery and restrained typography. In the captured page, an access-verification overlay obscures the first campaign and the remaining sections render mostly blank, so the visible screenshot is not a complete view of the intended storefront.

## North star

Let expansive creator-focused photography lead, while the white canvas, restrained Inter typography, and quiet gray details keep the store composed.

## Overview

The measured page is predominantly white, with a long, spacious vertical canvas and very little visible interface chrome. The captured first screen shows a cinematic lifestyle campaign: a person using a phone near water, darkened by an access-verification overlay. Treat its blue-gray water and burgundy phone as campaign-image colours, not core brand colours. Typography is led by Montserrat for the bold main heading and Inter for supporting text, with muted gray copy and dark text. The measured palette offers no verified brand accent; the orange slider handle belongs to the verification widget, so do not promote it into the storefront palette. The page sections are measured as white bands, with a subtle near-white lower section. Preserve generous separation between content areas, let wide campaign photography carry the visual impact, and use fine pale borders only where needed.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the white panels visible in the verification overlay. |
| Mist Line | `#e5e7eb` | `--color-mist-line` | semantic | Subtle measured border tone for quiet dividers and interface edges. |
| Soft Silver | `#b3b3b3` | `--color-soft-silver` | neutral | Appears in measured gradient text; keep it as a restrained neutral, not a brand accent. |
| Studio Gray | `#666666` | `--color-studio-gray` | neutral | Primary measured text gray for supporting copy and understated interface labels. |
| Caption Gray | `#999999` | `--color-caption-gray` | neutral | Muted supporting text, secondary labels, and subdued details. |
| Rig Black | `#000000` | `--color-rig-black` | surface | Measured inverse section surface and dark text; use sparingly against white. |
| Pale Graphite | `#aaaaaa` | `--color-pale-graphite` | neutral | Low-emphasis measured text tone; keep secondary to Studio Gray. |
| Near Black | `#181818` | `--color-near-black` | neutral | Very dark measured text, suitable for strong copy without introducing a new accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Rig Black) · `--color-text` → `#666666` (Studio Gray) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#999999` (Caption Gray) · `--color-border` → `#e5e7eb` (Mist Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |

### Gradients

- `-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb(179, 179, 179)), color-stop(0.4, rgb(179, 179, 179)), color-stop(0.5, rgb(255, 255, 255)), color-stop(0.6, rgb(179, 179, 179)), to(rgb(179, 179, 179)))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 300, 500 | Body copy, secondary headings, and captions. | Inter |
| Montserrat | `--font-display` | webfont | 600 | Main page heading. | Montserrat |
| aliyun-captcha-iconfont | `--font-aliyun-captcha-iconfont` | webfont | 400 | Verification-widget icon glyphs only; not storefront typography. | Material Symbols |

- **Inter:** Measured at light, regular, and medium weights; secondary heading has noticeable tracking.
- **Montserrat:** Measured semibold heading; use a clean, confident title treatment without forced uppercase.
- **aliyun-captcha-iconfont:** Utility icon font seen for captcha UI; exclude from general page text styling.

### Type scale — Major Third (ratio ≈ 1.291, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 600 | 1.25 | 0 | — | Montserrat | Campaign or page headline; bold, prominent title styling. |
| h2 | 24px | 500 | 1.5 | 0.071em | — | Inter | Section headings with a measured, widely tracked treatment. |
| body | 18px | 300 | 1.42 | 0 | — | Inter | Supporting campaign and product-description copy. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Compact labels, metadata, and secondary interface text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 40, 50, 128, 150 px.
- Section rhythm 128px · element gap 4px · card padding — · max content width —.

The measured page is a long, single-column sequence of full-width section bands, predominantly white, with a near-white band near the bottom. The first campaign fills the viewport and places its headline and CTA over imagery; the visible overlay obscures much of that composition. The data does not establish a content max width or card grid, so keep those flexible rather than inventing dimensions. Section spacing is spacious, while small text and interface details remain comparatively compact.

## Shape & elevation

- Radius: xs `4px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.1) 0px 4px 10px 0px`

The page is mostly flat and open, with white canvas bands and little visible card framing. Measured card shadow is soft and restrained; use it only for a floating surface such as the verification panel. Pale gray borders are available for subtle separation. Avoid strong outlines or stacking effects that compete with the campaign image.

## Imagery

The visible campaign uses full-bleed lifestyle photography: a person holds a phone near water, with the device and hands prominent in frame. A dark overlay from the verification state mutes the scene. Blue-gray water and burgundy device tones belong to this campaign image, not the measured brand palette. The supplied full-page captures show blank later sections, so avoid inferring unseen image treatments.

## Components

### Campaign hero

Full-width lifestyle image with a left-side headline and compact Learn More CTA visible beneath the overlay.

### Verification panel

Centered white rectangular access-check panel with dark heading, muted instructions, and a slider control; transient crawler state, not core storefront UI.

### Section bands

Long vertical content areas measured primarily as #ffffff, followed by a lower #fafafa section outside the specified palette list.

### Text hierarchy

Montserrat semibold display heading paired with Inter supporting copy, captions, and secondary headings.

### Measured component styles

- **Card** (“Access Verification Please slide to veri”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 14px Inter · shadow rgba(0, 0, 0, 0.15) 0px 0px 10px 0px

## Do

- Use #ffffff as the dominant page canvas.
- Let broad creator-focused photography anchor campaign areas.
- Use Inter for supporting copy and captions.
- Reserve Montserrat semibold for prominent headings.
- Keep borders pale and visually quiet.
- Treat image colours as campaign-specific rather than brand accents.

## Don't

- Do not adopt the captcha slider orange as a storefront accent.
- Do not treat the campaign's water or phone colours as brand tokens.
- Do not fill the generous page rhythm with dense card grids.
- Do not invent a measured max-width or unreported spacing value.
- Do not add heavy shadows to ordinary content.
- Do not reproduce the verification overlay as a normal page component.

## Agent prompt

Build a new SmallRig-style ecommerce page with a clean #ffffff Gallery White canvas and generous vertical breathing room. Make wide creator-focused photography the visual anchor for campaign sections; keep photographed colour treatment image-specific rather than adding it to the brand palette. Use Montserrat semibold for primary headlines and Inter for body, secondary headings, and captions. Set supporting text in #666666 Studio Gray or #999999 Caption Gray, with #181818 Near Black for stronger text. Use #e5e7eb Mist Line only for subtle dividers. Keep the layout open and uncluttered, with full-width section bands and clear headline-to-copy hierarchy. Do not invent a bright accent from the captcha UI, or add heavy card shadows and dense interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Viewport-filling campaign image with overlaid access-verification panel. | campaign CTA, access verification | full-bleed photography, centered white modal, muted overlay |
| 2 | other | Single white full-width section. | vertical page continuation | white canvas |
| 3 | other | Single white full-width section. | vertical page continuation | white canvas |
| 4 | other | Single white full-width section. | vertical page continuation | white canvas |
| 5 | other | Single white full-width section. | vertical page continuation | white canvas |
| 6 | other | Single white full-width section. | vertical page continuation | white canvas |
| 7 | other | Single white full-width section. | vertical page continuation | white canvas |
| 8 | other | Single white full-width section. | vertical page continuation | white canvas |
| 9 | other | Short white full-width section. | vertical page continuation | white canvas |
| 10 | other | Single full-width near-white band. | page continuation | near-white background |

## Source CSS custom properties (selected)

```css
--fw-thumbnail-font-size: 0.18rem;
--fw-thumbnail-font-weight: 300;
--fw-primary-button-background: #e61e28;
```

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