Wyzecam Brand Design System Deep Dive

1. Brand Overview

Wyze feels like the “smart tech for everyone” brand. Their design language says approachable precision — consumer-friendly, but still engineered. You can sense they’re selling trust alongside cameras, sensors, and smart home gear. This isn’t luxury tech; it’s everyday tech that still looks clean and professional.

From the moment you land on wyze.com, you’re hit with bold, high-contrast visuals: crisp whites, deep blacks, and pops of vibrant green-teal. No pastel softness here. They want the interface to feel solid, confident, and modern. The black/white foundation makes the green accents almost neon by comparison — you notice them instantly.

Typography is tight and geometric — Gilroy everywhere, with fallback stacks leaning on Futura and system sans. Line heights are controlled, tracking is minimal. This gives everything a “designed” feel, not just default web type.

Spacing follows an 8px grid, which is the modern standard for scalable design systems. That keeps margins, paddings, and gaps consistent across devices. Breakpoints start at tiny widths (99px!) and scale up past 1400px — they’ve clearly thought about ultra-small devices and widescreens.

The vibe: straightforward technology UI. No skeuomorphism, no decorative flourishes. Rounded corners are used with intent — small radii for utility elements, larger (24px) for feature banners and cards. Shadows are minimal and soft (rgba with low opacity), reinforcing the flat-modern aesthetic.

If you’re designing for Wyze, you’re designing for clarity, speed, and focus. A primary green button means action. Black text on white is the default read mode. Everything else is secondary.

2. Color System

2.1 Primary Colors

