RS Wijaya Kusuma Lumajang

Overview

RS Wijaya Kusuma Lumajang is a healthcare institution brand system rooted in 'Warm Institutional Clarity'—a design philosophy that merges medical credibility with human accessibility. The brand serves patients, families, and healthcare professionals seeking trustworthy, compassionate care in Lumajang, East Java. The visual identity employs a vibrant orange accent (#ff6600) paired with cool secondary blues (#2ea3f2) and healing teals (#29c4a9) against clean white surfaces, creating an environment that feels both professional and approachable. The aesthetic rejects sterile coldness in favor of warmth without sacrificing clarity; every interface element communicates competence and care simultaneously.

The brand voice is direct, reassuring, and locally grounded. Tone vocabulary emphasizes wellness, prevention, and patient dignity—never patronizing, never overly technical. The institution speaks in Indonesian-inflected English with phrases like 'Ikhlas melayani untuk kesembuhan pasien' (serving sincerely for patient recovery), embedding cultural values into every communication. Example sentence in brand voice: 'Kami siap melayani Anda dengan teknologi terkini dan hati yang tulus—kesehatan Anda adalah prioritas kami.' (We are ready to serve you with the latest technology and sincere hearts—your health is our priority.)

Colors

The color system balances institutional trust with emotional warmth. Primary (#ff6600, a vibrant burnt orange) is deployed on all call-to-action buttons, key links, and interactive focus states—it commands attention without aggression, evoking both energy and approachability. Secondary (#2ea3f2, a professional sky blue) reinforces credibility and is used for secondary actions, informational badges, and supporting UI elements; it pairs naturally with the primary for visual rhythm. Tertiary (#29c4a9, a healing teal) represents wellness and recovery, appearing in success states, health-positive messaging, and accent highlights.

The surface stack is anchored in pure white (#ffffff) for maximum clarity and medical professionalism, with carefully calibrated grays for depth: surface-container-lo

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that conveys both professionalism and warmth—critical for healthcare contexts where users are often anxious or seeking reassurance. Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines and major section breaks, commanding attention without aggression. Headline-lg (40px, 600 weight) anchors page sections and key messaging. Headline-md (28px, 600 weight) introduces subsections and service categories. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for patient education and service descriptions, with generous line-height (1.56x) to reduce cognitive load. Body-md (16px, 400 weight) handles form labels and secondary content. Label-md (14px, 600 weight, 0.01em tracking) is applied to

Layout

The layout system uses a 12-column grid with a fixed max-width of 1080px, centered on the viewport with 24px gutters on desktop and 12px on mobile. This constraint ensures readability while accommodating the institution's need for clear information hierarchy. Page rhythm is established through lg spacing (40px) between major sections—hero to service grid, service grid to testimonials, testimonials to footer—creating breathing room that reduces cognitive overload for patients in decision-making mode. Container padding uses md spacing (24px) on desktop, sm spacing (12px) on mobile. Card components within grids use md spacing (24px) internal padding and are separated by gutter spacing (24px) to create visual rhythm. The wide-size breakpoint is set to 1080px per WordPress preset, with content-

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids harsh contrasts while maintaining clear visual hierarchy. Level 1 (Base/Flat): no shadow; used for inline text, badges, and elements flush with the surface. Level 2 (Standard Cards): box-shadow: 0 5px 10px rgba(41, 196, 169, 0.15)—a soft, warm shadow that lifts cards 4–8px, using the tertiary teal to reinforce the healing brand personality. Level 3 (Elevated/Modals): box-shadow: 0 0 60px rgba(0, 139, 219, 0.247)—a diffuse, cool-toned shadow that creates atmospheric depth, used for modals, overlays, and hero sections. Hover states

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners signal friendliness and reduce institutional coldness, while consistent radius values maintain visual order. Buttons and interactive elements use lg radius (12px), creating soft, inviting tap targets that feel modern without being trendy. Cards and containers use lg radius (12px) for consistency with buttons, reinforcing a cohesive component language. Input fields use DEFAULT radius (6px), slightly tighter than cards to signal functional, utilitarian purpose. Badges and small UI elements use full radius (9999px) for maximum appro

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary (#ff6600) fill with white text, 12px vertical / 24px horizontal padding, 44px height, and lg radius (12px). On hover, background shifts to #e55a00 (a darker orange) over 200ms, maintaining warmth while signaling state change. Button-secondary uses transparent fill with secondary (#2ea3f2) text and a 2px border, same padding and height; on hover, it fills with secondary-container (#d9ecff) and text shifts to on-secondary-container (#0d3d7a), creating a clear press-down effect. Both button variants use label-md typography (14px, 600 weight) for visual weight and tap-target clarity.

Containers & Surfaces Cards are the primary content container. Base card uses white background, lg radius (12px), m

Do's and Don'ts

**Do**

• Do use primary (#ff6600) exclusively for CTAs, focus states, and key interactive elements—it is the brand's signature accent and must remain distinctive.
• Do apply lg spacing (40px) between major page sections to create breathing room and reduce cognitive load for patients in decision-making mode.
• Do use Open Sans at 600–700 weight for all headings; never use 400 weight for headlines, as it diminishes hierarchy and authority.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm) over colored backgrounds to ensure WCAG AA legibility.
• Do transition all interactive states (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional feedback.
• Do use the tertiary teal (#29c4a9) in success states, wellness messaging, and recovery-positive UI to reinforce the healing brand personality.
• Do constrain content to 1080px max-width with 24px gutters on desktop to maintain readability and visual order across all pages.

**Don't**

• Don't use primary (#ff6600) for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and focus states to maintain visual hierarchy.
• Don't apply shadows darker than lg elevation (0 0 60px rgba(0, 139, 219, 0.247)) or use pure black shadows; all shadows must use warm or cool tones to maintain brand warmth.
• Don't mix border-radius values inconsistently; use the defined scale (3px, 6px, 8px, 12px, 16px, 9999px) to maintain visual cohesion.
• Don't use error red (#cf2e2e) for decorative elements or non-critical messaging; reserve it exclusively for alerts, warnings, and validation errors.
• Don't set line-height below 1.5x for body copy (minimum 24px for 16px text); generous line-height reduces cognitive load and improves accessibility for anxious users.
• Don't apply more than one shadow level to a single element; use either sm, md, or lg elevation, never layered shadows.
• Don't use secondary (#2ea3f2) as a primary action color; it is a supporting accent and must never compete with primary (#ff6600) for visual dominance.