raditool

Overview

raditool is a professional radiology management platform designed for medical specialists who demand precision, accessibility, and clinical clarity. The brand serves radiologists and teleradiology practitioners across institutional and private practice settings, combining sophisticated data visualization with an intuitive interface that respects the cognitive load of medical decision-making. The aesthetic movement is 'Clinical Modernism'—a design philosophy that merges the trustworthiness of traditional medical interfaces with contemporary digital clarity. The UI evokes confidence through consistent, predictable interactions; calm through generous whitespace and a restrained color palette anchored by a professional blue (#4191e6); and efficiency through information hierarchy that prioritizes actionable data. Users should feel that raditool is both powerful and approachable—a tool built by people who understand radiology workflows, not a generic SaaS dashboard.

The brand voice is precise, professional, and patient-centric. Vocabulary avoids jargon when possible, but does not shy away from clinical terminology when accuracy demands it. Tone is calm and authoritative—never breathless, never casual. Example sentence in brand voice: 'Access your patient's complete imaging history across all affiliated institutions, with results organized by date and modality for rapid clinical review.'

Colors

The color system is anchored by a professional, trust-building blue primary (#4191e6) used exclusively for interactive elements—primary CTAs ('Rejestracja'), links, focus states, and active navigation. This blue is derived from the live computed style of the hero CTA button and signals clinical authority without coldness. The secondary color (#8897aa) is a muted slate-blue used for supporting text, disabled states, and secondary UI elements; it provides visual rest without introducing competing accents. The tertiary color (#02bc77) is a vibrant, accessible green reserved for success states, positive confirmations, and completion indicators—critical for medical workflows where status clarity is non-negotiable. The error color (#d9534f) is a warm red used for alerts, destructive actions, and

Typography

The type system pairs Muli (headlines, display text) with Roboto (body, labels, UI text), a combination that balances personality with legibility in medical contexts. Muli's slightly wider letterforms and generous x-height make it ideal for scanning—critical when radiologists are reviewing patient lists or procedure summaries. Roboto's metrically precise design ensures consistent rendering across devices and maintains clarity at small sizes (12px labels, 14px UI text). The hierarchy is strict: display (48px, 600 weight, -0.02em tracking) anchors hero sections and major page titles; headline-lg (36px, 600 weight) is used for section headers; headline-md (28px, 600 weight) for subsections. Body text uses 16px Roboto at 400 weight with 24px line-height and 0.01em tracking—this 1.5 line-height

Layout

The layout uses a 12-column fluid grid with a max-width container of 1280px, ensuring the interface scales gracefully from mobile (single column, 16px gutter) to desktop (full 12 columns, 24px gutter). The page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm spacing (12px). The hero section occupies 100vh on desktop, with a parallax background image (assets/img/bg/landing.png) that moves at -23% on scroll, creating depth without distraction. Content containers use 24px horizontal padding on mobile, 40px on tablet, and 64px on desktop, ensuring text never exceeds 65 characters per line (optimal for reading). Cards and form elements are grouped with 12px vertical spacing to crea

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics the physics of layered glass and paper. Level 1 (Base/Resting): no shadow; elements sit flush on the surface (#f5f5f5 background). Level 2 (Standard/Hover): box-shadow 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12); used for cards, buttons at rest, and input fields. This subtle shadow (1.5px blur, 1px spread) creates just enough separation to signal interactivity without visual noise. Level 3 (Elevated/Active): box-shadow 0px 8px 20px 1px rgba(0, 0, 0, 0.3); used for modals, dropdowns, and buttons in active/pressed state. The larger blur

Shapes

The shape philosophy is 'Clinical Precision'—rounded corners are used strategically to soften the interface without introducing ambiguity or playfulness. Buttons use full pill-shaped rounding (border-radius: 9999px) to signal that they are primary interactive elements; this is the most distinctive shape in the system and is reserved exclusively for CTAs and major actions. Cards and containers use moderate rounding (0.75rem / 12px) to create visual softness while maintaining a professional appearance; this radius is applied consistently to all card-like surfaces (modals, dropdowns, panels). Inp

Components

Action Elements Buttons are the primary interactive element and use the pill-shaped rounding (border-radius: 9999px) to signal their importance. Primary buttons (button-primary) use the brand blue (#4191e6) background with white text, 40px height, and 7px vertical / 18px horizontal padding. On hover, the background darkens to #3a7fc8 and the shadow elevates to Level 3 (0px 8px 20px 1px rgba(0, 0, 0, 0.3)); the transition uses cubic-bezier(0.4, 0, 0.2, 1) over 300ms. On active/pressed state, the background further darkens to #2d5fa3 and the shadow remains at Level 3. Secondary buttons (button-secondary) use a transparent background with a 1px border in outline-variant (#c4c7c8) and primary-colored text; on hover, they fill with surface-container-high (#e0e0e0) while maintaining the bord

Do's and Don'ts

**Do**

• Do use the primary blue (#4191e6) exclusively for interactive elements—buttons, links, focus states, and active navigation. Never use it for backgrounds or decorative elements.
• Do maintain the 1.5 line-height ratio (24px for 16px body text) to ensure readability of clinical descriptions and patient notes.
• Do apply the three-tier shadow system consistently: Level 2 for resting cards/buttons, Level 3 for active/elevated states. Never use shadows for decoration.
• Do use pill-shaped buttons (border-radius: 9999px) exclusively for primary CTAs; use 12px radius for cards and 8px for inputs to maintain visual hierarchy.
• Do group related form fields with 8px spacing and separate form groups with 12px spacing to create visual clusters that reduce cognitive load.
• Do use the tertiary green (#02bc77) exclusively for success states and positive confirmations; use the error red (#d9534f) exclusively for alerts and destructive actions.
• Do apply focus states to all interactive elements using a 3px box-shadow with 10% opacity primary color (rgba(65, 145, 230, 0.1)) for keyboard navigation accessibility.
• Do use Muli for headlines (display, headline-lg, headline-md) and Roboto for body text and UI labels to maintain the clinical-modern aesthetic.

**Don't**

• Don't use colored shadows or blur effects for depth—the shadow system is black-based and functional, not decorative.
• Don't apply rounding to all elements indiscriminately; use pill-shaped rounding only for buttons, moderate rounding (12px) for cards, and minimal rounding (8px) for inputs.
• Don't exceed 65 characters per line in body text; use the container max-width (1280px) and gutter spacing (24px) to ensure optimal readability.
• Don't use the primary blue for backgrounds, text, or any non-interactive element; reserve it exclusively for CTAs and interactive states.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error, and surface stack); the restrained palette is essential for clinical clarity.
• Don't use font weights other than 400, 500, and 600 in UI elements; avoid 300 or 700 weights to maintain visual consistency.
• Don't apply transitions longer than 300ms for buttons or 200ms for cards; faster transitions feel snappier and reduce perceived latency in medical workflows.
• Don't use system fonts (system-ui, sans-serif) as fallbacks; always specify Roboto or Muli with Google Fonts @font-face declarations to ensure consistent rendering across devices.