Sun Bousai (サン防災)

Overview

Sun Bousai (株式会社サン防災) is a fire safety and disaster prevention equipment company based in Yamanashi Prefecture, Japan. The design system embodies 'Warm Institutional Minimalism'—a philosophy that combines the approachability of illustrated isometric environments with the precision and authority of professional typography. The brand personality is protective yet accessible: it speaks to building managers, facility owners, and community leaders with calm expertise, never alarmist. The visual language uses soft, rounded forms (24px border-radius on primary cards, 100% circular accent badges) paired with a bold, high-contrast color palette (primary red #e43200 for urgent CTAs, secondary green #87cc5a for safety affirmation, tertiary blue #5bafc1 for informational elements). The emotional response is one of reassurance: 'We are your reliable partner in preparedness.' Voice example: 'Your building's safety is our responsibility—let's ensure every exit is clear, every alarm functional, every team trained.'

Colors

The color system is organized around institutional trust and community safety. Primary (#e43200, a vibrant fire-engine red) is reserved exclusively for call-to-action buttons, critical alerts, and brand-defining interactive moments—it commands attention without aggression. Secondary (#87cc5a, a warm sage green) represents safety, compliance, and positive outcomes; it appears in success states, checkmarks, and affirmation badges. Tertiary (#5bafc1, a calm institutional blue) supports informational hierarchies, secondary navigation, and data visualization. The surface stack is anchored in warm, off-white tones: surface-container-low (#fffaf0, a cream beige) for card backgrounds, surface-container (#f4f2f1, a light taupe) for table headers and secondary containers, and surface-container-high

Typography

The type system prioritizes clarity and institutional authority through a two-track approach: Japanese text uses Zen Kaku Gothic New (weights 400, 800, 900) for its clean, modern geometry and excellent readability in dense information layouts; English accent text employs BBH Bartle (display headlines) and Instrument Sans (navigation labels) for visual distinction and brand personality. Display-level headlines (84px, 900 weight, -0.04em letter-spacing) are reserved for hero sections and use the English typeface to create visual hierarchy; headline-lg (40px, 800 weight) anchors section introductions in Japanese. Body text is set at 15px with 24px line-height and 0.03em letter-spacing, creating a generous, legible rhythm across all content. Labels and navigation use 14px with 0.05em letter-sp

Layout

The layout system uses a fluid 12-column grid with a fixed max-width of 1280px, centered on the viewport. The page rhythm is driven by semantic spacing: section separation uses lg spacing (40px) for breathing room, while internal card padding uses md spacing (24px). The hero section occupies the full viewport with a sticky background illustration (isometric community scene), allowing the headline to float over dynamic content. Below the fold, sections are organized in alternating card-and-text blocks, each separated by margin-article (12vw) to create visual rhythm that scales with viewport size. Container gutter is consistently 24px on all sides, reducing to 12px on mobile viewports (< 960px). White-space is generous: cards maintain 24px internal padding, list items use 12px vertical paddi

Elevation & Depth

Depth is conveyed through a three-tier shadow system and warm color layering, avoiding harsh blacks. Level 1 (Base): the page background is pure white (#ffffff) with no shadow. Level 2 (Standard Cards): cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 24px border-radius and warm background colors (cream #fffaf0 or taupe #f4f2f1) to sit gently above the surface. Level 3 (Elevated/Modals): prominent containers use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border in outline-variant (#b4b4b4) to define edges without harshness. Interactive elements (buttons, inputs) use a 1.5p

Shapes

The shape philosophy is 'Soft-Technical Warmth'—rounded corners are used generously to soften institutional severity while maintaining professional clarity. Primary buttons and prominent cards use lg radius (24px) to feel approachable and modern. Secondary containers, input fields, and list items use DEFAULT radius (8px) for subtle definition without visual noise. Full-radius (9999px) is reserved for small accent badges and circular icon containers, reinforcing the brand's use of isometric circles in the hero illustration. The rationale: 24px corners on large surfaces (cards, modals) echo the

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses a 56px height (18px top/bottom padding, 22px left/right padding) with 1.5px solid border in primary red (#e43200), 24px border-radius, and white text in label-md weight. On hover, the background shifts to primary-container (#ff6b3d) with a smooth 0.2s ease-out transition and a subtle scale(1.02) transform. The button-secondary variant uses a transparent background with a 1.5px border in primary red and dark text; on hover, the background fills with surface-container-high (#eefbff). Both variants use the same height and padding for consistency. Buttons should never use box-shadow; instead, rely on border definition and background color shifts for feedback.

Containers & Surfaces Cards come

Do's and Don'ts

**Do**

• Do use primary red (#e43200) exclusively for CTAs, critical alerts, and brand moments—never for body text or secondary UI.
• Do maintain 24px padding inside cards and 40px spacing between major sections to create generous, legible layouts.
• Do pair Japanese body text (Zen Kaku Gothic New, 15px, 24px line-height) with English display headlines (BBH Bartle, 84px) to signal hierarchy and brand personality.
• Do apply 24px border-radius to large cards and 8px to inputs/list items to maintain visual warmth without sacrificing clarity.
• Do use soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) for standard elevation and reserve 0 8px 24px rgba(0, 0, 0, 0.12) for prominent modals only.
• Do transition hover states smoothly over 0.2s ease-out, shifting background color one step up the surface stack rather than adding shadows.

**Don't**

• Don't use primary red for backgrounds, body text, or non-interactive elements—it must remain reserved for CTAs and critical moments.
• Don't apply sharp corners (0px border-radius) to any interactive element; maintain minimum 8px radius for consistency with the warm aesthetic.
• Don't use harsh black shadows or drop-shadows on text; rely instead on color contrast, weight hierarchy, and subtle 1px borders.
• Don't mix typefaces within a single text block; keep Japanese text in Zen Kaku Gothic New and reserve English typefaces (BBH Bartle, Instrument Sans) for display and navigation only.
• Don't exceed 1280px container width even on ultra-wide viewports; maintain the fixed max-width to preserve readability and visual hierarchy.
• Don't use opacity or transparency for primary UI elements; instead, use the full surface color stack to maintain institutional clarity and accessibility.