Nagano Anzen Jidosha

Overview

Nagano Anzen Jidosha is a professional automotive repair and maintenance facility serving Nagano Prefecture with a legacy of technical excellence and safety-first operations. The design system embodies 'Technical Trustworthiness'—a modern, accessible aesthetic that communicates precision, reliability, and professional competence without pretension. The brand personality is direct, honest, and service-oriented: clear communication about vehicle maintenance, transparent pricing, and a commitment to keeping customers' vehicles safe on the road. The UI prioritizes clarity and scannability, reflecting the methodical nature of automotive diagnostics and repair workflows. Voice example: 'Your vehicle's brake system requires attention before winter—we recommend scheduling service within two weeks.'

Colors

The color palette centers on a deep navy primary (#0b318f) that conveys professionalism, trust, and automotive authority—used exclusively on primary CTAs, navigation highlights, and key interactive elements. Secondary accent orange (#ff6900) provides energetic contrast for alerts, highlights, and supporting actions, drawing attention to time-sensitive information or secondary pathways. Tertiary yellow (#fcb900) reinforces safety messaging and warning states, aligning with automotive industry conventions. The surface stack uses clean whites (#ffffff) and light grays (#f0f0f0 to #e9ecef) to maintain readability and reduce cognitive load. Error red (#cf2e2e) is reserved for critical warnings and system failures. All text defaults to #333333 (on-surface) for 16px body copy, with #666666 (on-su

Typography

The typography system uses Noto Sans JP exclusively, a modern Japanese typeface that balances technical clarity with approachability. Display (60px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) introduces key service categories; Headline-md (28px, 700 weight) structures page sections; Title-lg (20px, 700 weight) labels cards and subsections. Body-lg (18px, 500 weight, 0.05em tracking) and Body-md (16px, 500 weight, 0.05em tracking) form the reading hierarchy, with increased letter-spacing (0.05em) improving legibility for Japanese characters at smaller sizes. Label-md (14px, 700 weight) and Label-sm (12px, 500 weight) are applied to buttons, badges, and form labels. All headings use 700 weight to convey authority; body text use

Layout

The layout uses a 12-column responsive grid with a maximum container width of 1100px, centered on the viewport. Desktop sections use 24px gutters (md spacing) between columns; mobile reduces to 12px (sm spacing) to maximize content area on small screens. The page rhythm alternates between full-width hero imagery (no container constraint) and constrained content sections, creating visual breathing room. Section separation uses lg spacing (40px) vertically to establish clear content hierarchy. The grid accommodates 2–3 column layouts for service cards, 1-column for body text, and flexible layouts for testimonials or news feeds. Container max-width of 1100px ensures comfortable line lengths (50–75 characters) for Japanese body text while maintaining visual balance on ultra-wide displays. Padd

Elevation & Depth

Visual hierarchy is achieved through a three-level shadow system combined with subtle background color shifts. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for body backgrounds and primary content areas. Level 2 (Raised Cards): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with background-color #e9ecef, used for service cards, testimonials, and form containers—this shadow creates gentle separation without visual drama. Level 3 (Elevated/Modals): 0 12px 50px rgba(0, 0, 0, 0.4) shadow with background-color #e0e0e0, reserved for modals, dropdowns, and interactive overlays. On hover, c

Shapes

The shape philosophy is 'Functional Modernism'—rounded corners are used strategically to soften technical interfaces while maintaining clarity and scannability. Buttons use full radius (9999px / border-radius: 50%) to create pill-shaped CTAs that feel approachable and clickable; this is the most prominent shape on the page and signals primary actions. Cards and containers use md radius (0.75rem / 12px) for a subtle, professional softness that avoids excessive roundness. Form inputs use DEFAULT radius (0.5rem / 8px) for a minimal, technical appearance that suggests data entry. Badges and small

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background-color #0b318f (primary), text-color #ffffff (on-primary), padding 5px 23px, height 40px, and full border-radius (50%). On hover, background shifts to #1a4db8 (inverse-primary) with a 200ms ease-in-out transition. Secondary buttons use transparent background, 2px solid border in primary color, and the same text/padding/height as primary; on hover, background becomes #e8eef9 (primary-container). All buttons use label-md typography (14px, 700 weight). Disabled buttons reduce opacity to 50% and set cursor: not-allowed.

Containers & Surfaces Cards use background-color #e9ecef (surface-container), rounded md (12px), padding md (24px), and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). On hover, backgr

Do's and Don'ts

**Do**

• Do use primary navy (#0b318f) exclusively for primary CTAs, focus states, and key interactive elements—never for backgrounds or body text.
• Do apply full border-radius (50%) to all buttons to create a cohesive, approachable interaction pattern that signals clickability.
• Do use md spacing (24px) between major sections and lg spacing (40px) for section separation to create clear visual rhythm and reduce cognitive load.
• Do maintain 1px solid borders (#cccccc) on cards and inputs to define structure without visual heaviness; avoid thick borders or double-line effects.
• Do use Noto Sans JP exclusively for all typography; never mix with system fonts or serif typefaces, as this breaks the technical-trustworthy aesthetic.
• Do apply 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and 0 0 0 3px rgba(11, 49, 143, 0.1) focus ring to inputs for consistent, subtle elevation.

**Don't**

• Don't use secondary orange (#ff6900) or tertiary yellow (#fcb900) as primary button colors; reserve these for alerts, highlights, and supporting actions only.
• Don't apply border-radius greater than md (12px) to cards or containers—excessive rounding dilutes the technical, professional aesthetic.
• Don't use drop shadows heavier than 0 12px 50px rgba(0, 0, 0, 0.4); avoid dark, dramatic shadows that suggest depth rather than subtle elevation.
• Don't mix font weights within a single heading or button label; use 700 weight for all headings and 500 weight for body text consistently.
• Don't reduce padding inside inputs below sm (12px) or padding inside cards below md (24px)—this creates cramped, hard-to-scan interfaces.
• Don't apply color to text links without an underline or hover state; always provide clear visual feedback that text is interactive.