Kyowa Motors

Overview

Kyowa Motors is a regional Japanese automotive service provider and Daihatsu dealer serving the Aichi Prefecture region. The brand embodies 'Trustworthy Professionalism'—a design aesthetic that combines corporate reliability with approachable warmth. The visual language prioritizes clarity and confidence through a bold primary blue (#004ea2) paired with clean, light surfaces and generous whitespace. The UI evokes a sense of established expertise and community care, positioning the brand as a dependable partner in vehicle ownership. The tone is respectful, informative, and locally grounded. Vocabulary emphasizes safety, expertise, and long-term relationships: 'professional technicians,' 'comprehensive care,' 'trusted service.' Example sentence in brand voice: 'Our certified technicians have served this community for decades—your vehicle is in trusted hands.'

Colors

The color system centers on a deep, authoritative primary blue (#004ea2) used for all primary CTAs, navigation highlights, and interactive focus states. This blue conveys professionalism and trustworthiness without coldness. Secondary accent teal (#5ccbc4) provides a softer, approachable counterpoint for supporting UI elements and status indicators. Tertiary gold (#e5a11d) is reserved for promotional highlights and premium service badges. The error red (#e60012) is used sparingly for critical alerts and warnings. The surface stack uses a near-white foundation (#ffffff) with carefully calibrated grays (#e7e7e7 for containers, #dcdcdc for elevated surfaces, #cccccc for borders) to create subtle visual hierarchy without harsh contrast. Text on light surfaces uses #333333 (on-surface) for prim

Typography

The type system uses a two-family approach: 見出ゴMB31 (a-otf-midashi-go-mb31-pr6n) for all headings and display text, providing strong visual presence and cultural authenticity for Japanese audiences; YakuHanJP and Noto Sans JP for body text and UI labels, ensuring legibility and accessibility across devices. Display text (60px, 700 weight) is reserved for hero headlines and major section titles. Headline-lg (40px, 600 weight) anchors subsections. Body-md (16px, 400 weight) is the default for paragraph text and UI copy. Label-md (14px, 600 weight) is applied to buttons, form labels, and navigation items. The type pairing communicates authority through the bold, geometric heading font while maintaining approachability through the warm, humanistic body font. Letter-spacing is tightened on head

Layout

The page uses a fluid 12-column grid with a maximum container width of 1280px, allowing responsive scaling on mobile while maintaining visual control on desktop. The gutter spacing is consistently 24px (md spacing token), creating a rhythm that feels neither cramped nor excessive. Section separation uses lg spacing (40px) between major content blocks, establishing clear visual breathing room. The hero section spans full viewport width with a background image overlay, using a semi-transparent dark gradient (rgba(0, 0, 0, 0.4)) to ensure text legibility. Card-based content sections use md spacing (24px) for internal padding and sm spacing (12px) for element-to-element relationships within cards. Whitespace is treated as a design element: generous margins around text blocks, ample padding ins

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive depth effects. Level 1 (Base): flat surfaces with no shadow, using only border-color (#cccccc, 1px solid) for definition. Level 2 (Standard Cards): 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border at #e0e0e0, creating a gentle lift from the background. Level 3 (Elevated/Modals): 0 8px 32px rgba(0, 0, 0, 0.12) with a 1px border at #d0d0d0, reserved for modals, overlays, and primary CTAs. Hover states transition smoothly (200ms) between shadow levels, providing tactile feedba

Shapes

The shape philosophy is 'Approachable Precision'—combining sharp, professional corners with selective rounding to humanize the interface. Buttons use 8px border-radius (md token), striking a balance between modern and trustworthy. Cards and containers use 12px border-radius (lg token) for a slightly softer appearance that feels welcoming without sacrificing professionalism. Form inputs use 6px border-radius (DEFAULT token), maintaining visual consistency with the overall system. Badges and pills use 9999px border-radius (full token) for maximum softness, signaling secondary or supplementary in

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #004ea2 background with white text, 15px vertical and 20px horizontal padding, and 8px border-radius. On hover, the background shifts to #003d8f (darker blue) with a 200ms transition. Secondary buttons use a light gray background (#dcdcdc) with primary blue text, a 1px outline border, and the same padding and radius. Ghost buttons are transparent with primary blue text and no border, useful for tertiary actions. All buttons include a focus ring (0 0 0 3px rgba(0, 78, 162, 0.1)) for keyboard accessibility. ### Containers & Surfaces Cards are the primary content container, using #f4f4f4 background, 12px border-radius, 24px padding, and a 1px border at #e0e0e0. On hover, the background shifts to #f0f0f0 and

Do's and Don'ts

**Do**

• Do use primary blue (#004ea2) exclusively for primary CTAs, focus states, and brand-critical interactive elements—it is the signature color and should never be diluted or overused.
• Do maintain at least 24px (md spacing) of padding inside cards and containers to ensure content breathes and feels approachable.
• Do apply the 見出ゴMB31 heading font to all H1–H3 elements for visual authority and cultural authenticity; reserve YakuHanJP/Noto Sans JP for body and UI text.
• Do use the full shadow system (sm/md/lg) to create clear visual hierarchy; avoid flat design or excessive shadows that would undermine the professional aesthetic.
• Do test all interactive elements (buttons, inputs, links) with keyboard navigation and screen readers to ensure accessibility; focus rings must always be visible.

**Don't**

• Don't use secondary teal (#5ccbc4) or tertiary gold (#e5a11d) as primary CTAs—these are supporting accents only and will dilute brand recognition.
• Don't apply border-radius greater than 16px (xl token) to buttons or cards; excessive rounding reads as playful rather than professional.
• Don't mix heading fonts; all H1–H3 must use 見出ゴMB31, and all body text must use YakuHanJP or Noto Sans JP.
• Don't reduce padding below 12px (sm spacing) inside containers; cramped layouts feel rushed and undermine the brand's trustworthy, deliberate positioning.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use the appropriate on-* token (e.g., on-primary, on-surface) for optimal contrast and legibility.