Bios Management

Overview

Bios Management is an enterprise consulting and analytics platform designed for organizations seeking data-driven growth through trusted insights and streamlined processes. The brand embodies "Analytical Clarity"—a design philosophy that transforms complex business intelligence into intuitive, actionable interfaces. The visual language combines a professional corporate aesthetic with modern digital minimalism: a deep navy hero background (#000f2a) provides gravitas and focus, while a vibrant cobalt primary accent (#2457f0) signals interactivity and trust. The UI evokes precision, reliability, and forward-thinking innovation—qualities essential to enterprise decision-making.

The brand voice is authoritative yet approachable: confident without being condescending, technical without jargon overload. Bios speaks in the language of outcomes: "Make informed decisions fast, with real-time data and scenario analysis." Tone patterns favor active verbs, concrete benefits, and industry-specific credibility. The vocabulary emphasizes partnership ("alongside"), data integrity ("trusted"), and tangible results ("smarter, faster decisions"). Example sentence in brand voice: "Monitor performance in real time, uncover hidden opportunities with AI, and align your entire organization around data you can trust."

Colors

The color system is anchored by a primary cobalt blue (#2457f0), used exclusively for call-to-action buttons, interactive states, and brand-critical links. This accent appears on the hero CTA ("CONTATTACI"), form submissions, and focus states, establishing a clear visual hierarchy. The secondary accent, a bright cyan (#009fe3), provides supporting emphasis for secondary actions and data highlights, while tertiary cyan (#00bbff) reinforces tertiary interactions and status indicators. The surface palette is deliberately neutral: pure white (#ffffff) as the dominant background, with a soft off-white (#f3f6f4) for container backgrounds and subtle depth. Text on light surfaces uses a deep navy (#000f2a) for maximum legibility and professional appearance. The outline color (#666666) is used for

Typography

The type system pairs Montserrat Variable (headings, display) with Open Sans (body, labels), creating a hierarchy that balances geometric precision with humanist warmth. Display text (56px, 700 weight) commands attention on hero sections with a tight -0.02em letter-spacing, while headline-lg (40px, 600 weight) structures major sections. Body copy uses Open Sans at 16px with 400 weight and 24px line-height, ensuring readability across dense data contexts. Labels employ a 600 weight at 14px with 0.02em letter-spacing to add visual weight to form fields and interactive elements. On small labels over busy backgrounds (e.g., badge components), apply a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contrast. The system enforces a 1.5x line-height multiplier for body text (24px on 1

Layout

The page layout employs a 12-column grid with a maximum container width of 1280px, centered with equal margins. The spacing scale follows an 8px unit system: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter between grid columns is 24px, maintaining consistent breathing room. Hero sections use full-width backgrounds (typically dark navy or gradient overlays) with centered content containers, while body sections alternate between light backgrounds and subtle container backgrounds (#f3f6f4) to create visual rhythm. Cards and content blocks use md (24px) padding internally, with lg (40px) spacing between major sections. Mobile breakpoints compre

Elevation & Depth

Depth in this system is achieved through a three-tier shadow hierarchy that conveys information architecture without visual heaviness. Level 1 (Base/Cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background while maintaining a clean, modern aesthetic. Level 2 (Elevated/Modals/Popovers) applies box-shadow: 1px 2px 8px 0 rgba(0, 0, 0, 0.35), signaling modal importance and drawing focus. Dropdown panels and select menus use the Level 1 shadow with a 4px margin-top offset, creating visual breathing room. Focus states on interactive elements (buttons, inp

Shapes

The shape philosophy is "Technical Precision"—favoring sharp, minimal border-radius values that convey professionalism and data-driven rigor. Buttons use a 3px radius (DEFAULT), creating a subtle softness without appearing playful or casual. Input fields and form controls use 8px radius (lg), providing enough roundness to feel modern while maintaining geometric clarity. Cards and larger containers use 6px radius (md), balancing approachability with corporate restraint. Modals and elevated surfaces use 20px radius (xl), signaling importance and creating visual distinction from standard UI eleme

Components

Action Elements Buttons follow a strict two-tier system: primary (solid #2457f0 background, white text, 44px height, 12px 24px padding) for main CTAs, and secondary (transparent background with #2457f0 border and text) for supporting actions. Primary buttons use a 200ms ease transition to #3665f2 on hover, maintaining visual feedback without animation excess. Ghost buttons (transparent, no border) are reserved for tertiary actions and navigation links. All buttons enforce a minimum 44px height to meet touch-target accessibility standards. Focus states apply a 0.125rem solid #4d65ff outline with 0.125rem offset, visible on keyboard navigation.

Containers & Surfaces Cards use a 1px solid #cccccc border with 24px padding and 6px border-radius, creating clear visual boundaries. On hov

Do's and Don'ts

**Do**

• Do use primary blue (#2457f0) exclusively for CTAs and interactive focus states—never for decorative elements or backgrounds.
• Do maintain the 8px spacing unit consistently across padding, margins, and gaps to preserve visual rhythm and alignment.
• Do apply the 200ms ease transition timing to all hover and focus state changes, creating predictable, responsive feedback.
• Do use Open Sans for body text and Montserrat Variable for headings to maintain the professional-yet-modern typographic hierarchy.
• Do enforce a minimum 44px height on all clickable elements (buttons, inputs, list items) to meet touch accessibility standards.
• Do use the three-tier shadow system (0 3px 8px, 1px 2px 8px, and outline focus) to establish clear visual hierarchy without visual noise.

**Don't**

• Don't use secondary cyan (#009fe3) or tertiary cyan (#00bbff) as primary CTA colors—these are supporting accents only.
• Don't apply border-radius greater than 20px on standard UI elements; reserve 9999px (full) for badges and pill-shaped components only.
• Don't use blur effects, glassmorphism, or semi-transparent overlays on primary content areas—maintain clean, opaque surfaces for data clarity.
• Don't mix Montserrat and Open Sans within a single heading or body paragraph; maintain strict family separation by role (headings vs. body).
• Don't apply shadows with blur values greater than 8px or spread values greater than 0px—keep shadows subtle and precise.
• Don't use color alone to convey interactive state; always pair color changes with outline focus states or text weight shifts for accessibility.