Zoff

Overview

Zoff is a Tokyo-born eyewear brand that translates Japanese precision and contemporary design into an accessible, digitally-native retail experience. The brand serves style-conscious consumers seeking curated optical products that balance function with aesthetic expression. The design language embraces **Minimalist Clarity**—a philosophy that strips away visual noise to highlight product and lifestyle imagery, using a restrained palette of white, cool blue, and strategic yellow accents to create moments of visual interest without overwhelming the user. The interface evokes a sense of calm discovery: clean surfaces, generous whitespace, and purposeful color placement guide the eye naturally through product categories and seasonal collections.

Zoff's voice is approachable yet authoritative—knowledgeable about eyewear without being condescending, enthusiastic about style without breathlessness. The brand speaks in clear, direct language punctuated by moments of playful energy (the yellow accent, the dog mascot). Example sentence in Zoff's voice: "Every frame tells a story—find yours in our latest Tokyo collection, updated every two weeks."

Colors

The Zoff color system is anchored by a **cool, confident primary blue** (#2299e1) that appears on all call-to-action buttons, links, and interactive elements. This blue is the brand's signature accent—it commands attention without aggression, evoking trust and modernity. The secondary accent is a **vibrant, energetic yellow** (#fcdc0c), used sparingly on badges, promotional tags, and highlight elements to create visual punctuation and draw focus to key messages (e.g., "UV 100% CUT" badge). A tertiary **deeper blue** (#0090d9) provides hierarchy and is reserved for secondary interactive states and supporting UI elements.

The surface stack is built on **pure white** (#ffffff) as the primary canvas, with carefully calibrated grays for depth: surface-dim (#fafafa) for subtle backgrounds, surf

Typography

The typography system is built on **Noto Sans HK**, a humanist sans-serif optimized for Hong Kong Chinese and Latin characters, ensuring legibility across the bilingual interface. The type hierarchy progresses from display (60px, 700 weight) for hero headlines down through headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, and body-md (16px, 400 weight) for body copy. This progression creates clear visual rhythm without requiring excessive font-size jumps. All headlines use negative letter-spacing (-0.04em to -0.01em) to tighten the letterforms and enhance visual impact; body copy uses +0.01em to +0.02em letter-spacing for improved readability at smaller sizes. Labels and buttons use 600-weight at 14px with 0.01em tracking to convey actionabi

Layout

Zoff employs a **fluid 12-column grid** with a max-width of 1200px, centered on the viewport. The spacing scale is semantic and hierarchical: 24px (md) serves as the primary gutter between major sections, 40px (lg) separates distinct content blocks (hero, product grid, footer), and 64px (xl) is reserved for page-level breaks. Whitespace is treated as a design element—the interface breathes, with generous margins around product imagery and text blocks. Container max-width of 1200px ensures content remains scannable on desktop while maintaining focus on product photography. Mobile breakpoints collapse to single-column layouts with 12px (sm) gutters and 24px (md) section spacing to preserve the minimalist aesthetic on smaller screens.

Elevation & Depth

Depth in Zoff is conveyed through subtle **shadow layering and surface color shifts** rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) is the white surface with no shadow; Level 2 (Cards & Containers) applies box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) with a 1px border in #cccccc to define boundaries; Level 3 (Modals & Overlays) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border. Hover states elevate cards to Level 3 shadow and shift background to surface-container-low (#f2f2f2), creating a tactile sense of lift. Focus states on interactive

Shapes

Zoff adopts a **Soft-Technical** shape philosophy: corners are subtly rounded (4px to 8px) to soften the interface without sacrificing clarity or appearing playful. Buttons use 4px border-radius (rounded.DEFAULT) to maintain a professional, contemporary feel; cards and containers use 8px (rounded.md) for slightly more personality; modals and overlays use 12px (rounded.lg) to create visual distinction. Input fields match buttons at 4px. Badges and pills use full border-radius (9999px) to create visual contrast and signal their distinct, self-contained nature. This graduated approach ensures tha

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #2299e1 background with white text, 18px 700-weight Noto Sans HK, 11px vertical / 20px horizontal padding, and 4px border-radius. On hover, the background shifts to #1c8bce (primary-fixed-dim) with a smooth 200ms transition. On active/click, apply inset box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to create a pressed effect. Secondary buttons use a transparent background with a 1px #cccccc border, #4c4948 text, and the same padding; on hover, the background becomes #e8e8e8 (surface-container-high). All buttons must have a visible focus state: a 3px glow of rgba(34, 153, 225, 0.1) around the button boundary.

Containers & Surfaces Cards are the primary content container. Standard cards use white backgrou

Do's and Don'ts

**Do**

• Do use the primary blue (#2299e1) exclusively for CTAs, links, and focus states—never for decorative elements or backgrounds.
• Do apply the secondary yellow (#fcdc0c) sparingly on badges and promotional highlights to create visual punctuation without overwhelming the interface.
• Do maintain 24px minimum padding inside cards and containers to preserve the minimalist, breathing aesthetic.
• Do use Noto Sans HK at 400-weight for body copy and 600-weight for interactive labels to ensure clear hierarchy and legibility.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all hover and focus state changes for smooth, predictable interactions.

**Don't**

• Don't use pure black (#000000) for text or borders—always use the warm brown (#4c4948) to maintain the brand's approachable tone.
• Don't apply shadows deeper than 0 3px 8px rgba(0, 0, 0, 0.15)—Zoff's elevation is subtle and refined, not dramatic.
• Don't round corners more than 12px on any component; excessive rounding contradicts the Soft-Technical philosophy and reads as playful rather than professional.
• Don't use the secondary yellow (#fcdc0c) on interactive elements or CTAs—it is reserved for badges and highlights only; primary blue is the only accent for actions.
• Don't set line-height below 1.4 for body copy or below 1.2 for headlines; Zoff prioritizes readability and breathing room in typography.