FANCL Wellness Premium

Overview

FANCL Wellness Premium is a premium health supplement brand rooted in Japanese cellular science and precision wellness. The design system embodies 'Refined Clarity'—a philosophy that marries minimalist aesthetics with scientific rigor, creating an interface that feels both approachable and authoritative. The brand serves health-conscious consumers seeking evidence-based beauty and wellness solutions, evoking a sense of calm confidence through clean typography, generous whitespace, and strategic accent colors that guide attention without overwhelming. The visual language is deliberately restrained: soft blues (#0f70f0 primary, #1e4d9e secondary) sit against a luminous white canvas (#ffffff), punctuated by warm accents (#f8bb86 for highlights, #a5dc86 for success states). Voice: precise, reassuring, never clinical. The tone balances scientific credibility with human warmth—sentences are direct and benefit-focused, avoiding jargon while honoring the consumer's intelligence. Example: 'Senescent cells accumulate with age. Our formula targets them at the cellular level—so you can focus on living.'

Colors

The color system is anchored in a cool, professional blue palette that signals trust and scientific precision. Primary (#0f70f0) is the signature accent, deployed on all call-to-action buttons, links, and interactive focus states—it commands attention without aggression, appearing in 52 instances across the interface. Secondary (#1e4d9e) provides depth and hierarchy, used for headlines and secondary navigation; tertiary (#3373c4) bridges the gap for supporting UI elements. The surface stack is deliberately light: surface (#ffffff) is pure white, surface-container (#eaf0f6) is a soft blue-tinted gray (used for content cards and panels), and surface-container-highest (#dcdcdc) provides subtle contrast for disabled or recessive states. On-surface text is dark charcoal (#212121) for maximum le

Typography

The type system employs a dual-font strategy: Zen Kaku Gothic New (loaded from Google Fonts) for all display and headline levels, providing a distinctly Japanese, geometric warmth; Hiragino Kaku Gothic ProN and Lato for body and label text, ensuring legibility across devices. Display (60px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) is used for long-form content and descriptions, with generous line-height (1.75x) to reduce cognitive load. Body-md (16px, 400 weight) is the default paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, with tig

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport. Mobile-first approach: on screens under 769px, content stacks vertically with 24px gutter spacing; on desktop, the grid expands to full 12 columns with 40px lg spacing for section separation. Container padding is 24px on mobile, 40px on tablet, and 64px on desktop. The hero section spans full-width with a light blue background (#eaf0f6), creating visual separation from the white body. Card-based layouts use 24px md spacing between items; list items use 12px sm padding with 1px dotted dividers (#ffffff at 3px width) on mobile, transitioning to 3px solid dividers on desktop. Whitespace is treated as a first-class design element: minimum 40px lg spacing between major sections, 24px md between subsect

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts, avoiding heavy drop-shadows that would conflict with the refined aesthetic. Level 1 (Base): no shadow; surface is pure white (#ffffff) or light gray (#f5f5f5). Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: #eaf0f6, used for content cards, modals, and elevated containers. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: #e9ecef, applied on card-hover and modal-open states. Focus states use a 3px outline at rgba(43, 114, 165, 0.29) with a 1p

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and purposefully to soften the interface without sacrificing clarity. Buttons use lg (1rem / 16px) border-radius, creating a subtle pill-like appearance that feels modern yet approachable. Cards and containers use lg (1rem) or xl (1.5rem) for larger modals, establishing a consistent vocabulary. Input fields use DEFAULT (0.5rem / 8px) for a more utilitarian feel, distinguishing them from primary actions. Badges and tags use full (9999px) for a fully rounded pill shape, signaling secondary or supplementary informati

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: {colors.primary} (#0f70f0), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.lg} (16px), padding: 12px 24px, height: 48px, with box-shadow: 0 2px 8px rgba(15, 112, 240, 0.15). On hover, the background shifts to #0c5ecb (primary-fixed-dim) with shadow elevation to 0 4px 12px rgba(15, 112, 240, 0.25), creating a subtle lift effect over 200ms. Focus state applies a 3px outline at rgba(43, 114, 165, 0.29) with 1px white inner ring. button-secondary uses a transparent background with a 1px border at {colors.primary}, allowing secondary actions to coexist without visual competition. Disabled buttons reduce opacity to 0.5 and remove pointer-events.

Containers & Surfaces Cards ar

Do's and Don'ts

**Do**

• Do use primary (#0f70f0) exclusively for CTAs, focus states, and key interactive elements—never for body text or backgrounds.
• Do maintain 24px md spacing between card sections and 40px lg spacing between major page sections to preserve visual breathing room.
• Do apply the 3px focus ring (rgba(43, 114, 165, 0.29)) to all interactive elements for WCAG AA compliance.
• Do use Zen Kaku Gothic New for headlines and Hiragino Kaku Gothic ProN for body text to maintain the Japanese-precision aesthetic.
• Do employ the surface-container (#eaf0f6) background for content cards to create subtle visual hierarchy without harsh contrast.

**Don't**

• Don't use secondary (#1e4d9e) or tertiary (#3373c4) as primary button backgrounds—reserve them for supporting UI and navigation.
• Don't apply shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) as they conflict with the refined, minimalist aesthetic.
• Don't use border-radius smaller than {rounded.DEFAULT} (8px) on interactive elements; sharp corners are reserved for technical/legacy components.
• Don't mix font families within a single headline or body paragraph—maintain consistency within typographic levels.
• Don't reduce padding below {spacing.sm} (12px) on touch-target buttons; maintain 48px minimum height for mobile accessibility.