Ys7 Design System Deep Dive

1. Brand Overview

Ys7 feels like a utilitarian tech brand with a consumer-friendly edge. No flashy gradients, no over-the-top animations. Instead, it’s clean, structured, and slightly warm. This is not the cold, hyper-minimal SaaS aesthetic; it’s somewhere between enterprise security and approachable home tech.

The typography choice—Microsoft Yahei with PingFang SC fallback—immediately signals a Chinese-language primary audience. Sans-serif, humanist, legible. The type is set with noticeable letter spacing in headings (up to 3.38px) which gives breathing room and a touch of modernity. They’re not afraid to tighten line-height for density either (down to 1.29 for captions).

Color-wise, the hero is #fcab64 — a warm orange-peach. This isn’t the aggressive safety orange you see in industrial brands; it’s softer, almost edible. It’s paired with a range of greys from #2e2f32 (deep neutral) through #959595 (mid grey) to #cccccc (light grey). White is used liberally for background and surfacing.

There's no obvious "dark mode" strategy here — the palette leans heavily towards light surfaces with dark text. Shadows are subtle, low-opacity, and infrequent. Depth comes more from spacing and borders than from heavy drop shadows.

Button and input styling is functional. Borders are 1px, corners are mostly 2px or 4px radius, occasionally asymmetric. This asymmetry (like 0px 2px 2px 0px) is a design choice—probably tied to paired input-button combos in search or form UI.

This is a Vuetify-based site (26 v- components detected), so the design language is constrained by that framework’s conventions. That explains the consistent spacing multiples and relatively flat component styles.

If you’re building for Ys7, think: practical first, charming second. The warmth comes from the accent color, the friendliness from the rounded corners, and the trustworthiness from the neutral base.

2. Color System

2.1 Primary Colors

The primary accent is #fcab64. Warm, inviting, but not screaming for attention. This works for a brand that wants to be approachable—likely in home security or consumer electronics—without feeling cheap. Compared to competitors who might use saturated reds or blues (security industry loves blue for trust), this is a differentiator. Orange can convey alertness, but here it’s softened enough to feel safe.

Greys are the functional backbone. #666666 is the main link and text color. Dark enough for readability, but not black — slightly softer on the eyes. #2e2f32 is used for deeper emphasis text or headings. #959595 and #cccccc take care of secondary and disabled states.

