Bumame Healthcare

Overview

Bumame Healthcare is a digital-first Indonesian medical services platform that transforms healthcare accessibility through a professional, trust-focused interface. The brand embodies 'Clinical Clarity'—a design philosophy that combines institutional credibility with warm, approachable human-centered interactions. The UI prioritizes information hierarchy and decision-making confidence, using a deep professional blue (#204eab) as the primary accent to signal medical authority, paired with clean white surfaces and precise typography. The emotional response is one of reassurance: users feel they are in capable, modern hands.

Bumame's voice is professional yet conversational, avoiding medical jargon while maintaining clinical precision. The tone is direct and action-oriented—every interface element guides users toward booking, consulting, or learning about services without friction. Example sentence in brand voice: 'Konsultasi dengan dokter Bumame. Gratis, kapan pun kamu butuh.' (Consult with Bumame doctors. Free, whenever you need it.)

Colors

The color system is anchored in institutional trust and medical professionalism. Primary (#204eab) is the signature brand blue, used exclusively on call-to-action buttons, active navigation states, and key interactive elements. It conveys medical authority and trustworthiness without coldness. Secondary (#cd2b31) is a clinical red reserved for error states, alerts, and critical information—it demands attention without aggression. Tertiary (#ff6b00) is an energetic orange used sparingly for accent highlights and secondary CTAs, adding warmth to the otherwise cool palette.

The surface stack uses pure white (#ffffff) as the primary background with a carefully calibrated gray scale for depth: surface-container-low (#f0f0f0) for subtle card backgrounds, surface-container (#ececec) for interact

Typography

The type system uses Metropolis (a geometric sans-serif with excellent medical/technical credibility) across all weights from 100 to 500. Display (57px, weight 200) is reserved for hero headlines and creates visual impact through scale and lightness rather than heaviness. Headline-lg (40px, weight 400) anchors section introductions, while headline-md (28px, weight 400) structures content hierarchy. Body text (16px–18px, weight 400) maintains 1.5 line-height (24–28px) for comfortable reading in medical contexts. Labels and CTAs use weight 500 at 12–14px with 0.01–0.03em letter-spacing to add precision and visual distinction. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm) when overlaid on colored backgrounds to ensure legibility. The light weight (200) on display

Layout

The layout uses a 12-column responsive grid with a fixed max-width of 1024px, centering content on desktop while maintaining full-width fluidity on mobile. Horizontal gutters are 24px on desktop (md spacing) and 12px on tablet (sm spacing), creating breathing room without excessive white space. Vertical rhythm follows an 8px unit system: section separations use lg spacing (40px), card padding uses md spacing (24px), and internal element spacing uses sm (12px). The container max-width of 1024px ensures that even on wide displays, content remains scannable and focused—critical for healthcare information where cognitive load is a concern. Hero sections span full-width with a deep blue background (#204eab), while content cards and forms sit within the centered container. Mobile-first approach:

Elevation & Depth

Depth is achieved through subtle, consistent shadows rather than layered transparency or blur effects. Level 1 (Base): flat white surface with no shadow, representing the primary content plane. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 3px with a 8px blur radius—this is the workhorse shadow for all interactive cards, input fields, and modals. Level 3 (Elevated/Hover): box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15), a more pronounced shadow with 4px offset and 20px blur, used on hover states and floating action elements to signal interactivity.

Shapes

The shape philosophy is 'Precision with Warmth'—sharp enough to feel modern and clinical, rounded enough to feel approachable. Buttons use 16px border-radius (lg), creating a pill-like form that feels friendly while maintaining professional geometry. Input fields and smaller components use 4px (DEFAULT) or 3px (sm) for a more technical, precise appearance. Cards use 12px (md) as a middle ground between clinical sharpness and human warmth. Large hero sections and modals use 32px (xl) for a softer, more welcoming frame. The full (9999px) radius is reserved for badges and avatar containers, creat

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background: {colors.primary} (#204eab), text: white, padding: 12px 24px, height: 48px, and border-radius: 16px with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, shift to #1a3a7a (darker blue) and maintain the same shadow. On active/pressed, use #0f2550 with no shadow change. Button-secondary is transparent with a 1px border in primary blue, text in primary blue, and the same padding/height. Hover state shifts background to primary-container (#d9e2f7) with text in on-primary-container (#1a3a7a). All buttons use label-md typography (14px, weight 500) and transition all properties over 150ms ease-out.

Containers & Surfaces Cards are the primary content container. Use background: white, border:

Do's and Don'ts

**Do**

• Do use primary blue (#204eab) exclusively for CTAs, active states, and key affordances—it is the visual anchor of medical trust.
• Do maintain 24px gutters and 40px section spacing to create breathing room; healthcare information requires cognitive clarity.
• Do apply 1px solid borders (#cecece) to all cards and inputs alongside shadows to ensure definition in low-contrast contexts.
• Do use Metropolis weight 200 on display text (57px) to create approachable scale without heaviness; avoid bold headlines.
• Do test all interactive elements at 48px minimum height and ensure 16:1 contrast ratio for body text on all backgrounds.
• Do transition all hover/focus states over 150ms ease-out to signal interactivity without jarring motion.

**Don't**

• Don't use secondary red (#cd2b31) or tertiary orange (#ff6b00) on primary CTAs; reserve them for errors and accents only.
• Don't exceed 20px blur radius on shadows; medical interfaces require clarity, not dramatic depth effects.
• Don't apply transparency or glassmorphism effects to cards or buttons; the palette relies on solid colors and precise borders.
• Don't use border-radius greater than 32px on cards or standard containers; it dilutes the clinical precision of the system.
• Don't mix Metropolis with system fonts; always specify the full font stack with Metropolis as primary and -apple-system as fallback.
• Don't reduce padding below 12px on interactive elements or increase font-size above 18px for body text without explicit design review.