Nati

Overview

Nati is a digital people platform that empowers businesses to deploy AI agents with photorealistic faces and natural voices for autonomous customer engagement. The brand embodies 'Conversational Minimalism'—a design philosophy that strips away technical complexity to reveal the human-like intelligence beneath. The UI evokes trust and approachability through clean typography, generous whitespace, and a carefully calibrated color palette anchored by a deep navy primary (#0e2359) that conveys authority, paired with vibrant secondary accents (magenta #ff4081, sky blue #2196f3) that signal innovation and energy. Users experience Nati as an intelligent ally, not a tool—the interface recedes to let the digital person take center stage.

The brand voice is direct, confident, and human-centered. Nati speaks in active, present-tense language: 'Create intelligent agents without coding,' 'Transform your business in minutes,' 'AI that understands, decides, and acts.' The vocabulary avoids jargon; instead of 'natural language processing,' Nati says 'natural face and voice.' Tone is optimistic but grounded—never breathless or hyperbolic. Example sentence in Nati's voice: 'In just minutes, you will have intelligent agents ready to handle repetitive tasks autonomously.'

Colors

The Nati color system operates on a principle of 'Clarity Through Contrast.' The primary color, Deep Navy (#0e2359), anchors the brand as the signature accent for CTAs, navigation focus states, and key interactive elements. It conveys institutional trust and AI sophistication without coldness. Secondary colors—Magenta (#ff4081) and Sky Blue (#2196f3)—serve as supporting accents for status indicators, highlights, and secondary CTAs, creating visual rhythm and preventing monotony. The surface stack uses a near-white palette (surface #ffffff, surface-dim #f5f5f5, surface-container #e9ecef) to maximize readability and maintain a premium, uncluttered aesthetic. On-surface text is set to near-black (#212121) for 4.5:1+ contrast ratios. Outline and outline-variant tokens (#6c757d, #adb5bd) define

Typography

The Nati type system pairs Plus Jakarta Sans (headlines, display) with Montserrat (body, labels) to balance geometric precision with humanistic warmth. Display (61px, 800 weight, -0.02em tracking) commands attention on hero sections and is reserved for primary headlines. Headline-lg (40px, 700 weight) anchors section titles and major content blocks. Headline-md (28px, 700 weight) breaks up long-form content. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) carries hero copy and introductory paragraphs, with generous line-height for breathing room. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, card descriptions, and standard body text. Label-md (14px, 600 weight) marks buttons, badges, and interactive lab

Layout

Nati uses a 12-column fluid grid with a max-width of 1280px, centering content on larger viewports and collapsing to full-width on mobile. The page rhythm is governed by a semantic spacing scale: unit (8px) as the baseline, sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full viewport height with 48px padding on sides and 600px minimum height, creating an immersive entry point. Content sections use md (24px) gutter on both sides and lg (40px) vertical separation between sections. Cards and containers use md (24px) internal padding. The layout philosophy prioritizes whitespace as a design element—negative space around headlines and CTAs in

Elevation & Depth

Depth in Nati is achieved through a restrained shadow system derived from Material Design 3, creating subtle visual separation without drama. The elevation scale uses three primary levels: sm (0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)) for resting cards and form inputs; md (0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)) for hovered cards and modals; and lg (0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)) for floating action b

Shapes

Nati employs 'Soft Modernism' in its shape language—a balance between geometric precision and human approachability. Buttons use full-radius (9999px) border-radius to signal affordance and friendliness, creating pill-shaped CTAs that feel inviting rather than corporate. Cards and containers use lg (1rem / 16px) border-radius for a contemporary, slightly rounded aesthetic that avoids both sharp corners and excessive softness. Form inputs use DEFAULT (0.5rem / 8px) border-radius for subtle definition without distraction. Badges and secondary elements use md (0.75rem / 12px) border-radius as a mi

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#0e2359) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), full-radius (9999px), and padding 11px 29px to achieve a 48px height. The button-primary-hover state shifts to {colors.primary-fixed-dim} (#303f9f) and elevates the shadow to 0 4px 8px rgba(0, 0, 0, 0.15), with a 200ms transition timing. Button-secondary uses a transparent background with a 1px outline in {colors.outline-variant}, 8px border-radius, and on-hover shifts to {colors.surface-container-high} with a subtle shadow. All buttons include a ripple effect at rgba(0, 0, 0, 0.1) opacity on tap/click, lasting 300ms. Buttons must never be smaller than 48px in height or 44p

Do's and Don'ts

**Do**

• Do use the primary color (#0e2359) exclusively for CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain minimum 48px touch targets for all interactive elements and ensure 4.5:1 contrast ratios between text and background at all times.
• Do apply full-radius (9999px) to all primary buttons and use md (24px) spacing between button groups to create visual breathing room.
• Do use Plus Jakarta Sans for all headlines (display, headline-lg, headline-md) and reserve Montserrat for body text and labels to maintain clear typographic hierarchy.
• Do leverage the surface-container stack (surface-container-low, -high, -highest) to create subtle visual layers without introducing new colors.
• Do apply {elevation.sm} shadow (0 2px 1px -1px rgba(0, 0, 0, 0.2)...) to resting cards and escalate to {elevation.md} on hover with a 250ms transition.

**Don't**

• Don't use secondary colors (#ff4081, #2196f3) as primary CTAs—reserve them for badges, status indicators, and supporting accents only.
• Don't apply border-radius greater than lg (16px) to cards or containers; excessive rounding reads as playful rather than professional.
• Don't mix Montserrat and Plus Jakarta Sans within a single headline; maintain consistent font pairing across the type hierarchy.
• Don't create buttons smaller than 48px in height or 44px in width, even for secondary actions—accessibility and usability require adequate touch targets.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use {colors.on-surface} (#212121) and {colors.surface} (#ffffff) from the token system instead.
• Don't apply shadows heavier than {elevation.lg} to any component except modals and floating panels; excessive shadow creates visual clutter and reduces perceived clarity.