White (#ffffff) is the default background. There’s no hint of tinted backgrounds or off-whites in primary surfaces.

2.2 Complete Palette

2.3 Color Relationships

Contrast-wise, #666666 on white is fine (contrast ratio ~5.3:1) — passes WCAG AA for normal text. #fcab64 on white is borderline for small text (~2.3:1) — so it’s best for larger elements like buttons or headings, not small captions. The deep neutral #2e2f32 gives strong contrast (~13:1) and is safe anywhere.

No dark mode palette extracted — so this is a single-mode design.

2.4 Usage Guide

• #fcab64 works well with #2e2f32 for high-contrast CTAs.
• Avoid using #fcab64 for small text — readability suffers.
• #79797a and #959595 are safe for secondary text but should not be used for primary copy.
• Hover states use slightly darker greys or warmer oranges — keep that consistent.
• White background with deep neutral headings keeps the brand clean.

3. Typography

3.1 Font Families

• Primary: Microsoft Yahei
• Fallbacks: PingFang SC
• Secondary: Arial (buttons), Tahoma (some captions)
• No Google Fonts or Adobe Fonts — all system fonts.

Microsoft Yahei/PingFang SC are strong choices for Chinese UI — good legibility, modern sans-serif style. Arial and Tahoma appear in functional UI (buttons, captions) — likely from framework defaults.

3.2 Type Scale

3.3 Hierarchy

The heading system is flat — many 18px variants with different weights and spacing. This suggests a modular UI where headings adapt to context rather than strict H1/H2/H3 roles. Large 24px heading is the outlier — probably reserved for hero titles.

Links sometimes have very tall line-heights (3.83) — likely for navigation items inside tall containers.

Captions are consistently 14px or 12px — small, readable, but with varied line-heights for density control.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — confirmed by multiples detected.

4.2 Layout

No explicit breakpoints in extracted data — but Vuetify defaults apply. Expect responsive design with container widths and gutters based on 8px multiples.

5. Visual Elements

Border Radius

Mostly small radii — 2px and 4px dominate. Asymmetric radii clearly indicate paired elements (input + button combos).

Shadows

Subtle, low-opacity:

• rgba(0, 0, 0, 0.05) 0px 13px 15px 0px
• rgba(0, 0, 0, 0.03) 0px 13px 15px 0px
• rgba(255, 255, 255, 0.36) 0px 0px 10px 0px
• rgba(0, 0, 0, 0.05) 0px 0px 6px 2px
• rgba(0, 0, 0, 0.06) 0px 6px 30px 0px

No heavy shadows — everything is light and airy.

Borders

Thin:

• 1px solid greys (#e1e1e1, #eaebed)
• Occasionally asymmetric widths (1px 1px 1px 0px)

6. Components

6.1 Buttons

Default (auto-complete class):

• Background: rgb(253, 253, 253)
• Color: #000000
• Padding: 0px
• Border radius: 0px 2px 2px 0px
• No border
• Font: Arial, 13.3333px, weight 400

No hover/active/focus states extracted — so they might be handled by JS or Vuetify defaults.

6.2 Links

Multiple color variants:

• #666666 — main link
• #0000ee — blue link (probably unstyled HTML default)
• #767676 — secondary
• #ffffff — links on dark backgrounds
• #cccccc — muted, weight 700
• #79797a — subtle
• #2e2f32 — strong

No underline — all text-decoration none.

6.3 Forms

Text input:

• Background: rgb(253, 253, 253)
• Color: #000000
• Border: 1px solid #e1e1e1
• Radius: 2px 0px 0px 2px
• Padding: 0px 25px 0px 10px

No focus state extracted — likely default Vuetify.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-grey: #666666;
  --color-warm-orange: #fcab64;
  --color-mid-grey: #79797a;
  --color-white: #ffffff;
  --color-mid-light-grey: #959595;
  --color-deep-neutral: #2e2f32;
  --color-light-grey: #cccccc;
  --color-charcoal-grey: #373737;
  --color-charcoal-light: #363636;
  --color-warm-orange-light: #fbad68;
  --color-warm-beige: #e3ddd8;
  --color-near-black: #130d08;
  --color-orange-soft: #f2a765;

  /* Typography */
  --font-primary: "Microsoft Yahei", "PingFang SC", sans-serif;
  --font-secondary: Arial, sans-serif;
  --font-tertiary: Tahoma, "宋体", Helvetica, Arial, STXihei, SimSun;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-29: 29px;
  --space-30: 30px;
  --space-41: 41px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-btn: 0px 2px 2px 0px;
  --radius-input: 2px 0px 0px 2px;
  --radius-sm: 2px;
  --radius-md-asym: 4px 0px 4px 4px;
  --radius-md: 4px;
  --radius-lg: 5px;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.05) 0px 13px 15px 0px;
  --shadow-2: rgba(0, 0, 0, 0.03) 0px 13px 15px 0px;
  --shadow-3: rgba(255, 255, 255, 0.36) 0px 0px 10px 0px;
  --shadow-4: rgba(0, 0, 0, 0.05) 0px 0px 6px 2px;
  --shadow-5: rgba(0, 0, 0, 0.06) 0px 6px 30px 0px;
}

8. AI Coding Assistant Prompt

# Ys7 Design System Specification

System Prompt:
You are a Ys7 design expert. Build UIs matching their visual language exactly.

Brand Context:
Ys7 blends practical, functional UI with a warm accent. Typography is optimized for Chinese language readability. Layouts are clean, light, and structured with subtle depth. Rounded corners and warm orange accents bring approachability to a tech brand.

Color Palette:
- Dark Grey: #666666 — Main link color, body text
- Warm Orange: #fcab64 — Primary accent for CTAs and highlights
- Mid Grey: #79797a — Secondary text
- White: #ffffff — Page background, text on dark surfaces
- Mid-Light Grey: #959595 — Tertiary text, muted UI elements
- Deep Neutral: #2e2f32 — Headings, strong UI text
- Light Grey: #cccccc — Disabled states, light dividers
- Charcoal Grey: #373737 — Hover backgrounds
- Charcoal Light: #363636 — Alternate hover backgrounds
- Warm Orange Light: #fbad68 — Hover state for buttons/links
- Warm Beige: #e3ddd8 — Subtle hover fills
- Near Black: #130d08 — Hover text color
- Orange Soft: #f2a765 — Hover accent for warm buttons

