ORBIS

Overview

ORBIS is a Japanese beauty and wellness e-commerce platform serving women aged 40+ who prioritize health maintenance and skincare excellence. The design system embodies 'Warm Minimalism'—a philosophy that combines clean, accessible layouts with approachable color accents and human-centered typography. The aesthetic evokes trust and expertise through generous whitespace (surface: #fafafa, surface-bright: #ffffff), warm accent colors (primary red #d70014 for CTAs, golden secondary #daa520 for highlights), and soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)). The UI communicates calm professionalism: users feel supported, not overwhelmed, when navigating product recommendations and health information.

The brand voice is conversational, empowering, and solution-focused. ORBIS speaks to women's real concerns—fatigue, nutrition gaps, aging skin—without condescension. Vocabulary favors clarity over jargon: 'お悩み別' (by concern) rather than clinical terminology. Tone is warm but authoritative, combining empathy with expertise. Example sentence in brand voice: 'やる気が起きないなあ～と感じたら、まずは栄養バランスを整えることから始めましょう。' (If you're feeling unmotivated, start by balancing your nutrition.) This reflects the brand's philosophy: small, achievable wellness steps lead to meaningful change.

Colors

The ORBIS color system prioritizes warmth, accessibility, and emotional resonance. Primary (#d70014) is a bold, confident red reserved exclusively for call-to-action buttons, critical links, and active states—it commands attention without aggression. Secondary (#daa520), a warm golden tone, appears in hero banners, badges, and accent highlights, evoking wellness and natural ingredients. The neutral surface stack (surface #fafafa, surface-container #e8e8e8, on-surface #231815) provides a calm, readable foundation across all page states. On-surface-variant (#5c5a5a) is used for secondary text and disabled states, maintaining legibility at 14px body copy. Tertiary (#a2aeba), a soft blue-gray, supports secondary actions and non-critical UI elements. Error (#d70014) shares the primary red to ma

Typography

The type system balances Japanese and Latin character legibility through a carefully curated stack: Open Sans (Google Fonts) for Latin characters paired with native Japanese fonts (游ゴシック体, YuGothic, ヒラギノ角ゴ Pro W3, Meiryo) for optimal rendering across browsers and devices. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; headline-lg (36px, 600 weight) structures article titles and section headers; body-md (14px, 500 weight, 20px line-height) serves as the primary reading size for product descriptions and article copy. Label-md (13px, 600 weight, 0.02em tracking) is applied to buttons and interactive labels to ensure clickability and visual hierarchy. The 500-weight default (vs. 400) reflects Japanese typography conventions and improves legibility o

Layout

ORBIS uses a 12-column fluid grid with a max-width of 1280px, centering content on desktop while maintaining full-width flexibility on mobile. The spacing scale follows an 8px unit system: xs (4px) for micro-spacing, sm (12px) for compact groups, md (24px) for section separation, lg (40px) for major layout breaks, and xl (64px) for hero-to-content transitions. Gutter width is fixed at 24px on desktop, collapsing to 12px on tablets and 8px on mobile. Container max-width (1280px) ensures readability for long-form content (article copy, product descriptions) while preventing line-length from exceeding 75 characters at body-md (14px). Hero banners use lg spacing (40px padding) to create breathing room around featured product images and call-to-action copy. Related articles and tag sections use

Elevation & Depth

Depth in ORBIS is conveyed through a restrained shadow system that avoids visual heaviness while maintaining clear layer separation. Level 1 (Base): flat surfaces with no shadow; used for body background (#fafafa) and surface-container elements. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border at outline-variant (#cccccc); applied to product cards, article cards, and input fields. This shadow creates a subtle lift without distraction. Level 3 (Elevated/Modals): box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) with rounded corners (1rem) and surface-bright bac

Shapes

ORBIS employs 'Soft-Technical' border-radius philosophy: rounded corners are present but restrained, reflecting the brand's balance between approachability and professional expertise. Buttons and input fields use DEFAULT (0.5rem / 8px) radius, creating a friendly, modern appearance without excessive softness. Cards and containers use md (0.75rem / 12px) radius, slightly more generous to suggest comfort and accessibility. Hero banners and featured sections use lg (1rem / 16px) radius, drawing visual attention while maintaining sophistication. Modals and floating panels use xl (1.5rem / 24px) ra

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#d70014) background with on-primary (#ffffff) text, label-md typography (13px, 600 weight), 10px horizontal padding, and DEFAULT (8px) radius. On hover, background shifts to #b80010 (a darker red, -20% lightness) over 200ms, signaling state change without jarring contrast. Button-secondary uses transparent background with primary (#d70014) text and a 1px solid primary border; on hover, background becomes surface-container-high (#e0e0e0). Both buttons maintain 40px height for touch-friendly sizing on mobile. Tag-link components (used for related keywords and category filters) are text-only with primary color and underline decoration; on hover, color darkens to #b80010 and underline becomes bold (

Do's and Don'ts

**Do**

• Do use primary (#d70014) exclusively for CTAs, active states, and critical links—never for body text or backgrounds.
• Do maintain md (24px) padding inside cards and lg (40px) padding in hero sections to create visual breathing room.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive surfaces (cards, dropdowns, modals) to signal clickability.
• Do use body-md (14px, 500 weight, 20px line-height) as the default reading size for article copy and product descriptions.
• Do combine Open Sans with native Japanese fonts (游ゴシック体, Meiryo) in the font-family stack for optimal cross-browser rendering.
• Do use on-surface-variant (#5c5a5a) for secondary text, disabled states, and helper copy to maintain hierarchy without reducing contrast below WCAG AA.

**Don't**

• Don't use primary (#d70014) for body text, backgrounds, or non-interactive elements—it should feel like a deliberate accent, not the default.
• Don't apply shadows larger than lg (0 10px 40px) to standard cards; reserve lg elevation for modals and floating panels only.
• Don't use border-radius larger than lg (16px) on buttons or input fields; keep them at DEFAULT (8px) for precision and clarity.
• Don't mix font weights within a single line of body copy; use 500 weight consistently for body-md and label-md to avoid visual noise.
• Don't reduce line-height below 1.4 (20px minimum) for body text; Japanese characters require extra vertical space for legibility.
• Don't apply text-shadow or text-stroke to body copy; reserve these techniques for small labels (12px) over busy backgrounds only.