MinebeaMitsumi

Overview

MinebeaMitsumi is a global precision engineering and electronics manufacturer serving automotive, industrial, and consumer markets. The design system embodies 'Institutional Minimalism'—a refined aesthetic that prioritizes clarity, technical accuracy, and trustworthiness over visual decoration. The brand personality is authoritative yet approachable: the interface communicates expertise through restrained typography, a disciplined color hierarchy anchored by a deep corporate blue (#004ea8), and generous whitespace that reflects manufacturing precision. The emotional response is one of confidence and reliability—users should feel they are engaging with a company of substance and technical mastery. Voice: direct, factual, never hyperbolic. Example: 'Our precision bearings operate within ±0.001mm tolerances, meeting ISO 286 Grade 5 specifications.'

Colors

The color system is built on a foundation of institutional trust. Primary (#004ea8) is the signature corporate blue, reserved exclusively for interactive elements—primary CTAs, active navigation states, and key links. It appears sparingly but decisively, commanding attention without visual noise. Secondary (#666666) serves as the workhorse neutral for body text, secondary UI elements, and disabled states; it is warm enough to avoid coldness yet neutral enough to recede behind primary content. Tertiary (#505050) is a darker neutral used for emphasis, borders, and hierarchical distinction. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f9f9f9 → #e9ecef → #d9d9d9), creating visual separation without harsh contrast. Error red (#d32f2f) is reserved f

Typography

The type system uses a single, unified font family—Meiryo and its Japanese equivalents—to ensure consistent rendering across Japanese and English content. This choice reflects the company's bilingual, international identity while maintaining legibility at small sizes (12px minimum for body text). The hierarchy is built on weight contrast rather than dramatic size jumps: display (48px, 700) for hero statements; headline-lg (40px, 700) for section titles; headline-md (28px, 600) for subsections; body-lg (16px, 400) for primary content; body-md (14.976px, 400) for secondary content; label-md (12px, 600) for UI labels and badges. Letter-spacing is minimal (-0.02em on display, 0em on body) to maintain Japanese character legibility. Line-height is set to 1.5 for body text (24px on 16px base) to

Layout

The layout operates on a 12-column grid with a fixed max-width of 1280px, centered on the viewport. This constraint ensures that content remains scannable and focused, particularly important for a B2B audience consuming technical specifications and investor relations data. The spacing scale is semantic: xs (4px) for micro-adjustments within components; sm (12px) for internal component padding; md (24px) for standard section margins and card padding; lg (40px) for major section separation; xl (64px) for page-level breaks. The gutter width is 24px, providing clear visual separation between grid columns without excessive whitespace. Whitespace is used strategically to create 'breathing room' around primary content: hero sections use lg spacing above and below; card stacks use md spacing betwe

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual heaviness of drop shadows. The elevation scale uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for subtle separation of interactive elements like buttons and form fields; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 20px rgba(0, 0, 0, 0.12)) for elevated modals and floating panels. Shadows are soft and diffuse, with a small vertical offset (1–8px) to suggest gentle lift rather than dramatic separation. Borders are used as a primary depth cue: all cards and containers use

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and functional, never decorative. The rounded scale uses 4px (DEFAULT) as the standard radius for buttons, inputs, and small components, reflecting a balance between approachability and technical restraint. Cards and larger containers use 4px to 6px (md) for subtle definition. Dropdowns and floating panels use 4px (DEFAULT) to maintain visual consistency with form elements. Full-radius (9999px) is reserved for badges and pill-shaped elements. Avoid border-radius values above 12px (xl) in this system; they introduce visua

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background-color: {colors.primary} (#004ea8) with white text, 40px height, 10px vertical padding, 24px horizontal padding, and a 4px border-radius. On hover, the background shifts to #003d7a (a 15% darker shade), triggered by a 200ms ease-in-out transition. On active/pressed state, the background becomes #002a57 (30% darker). Secondary buttons use a transparent background with a 1px border in {colors.outline} (#999999), allowing the primary color to dominate the visual hierarchy. On hover, secondary buttons gain a light background (surface-container-low, #f0f0f0) and the border shifts to primary blue, signaling elevation. All buttons use label-md typography (12px, 600 weight, 0.02em letter-spacing) for c

Do's and Don'ts

**Do**

• Do use primary blue (#004ea8) exclusively on interactive elements—buttons, links, and active states—to create a clear visual hierarchy and guide user attention.
• Do maintain consistent 24px (md) spacing between major sections and 12px (sm) spacing within component groups to create visual rhythm and scanability.
• Do apply the 200ms ease-in-out transition to all interactive state changes (hover, focus, active) to provide clear feedback without feeling sluggish.
• Do use the full Material 3 color token system (surface-container-lowest through surface-container-highest) to create subtle visual separation between nested layers.
• Do keep border-radius values at 4px (DEFAULT) or smaller to maintain the technical, precision-engineered aesthetic; avoid soft, rounded corners that conflict with the brand.
• Do use Meiryo and its Japanese equivalents as the sole font family to ensure consistent rendering across bilingual content and maintain legibility at small sizes.

**Don't**

• Don't use primary blue for backgrounds, body text, or non-interactive elements; reserve it exclusively for CTAs and active states to maintain visual clarity.
• Don't apply shadows larger than lg (0 8px 20px rgba(0, 0, 0, 0.12)) or use multiple stacked shadows; the system relies on subtle, single-layer depth cues.
• Don't introduce new colors outside the defined palette; the system is intentionally constrained to primary, secondary, tertiary, and the surface stack to maintain institutional coherence.
• Don't use border-radius values above 12px (xl) or decorative rounded corners; the aesthetic is technical and precise, not soft or organic.
• Don't apply transitions longer than 200ms on interactive elements; faster feedback (150ms) is preferred for form inputs, slower (200ms) for larger state changes.
• Don't mix font families; Meiryo and its Japanese equivalents are the only approved typefaces to ensure consistent rendering and bilingual legibility.