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

# Govee · Design System

> Smart lighting, staged in a vivid dark world

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://us.govee.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._

Govee’s homepage combines a black storefront shell with a seasonal, cinematic campaign and densely arranged product discovery. Cyan brand accents and vivid lighting imagery bring energy to the otherwise restrained dark interface.

## North star

Keep the interface itself nearly black and let vivid, full-bleed lighting imagery—not extra UI color—create the drama.

## Overview

The page uses #000000 as its main canvas, giving the full-bleed Halloween campaign and luminous product imagery room to dominate. Most commerce sections stay on black, while testimonials and the footer shift to #161617 for a subtle banded rhythm. Gotham sans-serif keeps navigation, headings, cards, and controls consistent; bold white headings provide clear hierarchy, with muted gray supporting copy. Cyan #00a0df anchors prominent shopping actions and brand cues, while #19a7f0 highlights secondary links. Product cards use charcoal surfaces and restrained borders rather than bright containers. The composition alternates centered discovery areas, four-column product rows, category tiles, and asymmetric lifestyle features. Large media blocks create visual pauses between compact information grids. Seasonal artwork supplies purple, orange, and other saturated colors, but those belong to campaign imagery rather than the core interface palette. Spacing feels comfortable, with broad gaps between major sections and tighter grouping within cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Govee Cyan | `#00a0df` | `--color-govee-cyan` | brand | Primary brand accent for shopping buttons, outlines, and prominent interface cues. |
| Midnight Canvas | `#000000` | `--color-midnight-canvas` | neutral | Dominant page canvas and backdrop for full-bleed campaigns, product discovery, and content sections. |
| Link Blue | `#19a7f0` | `--color-link-blue` | accent | Secondary blue accent for links such as “Show More” and other text actions. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | semantic | Main muted copy color for product details, explanations, and supporting text. |
| Bright White | `#ffffff` | `--color-bright-white` | neutral | Headings, primary text, navigation labels, and text on colored or dark buttons. |
| Charcoal Card | `#2e2e30` | `--color-charcoal-card` | surface | Product and testimonial card surfaces against the black page canvas. |
| Footer Graphite | `#161617` | `--color-footer-graphite` | surface | Wide testimonial and footer bands that gently distinguish sections from the canvas. |
| Slate Hairline | `#5d5d60` | `--color-slate-hairline` | semantic | Subtle card and component borders that define edges without bright contrast. |
| Cool Mist | `#d8d8df` | `--color-cool-mist` | semantic | Secondary muted text, used sparingly for softer supporting information. |
| Navigation Gray | `#a2a2a2` | `--color-navigation-gray` | neutral | Low-emphasis navigation and footer text. |
| Input Gray | `#888888` | `--color-input-gray` | semantic | Input outline and understated interface copy. |
| Shadow Black | `#121213` | `--color-shadow-black` | surface | Near-black detail within gradients and tonal transitions; not a major section surface. |
| Blue Slate | `#1c212d` | `--color-blue-slate` | surface | Dark blue-tinted card surface, including assistant or smart-home related cards. |
| Neutral Gray | `#999999` | `--color-neutral-gray` | neutral | Occasional low-emphasis supporting text. |
| Pale Frost | `#e5e6e6` | `--color-pale-frost` | neutral | Rare light text detail; not a defining brand surface. |
| Violet Signal | `#794beb` | `--color-violet-signal` | accent | Small accent detail; vivid purple is primarily associated with campaign and lighting imagery. |

### Semantic aliases

