Proton Bytes

Overview

Proton Bytes is a next-generation medical radiology platform delivering cloud-native RIS (Radiology Information System) and DICOM storage solutions for healthcare facilities. The design system embodies 'Ethereal Minimalism'—a movement that pairs clean, light surfaces with precise geometric accents and subtle depth cues, creating an interface that feels both trustworthy and forward-thinking. The brand serves radiologists, hospital administrators, and IT teams who demand security without sacrificing usability. The visual language evokes clarity and precision through a predominantly white canvas (rgb(255, 255, 255)) punctuated by a vibrant primary blue (#4191e6) that signals interactivity and trust. Animated geometric orbs and wireframe shapes in the hero section communicate technological sophistication and data-driven intelligence.

The brand voice is professional yet approachable, precise without being clinical. Proton Bytes speaks in active, outcome-focused language: 'Radiologia w chmurze, bez kompromisów' (Radiology in the cloud, without compromise) sets the tone—confident, direct, and solution-oriented. The vocabulary emphasizes security, scalability, and regulatory compliance, but always in service of the end user's workflow. Example sentence in brand voice: 'Twoje dane radiologiczne są chronione szyfrowaniem end-to-end i przechowywane w compliance z HIPAA, GDPR i polskimi regulacjami medycznymi—bez dodatkowej konfiguracji.'

Colors

The color system is built on a luminous, high-contrast foundation optimized for medical environments where clarity and focus are non-negotiable. Primary (#4191e6) is the signature accent—a medium-saturation blue used exclusively on CTAs, active states, focus rings, and key interactive elements. It appears in the hero CTA 'Umów prezentację' (Schedule a demo), the navigation accent, and all primary buttons. Secondary (#3278c8) provides a deeper blue for hover states and secondary actions, while Tertiary (#26aae1) is a cyan accent reserved for highlights, badges, and supporting visual elements. The surface stack is anchored in pure white (#ffffff) for the main canvas, with subtle off-white containers (surface-container-highest: #dbe9f6, surface-container-high: #e9ecef) creating depth without

Typography

The type system uses a single sans-serif family (system-ui stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) to ensure consistent rendering across medical devices and browsers. Display (70px, 700 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (48px, 700 weight) breaks major sections; Headline-md (32px, 600 weight) introduces subsections; Title-lg (24px, 600 weight) labels card headers. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) handles standard paragraph text. Label-md (14px, 600 weight, 0.01em tracking) styles button text and form labels; Label-sm (12px, 500 weight, 0.05em tracking) is reserved for badges, captions, an

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centered with auto margins. The hero section spans full viewport height (min-h-screen) with a fixed navbar (z-index: 50) overlaid at the top. Horizontal padding scales responsively: 16px on mobile (sm), 24px on tablet (md), and 32px on desktop (lg), using the gutter token (24px) for consistent spacing. Vertical rhythm is established through lg spacing (40px) for section separation and md spacing (24px) for component-level gaps. The grid-gap between product cards is 32px (8 × 4px unit), creating visual breathing room without excessive whitespace. Container padding inside cards is md (24px) on mobile, lg (40px) on desktop. The hero content area uses max-w-3xl (48rem) on desktop to prevent text from stretching

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows, reflecting the medical context where visual clarity is paramount. Level 1 (Base): The background mesh-gradient and grid-pattern (opacity: 0.5) establish a subtle texture without distraction. Level 2 (Standard Card): Cards use rgba(255, 255, 255, 0.7) background with a 1px border at rgba(65, 145, 230, 0.1) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the base. Level 3 (Elevated/Hover): On hover, cards transition to rgba(255, 255, 255, 0.85) with box-shadow: 0 8px 24px rgba(0,

Shapes

The shape philosophy is 'Precision Geometry'—combining sharp, technical corners with generous rounding on interactive elements to balance professionalism with approachability. Buttons use rounded-full (9999px) to create pill-shaped CTAs that feel inviting and modern, contrasting with the clinical nature of medical software. Cards and containers use rounded-xl (24px) for a softer, more approachable feel while maintaining visual structure. Input fields and form elements use rounded-DEFAULT (8px) for subtle definition without excessive rounding. The hero geometric shape uses nested borders with r

Components

Action Elements Buttons are the primary interaction mechanism and use a three-state system. Button-primary (background: #4191e6, text: white, height: 48px, padding: 16px 32px, rounded-full) is the dominant CTA, always paired with box-shadow: 0 3px 8px rgba(65, 145, 230, 0.25). On hover, the background darkens to #3682d4 and shadow expands to 0 6px 16px rgba(65, 145, 230, 0.35); on active/press, background becomes #2d6fb8 with shadow reduced to 0 2px 4px rgba(65, 145, 230, 0.2). Button-secondary uses a transparent background with a 1px border at outline-variant (#c4c7c8) and on-surface text; on hover, it fills with surface-container-high (#e9ecef) and the border shifts to primary (#4191e6). Button-ghost is a minimal variant with no background or border, text-only in primary blue, used f