---
version: 1.0.0
name: Unifan-B2B-Drinkware-Design-System
description: An authoritative, production-grade design system specification for Quanzhou Unifan Import & Export Co., Ltd. (unifandrinkware.com). Built on the Google Stitch DESIGN.md standard and cnproduct/awesome-design-md architecture, this document unifies Unifan's Water Dragon super symbol, precision drinkware engineering aesthetics, dual light/dark surface tokens, WCAG AAA contrast scales, and cylindrical logo placement standards for autonomous AI coding agents and designers.
colors:
# Primary Brand Palette (Forest Pine & Flowing Water)
primary: "#04472e"
primary-dark: "#022c1d"
primary-light: "#e8f5ee"
primary-soft: "#0d6b46"
primary-accent: "#10b981"
primary-glow: "rgba(4, 71, 46, 0.28)"
# Secondary Eco / Emerald Range
secondary: "#059669"
secondary-dark: "#047857"
secondary-light: "#d1fae5"
secondary-bright: "#34d399"
# Metallic & Industrial Drinkware Substrates
substrate-steel-sus304: "#71717a"
substrate-steel-sus316: "#52525b"
substrate-titanium-gr1: "#475569"
substrate-titanium-light: "#94a3b8"
substrate-copper-lining: "#b45309"
# Functional & Accent Roles
accent-amber: "#f59e0b"
accent-amber-dark: "#d97706"
accent-amber-light: "#fef3c7"
accent-sky: "#0284c7"
accent-sky-light: "#e0f2fe"
accent-success: "#10b981"
accent-warning: "#f59e0b"
accent-error: "#ef4444"
# Canvas & Surface Surfaces (Dual-Mode Tokens)
canvas: "#fbfcfe"
canvas-soft: "#f1f5f9"
canvas-card: "#ffffff"
canvas-dark: "#0f172a"
canvas-dark-card: "#1e293b"
canvas-dark-soft: "#334155"
# Hairlines & Dividers
hairline: "#e2e8f0"
hairline-soft: "#f1f5f9"
hairline-dark: "#334155"
hairline-brand: "rgba(4, 71, 46, 0.15)"
# Typography & Text Inks
ink-strong: "#0f172a"
ink-body: "#334155"
ink-muted: "#64748b"
ink-subtle: "#94a3b8"
ink-inverse: "#ffffff"
ink-inverse-body: "#cbd5e1"
ink-inverse-muted: "#94a3b8"
typography:
font-family-display: "Montserrat, Outfit, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
font-family-sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
font-family-mono: "JetBrains Mono, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace"
display-2xl:
fontFamily: "{typography.font-family-display}"
fontSize: "clamp(2.5rem, 5vw, 4rem)"
fontWeight: 800
lineHeight: "1.12"
letterSpacing: "-0.035em"
display-xl:
fontFamily: "{typography.font-family-display}"
fontSize: "clamp(2rem, 4vw, 3.25rem)"
fontWeight: 800
lineHeight: "1.15"
letterSpacing: "-0.03em"
display-lg:
fontFamily: "{typography.font-family-display}"
fontSize: "clamp(1.75rem, 3vw, 2.5rem)"
fontWeight: 700
lineHeight: "1.2"
letterSpacing: "-0.025em"
display-md:
fontFamily: "{typography.font-family-display}"
fontSize: "clamp(1.35rem, 2.2vw, 1.85rem)"
fontWeight: 700
lineHeight: "1.3"
letterSpacing: "-0.02em"
display-sm:
fontFamily: "{typography.font-family-display}"
fontSize: "1.25rem"
fontWeight: 700
lineHeight: "1.4"
letterSpacing: "-0.015em"
eyebrow-mono:
fontFamily: "{typography.font-family-mono}"
fontSize: "0.8125rem"
fontWeight: 700
lineHeight: "1.4"
letterSpacing: "0.15em"
textTransform: "uppercase"
eyebrow-sans:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.875rem"
fontWeight: 700
lineHeight: "1.4"
letterSpacing: "0.08em"
textTransform: "uppercase"
body-xl:
fontFamily: "{typography.font-family-sans}"
fontSize: "1.1875rem"
fontWeight: 400
lineHeight: "1.7"
letterSpacing: "-0.01em"
body-lg:
fontFamily: "{typography.font-family-sans}"
fontSize: "1.0625rem"
fontWeight: 400
lineHeight: "1.65"
letterSpacing: "-0.008em"
body-md:
fontFamily: "{typography.font-family-sans}"
fontSize: "1rem"
fontWeight: 400
lineHeight: "1.6"
body-md-strong:
fontFamily: "{typography.font-family-sans}"
fontSize: "1rem"
fontWeight: 600
lineHeight: "1.6"
body-sm:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.875rem"
fontWeight: 400
lineHeight: "1.55"
body-sm-strong:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.875rem"
fontWeight: 600
lineHeight: "1.55"
caption:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.75rem"
fontWeight: 400
lineHeight: "1.4"
caption-strong:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: "1.4"
letterSpacing: "0.02em"
code:
fontFamily: "{typography.font-family-mono}"
fontSize: "0.875rem"
fontWeight: 400
lineHeight: "1.6"
code-sm:
fontFamily: "{typography.font-family-mono}"
fontSize: "0.8125rem"
fontWeight: 400
lineHeight: "1.5"
button-lg:
fontFamily: "{typography.font-family-sans}"
fontSize: "1.0625rem"
fontWeight: 700
lineHeight: "1.3"
letterSpacing: "0.01em"
button-md:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.9375rem"
fontWeight: 600
lineHeight: "1.3"
letterSpacing: "0.01em"
button-sm:
fontFamily: "{typography.font-family-sans}"
fontSize: "0.8125rem"
fontWeight: 600
lineHeight: "1.3"
letterSpacing: "0.02em"
rounded:
none: "0px"
xs: "4px"
sm: "6px"
md: "8px"
lg: "12px"
xl: "16px"
2xl: "24px"
pill: "9999px"
full: "50%"
spacing:
xxs: "2px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "20px"
2xl: "24px"
3xl: "32px"
4xl: "40px"
5xl: "48px"
6xl: "64px"
7xl: "80px"
8xl: "96px"
shadows:
xs: "0 1px 2px rgba(15, 23, 42, 0.04)"
sm: "0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)"
md: "0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04)"
lg: "0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04)"
xl: "0 20px 36px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.06)"
glow-brand: "0 0 24px rgba(4, 71, 46, 0.28)"
glow-emerald: "0 0 24px rgba(16, 185, 129, 0.35)"
components:
nav-bar:
backgroundColor: "{colors.canvas-card}"
borderColor: "{colors.hairline}"
textColor: "{colors.ink-strong}"
height: "76px"
padding: "{spacing.sm} {spacing.2xl}"
shadow: "{shadows.sm}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "{colors.ink-inverse}"
hoverBackgroundColor: "{colors.primary-dark}"
rounded: "{rounded.md}"
padding: "{spacing.md} {spacing.2xl}"
shadow: "{shadows.sm}"
typography: "{typography.button-md}"
button-secondary:
backgroundColor: "{colors.primary-light}"
textColor: "{colors.primary}"
hoverBackgroundColor: "{colors.secondary-light}"
rounded: "{rounded.md}"
padding: "{spacing.md} {spacing.2xl}"
typography: "{typography.button-md}"
button-accent:
backgroundColor: "{colors.accent-amber}"
textColor: "{colors.ink-strong}"
hoverBackgroundColor: "{colors.accent-amber-dark}"
rounded: "{rounded.md}"
padding: "{spacing.md} {spacing.2xl}"
shadow: "{shadows.sm}"
typography: "{typography.button-md}"
button-outline:
backgroundColor: "transparent"
borderColor: "{colors.hairline}"
textColor: "{colors.ink-strong}"
hoverBorderColor: "{colors.primary}"
hoverTextColor: "{colors.primary}"
rounded: "{rounded.md}"
padding: "{spacing.md} {spacing.2xl}"
typography: "{typography.button-md}"
badge-pill:
backgroundColor: "{colors.primary-light}"
textColor: "{colors.primary}"
borderColor: "transparent"
rounded: "{rounded.pill}"
padding: "{spacing.xs} {spacing.md}"
typography: "{typography.caption-strong}"
badge-pill-cyan:
backgroundColor: "{colors.accent-sky-light}"
textColor: "{colors.accent-sky}"
rounded: "{rounded.pill}"
padding: "{spacing.xs} {spacing.md}"
typography: "{typography.caption-strong}"
badge-pill-gold:
backgroundColor: "{colors.accent-amber-light}"
textColor: "{colors.accent-amber-dark}"
rounded: "{rounded.pill}"
padding: "{spacing.xs} {spacing.md}"
typography: "{typography.caption-strong}"
card-product:
backgroundColor: "{colors.canvas-card}"
borderColor: "{colors.hairline}"
hoverBorderColor: "{colors.primary-accent}"
rounded: "{rounded.lg}"
padding: "{spacing.lg}"
shadow: "{shadows.sm}"
hoverShadow: "{shadows.lg}"
transition: "transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
card-feature:
backgroundColor: "{colors.canvas-card}"
borderColor: "{colors.hairline}"
rounded: "{rounded.xl}"
padding: "{spacing.2xl}"
shadow: "{shadows.sm}"
card-feature-dark:
backgroundColor: "{colors.canvas-dark-card}"
borderColor: "{colors.hairline-dark}"
textColor: "{colors.ink-inverse}"
rounded: "{rounded.xl}"
padding: "{spacing.2xl}"
shadow: "{shadows.md}"
data-table:
backgroundColor: "{colors.canvas-card}"
borderColor: "{colors.hairline}"
headerBackgroundColor: "{colors.canvas-soft}"
headerTextColor: "{colors.ink-strong}"
cellTextColor: "{colors.ink-body}"
rounded: "{rounded.lg}"
cellPadding: "{spacing.md} {spacing.lg}"
form-input:
backgroundColor: "{colors.canvas-card}"
borderColor: "{colors.hairline}"
focusBorderColor: "{colors.primary}"
focusRingColor: "{colors.primary-glow}"
textColor: "{colors.ink-strong}"
placeholderColor: "{colors.ink-subtle}"
rounded: "{rounded.md}"
padding: "{spacing.md} {spacing.lg}"
typography: "{typography.body-md}"
hero-band:
backgroundColor: "{colors.canvas-dark}"
textColor: "{colors.ink-inverse}"
padding: "{spacing.8xl} {spacing.2xl}"
footer:
backgroundColor: "{colors.canvas-dark}"
textColor: "{colors.ink-inverse-body}"
borderColor: "{colors.hairline-dark}"
padding: "{spacing.7xl} {spacing.2xl} {spacing.3xl}"
---
# UNIFAN Brand Visual System & Architecture Specification
> **Standard Compliance**: Google Stitch `DESIGN.md` Standard & [cnproduct/awesome-design-md](https://github.com/cnproduct/awesome-design-md)
> **Target Enterprise**: Quanzhou Unifan Import & Export Co., Ltd. (`unifandrinkware.com` / `unifanbrand.com`)
> **Brand Slogan**: **FLOW WITH LIFE.** (随水而行 · 与生活同行)
> **Super Symbol**: **The Water Dragon (水龙徽记)**
> **Core Substrates**: 18/8 SUS304 Food-Grade Stainless Steel, Medical SUS316, Gr1 Commercially Pure Titanium
---
## 1. Overview & Brand Philosophy
UNIFAN is a premier international export manufacturer of high-performance thermal drinkware, vacuum insulation vessels, and lifestyle hydration gear based in Quanzhou, Fujian, China. Founded in 2008, UNIFAN marries advanced metallurgical engineering (continuous vacuum brazing furnaces at $10^{-3}\text{ Pa}$, robotic seam laser welding, cleanroom assembly) with contemporary lifestyle design.
The UNIFAN design language reflects the synergy between **fluid water dynamics** and **structural industrial engineering**:
- **Flow with Life (随水而行 · 与生活同行)**: Hydration is motion, vitality, and balance. Whether navigating commuter subways, climbing alpine backcountry trails, or desk-bound in modern offices, UNIFAN vessels are engineered to accompany life gracefully.
- **The Water Dragon Super Symbol (水龙徽记)**: In Eastern heritage, the dragon is the benevolent guardian of clean water, rivers, rainfall, and oceans. The super symbol coils into an unbroken circle representing circular economy reusability, holding a pure droplet of life in its center.
- **Precision Engineering Aesthetic**: Crisp hairlines ($1\text{px}$ borders), architectural typography with negative letter-spacing on display scales, functional information density, tactile substrate finishes, and strict WCAG AAA contrast ratios.
```
┌─────────────────────────────────────┐
│ THE WATER DRAGON SYMBOL │
├─────────────────────────────────────┤
│ [🐉 Flowing Dragon] Guardian & Protection
│ [💧 Central Drop] Purity & Life (SUS316/Ti)
│ [🔄 Circular Loop] Infinitely Reusable
│ [🌲 Forest Pine] Nature Meets Water
└─────────────────────────────────────┘
```
---
## 2. Color System & Contrast Standards
UNIFAN’s color system anchors on **Deep Forest Pine** and **High-Tech Emerald**, complemented by **Tech Slate** for technical contrast and **Warm Amber / Sky Cyan** for functional alerts and metadata tags.
### 2.1 Primitive Brand Palette
| Token Name | HEX Code | RGB | Role / Usage | WCAG On White |
|:---|:---:|:---:|:---|:---:|
| `{colors.primary}` | `#04472e` | `4, 71, 46` | Signature Forest Pine. Primary CTA buttons, brand badges, key headings | **9.8:1 (AAA)** |
| `{colors.primary-dark}` | `#022c1d` | `2, 44, 29` | Deepest pine shadow. Hover states, active pressed states | **14.2:1 (AAA)** |
| `{colors.primary-light}` | `#e8f5ee` | `232, 245, 238` | Subtle pine tint. Badge backgrounds, alert banners, active nav pills | N/A (Surface) |
| `{colors.primary-accent}` | `#10b981` | `16, 185, 129` | Vivid tech emerald. Glow effects, live status indicators, success checkmarks | 2.5:1 (UI only) |
| `{colors.secondary}` | `#059669` | `5, 150, 105` | Supporting mid-emerald. Section accents, secondary links, icon accents | **4.6:1 (AA)** |
| `{colors.secondary-light}` | `#d1fae5` | `209, 250, 229` | Soft mint wash. Hover state on light cards, tag backgrounds | N/A (Surface) |
### 2.2 Tech Slate Canvas & Dark Mode Surfaces
| Token Name | HEX Code | RGB | Role / Usage |
|:---|:---:|:---:|:---|
| `{colors.canvas-dark}` | `#0f172a` | `15, 23, 42` | Hero dark sections, main footer, technical modals, code drawer |
| `{colors.canvas-dark-card}` | `#1e293b` | `30, 41, 59` | Dark cards, elevated drawer surfaces, terminal background |
| `{colors.canvas-dark-soft}` | `#334155` | `51, 65, 85` | Dark mode borders, secondary icons, input fields on dark |
### 2.3 Drinkware Substrates & Surface Finish Tokens
| Substrate / Finish | HEX Token | Finish Description & Inspection Standard |
|:---|:---:|:---|
| **18/8 SUS304 Food-Grade** | `#71717a` | Electrolytic passivated stainless steel; satin hairline brushed or mirror polished. |
| **Medical-Grade SUS316** | `#52525b` | Molybdenum-enriched (2.5% Mo) anti-corrosion inner liner for acid coffee & tea. |
| **Gr1 Pure Titanium** | `#475569` | Ultra-lightweight ($4.51\text{ g/cm}^3$), micro-arc oxidized or crystal anodized. |
| **Electrostatic Powder Coat** | `#04472e` / Multi | Tough $60\text{–}90\,\mu\text{m}$ thermoset resin coating, 5B cross-hatch adhesion tested. |
| **4D Cylindrical UV Print** | Multi-layer | Full $360^\circ$ seamless rotary print with tactile relief embossing up to $0.4\text{mm}$. |
| **Fiber Laser Annealing** | `#1e293b` / Tone | $1064\text{nm}$ fiber laser precision marking; permanent zero-fade surface reaction. |
---
## 3. Typography Scale & Font Hierarchy
UNIFAN pairs **Montserrat / Outfit** for impactful display headlines with **Inter** for exceptional long-form reading legibility and **JetBrains Mono** for engineering specs, dimensions, and code tokens.
```
Display 2XL Montserrat 800 clamp(2.5rem, 5vw, 4rem) -0.035em tracking
Display XL Montserrat 800 clamp(2.0rem, 4vw, 3.25rem) -0.03em tracking
Display LG Montserrat 700 clamp(1.75rem, 3vw, 2.5rem) -0.025em tracking
Display MD Montserrat 700 clamp(1.35rem, 2.2vw, 1.85rem) -0.02em tracking
Eyebrow Mono JetBrains Mono 700 13px (0.8125rem) +0.15em tracking (UPPERCASE)
Body Large Inter 400 17px (1.0625rem) 1.65 line-height
Body Regular Inter 400 16px (1.0rem) 1.6 line-height
Body Small Inter 400/600 14px (0.875rem) 1.55 line-height
Caption Inter 400/600 12px (0.75rem) 1.4 line-height
```
### 3.1 Fluid Typography Formulas
To eliminate layout shifts across mobile ($375\text{px}$) and ultra-wide desktops ($1920\text{px}$), use fluid CSS `clamp()` functions:
```css
/* Display XL Fluid Formula */
--font-display-xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
/* Display LG Fluid Formula */
--font-display-lg: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
/* Section Eyebrow Standard */
--font-eyebrow: 0.8125rem;
--tracking-eyebrow: 0.15em;
```
---
## 4. Spacing System & 8px Layout Grid
UNIFAN enforces an uncompromising 8-point spatial grid rhythm. All margins, paddings, gap spacings, and layout containers are multiples of $8\text{px}$ (with $4\text{px}$ and $2\text{px}$ micro-increments reserved for tight borders and badges).
```
[xxs: 2px] [xs: 4px] [sm: 8px] [md: 12px] [lg: 16px]
[xl: 20px] [2xl: 24px] [3xl: 32px] [4xl: 40px] [5xl: 48px]
[6xl: 64px] [7xl: 80px] [8xl: 96px]
```
### 4.1 Layout Container Specifications
- **Max Page Width**: `1280px` (`max-width: 1280px; margin: 0 auto;`)
- **Page Container Padding**: `0 24px` on desktop, `0 16px` on mobile.
- **Content Section Vertical Spacing**:
- Hero & Primary Sections: `80px` top and bottom (`--spacing-7xl`)
- Standard Content Bands: `64px` top and bottom (`--spacing-6xl`)
- Nested Component Grids: `32px` column & row gap (`--spacing-3xl`)
---
## 5. Component Library Specifications
### 5.1 Buttons
Buttons must communicate clear affordance with responsive tactile spring curves.
| Button Variant | Background | Border | Text | Hover State | Rounded |
|:---|:---|:---|:---|:---|:---|
| **Primary CTA** | `{colors.primary}` (`#04472e`) | None | `#ffffff` | Background: `#022c1d`; `transform: translateY(-2px)`; `box-shadow: var(--shadow-md)` | `8px` (`md`) |
| **Secondary Soft** | `{colors.primary-light}` (`#e8f5ee`) | None | `{colors.primary}` | Background: `#d1fae5`; `transform: translateY(-1px)` | `8px` (`md`) |
| **Accent Gold** | `{colors.accent-amber}` (`#f59e0b`) | None | `#0f172a` | Background: `#d97706`; `color: #ffffff` | `8px` (`md`) |
| **Outline Dark** | Transparent | `1px solid #334155` | `#f8fafc` | Border: `#10b981`; Text: `#10b981` | `8px` (`md`) |
| **Pill Tag** | `{colors.primary-light}` | `1px solid rgba(4,71,46,0.12)` | `{colors.primary}` | Border: `{colors.primary}`; Background: `#ffffff` | `9999px` (`pill`) |
### 5.2 Product & Feature Cards
- **Product Card (`.product-card`)**:
- Background: `#ffffff`, Border: `1px solid #e2e8f0`, Radius: `12px` (`--radius-lg`).
- Image container: Aspect ratio `4:3` or `1:1`, overflow hidden, background `#f8fafc`.
- Hover Interaction: `transform: translateY(-4px)`, border color transitions to `--theme-primary-accent` (`#10b981`), shadow shifts from `shadow-sm` to `shadow-lg`.
- **Feature Card Dark (`.card-feature-dark`)**:
- Background: `#1e293b`, Border: `1px solid #334155`, Radius: `16px` (`--radius-xl`).
- Accent eyebrow: Monospace uppercase font with neon green or gold glow.
---
## 6. Industrial Drinkware Materials & Finishing Specifications
As an authoritative B2B drinkware OEM/ODM manufacturer, UNIFAN’s design system explicitly codifies physical surface finishes to guarantee zero ambiguity between digital representation and factory floor reality.
```
┌────────────────────────────────────────────────────────────────────────┐
│ INDUSTRIAL DRINKWARE SURFACE FINISH MATRIX │
├───────────────────┬───────────────────┬────────────────────────────────┤
│ FINISH TYPE │ PROCESS METHOD │ QC ADHESION & TOLERANCE TEST │
├───────────────────┼───────────────────┼────────────────────────────────┤
│ Powder Coating │ Electrostatic Dry │ ASTM D3359 5B Cross-Hatch Test │
│ 4D UV Cylinder │ Rotary LED UV │ 100-cycle Dishwasher Proof │
│ Laser Engraving │ 1064nm Fiber Beam │ Micron Annealing (No peeling) │
│ Hydraulic Deboss │ 500-Ton Die Press │ 0.6mm - 0.8mm Relief Depth │
│ Titanium Anodize │ Voltage Bath │ Zero Pigment Molecular Oxide │
└───────────────────┴───────────────────┴────────────────────────────────┘
```
1. **Electrostatic Powder Coating**: Durable, slip-resistant matte texture. Resists sweat, outdoor abrasion, and repeated drops. Available in custom Pantone / RAL matches.
2. **4D Digital UV Cylindrical Printing**: Direct-to-bottle $360^\circ$ continuous cylindrical printing. Allows multi-layer tactile relief varnishing with spot gloss or embossed textures.
3. **Precision Fiber Laser Engraving**: High-contrast stripping of exterior powder coat to reveal the pristine surgical SUS304/SUS316 stainless steel layer underneath. Crisp lines down to $0.15\text{mm}$.
4. **Hydraulic Emboss / Deboss**: Mechanical tooling die pressed onto steel sidewalls or bottom caps during the deep-drawing stage. Permanent, tactile, and zero chemical addition.
---
## 7. Brand Super Symbol & Logo Placement Standards
### 7.1 Logo Construction & Anatomy
The UNIFAN trademark identity comprises two synchronized elements:
1. **The Water Dragon Super Symbol (水龙徽记)**: The primary emblem combining the protective dragon form, the central droplet of pure hydration, and the circular loop of circular sustainability.
2. **The UNIFAN Wordmark**: Clean, balanced sans-serif uppercase typography with optically tuned spacing.
```
┌────────────────────────┐
│ [ DRAGON EMBLEM ] │
│ (Height H) │
│ │
│ U N I F A N │
│ WORDMARK │
└────────────────────────┘
```
### 7.2 Clear Space Isolation ($1X$)
- The minimum clear space surrounding the Water Dragon symbol and wordmark is defined as **$1X$**, where **$X$** equals the diameter of the central water droplet within the dragon emblem.
- No typography, graphics, photos, borders, or page edges may encroach into this exclusion zone.
### 7.3 Minimum Reproduction Sizes
- **Digital Screen**: Minimum height $28\text{px}$ (emblem only: $24\text{px}$).
- **Offset / Digital Print**: Minimum height $12\text{mm}$.
- **Direct Laser Etching on Steel**: Minimum height $8\text{mm}$ (preserving fine dragon claw and tail vector lines).
- **Tooling Emboss / Deboss on Steel**: Minimum height $14\text{mm}$.
### 7.4 Cylindrical Vessel Placement Standards (Bottles & Tumblers)
To ensure optimal optical balance on three-dimensional cylindrical surfaces:
- **Upper Third Placement (40oz Tumblers & Travel Mugs)**:
- Position the logo horizontally centered on the front cylinder face, positioned **$25\text{mm}$ to $35\text{mm}$ below the top rim neck** and safely above the ergonomic handle weld bracket.
- **Lower Third Placement (Sports & Insulated Bottles)**:
- Position the logo horizontally centered, positioned **$30\text{mm}$ to $40\text{mm}$ above the bottom stainless steel base cap**, avoiding curvature deformation.
- **Bottom Stamp / Laser Imprint**:
- The base plate of every authentic UNIFAN vessel features concentric laser marking or bottom debossing: "UNIFAN • SUS316 INNER LINING • BPA FREE • DESIGNED FOR LIFE • FLOW WITH LIFE".
### 7.5 Prohibited Logo Usages (Strict DON'Ts)
- ❌ **DO NOT** stretch, squeeze, condense, or alter the horizontal/vertical aspect ratio.
- ❌ **DO NOT** rotate the Water Dragon symbol off its upright orientation.
- ❌ **DO NOT** apply drop shadows, 90s-style bevels, or unapproved rainbow gradients.
- ❌ **DO NOT** place the dark pine logo over dark backgrounds without switching to the reversed pure white (`#ffffff`) or emerald (`#34d399`) asset.
- ❌ **DO NOT** decompose or reposition the central water drop away from the dragon body.
---
## 8. Motion & Micro-Interactions
Interactions on UNIFAN platforms evoke the natural fluidity of water combined with the precision of engineered metal:
- **Timing Curve**: `cubic-bezier(0.16, 1, 0.3, 1)` (Swift acceleration with gentle, natural spring deceleration).
- **Fast Micro-interactions (Buttons, Tooltips, Chips)**: `150ms - 200ms`.
- **Card Hover & Layout Transformations**: `300ms - 400ms`.
- **Compass Needle & Sitemap Rotations**: `400ms cubic-bezier(0.34, 1.56, 0.64, 1)` (Elastic compass snap).
- **Respect User Preferences**: Always implement `@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }`.
---
## 9. Coding Agent & Developer Implementation Guide
AI coding agents and front-end engineers generating pages for `unifandrinkware.com` must utilize the canonical CSS Custom Properties defined in `css/universal-style.css`:
```css
/* Quick Reference Tokens for Front-End Developers & Agents */
:root {
/* Brand Colors */
--theme-primary: #04472e;
--theme-primary-dark: #022c1d;
--theme-primary-light: #e8f5ee;
--theme-secondary: #059669;
--theme-accent: #10b981;
--theme-glow: rgba(4, 71, 46, 0.28);
/* Neutrals & Surfaces */
--dark: #0f172a;
--gray-dark: #334155;
--gray: #64748b;
--gray-light: #f8fafc;
--border: #e2e8f0;
--white: #ffffff;
/* Elevation */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
/* Spatial & Typography */
--radius: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: "Montserrat", "Outfit", sans-serif;
--font-mono: "JetBrains Mono", SFMono-Regular, monospace;
}
```
### Standard Component HTML Markup Patterns
#### Primary CTA Button with Icon
```html
<a href="/contact" class="btn btn-primary">
<span>Request OEM Engineering Quote</span>
<span class="btn-icon">→</span>
</a>
```
#### Category / Specification Pill Tag
```html
<span class="product-badge cyan">Medical-Grade SUS316</span>
<span class="product-badge gold">10⁻³ Pa Vacuum Brazed</span>
```
#### Technical Metric Eyebrow Heading
```html
<div class="section-header">
<div class="brand-eyebrow">METALLURGY & INDUSTRIAL PURITY</div>
<h2 class="section-title">Zero Heavy Metals. Infinite Circular Durability.</h2>
<p class="section-subtitle">Every batch is third-party certified under FDA 21 CFR 175.300 and LFGB standards.</p>
</div>
```
---
## 10. Commercial Imagery & Factory Photography Standards (Global Rule)
All photography, AI-generated imagery (`generate_image`), marketing hero banners, and video storyboards depicting UNIFAN manufacturing campuses, workshops, inspection labs, and supply chain operations must strictly comply with the following mandatory corporate standards:
### 10.1 Personnel Demographics & Ethnicity (Global Mandatory Rule)
- **Factory & Workshop Floor Default**: **100% Chinese Engineers, Technicians, QC Specialists, and Operators** (East Asian ethnicity, authentic Quanzhou domestic manufacturing workforce).
- **Overseas Exception Only**: Non-Chinese (foreign / international) personnel may **ONLY** be depicted when the brief explicitly specifies an *overseas facility* (e.g. European distribution hub, North American showroom, global retail buyer on-site inspection delegation).
- **Professional Demeanor**: Personnel must wear clean, modern company uniforms (UNIFAN Navy/Forest Blue), hygiene hairnets/caps, anti-static footwear, protective eyewear, and identification badges. Portray technical excellence, precision craftsmanship, and high dignity.
### 10.2 Industrial Equipment & Product Fidelity
- **Drinkware Manufacturing Truth**: Scenes must showcase actual drinkware production equipment: robotic laser seam welders, multi-axis robotic handling arms, continuous high-vacuum brazing furnaces ($10^{-3}\,\text{Pa}$), electrostatic powder coating booths, and $360^\circ$ rotary 4D UV cylindrical printers.
- **Product Truth**: Conveyor belts and workbenches must display authentic stainless steel vacuum drinkware products (e.g. 40oz handle tumblers, sports hydration bottles, travel mugs, insulated food jars)—never unrelated packaging cartons, dairy bottles, or generic industrial parts.
- **Campus Setting**: Cleanroom and high-bay workshop environments situated in Quanzhou, Fujian, featuring bilingual technical signage (Chinese primary, English secondary).
---
*UNIFAN Brand System Version 1.1.0 • Maintained by Quanzhou Unifan Import & Export Co., Ltd. • Synchronized with Google Stitch & cnproduct/awesome-design-md*
