moxt.ai Sample

# Design Thinking

Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
Friendly, approachable AI-native workspace positioning. Balances cutting-edge technology ("agent-native") with human warmth through organic shapes, a playful mascot (momo), and soft pastel accents. Editorial elegance meets modern SaaS clarity.

## Design System

### 1. Core Style
- **Minimalist Organic**: Clean, whitespace-dominant layouts softened by blob-like organic shapes (the momo character) and generous rounded corners
- **Editorial Tech**: Sophisticated serif headings paired with utilitarian sans-serif body text create a "serious yet approachable" authority
- **Gradient Accents**: Strategic use of mint-to-sage gradients for brand emphasis, particularly on "AI team" text and mascot elements
- **Soft Pastel UI**: Interface mockups utilize desaturated lavender, mint, and peach backgrounds to differentiate user contexts without visual harshness

### 2. Color Palette
- **Primary Background**: Warm off-white/cream (antique white tones)
- **Secondary Background**: Light cool gray for section alternation
- **Brand Accent**: Vibrant mint green/sage (momo character, gradient text, sparkles)
- **Primary Action**: Solid near-black for high-contrast CTAs
- **Semantic Pastels**: Lavender, pale green, and soft peach for user-specific UI chrome (representing different team members/agents)
- **Text Hierarchy**: Near-black for headings, medium gray for body, with white text on dark cards

### 3. Font Stack
- **Display/Headings**: Elegant transitional serif (Lora-style) with italic styling for emphasis ("AI team," "momo")
- **Body/Interface**: Clean geometric sans-serif (Inter-style) for readability at small sizes
- **Momo Character**: Distinctive friendly blob with simple facial features (dot eyes, curved smile) in solid mint green

### 4. Texture
- **Surface**: Predominantly flat with subtle depth through soft shadows on elevated cards
- **Decorative**: Scattered star/sparkle motifs (plus-sign shapes) around the hero section suggesting magic/AI capability
- **Organic Forms**: Amorphous, liquid-like shapes contrasting with rigid grid layouts
- **Glassmorphism**: Subtle frosted glass effects in navigation and floating UI elements

### 5. Motion Design
- **Scroll Choreography**: Sections utilize scroll-margin offsets suggesting scroll-triggered reveal animations
- **Horizontal Coverflow**: "Day in the life" section implements horizontal scroll interaction with snap points (336px cards)
- **Convergence Zone**: Extended height section (270vh) implies a complex scroll-driven animation (possibly logo convergence or tunnel effect)
- **Micro-interactions**: Carousel pagination dots, hover states on role selector buttons, and smooth transitions between momo character states

## Component Guidelines

### Button
- **Primary**: Pill-shaped (full radius), solid black fill, white text, generous horizontal padding
- **Secondary**: Pill-shaped outline style (green border), transparent background, play icon integration for video triggers
- **Ghost**: Text-only with arrow indicators ("→") for tertiary navigation

### Card
- **Feature Cards**: Large rounded corners (16px+ radius), white background, subtle border, pastel gradient header strip
- **Coverflow Cards**: Fixed width (336px), flex column layout, alternating light/dark themes (white vs dark charcoal), rounded containers
- **Compare Cards**: Bordered containers with clear typographic hierarchy (Love/Miss/Adds pattern)

### Navigation
- **Fixed Header**: Persistent top navigation with blur backdrop (z-200 stacking)
- **Minimal Structure**: Logo left, centered text links, primary CTA right
- **Responsive**: Reduced height on mobile (56px vs 68px desktop)

### Typography
- **Hero**: Massive serif display (64px+) with mixed weights and inline gradient text treatments
- **Section Headers**: Centered serif headings with line-breaks for rhythm ("Different jobs. Same workspace.")
- **Body**: Comfortable line-height sans-serif, constrained width for readability (max-width paragraphs)
- **Role Titles**: Bold sans-serif labels with truncated descriptions in selector buttons

### Input
- **Language Selector**: Button-triggered dropdown (footer placement), globe icon indicator
- **Role Selection**: Full-width button bars with left-aligned text, hover/reveal interactions implied by truncated descriptions

### Mascot Integration
- **Hero Placement**: Large centered "momo" blob below fold, serving as brand anchor
- **UI Context**: Small colored avatars (purple, yellow variants) representing individual agent instances within interface mockups
- **Scale**: Momo appears both as giant friendly presence and as small functional avatars in product screenshots

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** mixed

#### Color Roles
- **color.text.primary:** #212121 (105)
- **color.text.secondary:** #212121 (31)
- **color.surface.base:** #ffffff (18)
- **color.accent:** #8a8a85 (14)
- **color.border.default:** #212121 (102)
- **color.focus.ring:** #212121 (105)

#### Typography Roles
- **font.family.primary:** Inter (124)
- **font.family.secondary:** Lora (37)
- **font.size.display:** 62.31px (13)
- **font.size.body:** 14px (14)
- **font.size.label:** 13px (5)
- **ratio:** display is 4.45x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 128px (18)
- **space.2:** 32px (18)
- **space.3:** 64px (18)
- **space.4:** 4px (17)
- **space.5:** 12px (11)

#### Radius Roles
- **radius.medium:** 7px (10)
- **radius.pill:** 20px (48)

#### Shadow Intent
- **level:** layered
- **usage:** 19
- **note:** 5 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** expressive
- **range:** 200-2000ms
- **common durations:** 200ms (15), 300ms (8), 2000ms (7)
- **easing style:** cubic-bezier(0.4, 0, 0.2, 1) (29), ease-in-out (7), cubic-bezier(0.16, 1, 0.3, 1) (2)

### Distinctive Implementation Signals

- Frequent pill radius (20px) creates a soft/capsule interaction language.
- Elevation appears as a recurring material cue, not a one-off decoration.
- Motion is expressive, centered around 200-2000ms.
- Type hierarchy is ratio-driven: display is 4.45x body.

### Extraction Diagnostics

- Sampled 183 visible elements from 915 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.