医療法人社団Links

Overview

医療法人社団Links is a pediatric healthcare and family wellness organization that transforms clinical expertise into warm, accessible experiences. The design system embodies 'Soft Clinical Minimalism'—a movement that balances medical authority with emotional approachability through gentle gradients, rounded geometry, and a carefully restrained color palette. The brand serves families seeking both professional pediatric care and holistic child-rearing support, evoking confidence without coldness, expertise without intimidation. The visual language communicates: 'Your child's wellbeing is our priority, and we understand the complexity of modern parenting.' Voice: calm, informative, never patronizing. Vocabulary emphasizes partnership ('together,' 'support,' 'journey') and specificity ('developmental milestones,' 'evidence-based guidance'). Example sentence in brand voice: 'We partner with families to nurture each child's unique developmental path through specialized clinics and evidence-based wellness programs.'

Colors

The color system balances clinical trust with familial warmth. Primary (#355782) is a sophisticated slate-blue deployed on CTAs, navigation highlights, and interactive focus states—it conveys medical authority without severity. Secondary (#5ac7bc), a soft teal, supports wellness messaging and secondary actions, evoking calm and growth. Tertiary (#c491e9), a gentle lavender, accents child-focused content and highlights, softening the clinical tone. The surface stack (white #ffffff through surface-container-highest #e0e0e0) provides clean, accessible backgrounds with subtle depth. On-surface text (#222222) ensures readability while remaining warm. Error (#cf2e2e) is reserved for critical alerts and validation states. Usage rules: Primary buttons appear on all CTAs (appointments, inquiries);

Typography

The type system prioritizes clarity and warmth through Noto Sans JP, a humanist sans-serif that reads naturally in both Japanese and English contexts. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with authority; Headline-lg (40px, 700 weight) titles major sections; Headline-md (28px, 600 weight) subsections; Title-lg (20px, 600 weight) card headers and form labels. Body-lg (18px, 400 weight, 28px line-height) carries narrative content with generous line-height for accessibility; Body-md (16px, 400 weight, 24px line-height) is the workhorse for descriptions and body copy. Label-md (14px, 600 weight, 0.02em tracking) marks buttons, badges, and form labels; Label-sm (12px, 500 weight, 0.03em tracking) annotates metadata and helper text. All display and headline weights u

Layout

The layout system uses a 12-column grid with a max-width of 1280px, supporting both desktop and mobile-first responsive design. The gutter is consistently 24px, creating rhythm and breathing room. Container padding follows the spacing scale: lg (40px) for full-width sections, md (24px) for card interiors, sm (12px) for compact components. White-space is generous—section separation uses lg spacing (40px) to create visual pause and hierarchy. The hero section spans full-width with a soft gradient background (white to pale lavender), establishing emotional tone immediately. Content cards are arranged in a 3-column grid on desktop, collapsing to 2 columns on tablet and 1 on mobile. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently: md for component pad

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat surfaces with no shadow, using only 1px borders at outline-variant (#bebebe) for definition. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle lift and focus. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), with a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) and backdrop-filter: blur(4px) to separate modal content from background. Hover states elevate cards from Level 2 to Level 3 shadows with a 200ms ease-in-out tra

Shapes

The shape philosophy is 'Rounded Accessibility'—corners are consistently softened to evoke approachability and reduce visual harshness, while maintaining enough definition for clinical clarity. Buttons use rounded.lg (1rem / 16px) for a friendly, inviting appearance that feels less institutional than sharp corners. Cards and containers use rounded.xl (1.5rem / 24px) for a more pronounced softness, particularly on child-focused content. Input fields use rounded.DEFAULT (0.5rem / 8px) for subtle rounding that maintains form-like clarity. Badges and chips use rounded.full (9999px) for pill-shaped

Components

Action Elements Buttons are the primary interaction pattern. Button-primary (#355782 background, white text, 48px height, 12px 24px padding, 1rem radius) is used for all primary CTAs: 'Book Appointment,' 'Learn More,' 'Contact Us.' On hover, the background shifts to #2a4563 (darker slate) with a 200ms transition, maintaining visual feedback without animation excess. Button-secondary uses a transparent background with a 2px primary-colored border, allowing secondary actions to coexist without visual dominance. Button-tertiary (#c491e9 background) highlights child-specific or wellness-focused actions. All buttons use label-md typography (14px, 600 weight) for crisp, scannable text. Focus states add a 3px outline at rgba(53, 87, 130, 0.3) for keyboard accessibility.

Containers & Surf

Do's and Don'ts

**Do**

• Do use primary (#355782) exclusively for CTAs and interactive focus states—it's the brand's signature trust color and must remain distinctive.
• Do apply generous spacing (lg: 40px) between major sections to create visual breathing room and reduce cognitive load for families reviewing clinical information.
• Do pair Noto Sans JP at body-md (16px, 24px line-height) for all body copy to ensure accessibility for both Japanese and English readers, particularly parents with varying literacy levels.
• Do use rounded.xl (24px) on cards containing child-focused content (developmental milestones, wellness tips) to reinforce the warm, family-friendly tone.
• Do elevate cards on hover with a shadow transition (0 3px 8px → 0 8px 24px) over 200ms to signal interactivity without jarring animation.
• Do apply tertiary (#c491e9) accents sparingly—only on child-specific services, wellness highlights, or family-focused CTAs—to maintain visual hierarchy and brand distinctiveness.

**Don't**

• Don't use sharp corners (0px radius) on content cards or buttons—the brand's 'Soft Clinical' aesthetic requires rounded geometry to balance authority with approachability.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive depth undermines the clean, accessible aesthetic and can feel heavy on clinical content.
• Don't mix primary (#355782) with secondary (#5ac7bc) or tertiary (#c491e9) on the same interactive element—each color role must remain semantically distinct to avoid confusion.
• Don't use body text smaller than 16px (body-md) for main content—accessibility for parents reading on mobile and ensuring comfortable reading for clinical information is non-negotiable.
• Don't apply gradients to backgrounds or buttons—the brand relies on flat, semantic color application to maintain clinical clarity and legibility.
• Don't use outline-variant (#bebebe) borders thicker than 1px—subtle definition is preferred; thicker borders feel institutional and contradict the warm, accessible tone.