Typography:
- Primary Font: "Microsoft Yahei", "PingFang SC", sans-serif
- Secondary: Arial
- Tertiary: Tahoma, "宋体", Helvetica, Arial, STXihei, SimSun

Type Sizes:
| Element    | Size | Weight | Line Height | Use For |
|------------|------|--------|-------------|---------|
| H1         | 24px | 500    | 1.50        | Page titles |
| Heading    | 18px | 500    | 1.56        | Section headings |
| Heading    | 18px | 700    | 1.33        | Emphasis headings |
| Heading    | 18px | 400    | 1.33        | Subheadings |
| Link Nav   | 18px | 700    | 3.83        | Navigation |
| Caption    | 14px | 400-700| 1.29-1.71   | Small labels |
| Button     | 13.33px | 400 | null        | UI buttons |
| Small Link | 12px | 400    | 1.50-4.17   | Minor navigation |

Spacing & Grid:
Base: 8px
Scale: 2px, 4px, 5px, 6px, 8px, 10px, 15px, 20px, 25px, 29px, 30px, 41px, 50px, 60px, 80px
Use: Button padding (5px), section gaps (20px, 50px), card padding (30px)

Border Radius:
- Button: 0px 2px 2px 0px
- Input: 2px 0px 0px 2px
- sm: 2px
- md-asym: 4px 0px 4px 4px
- md: 4px
- lg: 5px

Shadows:
- rgba(0, 0, 0, 0.05) 0px 13px 15px 0px
- rgba(0, 0, 0, 0.03) 0px 13px 15px 0px
- rgba(255, 255, 255, 0.36) 0px 0px 10px 0px
- rgba(0, 0, 0, 0.05) 0px 0px 6px 2px
- rgba(0, 0, 0, 0.06) 0px 6px 30px 0px

Component Specifications:
Primary Button:
```css
.btn-primary {
  background: #fcab64;
  color: #ffffff;
  padding: 5px 20px;
  border-radius: 0px 2px 2px 0px;
  font-family: Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #fbad68; }
.btn-primary:focus { outline: 2px solid #2e2f32; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #666666;
  padding: 5px 20px;
  border-radius: 4px;
  border: 1px solid #cccccc;
}
.btn-secondary:hover { background: #e3ddd8; }
```

Navigation Links:
```css
.nav-link {
  color: #666666;
  text-decoration: none;
  font-family: "Microsoft Yahei";
  font-size: 18px;
  font-weight: 700;
  line-height: 3.83;
}
.nav-link:hover { color: #2e2f32; }
```

Input Fields:
```css
.input-text {
  background: #fdfdfd;
  color: #000000;
  border: 1px solid #e1e1e1;
  border-radius: 2px 0px 0px 2px;
  padding: 0px 25px 0px 10px;
}
.input-text:focus { border-color: #fcab64; outline: none; }
```

Cards:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.05) 0px 13px 15px 0px;
}
```

Layout & Responsive Rules:
Max content width: framework default
Page padding: multiples of 8px
Grid gap: 20px (section), 8px (component)

Interaction Rules:
- Transition: 150ms ease for hover/active
- Focus indicators: solid outline in deep neutral
- Loading states: opacity changes

DO List:
- Use ONLY colors from palette
- Maintain 8px grid
- Use Microsoft Yahei for headings and body
- Keep borders at 1px for inputs
- Use asymmetric radius for paired input/button combos
- Stick to subtle shadows provided
- Warm orange only for accents/CTAs

DON'T List:
- Invent new colors
- Use heavy shadows
- Mix sharp and rounded corners arbitrarily
- Apply warm orange to long paragraphs
- Remove spacing multiples from grid

Code Examples:
Primary Button:
```css
.btn-primary { /* as above */ }
```
Card:
```css
.card { /* as above */ }
```
Input:
```css
.input-text { /* as above */ }
```

9. Summary

TL;DR — Ys7’s design language is functional, warm, and clean. Built on Vuetify, it uses an 8px grid, small radii, a single warm accent color, and typographic choices tailored for Chinese readability.

Brand Keywords: warm-functional, grid-disciplined, subtle-depth, readable-Chinese, vuetify-driven