Mebone Fraude

Overview

Mebone Fraude is an enterprise-grade anti-fraud platform designed for financial institutions, payment processors, and e-commerce merchants. The design system embodies 'Technical Clarity'—a philosophy that marries austere, professional minimalism with strategic accent colors that guide user attention to critical decision points. The aesthetic is corporate-institutional: clean white surfaces (rgb(255, 255, 255)), neutral grays (rgb(102, 102, 102) for secondary text, rgb(51, 51, 51) for primary), and a signature sky-blue accent (#63b0f7) deployed on CTAs, links, and active states. The UI evokes precision and trustworthiness—the visual language of a system that processes millions of transactions with mathematical rigor.

The brand voice is authoritative yet accessible: direct, data-driven, and free of marketing hyperbole. Mebone speaks in the language of fraud analysts and compliance officers—terms like 'real-time detection,' 'machine learning engines,' 'Bayesian networks,' and 'transparency' appear throughout the interface. Example sentence in brand voice: 'The predictive engine retrains continuously without laboratory downtime, maintaining detection accuracy across evolving fraud patterns.'

Colors

The color system is deliberately restrained, prioritizing legibility and professional credibility over visual novelty. Primary (#63b0f7, a mid-tone sky blue) is reserved exclusively for interactive elements: hyperlinks, call-to-action buttons, active menu states, and focus indicators. This color appears in the live DOM as rgb(99, 176, 247) and is the only accent that breaks the monochromatic palette—its strategic scarcity makes it unmissable. Secondary (#ccaabb, a muted mauve) provides a supporting accent for badges, highlights, and non-critical UI ornaments; it never competes with primary for user attention. Tertiary (#339999, a teal) is used for status indicators and supplementary interactive states. The surface stack is anchored in pure white (#ffffff) for maximum contrast and readabili

Typography

The type system uses Arial, sans-serif throughout—a deliberate choice that signals institutional authority and ensures pixel-perfect rendering across legacy banking systems and modern browsers alike. The hierarchy is steep and functional: display (48px, 700 weight) anchors hero sections and major page titles; headline-lg (32px, 700 weight) introduces feature blocks; headline-md (24px, 600 weight) labels card sections; body-lg (16px, 400 weight) and body-md (13px, 400 weight) carry descriptive copy and data labels. Label-md (14px, 700 weight, 0.01em letter-spacing) is applied to button text and form labels to ensure crisp legibility at small sizes. Line-height is set conservatively (17px for body-md, 24px for body-lg) to maximize readability in dense fraud-analysis interfaces. When small la

Layout

The layout operates on a fixed 1024px container (matching the observed shell width) centered on the viewport, with a 12-column grid system for responsive component placement. Page rhythm is established through lg spacing (40px) for section separation and md spacing (24px) for internal component padding. The gutter (24px) is applied consistently between columns and around the container perimeter. Whitespace is generous but purposeful: the design avoids visual clutter by limiting content density to 60–70% of available width, leaving breathing room for the eye to parse fraud-detection workflows. The header occupies a fixed 350px height (observed in #header_es), establishing a clear visual anchor. Content columns float left with 3px padding (observed in #cuerpo_central .column), creating a tig

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The elevation system uses three tiers: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for resting cards and input fields, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements on hover and dropdown panels, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and expanded states. Borders are 1px solid and use outline (#cccccc) or outline-variant (#d0d0d0) to define container edges without visual weight. The dropdown panel (observed in .bb-custom-select-panel) exemplifies the elevation approach: border

Shapes

The shape philosophy is 'Institutional Precision'—minimal border-radius applied consistently to signal interactivity without introducing organic or playful qualities. Buttons and input fields use rounded: DEFAULT (4px), creating a subtle softness that distinguishes them from sharp-cornered containers while maintaining a professional appearance. Cards and panels use rounded: lg (8px), providing slightly more visual relief for larger surfaces. Dropdowns and modals use rounded: md (6px) as a middle ground. The full radius (9999px) is reserved for badges and pill-shaped status indicators, where th

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: {colors.primary} (#63b0f7), textColor: {colors.on-primary} (white), padding: 12px 24px, height: 44px, and rounded: DEFAULT (4px). On hover, the background shifts to #4a8fd9 (a darker blue) with boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15) and transition: all 200ms ease-in-out. Active state (button-primary-active) darkens further to #1565c0. button-secondary mirrors the structure but uses transparent background, a 1px solid border in outline color, and textColor: {colors.primary}. On hover, it gains backgroundColor: {colors.surface-container-low} (#f0f9fa) and borderColor: {colors.primary}. All button text uses typography: label-md (14px, 700 weight) for maximum legibility.

Containers &

Do's and Don'ts

**Do**

• Do use primary (#63b0f7) exclusively for CTAs, links, and active states—never for backgrounds or decorative elements.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements on hover to signal state change.
• Do maintain 24px gutter spacing between major sections and 12px padding within components for consistent rhythm.
• Do use label-md (14px, 700 weight) for all button and form label text to ensure crisp legibility in dense interfaces.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (12px) appearing over complex backgrounds.
• Do limit border-radius to 4px (buttons/inputs), 8px (cards), or 9999px (badges)—never exceed 12px.

**Don't**

• Don't use secondary (#ccaabb) or tertiary (#339999) as primary interactive colors—they are supporting accents only.
• Don't apply gradients, glassmorphism effects, or transparency overlays; the system relies on solid colors and orthogonal shadows.
• Don't exceed 700 font-weight or use italic; maintain the clinical, data-focused typographic voice.
• Don't apply rounded corners greater than 12px; the system prioritizes institutional precision over organic softness.
• Don't use color alone to convey state (e.g., red for error)—always pair with text, icons, or borders for accessibility.
• Don't deviate from the 1024px container max-width or 24px gutter; the grid is fixed for desktop-only institutional use.