Optim AI

Overview

Optim AI embodies a **Tech-Forward Minimalism** aesthetic—a design language that pairs deep, near-black surfaces (#0d1017) with crisp white typography and strategic accent colors to convey precision, power, and forward momentum. The brand serves enterprise and mid-market businesses seeking AI-driven automation; the interface evokes a sense of technological sophistication without sacrificing clarity. Every visual element—from the bold white CTA buttons (rgb(255, 255, 255)) to the cyan accent highlights (#5ddcf6)—reinforces the promise of intelligent, streamlined workflows. The emotional response is one of confidence: users feel they're operating a cutting-edge platform, not a generic SaaS tool.

Optim AI's voice is direct, action-oriented, and grounded in business outcomes. Vocabulary leans technical but remains accessible: "Automate smarter, grow faster" (not "leverage synergies"). The tone avoids hype; instead, it emphasizes tangible efficiency gains and measurable results. Example sentence in brand voice: "Eliminate repetitive tasks in minutes, not months—unlock next-level efficiency with Optim-AI's automation engine."

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack anchors the UI in deep navy-blacks: surface (#0d1017), surface-dim (#0d0d12), and surface-container (#252a32) create visual hierarchy through subtle luminance shifts, enabling layered depth without harsh contrast. Primary (#ffffff) is pure white—the dominant CTA and text color—ensuring maximum legibility and visual pop against the dark canvas. Secondary (#227eff, a vivid electric blue) and tertiary (#5ddcf6, a bright cyan) function as accent colors for interactive states, highlights, and status indicators; these are used sparingly to draw attention to key actions. The outline palette (#7c8ea5 for standard, #94aecf for variant) provides subtle borders and dividers that don't compete with primary conte

Typography

The type system employs a **dual-family hierarchy**: Sora (a geometric sans-serif) anchors display and headline levels, conveying modernity and confidence at large scales (64px display, 48px headline-lg); Manrope (a humanist sans-serif) handles mid-level content (32px headline-md, 24px title-lg) with warmth and approachability; Inter Tight (a condensed sans-serif) powers body copy (18px body-lg, 16px body-md) for dense, scannable content; IBM Plex Mono (monospace) is reserved for labels, tags, and technical metadata (14px label-md, 12px label-sm) to signal precision and code-like clarity. Font weights range from 400 (regular) to 600 (semibold), with letter-spacing tightened on display levels (-0.02em) to create visual impact and loosened on labels (+0.05em to +0.08em) for legibility at sma

Layout

The layout employs a **12-column fluid grid** with a max-width of 1560px, enabling responsive scaling from mobile (single-column stacks) through tablet (6-column spans) to desktop (4-column card grids). The gutter is consistently 24px, creating breathing room between sections. Container padding uses the lg spacing token (40px) for major sections, md (24px) for cards and modules, and sm (12px) for internal component spacing. White-space is generous—sections are separated by lg spacing (40px) vertically, and cards maintain md padding (24px) internally. This rhythm creates a sense of calm, organized complexity. The container max-width of 1560px ensures content never feels stretched on ultra-wide displays, while the 12-column grid allows flexible module sizing (full-width, half-width, thirds,

Elevation & Depth

Depth is conveyed through **layered shadows and subtle surface shifts**, not through bright highlights or glassmorphism. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.15)) for subtle dividers and small interactive elements; md (0 4px 12px rgba(0, 0, 0, 0.12)) for standard cards and modals; lg (0 8px 30px rgba(0, 0, 0, 0.15)) for prominent CTAs, hero sections, and floating UI elements. Surfaces themselves create hierarchy: surface-container-lowest (#11141d) sits deepest, surface-container (#252a32) is mid-level, and surface-container-highest (#505a6b) appears closest. Hov

Shapes

The shape language is **Geometric Precision with Soft Edges**—a balance between technical sharpness and approachability. Buttons and primary CTAs use full rounded corners (border-radius: 9999px, or {rounded.full}) to signal friendliness and encourage clicks; this is the most prominent shape, appearing on all primary actions. Cards and containers use lg radius (1rem / 16px) for a modern, slightly rounded aesthetic that feels contemporary without being overly organic. Inputs and secondary elements use DEFAULT radius (0.5rem / 8px) for a more neutral, technical appearance. Modals and elevated sur

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses white background (rgb(255, 255, 255)), black text (rgb(0, 0, 0)), full rounded corners (9999px), 12px vertical / 32px horizontal padding, and a 48px height. Apply box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) for depth. On hover, transition to button-primary-hover: background shifts to primary-container (#f1f4f6), text to on-primary-container (#0d1017), and shadow increases to 0 12px 40px rgba(0, 0, 0, 0.2) over 200ms. **button-secondary** uses transparent background with a 1px outline-variant border (#94aecf), white text, and the same 9999px radius; on hover, fill with surface-container-high (#3d4753). **button-ghost** is minimal: rgba(255, 255, 255, 0.05) background, white text, 9999px radius, 40px heig

Do's and Don'ts

**Do**

• Do use white (rgb(255, 255, 255)) for all primary CTAs and headlines—it's the brand's most recognizable signal and ensures maximum contrast on dark backgrounds.
• Do apply full rounded corners (9999px) exclusively to buttons and primary interactive elements; use lg (16px) for cards and DEFAULT (8px) for inputs to maintain visual hierarchy.
• Do maintain the 24px gutter and lg spacing (40px) between sections—this breathing room is essential to the brand's calm, organized aesthetic.
• Do use secondary (#227eff) and tertiary (#5ddcf6) accents sparingly for focus states, badges, and status indicators; overuse dilutes their impact.
• Do apply the lg shadow (0 8px 30px rgba(0, 0, 0, 0.15)) to elevated elements like modals and prominent CTAs to create visual separation without blur effects.

**Don't**

• Don't use transparency or glassmorphism effects—the dark palette and shadow system alone establish depth; blur effects contradict the tech-forward clarity.
• Don't mix rounded corner radii arbitrarily; stick to the graduated scale (8px → 16px → 24px → 9999px) to maintain visual consistency.
• Don't apply color to body text; keep on-surface (#ffffff) for all body copy and on-surface-variant (#ced7de) for secondary text to preserve readability.
• Don't use gradients or multi-color backgrounds; the brand relies on flat, solid colors and subtle surface shifts for hierarchy.
• Don't reduce padding or spacing below the sm token (12px) in cards or containers—the generous white-space is core to the brand's premium feel.