Ezvizlife Brand Design System Deep Dive

1. Brand Overview

Ezvizlife’s website gives off a clean, tech-forward, consumer-friendly vibe. This is smart home security gear, so trust and clarity matter. The design is functional, not ornamental — it’s here to sell cameras and connected devices, and make you believe they’re reliable. The palette is restrained. The typography is modern, sans-serif, and utilitarian. Layouts feel predictable, in a good way — no experimental grids, no avant-garde asymmetry. This is a brand that wants you to find the product, understand what it does, and click “buy” without friction.

There’s a clear hierarchy in the UI: bold primary blue (#2666ff) for CTAs, plenty of whites and grays for neutrality, and Roboto everywhere. They’ve kept the color count low, which makes interactions stand out. The overall impression: corporate tech with consumer accessibility.

Their design philosophy leans toward minimal chrome — no dramatic shadows, no heavy gradients. Borders are subtle, often in very light grays (#eaeaea, #eeeeee). Rounded corners are frequent, sometimes fully circular (50% radius) for buttons and icons. This softens the otherwise stark tech look. They’re playing in the same visual space as brands like Ring or Arlo — straightforward, approachable, but with a hint of premium through crisp typography and precise spacing.

In short: Ezvizlife’s system is built for clarity, speed, and trust. They use a limited palette intentionally. Typography is consistent. Spacing follows an 8px scale with occasional odd numbers. Components are predictable, making the site easy to navigate. This works because the product category demands focus — you’re not here to admire the design, you’re here to understand security cameras quickly.

2. Color System

2.1 Primary Colors

The primary brand color is #2666ff (rgb(38, 102, 255)). It’s a saturated blue, leaning slightly toward cobalt. Blue in tech branding is a cliché for a reason: it conveys trust, reliability, and professionalism. In security tech, it’s practically the default — think ADT blue, Ring’s blue accents, Arlo’s greens. Ezvizlife’s blue is bright enough to pop against white, but deep enough to avoid cartoonishness.

They use this blue for interactive elements: primary buttons, next/prev carousel controls, and link highlights. It’s sparingly applied — which is good. Overuse would dilute its CTA power.

2.2 Complete Palette

Here’s every extracted color, with my own role/usage interpretation based on the data:

2.3 Color Relationships

Contrast is generally solid: #2666ff on white hits WCAG AA easily for normal text and AAA for large text. Dark gray (#333333) on white is high contrast. The light grays (#b3b3b3, #999999) are too low contrast for body text — they’re rightly used for secondary or disabled states.

No evidence of a dark mode here. The palette is tuned for light backgrounds.

2.4 Usage Guide

Works well:

• #2666ff on #ffffff for CTAs — high contrast, brand-defining.
• #333333 on #ffffff for body — readable and safe.
• Light grays for borders — keeps UI clean without clutter.

Avoid:

• Using light gray text (#b3b3b3) on white for anything important — fails accessibility.
• Using multiple blues together (#2666ff with #549cff) without clear hierarchy — could confuse CTA priority.

3. Typography

3.1 Font Families

Two distinct font families: Roboto and a custom “yf” font (source unknown). Roboto is standard — modern, geometric, widely supported. “yf” appears in headings and links, possibly for branding flair or specialty text.

No Google Fonts or Adobe Fonts detected in the source list — which is interesting. They may self-host Roboto and “yf.”

3.2 Type Scale

All extracted sizes:

3.3 Hierarchy

They rely on size and weight more than color for hierarchy. Big jump from 50px to 40px for major headings. Roboto 500 for emphasis, 300 for lighter copy. “yf” has odd line heights (4.50, 4.95) — that’s huge; likely decorative headings or vertical rhythm adjustments.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale, but they break it with odd values (3.75px, 5px, 6px). That means they’re not religious about it — possibly fine-tuning component padding.

Common values:

• Micros: 3.75px, 5px, 6px, 7px — icon gaps, tight elements.
• Small: 8px, 9px, 10px, 12px — button padding, small margins.
• Medium: 20px, 21px, 23px, 24px — card/content padding.
• Large: 29.184px, 30px, 33px, 35px, 50px — section spacing.
• Huge: 496.891px, 939.797px — likely hero image heights.

4.2 Layout

Breakpoints: 98px (odd — maybe a tiny element), 768px (tablet), 960px, 991px, 992px (desktop). This suggests Vuetify defaults plus custom tweaks.

5. Visual Elements

Border Radius System

Values range from sharp (0px) to fully circular (50%). Frequent:

• 5px — common for buttons, list items.
• 20px, 22px — pill-like buttons.
• 38.4px — large pill buttons (primary CTAs).
• 50% — avatars, round buttons. Oddities: 500px radius for h3 — maybe decorative circles.

Shadows

Only three shadows detected — all subtle:

• rgb(241, 241, 241) 0px 0px 10px 0px — ultra-light.
• rgba(0, 0, 0, 0.3) 0px 1px 3px — small depth.
• rgb(221, 221, 221) 0px 2px 3px — soft border-like.

Shadows are rare; they prefer flat design.

Borders

Mostly 1px solid in grays (#f5f5f5, #eaeaea) or brand blue (#2666ff). Used for dividers and hover states.

6. Components

6.1 Buttons

White button (button-white)

• Default: bg #ffffff, text #2666ff, padding 0 57px, radius 38.4px, no border.
• Hover/Active: not defined.
• Font: 400 weight, 16px.

Circular blue button (scenes-button-next)

• Default: bg #2666ff, text #ffffff, radius 50%.
• Hover: bg #f8f9fa, text #212529, border 1px solid #2666ff, opacity 0.5.
• Active: bg #f8f9fa, text #212529, border 1px solid #2666ff, box-shadow rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem.
• Focus: same box-shadow, no outline.

GDPR action button

• Default: transparent bg, text #ffffff, padding 7px 22px, radius 22px, border 1px solid #eaeaea.
• Hover/Active: same pattern as circular button (bg #f8f9fa, text #212529, border #2666ff).

6.2 Links

Variants:

• White text (#ffffff), underline on hover.
• Dark gray (#333333), underline on hover.
• Light gray (#999999), underline on hover.
• Blue (#2666ff), underline on hover.
• Medium gray (#666666), underline on hover.

6.3 Forms

Inputs: minimal detection — one inset 2px border (#767676), possibly default browser styles.

6.4 Cards

Not explicitly extracted, but borders and shadows suggest flat cards with 5px–20px radius, light gray borders.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #333333;
  --color-white: #ffffff;
  --color-medium-gray: #666666;
  --color-primary-blue: #2666ff;
  --color-light-gray: #b3b3b3;
  --color-light-blue: #549cff;
  --color-mid-gray: #999999;
  --color-grayish: #7a7a7a;
  --color-darker-blue: #094fb6;
  --color-off-white: #eaeaea;
  --color-swiper-theme: #007aff;

  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-yf: "yf", sans-serif;

  /* Spacing */
  --space-3_75: 3.75px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-20: 20px;
  --space-21: 21px;
  --space-23: 23px;
  --space-24: 24px;
  --space-29_184: 29.184px;
  --space-30: 30px;
  --space-33: 33px;
  --space-35: 35px;
  --space-50: 50px;
  --space-496_891: 496.891px;
  --space-939_797: 939.797px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-1_5: 1.5px;
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-38_4: 38.4px;
  --radius-50: 50px;
  --radius-54: 54px;
  --radius-60: 60px;
  --radius-500: 500px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: rgb(241, 241, 241) 0px 0px 10px 0px;
  --shadow-dark: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
  --shadow-gray: rgb(221, 221, 221) 0px 2px 3px 0px;
}

8. AI Coding Assistant Prompt

# Ezvizlife Design System Specification

System Prompt:
You are an Ezvizlife design expert. Build UIs matching their visual language exactly.

Brand Context:
Ezvizlife designs smart home security interfaces that prioritize clarity, trust, and ease of use. The visual language is minimal, with a crisp blue for actions, neutral grays for structure, and generous white space. Rounded corners soften the tech aesthetic.

Color Palette:
- Dark Gray: #333333 — Primary text, nav, headers
- White: #ffffff — Background, text on blue
- Medium Gray: #666666 — Secondary text in nav
- Primary Blue: #2666ff — CTAs, buttons, links, carousel controls
- Light Gray: #b3b3b3 — Disabled states
- Light Blue: #549cff — Secondary accents
- Mid Gray: #999999 — Tertiary text, arrows
- Grayish: #7a7a7a — Placeholder text
- Darker Blue: #094fb6 — Rare accent
- Off White: #eaeaea — Dividers, subtle borders
- Swiper Theme Blue: #007aff — Sliders

Typography:
- Fonts: Roboto, sans-serif; yf, sans-serif
- Sizes:
  - H1: 50px, 500, lh 1.74 (Roboto)
  - H2: 40px, 500, lh 1.50 (Roboto)
  - Large Link: 42.816px, 400, lh 1.50 (Roboto)
  - Brand Link: 30px, 300, lh 1.50, -1px spacing (yf)
  - Body Large: 24px, 300/500, lh 1.50 (Roboto)
  - Decorative: 22px/20px, 400, lh 4.5/4.95 (yf)
  - Body: 18px, 400, lh 1.50 (Roboto)
  - Small: 16px, various weights, lh 1.50–3.80 (Roboto/yf)
  - Caption: 14px, 400, lh 1.50 (Roboto)
  - Tiny: 12px, 400, lh 1.50 (Roboto)

Spacing & Grid:
Base: 8px scale, with micro adjustments.
Scale: 3.75px, 5px, 6px, 7px, 8px, 9px, 10px, 12px, 13px, 20px, 21px, 23px, 24px, 29.184px, 30px, 33px, 35px, 50px, 496.891px, 939.797px.

Border Radius:
- none: 0px — sharp elements
- sm: 1.5px — fine details
- base: 5px — buttons, lists
- md: 10px–22px — cards, medium buttons
- lg: 38.4px — pill buttons
- xl: 50px+ — large pills
- full: 50% — round icons, avatars

Shadows & Depth:
Minimal shadows:
- Light: rgb(241, 241, 241) 0px 0px 10px 0px
- Dark: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px
- Gray: rgb(221, 221, 221) 0px 2px 3px 0px

Component Specifications:

Primary Button (.button-white):
- Default: bg #ffffff, color #2666ff, padding 0 57px, radius 38.4px, border none.
- Hover: n/a
- Active: n/a
- Focus: n/a

Secondary Button (.scenes-button-next):
- Default: bg #2666ff, color #ffffff, radius 50%.
- Hover: bg #f8f9fa, color #212529, border 1px solid #2666ff, opacity 0.5.
- Active: bg #f8f9fa, color #212529, border 1px solid #2666ff, box-shadow rgba(248, 249, 250, 0.5) 0px 0px 0px 0.2rem.
- Focus: same box-shadow, outline none.

Tertiary Button (.gdpr-action):
- Default: transparent bg, color #ffffff, padding 7px 22px, radius 22px, border 1px solid #eaeaea.
- Hover/Active: bg #f8f9fa, color #212529, border #2666ff.

Navigation Links:
- Default: color varies (#ffffff, #333333, #999999, #2666ff, #666666), no underline.
- Hover: underline.

Input Fields:
- Border: 2px inset #767676 (default browser)
- Focus: n/a
- Disabled: n/a

Cards:
- Background: #ffffff
- Radius: 5px–20px
- Border: 1px solid #eaeaea or #eeeeee
- Shadow: minimal/light

Layout & Responsive Rules:
- Breakpoints: 98px, 768px, 960px, 991px, 992px
- Mobile: <768px
- Tablet: 768–991px
- Desktop: ≥992px

Interaction Rules:
- Transitions: ~150ms ease
- Focus indicators: box-shadow on buttons
- Loading states: opacity change

DO:
- Use ONLY colors from palette
- Maintain 8px grid (allow micro adjustments)
- Use Roboto for most text, yf for brand/decorative
- Keep corners consistent per component
- Keep shadows subtle

DON'T:
- Invent new colors
- Mix sharp and rounded corners arbitrarily
- Use light gray text for important content
- Overuse primary blue — reserve for CTAs

Code Examples:

Primary Button:
```css
.button-white {
  background: #ffffff;
  color: #2666ff;
  padding: 0 57px;
  border-radius: 38.4px;
  font-weight: 400;
  font-size: 16px;
  border: none;
}

Secondary Button:

.scenes-button-next {
  background: #2666ff;
  color: #ffffff;
  border-radius: 50%;
}
.scenes-button-next:hover {
  background: #f8f9fa;
  color: #212529;
  border: 1px solid #2666ff;
  opacity: 0.5;
}

Card:

.card {
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  padding: 20px;
}

---

## 9. Summary

**TL;DR** — Ezvizlife’s design system is minimal, with a bright cobalt blue as the interaction anchor, Roboto as the workhorse font, and an 8px grid with occasional fine-tuning. Rounded corners and subtle shadows soften the tech look. Keep it clean, keep it consistent.

**Brand Keywords**:
- tech-trust
- clean-minimal
- blue-CTA
- rounded-accessible
- grid-disciplined