CosaWell

Overview

CosaWell is a Japanese IT services and system development company that transforms complex enterprise challenges into elegant, purposeful digital solutions. Headquartered in Shizuoka with regional offices in Tokyo, Nagoya, and Osaka, the brand embodies 'Architectural Clarity'—a design philosophy that combines technical precision with approachable, human-centered interfaces. The visual language reflects the company's core value of 誠心誠意 (sincerity and integrity), using a clean, professional palette anchored by a deep navy primary (#043770) and vibrant secondary blue (#1a73f0) that conveys trust, innovation, and forward momentum.

The brand voice is measured, professional, and solution-oriented. CosaWell speaks in the language of enterprise IT—precise, methodical, never hyperbolic—while maintaining warmth through Japanese cultural sensibility. The tone avoids jargon-heavy abstractions; instead, it grounds technical concepts in tangible business outcomes. Example sentence in brand voice: 'システム開発から運用支援まで、誠心誠意でお客様のビジネスを加速させます。' (From system development to operational support, we deliver sincerity and integrity to accelerate your business.)

Colors

The CosaWell color system is rooted in corporate trust and technological confidence. Primary (#043770, rgb(4, 55, 111)) is the deep navy used on headers, primary CTAs, and brand-critical UI elements—it conveys stability and enterprise credibility. Secondary (#1a73f0, rgb(26, 115, 240)) is a vibrant, energetic blue reserved for secondary CTAs, highlights, and interactive states; it signals innovation and forward motion without overwhelming the interface. Tertiary (#87e5ff) is a bright cyan accent used sparingly for success states, highlights, and data visualization to inject energy and clarity.

The surface stack is deliberately light and minimal: surface (#ffffff) provides the clean canvas, while surface-container variants (#e9ecef to #d0d4d8) create subtle depth for cards, panels, and gro

Typography

The type system pairs IBM Plex Sans JP for all body and heading content with JetBrains Mono reserved exclusively for button labels and technical metadata, creating a visual distinction between narrative prose and interactive elements. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (30px, 700 weight) structure content hierarchy across pages. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 500 weight, 24px line-height) ensure comfortable reading at standard viewing distances; the 1.5x line-height ratio (28px / 18px) provides breathing room in dense content blocks. Label-md in JetBrains Mono (14px, 500 weight, monospaced) on buttons creates a technical, pr

Layout

CosaWell uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter spacing is consistently 24px, creating a rhythm that feels spacious without excessive whitespace. Section separation uses lg spacing (40px) between major content blocks, while internal card padding uses md spacing (24px). The hero section occupies full viewport height with a light blue gradient background (#e8f4ff transitioning to #ffffff), establishing visual momentum immediately. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile. Whitespace is treated as a design element—negative space around CTAs (minimum 16px clearance) prevents accidental clicks and emphasizes cal

Elevation & Depth

Depth in CosaWell is achieved through a restrained shadow system that respects the clean, professional aesthetic. Level 1 (Base): no shadow; flat surfaces on the white background. Level 2 (Cards & Panels): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates subtle separation from the surface, appropriate for content cards, dropdown panels, and form inputs. Level 3 (Modals & Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) provides pronounced depth for modal dialogs and floating elements that demand user attention. Hover states on interactive elements transition to Level 3 shadows over 200m

Shapes

CosaWell employs 'Technical Minimalism' as its shape philosophy—rounded corners are used sparingly and consistently to signal interactivity without introducing organic softness. Buttons and inputs use border-radius: 5px (0.3125rem), a subtle rounding that feels modern and approachable while maintaining geometric precision. Cards and panels use border-radius: 4px (0.25rem), creating a crisp, architectural edge that aligns with the enterprise aesthetic. Dropdown panels and floating elements use the same 4px radius for visual consistency. Full-radius (9999px) is reserved exclusively for badges an

Components

Action Elements Buttons are the primary interaction affordance. Button-primary uses primary color (#043770) with white text, 40px height, 10px vertical / 20px horizontal padding, and 5px border-radius. On hover, the background shifts to #003d82 (a darker shade of primary) with a 200ms transition; this provides clear feedback without introducing a secondary color. Button-secondary mirrors the primary button structure but uses secondary color (#1a73f0) and transitions to #0047b3 on hover. Both button variants use JetBrains Mono at 14px, 500 weight for label text, creating a technical, precise appearance. Disabled buttons reduce opacity to 0.5 and remove pointer events. Focus states add a 3px outline in primary-container (#d6e3f7) at 2px offset for keyboard navigation accessibility.

###

Do's and Don'ts

**Do**

• Do use primary (#043770) exclusively on primary CTAs and brand-critical interactive elements—it anchors trust and enterprise credibility.
• Do apply 200ms transitions on all interactive state changes (hover, focus, active) to provide tactile feedback without feeling sluggish.
• Do maintain 24px gutter spacing and 40px section separation to create breathing room and visual hierarchy.
• Do use JetBrains Mono exclusively on button labels and technical metadata to create visual distinction from narrative prose.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) on cards and panels for subtle depth that respects the clean aesthetic.

**Don't**

• Don't use secondary (#1a73f0) on primary CTAs—it signals secondary importance and dilutes the primary brand color hierarchy.
• Don't apply border-radius greater than 5px on buttons or 4px on cards; aggressive rounding introduces playfulness inappropriate for enterprise software.
• Don't use colored shadows (e.g., rgba(26, 115, 240, x))—always use pure black shadows to maintain visual consistency and professional restraint.
• Don't reduce padding below 12px on interactive elements; insufficient whitespace increases accidental click risk and reduces usability.
• Don't mix IBM Plex Sans JP and JetBrains Mono on the same line of body text—use JetBrains Mono only for labels, buttons, and technical metadata.