MILIZE

Overview

MILIZE is a fintech and AI engineering platform that reimagines financial services through technological precision and forward momentum. The brand serves enterprises and innovators seeking to harness big data, generative AI, and financial engineering expertise to build next-generation financial platforms. The aesthetic is 'Technological Optimism'—a vibrant, gradient-driven visual language where electric blue (#0084ff) dominates as the signature accent, paired with clean white surfaces and supporting cool grays. The UI evokes clarity, velocity, and trustworthiness: users feel they are navigating a sophisticated, data-driven system designed by engineers who understand both finance and human experience.

The brand voice is direct, ambitious, and precise. MILIZE speaks in declarative statements that emphasize capability and forward-thinking vision. Vocabulary favors terms like 'engineering,' 'platform,' 'innovation,' and 'future'—never breathless or hyperbolic. Example sentence: 'We build financial platforms that scale with your ambition, powered by AI and decades of financial expertise.'

Colors

The color system is anchored by a vibrant electric blue primary (#0084ff), which appears on all primary CTAs, interactive states, and brand-defining moments. This blue is the most-clicked color on the page and signals action, trust, and technological sophistication. The secondary palette includes a deeper corporate blue (#4562ae) used for supporting UI elements and secondary navigation, and a lighter sky blue (#79beff) for hover states and container backgrounds. The surface stack is pure white (#ffffff) with a carefully calibrated gray hierarchy: surface-container-highest (#e1e1e1) for subtle dividers, surface-container-high (#e8e8e8) for interactive hover states, and on-surface-variant (#818895) for secondary text and disabled states. The error color (#cf2e2e) is reserved for validation a

Typography

The type system is built entirely on Zen Kaku Gothic New, a Japanese sans-serif that balances geometric precision with human warmth. Display (60px, 700 weight, -0.03em letter-spacing) is reserved for hero headlines and major announcements, commanding attention through scale and negative letter-spacing that tightens the visual rhythm. Headline-lg (40px, 700 weight) anchors section introductions, while headline-md (28px, 600 weight) breaks up content hierarchically. Body text uses 16px at 500 weight with 24px line-height, providing excellent readability on both desktop and mobile. Labels are set at 14px with 600 weight and 0.01em letter-spacing to ensure UI controls feel crisp and actionable. All interactive elements (buttons, links) use label-md (14px, 600 weight) to maintain visual consist

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed breakpoint strategy that adapts gracefully from mobile (single column) to desktop (full 12 columns). The gutter is consistently 24px, creating breathing room between sections. White-space philosophy prioritizes clarity: sections are separated by lg spacing (40px) vertically, while internal card padding uses md spacing (24px). Hero sections occupy the full viewport height (minimum 600px) with 80px top/bottom padding and 40px left/right padding, creating an immersive entry point. Container backgrounds are pure white (#ffffff) with subtle surface-container dividers (1px solid #e1e1e1) separating major content blocks. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied co

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base): no shadow, flat white surface (#ffffff). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and secondary containers. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal overlays. Interactive elements (buttons, links) do not use shadows; instead, they rely on color shifts (primary #0084ff → hover #0066cc → active #004a99) and 200ms transitions to signal sta

Shapes

The shape philosophy is 'Technological Precision with Human Warmth'—sharp enough to feel engineered, rounded enough to feel approachable. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped containers that feel modern and clickable. Cards and containers use lg border-radius (1rem / 16px), balancing geometric clarity with subtle softness. Input fields use DEFAULT border-radius (0.5rem / 8px), providing just enough rounding to feel contemporary without sacrificing form-field legibility. Dividers and subtle UI elements use sm border-radius (0.25rem / 4px) or no rounding

Components

Action Elements Primary buttons use #0084ff background with white text, 48px height, 12px vertical / 30px horizontal padding, and 9999px border-radius. On hover, the background shifts to #0066cc with a 200ms ease-in-out transition. On active/pressed, the background becomes #004a99. All buttons use label-md typography (14px, 600 weight) and include a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to lift the element. Secondary buttons are transparent with a 2px solid #0084ff border, same padding and height, and shift to surface-container-high (#e8e8e8) background on hover while maintaining the blue text color.

Containers & Surfaces Cards use white background (#ffffff) with lg border-radius (16px), md padding (24px), and md elevation (0 3px 8px rgba(0, 0, 0, 0.15)). On ho

Do's and Don'ts

**Do**

• Do use the primary blue (#0084ff) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do apply 200ms ease-in-out transitions on all interactive elements (buttons, cards, inputs) to create a responsive, polished feel.
• Do maintain the full 12-column grid with 24px gutters and 1280px max-width to ensure consistent rhythm across all pages.
• Do use Zen Kaku Gothic New exclusively for all typography—its geometric precision reinforces the fintech, engineering-focused brand identity.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers for subtle depth without visual heaviness.

**Don't**

• Don't use shadows heavier than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12))—the brand favors clarity and precision over atmospheric depth.
• Don't apply border-radius smaller than sm (4px) to interactive elements; it reduces clickability and feels overly technical.
• Don't mix typefaces; Zen Kaku Gothic New is the sole typographic voice across all UI, headlines, and body text.
• Don't use the primary blue (#0084ff) for secondary or tertiary UI elements—reserve it exclusively for primary actions and focus states to maintain visual hierarchy.
• Don't exceed 40px horizontal padding or 80px vertical padding on hero sections; the brand values compact, efficient use of space.