notion.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
## Design System
### 1. Core Style
Minimalist SaaS aesthetic with high contrast and generous whitespace. Dark immersive hero sections transition to clean, light content areas. Bento-box grid layouts with asymmetrical card sizing. Emphasis on AI workforce metaphor through continuous motion and ambient glow effects.

### 2. Color Palette
Deep navy and near-black for hero backgrounds; pure white and soft gray (#f8f9fa range) for content sections. Feature cards use distinct pastel themes: warm yellow, coral red, sky blue, teal, and sand brown. Primary actions use vibrant blue; secondary actions use translucent overlays or purple tints.

### 3. Font Stack
Clean geometric sans-serif (Inter-family) with tight letter-spacing for headlines. Chinese localization uses system fonts (PingFang SC, Microsoft YaHei). Heavy font weights (700-800) for H1s and card titles; regular (400) for body text. Arrow symbols (→) used as inline interactive indicators.

### 4. Texture
Smooth, flat surfaces with subtle radial gradients in hero areas. Soft diffuse glows behind floating elements. No noise or grain; focus on glass-like clarity and depth through shadow rather than texture.

### 5. Motion Design
Continuous horizontal marquee animations (conveyor belts) on infinite loops. Smooth accordion expand/collapse for feature selection. Hover states include lift transforms (translateY) and shadow depth increases. Cross-fade transitions between tab panels. Staggered fade-in for hero text elements.

## Component Guidelines
### Button
Pill-shaped with generous horizontal padding (48px+). Primary: solid blue fill with white text. Secondary: semi-transparent dark fill with white text (hero) or outlined style (light backgrounds). Hover: subtle Y-axis translation (-2px) and increased shadow.

### Card
Bento-style with large border radius (24px+). White or pastel solid backgrounds. Soft drop shadows (0 4px 20px rgba(0,0,0,0.08)). Internal padding 32px. Overflow hidden for embedded UI mockups. Hover: elevated shadow and slight scale on internal images.

### Navigation
Sticky header with glassmorphism blur on scroll. Centered nav links with dropdown chevrons. Logo left-aligned; CTAs right-aligned. Mobile: hamburger menu with slide-out drawer. Subtle bottom border on scroll state.

### Input
Custom-styled checkboxes with rounded squares; checked state shows blue fill with white checkmark. Number inputs with integrated stepper arrows. Clean borders (1px solid gray-200) with blue focus rings. No visible labels inside inputs; labels sit above.

### Typography
Display headlines at 56-72px with tight line-height (1.1). Section headers at 32-40px. Body text gray-600 for readability on white. Links use arrow suffix (→) to indicate external or forward action. Consistent vertical rhythm with 1.5 line-height for paragraphs.

## Distinctive Element Few-shot Examples
### 1. Dark Immersive Hero with Animated Conveyor Belt
**Purpose:**
High-impact landing zone establishing the "AI working overnight" metaphor through visual storytelling of continuous, autonomous operation.

**Evidence:**
- DOM class: `HomepageHeroAgents_hero__PgXPj` containing `HomepageHeroAgents_conveyor__d6gQg`
- Screenshot 1 shows deep navy background with headline "让 AI 替你上夜班" and floating icon conveyor on right side
- Central product UI mockup with ambient purple glow effects

**Visual Rules:**
- Layout: Full viewport height (90-100vh), centered text content, absolute-positioned conveyor belt on right side overlapping content area
- Color: Deep navy gradient background transitioning to black, white text, blue primary CTA button, translucent purple secondary button
- Typography: Massive display font (60-80px) with tight tracking, centered alignment, subtitle at 20-24px with reduced opacity
- Spacing: 120px+ vertical padding, content constrained to max-width container (1280px), generous gap between headline and CTAs (32px)
- Radius / border / shadow: Buttons fully rounded (pill shape), product mockup has 12px radius with heavy drop shadow, conveyor elements have no border
- Motion: Infinite horizontal scroll on conveyor belt (right-to-left) at slow speed, floating icons with independent bobbing animations, hero text fade-in stagger on load

**Recreation Prompt:**
> Create a dark-themed hero section with deep navy gradient background. Center a large white headline "让 AI 替你上夜班" with supporting subtitle and two pill-shaped buttons (primary blue, secondary translucent purple). Position an animated conveyor belt on the right side containing floating app icons, gears, and agent avatars that scroll horizontally in an infinite loop. Include a central product screenshot mockup with rounded corners, soft shadow, and ambient purple glow behind it. Ensure the conveyor belt elements partially overlap the mockup edges for depth.

**Structure Sketch:**
```html
<section class="hero-dark-ai">
  <div class="hero-content center">
    <h1>让 AI 替你上夜班。</h1>
    <p class="subtitle">Notion 代理全天候工作...</p>
    <div class="cta-row">
      <button class="btn-primary">免费获取 Notion</button>
      <button class="btn-secondary">申请演示</button>
    </div>
  </div>
  
  <div class="conveyor-belt right-side">
    <div class="track infinite-scroll">
      <div class="floating-icon">🤖</div>
      <div class="floating-icon">⚙️</div>
      <!-- looped elements -->
    </div>
  </div>
  
  <div class="product-mockup center-bottom">
    <img src="ui-screenshot.png" alt="Notion Interface">
    <div class="ambient-glow"></div>
  </div>
</section>
```

### 2. Color-Coded Bento Feature Grid
**Purpose:**
Modular showcase of product capabilities using asymmetrical grid layout with distinct color themes for visual categorization of features.

**Evidence:**
- DOM classes: `bentos_bentoGrid__LBfZl`, `bento_bento__IFnc_`, `yellow_palette_theme__mOb5L`, `red_palette_theme__TMR5X`, `teal_palette_theme__Ge39K`
- Screenshot 2 shows three cards: Yellow ("Notion 代理"), Red/Coral ("企业搜索"), Blue ("AI 速记") with internal UI mockups
- Cards contain arrow-linked headers ("你分配任务，Notion 代理负责完成。→")

**Visual Rules:**
- Layout: CSS Grid with mixed spanning (2:1:1 ratio), gap of 24px, responsive to single column on mobile
- Color: Cards use solid pastel backgrounds—Warm Yellow (#fef3c7 range), Coral Red (#fee2e2 range), Sky Blue (#dbeafe range), Teal, and Sand variants
- Typography: Card headers bold (24-28px) with arrow suffix, body text regular (16px) in dark gray
- Spacing: Internal padding 32-40px, visual mockup extends to card edges (overflow hidden)
- Radius / border / shadow: Large uniform border-radius (28-32px), subtle shadow (0 8px 30px rgba(0,0,0,0.06)), no border
- Motion: Hover triggers card lift (translateY -8px) and shadow intensification; internal mockup images scale slightly (1.02)

**Recreation Prompt:**
> Design a bento grid section with a section header "随时向你的智能助手提问。" Use a responsive grid where the first card spans two columns (wide) and subsequent cards span one column. Each card should have a distinct pastel background color (yellow, red, blue). Structure each card with: a header containing feature name and description ending with arrow (→), followed by a product screenshot that bleeds to the card edges. Apply large border-radius (28px), generous internal padding, and smooth hover transitions that lift the entire card while slightly zooming the internal image.

**Structure Sketch:**
```html
<section class="bento-features">
  <header class="section-header">
    <h2>随时向你的智能助手提问。</h2>
  </header>
  
  <div class="bento-grid">
    <article class="bento-card theme-yellow wide">
      <header class="card-header">
        <h3>Notion 代理</h3>
        <a href="#" class="card-link">你分配任务，Notion 代理负责完成。→</a>
      </header>
      <div class="card-visual">
        <img src="agent-ui.png" alt="Agent Interface">
      </div>
    </article>
    
    <article class="bento-card theme-red">
      <header class="card-header">
        <h3>企业搜索</h3>
        <a href="#" class="card-link">全域搜索，一触即达。→</a>
      </header>
      <div class="card-visual">
        <img src="search-ui.png" alt="Search Interface">
      </div>
    </article>
    
    <article class="bento-card theme-blue">
      <!-- Structure repeats -->
    </article>
  </div>
</section>
```

### 3. Interactive ROI Calculator Tool
**Purpose:**
Conversion-focused interactive element demonstrating cost savings through tool consolidation, replacing static pricing tables with engagement.

**Evidence:**
- Body text sample shows: "AI 搜索35 美元/用户", "团队规模", "月节省金额US$340", "年节省金额US$4,080"
- Screenshot 3 shows checkbox grid of tools with prices and calculation summary
- Clean white card containing form elements with blue checked states

**Visual Rules:**
- Layout: Two-column layout (text left, calculator right on desktop), calculator uses 3-column grid for tool checkboxes
- Color: White card background, light gray page background, blue checkboxes for selected tools, black text for monetary totals
- Typography: Large bold numerals for dollar amounts (36-48px), small caps labels above totals, tool names in medium weight (16px)
- Spacing: Card padding 40px, checkbox grid gap 16px, totals section separated by top border with 24px margin
- Radius / border / shadow: Card radius 24px, subtle shadow, inputs have 1px gray borders with blue focus states
- Motion: Real-time calculation updates with number counting animation, checkbox checkmark draws in with CSS transition

**Recreation Prompt:**
> Create an ROI calculator section with headline "效率倍增，工具归简。" and subtext about consolidating tools. Build a white card container with rounded corners containing: a grid of checkboxes representing different SaaS tools (AI Search, Chatbot, Wikis, CRM, etc.) with per-user pricing listed; a team size number input with stepper controls; and two large calculation displays showing "月节省金额" and "年节省金额" with bold dollar values. Style selected checkboxes with blue backgrounds and white checkmarks. Update the totals dynamically when selections change. Use generous spacing and clear visual hierarchy between the tool list and summary.

**Structure Sketch:**
```html
<section class="savings-calculator">
  <div class="layout-split">
    <div class="section-intro">
      <h2>效率倍增，工具归简。</h2>
      <p>将所有工具和团队整合一处...</p>
      <a href="#" class="text-link">查看定价方案 →</a>
    </div>
    
    <div class="calculator-card">
      <div class="tools-grid">
        <label class="tool-item checked">
          <input type="checkbox" checked>
          <span class="tool-name">AI 聊天机器人</span>
          <span class="tool-price">20 美元/用户</span>
        </label>
        <label class="tool-item">
          <input type="checkbox">
          <span class="tool-name">AI 写作助手</span>
          <span class="tool-price">18 美元/用户</span>
        </label>
        <!-- additional tools -->
      </div>
      
      <div class="calculation-summary">
        <div class="input-field">
          <label>团队规模</label>
          <input type="number" value="10" min="1">
        </div>
        
        <div class="savings-display">
          <div class="saving-item">
            <label>月节省金额</label>
            <div class="amount">US$340</div>
          </div>
          <div class="saving-item">
            <label>年节省金额</label>
            <div class="amount">US$4,080</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

### 4. Agent Type Accordion Carousel
**Purpose:**
Tabbed interface allowing users to explore different AI agent personas through expandable accordion triggers synchronized with visual previews.

**Evidence:**
- DOM classes: `homepageBentoCarousel_root__XEVDN`, `bentoCarouselHeader_accordion__QDI1V`, `bentoCarouselHeader_accordionTrigger__JkTAA`
- Contains tablist with agent types: "Q&A 代理", "任务路由代理", "报告代理", "创建你自己的代理"
- Active state class: `bentoCarouselHeader_accordionTriggerActive__O7W58`

**Visual Rules:**
- Layout: Horizontal split layout—accordion navigation on left (35-40% width), visual preview stage on right (60-65%)
- Color: White/light gray background, active accordion item has left border accent (4px solid blue) or filled background, inactive items have subtle bottom borders
- Typography: Accordion titles bold (18-20px), descriptions regular (14-16px) in muted gray, section header large (36px) above accordion
- Spacing: Accordion items have 24px vertical padding, 16px gap between items, preview area has 40px internal padding
- Radius / border / shadow: Preview container has large border-radius (24px) and heavy shadow, accordion items flat with border-bottom separators
- Motion: Smooth height transition on accordion expand (300ms ease), active indicator slides or fades in, preview content cross-fades between agent types

**Recreation Prompt:**
> Build an accordion-tab hybrid section titled "新 AI 团队伙伴，全天候为你。" On the left, create a vertical stack of accordion items: Q&A Agent, Task Routing Agent, Report Agent, and Custom Agent. Each item shows a bold title and one-line description. The active item has a blue left-border indicator and expanded content area. On the right, display a large preview card (white background, rounded corners, shadow) that updates its content based on the selected accordion item. Use smooth transitions when switching between agents—fade the content and slide the active indicator. Ensure keyboard navigation with proper ARIA tab roles.

**Structure Sketch:**
```html
<section class="agent-showcase">
  <h2>新 AI 团队伙伴，全天候为你。</h2>
  
  <div class="showcase-layout">
    <div class="accordion-nav" role="tablist">
      <button class="accordion-item active" role="tab" aria-selected="true">
        <div class="item-content">
          <h3>Q&A 代理</h3>
          <p>基于你已有的知识，即时解答问题。</p>
        </div>
      </button>
      
      <button class="accordion-item" role="tab" aria-selected="false">
        <div class="item-content">
          <h3>任务路由代理</h3>
          <p>自主分配、设定优先级并分流任务。</p>
        </div>
      </button>
      
      <button class="accordion-item" role="tab" aria-selected="false">
        <div class="item-content">
          <h3>报告代理</h3>
          <p>为你总结、撰写并发送报告。</p>
        </div>
      </button>
    </div>
    
    <div class="preview-stage" role="tabpanel">
      <div class="preview-content">
        <!-- Dynamic content based on selection -->
        <img src="agent-preview.png" alt="Agent Interface Preview">
      </div>
    </div>
  </div>
</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:** mixed

#### Color Roles
- **color.text.primary:** #000000 (150)
- **color.text.secondary:** #000000 (49)
- **color.surface.base:** #ffffff (30)
- **color.accent:** #000000 (72)
- **color.border.default:** #000000 (144)
- **color.focus.ring:** #000000 (99)

#### Typography Roles
- **font.family.primary:** NotionInter (244)
- **font.size.display:** 64px (22)
- **font.size.body:** 16px (65)
- **font.size.label:** 15px (6)
- **ratio:** display is 4x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 4px (91)
- **space.2:** 24px (85)
- **space.3:** 6px (63)
- **space.4:** 6.4px (42)
- **space.5:** 15px (33)

#### Radius Roles
- **radius.sharp:** 4px (9)
- **radius.medium:** 12px (25)
- **radius.pill:** 9999px (2)

#### Shadow Intent
- **level:** rare accent
- **usage:** 2
- **note:** 2 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** subtle
- **range:** 150-200ms
- **common durations:** 200ms (33), 150ms (18)
- **easing style:** ease-in (24), cubic-bezier(0.645, 0.045, 0.355, 1) (6), cubic-bezier(0.45, 0, 0.55, 1), cubic-bezier(0.45, 0, 0.55, 1) (4)

### Distinctive Implementation Signals

- Frequent pill radius (9999px) creates a soft/capsule interaction language.
- Motion is subtle, centered around 150-200ms.
- Type hierarchy is ratio-driven: display is 4x body.

### Extraction Diagnostics

- Sampled 244 visible elements from 1511 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.