Primary is a functional black (#000000), used for text and outlines, but the visual brand accent is a saturated teal-green (#0aa288 and its brighter cousin rgb(29,240,187)). This green is high-energy without feeling too “eco” or “finance.” It’s techy. Perfect for CTAs, highlights, and interactive states.

Compared to competitors (Nest, Ring), Wyze’s green is more saturated and less blue. It’s closer to a tropical teal, which feels a little friendlier than pure corporate blue.

2.2 Complete Palette

Here’s the extracted palette mapped to roles and usage:

They’ve got a huge variable set (--gw-color-*) spanning yellows, oranges, blues, purples, etc., but the site’s core usage is black, white, teal, and occasional gray.

2.3 Color Relationships

Contrast is strong: black on white is AAA compliant. Teal on white is borderline (depends on exact shade — #0aa288 passes for large text). They use teal mostly for interactive elements, so contrast is acceptable given the context.

Dark mode? Not explicitly implemented, but dark grays (#1f1f1f) and white text appear in banners and overlay sections — so the palette supports high-contrast dark surfaces.

2.4 Usage Guide

• Black + White = default, high readability.
• Teal is only for interaction: buttons, hover states, highlights.
• Avoid using teal for body text — it’s reserved for emphasis.
• Link blue is legacy/default browser styling — could be tightened.
• Grays control hierarchy: darker for important secondary, lighter for disabled.

3. Typography

3.1 Font Families

Gilroy dominates. Fallbacks include Futura, system sans (-apple-system, Segoe UI, Roboto, etc.). No serif anywhere. Google Fonts source lists “Poppins,” but Gilroy is the main rendered face.

Gilroy is geometric, clean, slightly condensed — great match for tech UI. Futura fallback keeps the aesthetic if Gilroy fails.

3.2 Type Scale

Extracted styles:

3.3 Hierarchy

H1s are bold and big — 45px max. Subheadings drop quickly into 32px and 24px ranges, keeping the hierarchy tight. Body text is mostly 16px with generous line heights (1.3–1.8), which helps readability on dense product pages.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints:

• Mobile min: 99px (yes, ultra-small)
• Common: 480px, 768px, 1024px, 1200px, 1400px
• Responsive is clearly thought through — small screens get stacked layouts, large screens keep multi-column grid.

5. Visual Elements

Border Radius

Values range from sharp (0px) to soft (24px). Common:

• 4px — badges, inputs
• 6px — images, small cards
• 7px — buttons
• 8px — cards, buttons
• 24px — feature cards, banner images
• 50% — round icons

Shadows

Minimal: rgba black at 0.15 for soft drop shadows. No heavy elevation. Mostly flat design.

Borders

Used for separation — 1px solid light gray (#ccc), or rgba dark gray for overlays.

6. Components

6.1 Buttons

Example: Primary Button (button--primary)

• Default: bg white, text black, radius 7px, padding 0px 25px
• Hover: bg teal (#17c9a7), text foreground
• Active: inset shadow, bg dark teal
• Focus: light outline, bg white

Outline Button (btn-dk-outline-s)

• Default: transparent bg, black border 2px, radius 4px
• Hover: teal bg
• Active: dark teal bg

CTA Button (wyze-brand-banner__button)

• Default: black bg, white text, padding 16px 24px, radius 8px
• Hover: teal bg

6.2 Links

• Black text, no underline by default
• Hover: underline with 0.2rem thickness
• Some links use teal or blue; hover often changes color to dark green.

6.3 Forms

Search input:

• Default: black bg, white text, radius 4px, padding 15px
• Focus: outline .2rem solid active color

6.4 Cards

Card radii vary: 8px, 24px. Flat bg, minimal shadows.

7. Design Tokens

/* Colors */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #1f1f1f;
  --color-gray-medium: #3b3b3b;
  --color-gray-light: #969696;
  --color-teal: #0aa288;
  --color-teal-bright: #1df0bb;
  --color-green-dark: #055446;
  --color-blue-link: #0000ee;
  /* ...add all --gw-color-* variables as extracted */
}

/* Typography */
:root {
  --font-primary: "Gilroy", Futura, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-h1: 45px;
  --font-size-body: 16px;
  --line-height-tight: 1.0;
  --line-height-normal: 1.3;
}

/* Spacing */
:root {
  --space-1: 1px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
}

/* Radius */
:root {
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-xl: 24px;
  --radius-round: 50%;
}

/* Shadows */
:root {
  --shadow-soft: rgba(31,31,31,0.15) 0px 4px 5px 0px;
}

8. AI Coding Assistant Prompt

# Wyze Design System Specification

You are a Wyze design expert. Build UIs matching their visual language exactly.

## Brand Context
Wyze’s design is high-contrast, tech-forward, and approachable. Black and white form the foundation, with vibrant teal accents for interaction. Typography is geometric sans with tight line heights. Spacing follows an 8px grid.

## Color Palette
- Black: #000000 — Primary text, outlines
- White: #ffffff — Backgrounds, inverse text
- Dark Gray: #1f1f1f — Overlay bg, header
- Medium Gray: #3b3b3b — Secondary text
- Light Gray: #969696 — Disabled text
- Teal: #0aa288 — Accent, CTAs
- Bright Green: #1df0bb — Primary button bg
- Dark Green: #055446 — Emphasis text
- Link Blue: #0000ee — Inline links

## Typography
- Primary font: "Gilroy", Futura, -apple-system, system-ui, Segoe UI, Roboto
- H1: 45px, 700, 1.0
- H2: 38px, 700, 1.16
- Body: 16px, 400–600, 1.3–1.8
- Caption: 14px, 400–700, 1.14–1.8

## Spacing & Grid
Base: 8px
Scale: 1px, 5px, 8px, 10px, 16px, 24px, 32px, 64px
Use multiples for padding, margins, gaps.

## Border Radius
- none: 0px — tables
- sm: 4px — inputs, badges
- md: 7px — buttons
- lg: 8px — cards
- xl: 24px — banners
- round: 50% — avatars

## Shadows & Depth
Minimal shadows: rgba(31,31,31,0.15) 0px 4px 5px

## Components

### Primary Button
Default: bg #ffffff, text #000000, radius 7px, padding 0 25px, font 15px 600  
Hover: bg #17c9a7, opacity 0.7  
Active: inset shadow, bg var(--wyze-green-dark), opacity 0.8  
Focus: box-shadow 0 0 .2rem rgba(var(--color-background),.3)

### Outline Button
Default: transparent bg, border 2px solid #000000, radius 4px  
Hover: bg #17c9a7  

### Input Field
Default: bg #1f1f1f, text #ffffff, radius 4px, padding 15px  
Focus: outline .2rem solid active color

### Link
Default: color #1f1f1f, no underline  
Hover: underline 0.2rem

## Layout & Responsive Rules
Max width: 1400px  
Breakpoints: 99px, 480px, 768px, 1024px, 1200px, 1400px  
Mobile: stacked, desktop: grid

## Interaction Rules
Transition: 150ms ease for state changes  
Focus indicators: solid outline with brand color

## DO
- Use only palette colors
- Keep 8px grid
- Use Gilroy for headings and body
- Reserve teal for interactive elements
- Maintain consistent corner radius per component type

## DON'T
- Add unapproved colors
- Mix sharp and rounded corners
- Overuse shadows
- Use teal for long body paragraphs

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  padding: 0 25px;
  border-radius: 7px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #17c9a7; opacity: 0.7; }
.btn-primary:focus { outline: 2px solid #055446; }

Card

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(31,31,31,0.15) 0px 4px 5px 0px;
}

Input

.input {
  background: #1f1f1f;
  color: #ffffff;
  border-radius: 4px;
  padding: 15px;
}
.input:focus {
  outline: .2rem solid #0aa288;
}

---

## 9. Summary

**TL;DR** — Wyze’s design system is black/white foundation with teal-green accents, Gilroy type, 8px grid, minimal shadows, and consistent rounded corners. Everything is clear, functional, and approachable.

**Brand Keywords**:
- tech-accessible
- high-contrast
- action-focused
- geometric-clean
- minimal-shadow