monopo.com 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
Dark, immersive, and cinematic creative studio aesthetic. The site employs fluid, organic motion backgrounds resembling silk or liquid metal in deep earth tones (forest greens, bronze, dark amber) to convey "East-meets-West" cultural fusion. Minimalist UI chrome allows full-bleed imagery and large typography to dominate. The mood is premium, mysterious, and digitally-native with a tactile, analog warmth.

## Design System

### 1. Core Style
- **Dark-first immersive design**: Near-black deep backgrounds with fluid, animated texture overlays
- **Generous negative space**: Large section padding (80-120px) creating breathing room for cinematic content
- **East-West fusion**: Bilingual content (Chinese/English) with universal visual language
- **Full-bleed media**: Edge-to-edge imagery with minimal container constraints

### 2. Color Palette
- **Primary Background**: Deep charcoal/black (#0a0a0a range)
- **Fluid Accent**: Organic gradients of dark forest green, bronze, burnt amber, and teal (from animated background)
- **Text Primary**: Pure white (#ffffff) with high contrast
- **Text Secondary**: Muted gray-white (rgba(255,255,255,0.6)) for secondary navigation
- **Surface**: Semi-transparent dark overlays for cookie consent and UI elements

### 3. Font Stack
- **Primary**: Modern sans-serif grotesque (likely Helvetica Neue, Inter, or custom equivalent)
- **Weight**: Light to Regular (300-400) for body, Medium (500) for navigation
- **Typography Scale**: Dramatic contrast between small functional text (12-14px navigation) and large display text (60-80px hero/manifesto)
- **Bilingual**: Mixed Chinese characters and Latin script with harmonious sizing

### 4. Texture
- **Primary**: Smooth, flowing silk/liquid metal distortion (WebGL or video background)
- **Secondary**: Subtle noise or grain overlay (inferred from dark areas)
- **Motion**: Slow, undulating waves creating depth without distraction

### 5. Motion Design
- **Scroll behavior**: Smooth scroll with parallax effects on background layers
- **Micro-interactions**: Circular "SCROLL DOWN" indicator with rotating text animation
- **Reveal animations**: Fade-up or slide-in on scroll for text blocks and project cards
- **Hover states**: Subtle scale transforms on project cards, underline animations on links
- **Background**: Continuous fluid morphing animation (infinite loop)

## Component Guidelines

### Button
- **Style**: Text-based with subtle underline or minimal rectangular border
- **Padding**: Compact (8-12px vertical, 16-24px horizontal)
- **Radius**: Sharp (0px) or minimal (2px)
- **Color**: White text on transparent or dark semi-transparent background
- **States**: Opacity shift or underline reveal on hover

### Card (Project)
- **Layout**: Masonry or asymmetric grid with varying aspect ratios
- **Image**: Full bleed, object-fit cover, slight scale on hover (1.02-1.05)
- **Overlay**: Gradient fade from bottom (transparent to black) for text legibility
- **Typography**: Project title in white, services list in smaller muted text below
- **Spacing**: Minimal gap (8-16px) between grid items creating dense collage effect

### Navigation
- **Position**: Fixed top, full width
- **Layout**: Split layout - Language switcher (EN/VN/中文) left-aligned, Main nav (WORK/MANIFESTO/TEAM/CONTACT) right-aligned vertically stacked
- **Style**: Transparent background, white text, uppercase or small caps
- **Mobile**: Likely hamburger or hidden drawer (not visible in screenshots)

### Input
- Not prominently featured in provided snapshots (no forms visible)

### Typography
- **Headings**: Large, bold/light weight depending on section (Manifesto uses massive line-break heavy text)
- **Body**: Compact line-height (1.4-1.5) for readability in both Chinese and English
- **Labels**: Small, uppercase, letter-spaced (team roles, section labels)

## Distinctive Element Few-shot Examples

### 1. Hero Section with Fluid Background
**Purpose:** Immersive brand statement with animated atmospheric background and clear value proposition.
**Evidence:** Full-viewport section with "联合, 无缚" (United, Unbound) centered text over fluid silk-like animation; circular "SCROLL DOWN" rotating indicator at bottom-left corner; fixed minimal header with logo and navigation.
**Visual Rules:**
- Layout: 100vh full bleed, centered both horizontally and vertically
- Color: Dark fluid background with warm bronze/green undertones, pure white text
- Typography: Large Chinese characters (approx 48-64px), clean sans-serif
- Spacing: Generous padding, text sits in optical center
- Radius / border / shadow: None on container, text has subtle text-shadow for legibility against complex background
- Motion: Continuous fluid background animation (WebGL/canvas), slow rotation of scroll indicator text (360deg over 10s), parallax on scroll
**Recreation Prompt:**
> Create a full-viewport hero section with a dark, fluid silk-like animated background (WebGL shader or video) in deep forest green and bronze tones. Center large white Chinese text "联合, 无缚" with a comma pause. Place a fixed minimal header at top with logo left and split navigation right. Add a rotating circular "SCROLL DOWN" text indicator at the bottom-left corner that spins continuously. Ensure text has slight text-shadow for readability against the undulating background. Use smooth parallax scroll behavior.
**Structure Sketch:**
```html
<section class="hero">
  <canvas class="fluid-background"></canvas>
  <header class="fixed-header">
    <div class="logo">monopo saigon</div>
    <nav class="lang-switcher">EN | VN | 中文</nav>
    <nav class="main-nav">
      <a>WORK</a>
      <a>MANIFESTO</a>
      <a>SAIGON SOULS</a>
      <a>TEAM</a>
      <a>CONTACT</a>
    </nav>
  </header>
  <div class="hero-content">
    <h1>联合, 无缚</h1>
  </div>
  <div class="scroll-indicator">
    <svg class="rotating-text">
      <textPath>SCROLL DOWN • SCROLL DOWN • </textPath>
    </svg>
    <div class="center-icon">⦿</div>
  </div>
</section>
```

### 2. Project Cards Masonry Grid
**Purpose:** Showcase creative work in a dense, visually rich gallery format with immediate context on hover.
**Evidence:** Section #works containing project-card-list with projects like "Canada Goose — Nomad Collection", "FreeFire 'SKYLER'", "NIGHT GOGGLES by Mindchatter"; each card shows project title and service categories (创意策划, 艺术指导, etc.); 16 media elements suggesting image-heavy layout.
**Visual Rules:**
- Layout: CSS Grid or Masonry with asymmetric columns (2-3 columns), varying heights creating rhythmic visual flow
- Color: Images full color on default, slight dimming or overlay on hover; white text overlay
- Typography: Project title in medium weight white, services in smaller muted gray text below
- Spacing: Tight grid gap (8-12px) creating collage effect, generous section padding top/bottom (100px+)
- Radius / border / shadow: No border-radius (sharp edges), no shadows (flat against dark background)
- Motion: Scale transform on hover (1.03), text opacity fade-in, slight parallax on scroll
**Recreation Prompt:**
> Create a masonry grid section for creative projects with 2-3 columns of varying heights. Each card is a full-bleed image with a bottom gradient overlay (transparent to black). On hover, the image scales slightly (1.03) and reveals project title in white with service categories in smaller muted text below. Use tight 8px gaps between cards for a collage effect. Sharp corners (no border-radius). Dark background section. Include a small "Selected project" label above the grid.
**Structure Sketch:**
```html
<section id="works">
  <span class="section-label">Selected project</span>
  <div class="project-card-list">
    <article class="project-card">
      <img src="project-image.jpg" alt="">
      <div class="project-overlay">
        <h3>Canada Goose — Nomad Collection</h3>
        <p class="services">创意策划 艺术指导 视觉制作 社交媒体内容 编辑</p>
      </div>
    </article>
    <!-- Repeat for other projects -->
  </div>
</section>
```

### 3. Numbered Manifesto Strengths (01/02/03)
**Purpose:** Break down brand philosophy into digestible, typographic statements with clear hierarchy.
**Evidence:** Section #strengths containing three subsections with "融合 01", "协作 02", "挑战 03" numbering; each with descriptive paragraphs; 5 media elements suggesting possible subtle imagery or icons; sequential vertical layout.
**Visual Rules:**
- Layout: Stacked full-width blocks, each with left-aligned or centered content, generous vertical padding (120px+ per block)
- Color: Dark background continuing from hero, white text, numbers in same white or slightly muted
- Typography: Large number "01", "02", "03" paired with Chinese keyword (融合, 协作, 挑战) in large bold type, followed by body paragraph in regular weight
- Spacing: Massive whitespace between sections, clear separation lines or pure whitespace dividers
- Radius / border / shadow: None, clean typographic hierarchy only
- Motion: Fade-up or slide-in from bottom on scroll trigger, staggered animation for number then text
**Recreation Prompt:**
> Create a manifesto section with three stacked full-width blocks, each featuring a large number "01", "02", "03" paired with a Chinese keyword (融合, 协作, 挑战) in large typography. Below each header, place a descriptive paragraph in smaller text. Use generous vertical padding (120px+) between sections. Animate on scroll: number fades in first, then text follows. Dark background, pure white typography, no decorative elements except subtle dividers.
**Structure Sketch:**
```html
<section id="strengths">
  <section class="strength-block">
    <span class="number">01</span>
    <h2>融合</h2>
    <p>在亚洲出生，由世界抚育而成长— monopo身处东方与西方之间的轴点...</p>
  </section>
  <section class="strength-block">
    <span class="number">02</span>
    <h2>协作</h2>
    <p>协作胜过竞争—创造力，对于 monopo Saigon 来说...</p>
  </section>
  <section class="strength-block">
    <span class="number">03</span>
    <h2>挑战</h2>
    <p>我们用创造来唤醒—我们从其他人止步之处启程...</p>
  </section>
</section>
```

### 4. Rotated Tiles Grid (Visual Break)
**Purpose:** Dynamic visual interlude between content-heavy sections using a diagonal/rotated image collage.
**Evidence:** Section #tilesGrid with class "tiles tiles--rotated"; empty text content but 24 media elements; positioned between manifesto and team sections; full-width (1665px) suggesting edge-to-edge layout.
**Visual Rules:**
- Layout: Full-width section with grid of images rotated at angle (likely -5deg to -15deg) breaking the orthogonal grid
- Color: Mix of project imagery creating colorful strip against dark background
- Spacing: Overlapping or tight tiles creating dense visual texture, extending beyond viewport edges
- Radius: Sharp corners on individual tiles
- Motion: Parallax scroll at different speeds than page scroll, or infinite horizontal drift; tiles may scale or shift on scroll
**Recreation Prompt:**
> Create a full-width visual break section with a grid of images rotated -10 degrees (tilted). Use 24 small square images arranged in a dense collage that extends beyond viewport edges. Apply parallax scroll effect where the grid moves horizontally as user scrolls vertically. Sharp corners on images, tight spacing (4-8px gaps). Dark background visible between tiles. Section height approximately 300-400px acting as a transition between content blocks.
**Structure Sketch:**
```html
<section id="tilesGrid" class="tiles tiles--rotated">
  <div class="tiles-container">
    <div class="tile"><img src="image1.jpg"></div>
    <div class="tile"><img src="image2.jpg"></div>
    <!-- Repeat for 24 tiles -->
  </div>
</section>
```

### 5. Team Member Profile Cards
**Purpose:** Humanize the agency with detailed team member showcases including credentials and social links.
**Evidence:** Section #team with multiple member entries (VickiDang, RobinMahieux, YoshiyukiSasaki, etc.); each with role titles (Branch Director, CREATIVE Director), descriptive biographies, and social links (Ig, Web, Tw); 12 media elements suggesting portrait photos; structured with span, p, ul tags.
**Visual Rules:**
- Layout: Vertical stack of full-width profile blocks, alternating layout or consistent left-aligned; large portrait images alongside or above text
- Color: Dark background continues, white text, social links in white with hover states
- Typography: Name in large bold text, role in smaller uppercase or lighter weight, bio in readable body size, social links with platform labels (Ig, Web, Tw)
- Spacing: Massive padding between team members (200px+), clear separation
- Radius / border / shadow: No borders, clean separation via whitespace
- Motion: Image reveal on scroll (clip-path or fade), text stagger animation
**Recreation Prompt:**
> Create a team section with large profile cards stacked vertically. Each card features a large portrait image (left or top), the member's name in large typography, their role in uppercase (e.g., "Branch Director, CREATIVE Director"), a biographical paragraph, and social links labeled "Ig", "Web", "Tw". Use generous spacing (150px+) between members. Dark background, white text. Animate images with a reveal effect (clip-path from bottom) on scroll. Include numbered indicators like "( 1 )", "( 2 )" next to names.
**Structure Sketch:**
```html
<section id="team">
  <h2>Team</h2>
  <p class="subtitle">从东京到西贡，我们来自世界各地</p>
  
  <article class="team-member">
    <div class="member-image">
      <img src="vicki.jpg" alt="Vicki Dang">
      <span class="member-index">( 1 )</span>
    </div>
    <div class="member-info">
      <h3>VickiDang</h3>
      <p class="role">Branch Director, CREATIVE Director</p>
      <p class="bio">Vicki Dang 又名 Wii-ki ，是一位自学成才的 3D 动画设计师/导演...</p>
      <ul class="socials">
        <li><a href="#">Ig</a></li>
        <li><a href="#">Web</a></li>
      </ul>
    </div>
  </article>
  <!-- Repeat for other members -->
</section>
```

### 6. Text-CTA Section (Saigon Soul)
**Purpose:** Editorial-style call-to-action with philosophical positioning before the contact section.
**Evidence:** Section with class "text-cta" containing "Saigon Soul" heading, descriptive quote text ("Saigon Souls"捕捉一种心智状态...), and "Discover Saigon Soul" button; positioned before team section; single button within mostly text content.
**Visual Rules:**
- Layout: Centered or left-aligned text block with generous margins, button below text
- Color: Dark background, white text, button likely with border or solid fill
- Typography: Heading in large size, quote in medium size with line breaks for rhythm, button text in small caps or regular case
- Spacing: Large padding (100px+) top and bottom, comfortable line-height (1.6) for readability
- Radius / border / shadow: Button may have 0px or 4px radius, subtle border
- Motion: Text fade-up on scroll, button hover state with background fill or underline
**Recreation Prompt:**
> Create a text-focused CTA section with a dark background. Center-align a large heading "Saigon Soul" followed by a philosophical quote in medium-sized text with strategic line breaks. Below the text, place a minimal button "Discover Saigon Soul" with a subtle border or underline. Use generous vertical padding (120px). Animate text with a gentle fade-up on scroll. Keep typography clean and editorial, with the quote text slightly muted (85% white) compared to the heading.
**Structure Sketch:**
```html
<section class="text-cta">
  <h2>Saigon Soul</h2>
  <div class="quote">
    <p>“Saigon Souls”捕捉一种心智状态。</p>
    <p>如果你觉得自己像西贡人，无论你刚到这里，刚回来，或是已经在这里生活了一辈子，那么你就是西贡人。</p>
    <p>最重要的是，生活在西贡，让你成为“Saigon Souls”的一部分。</p>
  </div>
  <a href="/saigon-soul" class="cta-button">Discover Saigon Soul</a>
</section>
```

## 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:** dark

#### Color Roles
- **color.text.primary:** #ffffff (112)
- **color.text.secondary:** #ffffff (65)
- **color.surface.base:** #373737 (1)
- **color.accent:** #ffffff (77)
- **color.border.default:** #ffffff (117)
- **color.focus.ring:** #ffffff (112)

#### Typography Roles
- **font.family.primary:** Roobert (137)
- **font.family.secondary:** system-ui (6)
- **font.size.display:** 260.24px (1)
- **font.size.body:** 12.15px (42)
- **font.size.label:** 10.49px (4)
- **ratio:** display is 21.42x body

#### Spacing Rhythm
- **base unit:** 6px
- **space.1:** 1px (18)
- **space.2:** 6px (18)
- **space.3:** 95.4px (16)
- **space.4:** 15.65px (8)
- **space.5:** 25.97px (8)

#### Radius Roles
- **radius.pill:** 86.75px (6)

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** expressive
- **range:** 200-1250ms
- **common durations:** 1250ms (43), 1000ms (3), 500ms (2)
- **easing style:** cubic-bezier(0.19, 1, 0.22, 1), linear, cubic-bezier(0.19, 1, 0.22, 1) (24), cubic-bezier(0.19, 1, 0.22, 1), linear (9), cubic-bezier(0.19, 1, 0.22, 1) (7)

### Distinctive Implementation Signals

- Frequent pill radius (86.75px) creates a soft/capsule interaction language.
- Flat surfaces are preferred over decorative depth.
- Motion is expressive, centered around 200-1250ms.
- Type hierarchy is ratio-driven: display is 21.42x body.

### Extraction Diagnostics

- Sampled 155 visible elements from 775 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.