`--color-canvas` → `#000000` (Midnight Canvas) · `--color-surface` → `#161617` (Footer Graphite) · `--color-surface-2` → `#2e2e30` (Charcoal Card) · `--color-surface-3` → `#1c212d` (Blue Slate) · `--color-text` → `#ffffff` (Bright White) · `--color-text-muted` → `#cccccc` (Soft Silver) · `--color-text-subtle` → `#d8d8df` (Cool Mist) · `--color-border` → `#5d5d60` (Slate Hairline) · `--color-accent` → `#00a0df` (Govee Cyan) · `--color-accent-2` → `#19a7f0` (Link Blue) · `--color-accent-3` → `#794beb` (Violet Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#161617` | 18.08:1 | AAA |
| `#ffffff` | `#2e2e30` | 13.55:1 | AAA |
| `#ffffff` | `#1c212d` | 16.09:1 | AAA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#cccccc` | `#161617` | 11.26:1 | AAA |
| `#cccccc` | `#2e2e30` | 8.44:1 | AAA |
| `#cccccc` | `#1c212d` | 10.02:1 | AAA |
| `#d8d8df` | `#000000` | 14.81:1 | AAA |
| `#d8d8df` | `#161617` | 12.75:1 | AAA |

### Gradients

- `linear-gradient(105deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, oklch(0 0 0) 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))`
- `linear-gradient(96deg, rgb(255, 255, 255) 2%, rgb(144, 205, 255) 47%, rgb(255, 160, 233) 95%)`
- `linear-gradient(0deg, rgb(144, 0, 255) 0%, rgb(255, 140, 0) 100%), linear-gradient(0deg, rgb(136, 0, 255) 0%, rgb(0, 211, 151) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gotham | `--font-body` | webfont | 400, 500, 700, 300 | Site-wide type for navigation, headings, product copy, links, and controls. | Montserrat |

- **Gotham:** Use a clean geometric sans-serif; headings range from regular to bold, with mostly sentence case and no added tracking.

### Type scale — Major Third (ratio ≈ 1.278, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1.5 | 0 | — | Gotham | Primary campaign headline and prominent page-level message. |
| h2 | 28.5px | 500 | 1.2 | 0 | — | Gotham | Section headings such as product discovery and reviews. |
| h3 | 22.5px | 400 | 1.2 | 0 | — | Gotham | Product, category, and feature titles. |
| h4 | 21px | 500 | 1.5 | 0 | — | Gotham | Smaller feature headings and card subheads. |
| body | 15px | 400 | 1.5 | 0 | — | Gotham | Product descriptions, supporting copy, and general page text. |
| caption | 13.5px | 400 | 1.43 | 0 | — | Gotham | Compact labels, dates, and secondary card details. |
| button | 13.5px | 400 | 1.43 | 0 | capitalize | Gotham | Shopping and form actions, generally capitalized. |
| nav | 15px | 400 | 1.5 | 0 | — | Gotham | Primary navigation and announcement links. |
| link | 15px | 400 | 1.5 | 0 | — | Gotham | Inline actions, product links, and section-level text links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 8, 9, 11, 14, 15, 19, 23, 27, 28, 30, 38, 57 px.
- Section rhythm 85px · element gap 4px · card padding 5px · max content width 1288px.

A wide desktop storefront centers content within a measured 1288px maximum width, while hero art and selected campaign panels span the viewport. Product browsing uses four-column grids, category navigation forms a dense row, and lifestyle features mix large media with smaller tiles. Section headings are centered in discovery and testimonial areas, while feature narratives align left. Long black stretches and broad section gaps alternate with compact cards and link clusters, creating comfortable overall density.

## Shape & elevation

- Radius: button `15px` · input `2px` · card `11px` · media `8px` · xs `2px` · sm `8px` · md `11px` · lg `15px` · xl `23px` · pill `9999px`
- Shadow `inset` (card): `rgba(77, 114, 179, 0.1) 0px 0px 24.54px 0px inset, rgba(50, 65, 97, 0.14) 0px 0px 72.59px 0px inset`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0.947183px 1.89437px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 9.47183px 14.2077px -2.84155px, rgba(0, 0, 0, 0.1) 0px 3.78873px 5.6831px -3.78873px`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with separation coming from black versus graphite section bands and charcoal cards. Borders are restrained and low contrast. Product and testimonial cards have rounded corners; select cards use a subtle inset blue-toned shadow. Avoid prominent global shadows or layered glass effects.

## Imagery

Large campaign artwork and lifestyle photography show smart lights in vivid home, gaming, and seasonal settings. The opening Halloween banner is cinematic and full bleed, with text anchored on one side and elaborate themed imagery on the other. Product cards use isolated product photography against dark surfaces; category tiles use glowing product icons. Video and editorial images provide variety. Purple, orange, and multicolor light effects are image content, not a reason to tint the surrounding interface.

## Components

### Announcement and navigation

A thin promotional strip sits above compact service benefits and the main black navigation; white labels and cyan branding keep it legible.

### Campaign hero

Full-bleed seasonal artwork pairs a left-aligned offer, countdown, and rounded white shopping CTA with vivid Halloween lighting imagery.

### Product cards

Four-column commerce cards use charcoal surfaces, product media, compact offer badges, pricing, and cyan shopping buttons.

### Category tiles

A centered category section presents a horizontal row of dark, image-led tiles with glowing product illustrations and short labels.

### Lifestyle feature mosaic

One prominent media tile combines with smaller room and entertainment scenes; short labels sit directly over or beneath imagery.

### Review cards

Graphite testimonial cards group a circular customer initial, name, stars, compact quote, and linked product reference.

### Newsletter banner

A wide illustrated offer panel combines a short email form, cyan action button, consent copy, and a bright coupon graphic.

### Footer link columns

A graphite footer organizes support, explore, products, programs, and legal links into compact columns above payment and social marks.

### Measured component styles

- **Primary button** (“Shop Now”): background #18a2e4 · text #ffffff · border 1px solid #00a0df · radius 22.7324px · padding 0px 18.2px · 400 13.2606px Gotham · capitalize · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Get It Now!”): background #00a0df · text #ffffff · radius 1.89437px · padding 7.6px 0px · 400 17.0493px Gotham
- **Link** (“⏰ Encore Is Here — One Last Chance to Sa”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15.1549px Gotham
- **Input**: background #ffffff · text #161617 · border 1px solid #888888 · radius 1.89437px · padding 7.6px 11.4px · 400 15.1549px Gotham
- **Card** (“Cr Crystal S. These have lit up the stre”): background #2e2e30 · text #252525 · radius 11.3662px · padding 0px 0px 18.9px 0px · 400 15.1549px Gotham
- **Navigation item** (“🔥Prime Big Deal Days Outdoor Lights Ind”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15.1549px Gotham

## Do

- Use black as the default page canvas.
- Reserve graphite bands for clearly grouped lower-page sections.
- Use Govee Cyan for primary shopping actions.
- Keep supporting copy muted and secondary to white headings.
- Let luminous product imagery provide most of the color.
- Use compact card layouts within spacious section rhythm.

## Don't

- Do not turn the page into a light theme.
- Do not use saturated purple as a general UI accent.
- Do not crowd full-width campaign imagery with extra framing.
- Do not make card borders brighter than their content.
- Do not replace the Gotham-like geometric sans-serif with a serif.
- Do not apply heavy shadows to every component.

## Agent prompt

Build a new Govee-style commerce page on a near-black #000000 canvas, using Gotham or a close geometric sans-serif. Use Bright White #ffffff for headings and primary text, Soft Silver #cccccc for supporting copy, and Govee Cyan #00a0df for main shopping actions; reserve Link Blue #19a7f0 for secondary links. Keep most sections visually flat, with charcoal cards in #2e2e30 and occasional broad Footer Graphite #161617 bands. Establish hierarchy through full-bleed, vivid product or lifestyle imagery, not decorative UI gradients. Use wide centered content areas, compact multi-column product grids, varied media-led feature layouts, and generous gaps between major sections. Keep card copy concise, borders subtle, corners rounded, and controls clear. Treat seasonal purple and orange as image colors, not core interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed seasonal campaign with left-aligned offer copy and large right-side artwork. | countdown timer, primary shop action | full-bleed media, white pill CTA, large offer headline |
| 2 | product-grid | Centered heading above a four-column product browsing grid. | category tabs, discount pricing, shop buttons | charcoal cards, cyan CTAs, offer badges |
| 3 | category-nav | Centered title above a dense horizontal row of image-led category tiles. | browse by category, all-lights link | glowing icons, dark tiles, horizontal carousel |
| 4 | other | Single wide campaign banner centered within the page. | brand proof | wide media panel |
| 5 | feature-grid | Left-aligned heading and metrics above an asymmetric lifestyle image mosaic. | room-based discovery, play media | large feature tile, smaller image cards, overlaid labels |
| 6 | feature-grid | Left-aligned section heading followed by four technology feature cards. | feature browsing, carousel controls | dark media cards, short feature summaries |
| 7 | logo-cloud | Graphite band with a centered heading, compact award logos, and a caption. | brand credibility | logo row, centered caption |
| 8 | testimonials | Centered heading above a multi-column horizontal row of testimonial cards. | customer quotes, product references, show more | graphite cards, initial avatars, star ratings |
| 9 | logo-cloud | Centered heading above one horizontal row of retailer logos. | retailer discovery | brand logo row |
| 10 | other | Large open black area with no visible text or controls. |  | black canvas, open spacing |
| 11 | integrations | Centered heading above a horizontal row of integration tiles. | platform recognition | dark rounded tiles, brand names |
| 12 | feature-grid | Centered heading above two rows of compact benefit cards. | purchase reassurance, support overview | charcoal cards, small icons, compact copy |
| 13 | content-feed | Four-column editorial card row with images, dates, and article titles. | browse articles, see all blogs | image-led cards, compact metadata |
| 14 | content-feed | Two-column news section with a large lead story and smaller stacked stories. | browse news | lead image, stacked story list |
| 15 | newsletter | Wide illustrated newsletter banner with form content on one side. | email signup, consent checkbox, coupon offer | cyan submit button, white input, bright coupon artwork |
| 16 | footer | Graphite footer with five link columns, payment and social marks, and brand strip. | site navigation, social links, payment methods | muted link lists, column layout, brand marks |

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