mira

Overview

Mira is a Japanese lifestyle and future-focused brand that embodies the philosophy of 'a little new, a little better future' (ちょっと新しく、ちょっといいmirai). The design system employs a 'Soft-Technical Minimalism' aesthetic—a fusion of clean, geometric precision with organic, pastel-gradient backgrounds that evoke optimism and gentle innovation. The UI prioritizes clarity and approachability, using soft color transitions (from pale lavender to mint cyan) and generous whitespace to create a serene yet forward-thinking digital environment. The emotional response is one of calm aspiration: users feel guided toward a better tomorrow without pressure or urgency.

The brand voice is conversational, hopeful, and distinctly Japanese in sensibility—balancing contemporary English phrases with Japanese cultural nuance. Vocabulary patterns favor understatement and subtlety: 'a little new' rather than 'revolutionary,' 'sparkling future' rather than 'disruption.' The tone is never breathless or hyperbolic; instead, it whispers encouragement. Example sentence in brand voice: 'あなたのきらめく未来に、ほんの少し新しい日々に添えて。' (To your sparkling future, we add just a few new days.)

Colors

The color palette is anchored by a primary cyan-blue (#0693e3) used for interactive elements, CTAs, and focus states—this is the brand's signature accent, appearing on the 'CONTACT' button and key navigation links. The secondary accent is a vibrant teal-green (#00d084), reserved for success states and supporting highlights. A tertiary orange (#ff6900) provides warmth and energy for tertiary actions and badges. The surface stack is predominantly white (#ffffff) with carefully calibrated grays: on-surface text uses #6e6e6e (a soft, readable gray), while surface containers range from #f5f5f5 (dim) to #d0d0d0 (highest), creating subtle depth without harsh contrast. The background gradients transition smoothly from pale lavender to mint cyan, establishing the brand's signature soft-technical ae

Typography

The type system uses Yu Gothic Medium as the primary font family, a humanist sans-serif that balances technical precision with warmth—essential for a brand serving both corporate and lifestyle audiences. Display text (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with authority; headline-lg (40px, 600 weight) breaks content into digestible sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 10.24px base scale. The letter-spacing progressively tightens at larger sizes (-0.04em for display, -0.02em for headlines) to maintain visual harmony and prevent the soft aesthetic from feeling loose. Labels use 600 weight at 14px with 0.01em letter-spacing to ensure UI clarity. For small labels over busy backgrounds (e.g., badges on gradient sections)

Layout

The layout employs a 12-column fluid grid with a maximum container width of 1280px, allowing the design to breathe on desktop while remaining responsive on mobile. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for gutter and section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section occupies full viewport height (calc(100vh - 8rem) on desktop, accounting for header and footer), with generous left/right margins (4rem desktop, 3rem mobile) creating a framed composition. Body text uses 16px with 24px line-height (1.5x), providing comfortable reading rhythm. Section separation follows the lg spacing token (40px), while card-to-card gaps use md (24px). The design favors asym

Elevation & Depth

Depth is conveyed through a three-tier shadow system that maintains the brand's soft, non-aggressive aesthetic. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Standard Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation without visual weight. Level 3 (Modals/Elevated Overlays): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), providing clear hierarchy while maintaining softness. Hover states on interactive elements transition to Level 2 shadows over 0.3s (transition: all ease 0.3s), signaling interactivity without jarring

Shapes

The shape philosophy is 'Soft-Technical Precision'—combining sharp, geometric clarity with rounded corners that soften the overall impression. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel approachable and modern, contrasting with the technical precision of the underlying grid. Cards and containers use lg radius (1rem / 16px), balancing geometric clarity with organic softness. Input fields use DEFAULT radius (0.5rem / 8px), providing subtle rounding that distinguishes them from flat surfaces without overwhelming the interface. Navigation links and list ite

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#0693e3) background with white text, full border-radius (9999px), 12px vertical / 32px horizontal padding, and 48px height for touch-friendly targets. On hover, the background transitions to #0575c7 over 0.3s (transition: all ease 0.3s), with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied. Secondary buttons use transparent background with a 2px solid {colors.primary} border, maintaining the same padding and height; on hover, the background fills with {colors.primary-container} (#d4e8ff) and text shifts to {colors.on-primary-container} (#003d7a). Ghost buttons (used for tertiary actions) have transparent background, {colors.primary} text, and no border; on hover, background becomes {col

Do's and Don'ts

**Do**

• Do use the primary cyan-blue (#0693e3) exclusively for interactive CTAs, focus states, and primary navigation—never dilute it with secondary uses.
• Do maintain the soft-gradient background aesthetic (lavender-to-mint transitions) as the visual anchor; it is the brand's signature and should appear on every hero section.
• Do apply the full border-radius (9999px) to all primary buttons and major CTAs to reinforce the approachable, forward-thinking brand personality.
• Do use the Yu Gothic font family consistently across all digital touchpoints; it is the voice of the brand and should never be substituted with generic system fonts.
• Do respect the spacing scale (xs/sm/md/lg/xl) for all layout decisions; this creates rhythm and predictability that users subconsciously trust.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements on hover; this is the brand's elevation language and should be consistent.

**Don't**

• Don't use high-contrast shadows or drop-shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.3)); they contradict the soft, serene aesthetic and feel aggressive.
• Don't apply the primary cyan-blue to non-interactive elements like backgrounds or borders; reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't use sharp corners (border-radius: 0) on buttons, cards, or containers; the soft-technical aesthetic requires rounded corners to feel approachable.
• Don't substitute Yu Gothic with system fonts or generic sans-serifs; the humanist warmth of Yu Gothic is essential to the brand voice and cannot be replicated.
• Don't exceed the container max-width of 1280px; this constraint ensures the layout remains balanced and the generous whitespace is preserved.
• Don't use color transitions faster than 0.3s (e.g., transition: all 0.1s); slower transitions (0.2s–0.3s) align with the brand's calm, deliberate pace.