chromewebstore.google.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
Cyber-black SaaS aesthetic featuring deep void backgrounds layered with glassmorphism panels. The design employs a high-contrast dark mode with semi-transparent surfaces creating depth through backdrop blur and subtle white borders. Visual hierarchy relies on elegant serif display typography juxtaposed against technical UI elements.

### 2. Color Palette
- **Background**: Deep black (#000000 or near-black) with layered translucent panels (`bg-black/86`, `bg-white/[0.04]`)
- **Text**: White at graduated opacities (45%, 55%, 62%) for hierarchy; pure white for primary headings
- **Accents**: Indigo/violet spectrum (`text-indigo-300`, `indigo-glow`) for interactive elements and highlights
- **Borders**: Subtle white at 10% opacity (`border-white/10`) defining glass panel edges
- **Gradient Text**: Indigo-to-purple gradient applied to emphasized keywords within headings

### 3. Font Stack
- **Display/Headings**: Elegant serif typeface (likely a custom or refined Google Serif) with light font weight (300) for premium editorial feel
- **UI/Body**: Clean sans-serif system font (Inter or similar) for navigation, buttons, and descriptions
- **Labels/Eyebrows**: Uppercase sans-serif with extreme letter-spacing (`tracking-[0.18em]`, `tracking-[0.12em]`) at small sizes (10-11px)

### 4. Texture
- **Glassmorphism**: Extensive use of `backdrop-blur` (2xl) combined with semi-transparent white fills (3-5% opacity)
- **Grid Pattern**: Subtle background grid lines visible in screenshots suggesting technical precision
- **Glow Effects**: Soft indigo glows behind icon containers (`indigo-glow` class)
- **Border Definition**: 1px solid borders at low opacity (white/10) creating structure without harsh lines

### 5. Motion Design
- **Transitions**: 150ms duration on color and background changes (`duration-150`)
- **Hover States**: Background brightness increase (from `white/[0.04]` to `white/[0.055]`), subtle border color shift toward indigo (`hover:border-indigo-300/35`)
- **Micro-interactions**: Horizontal translation on interactive elements (`group-hover:translate-x-1`) for arrow indicators
- **Smooth Scrolling**: Fixed header with transition-all suggests scroll-aware behavior

## Component Guidelines
### Button
Primary CTAs use pill-shaped (full rounded) indigo backgrounds with uppercase text and wide letter-spacing. Secondary actions appear as text links with indigo-200 color and arrow icons that shift right on hover.

### Card
Glass panels with consistent 1px white/10 border, rounded corners (likely 8-12px), and internal padding (24px). Cards use flex column layout with icon/badge at top, category label aligned right, heading, and description. Background transparency increases slightly on hover.

### Navigation
Fixed position header with backdrop blur, containing logo with icon mark, horizontal link list (uppercase, spaced), language toggle button group (中文/EN), and prominent "Add to Chrome" pill button. Border-bottom in white/10 separates from content.

### Input
Not prominently featured in this page view; interface appears output-focused rather than input-heavy.

### Typography
H1s use large serif font (36px mobile to 72px desktop) with gradient text spans for emphasis. Body text maintains high line-height (leading-7) for readability against dark backgrounds. Category labels use 10px uppercase with tracking-widest.

## Distinctive Element Few-shot Examples

### 1. Glass Panel Feature Card
**Purpose:**
Display individual product capabilities with categorical taxonomy, iconography, and descriptive content within a glassmorphism container that signals technical sophistication.

**Evidence:**
Multiple `div.glass-panel.p-6` entries with class `transition-colors duration-150 hover:bg-white/[0.055]`. Screenshots show 3-column grid layout containing cards with "Design system core", "Typography specs", "Spacing system" labels.

**Visual Rules:**
- **Layout:** Rectangular card with internal padding (24px), flex column structure. Icon container (36-48px) positioned top-left, category badge pill top-right, h3 title below icon, paragraph description beneath title.
- **Color:** Background at 4% white opacity (`bg-white/[0.04]`), border at 10% white opacity (`border-white/10`), text white at 90% opacity for headings and 50-60% for body.
- **Typography:** Category badges use 10px uppercase sans-serif with tracking-[0.12em] and 45% opacity. Titles use 18px sans-serif font-light in pure white. Descriptions use 14px leading-7 at 50% opacity.
- **Spacing:** 24px internal padding, 16px gap between icon and title, 12px gap between title and description.
- **Radius / border / shadow:** Subtle border-radius (likely 8px), 1px solid border, no heavy shadows (relies on blur backdrop), indigo tint appears on hover (`hover:border-indigo-300/35`).
- **Motion:** 150ms transition on background color and border color. Background lightens to 5.5% white on hover.

**Recreation Prompt:**
>Create a glassmorphism feature card component with a semi-transparent dark background (4% white), 1px white/10 border, and rounded corners. Include a top row with a 40px square icon container (subtle border, semi-transparent bg, indigo icon color) on the left and a category badge pill (uppercase, 10px, wide tracking, bordered, semi-transparent) on the right. Below, place an h3 title in white sans-serif font-light and a paragraph description at 50% opacity with relaxed line-height. Add hover states that brighten the background to 5.5% white and add a subtle indigo border tint over 150ms.

**Structure Sketch:**
```html
<div class="glass-panel p-6 transition-colors duration-150 hover:bg-white/[0.055] hover:border-indigo-300/35 border border-white/10 bg-white/[0.04] rounded-lg">
  <div class="flex items-start justify-between mb-4">
    <div class="h-10 w-10 flex items-center justify-center border border-white/10 bg-white/[0.04] text-indigo-300">
      <Icon />
    </div>
    <span class="px-2 py-1 text-[10px] uppercase tracking-[0.12em] text-white/45 border border-white/10 bg-white/[0.04]">
      Category Label
    </span>
  </div>
  <h3 class="text-lg font-light text-white mb-3">Feature Title</h3>
  <p class="text-sm leading-7 text-white/50">
    Feature description text explaining the capability in detail.
  </p>
</div>
```

### 2. Gradient Text Hero Section
**Purpose:**
Primary value proposition display combining editorial serif typography with gradient accent treatment to emphasize the AI-powered nature of the product.

**Evidence:**
`section.grid-section.text-center` containing `h1` with text "The design specs you need,all extracted by AI" and `span.gradient-text`. DOM shows `font-serif text-[36px] font-light leading-none text-white sm:text-5xl md:text-[72px]`.

**Visual Rules:**
- **Layout:** Centered text alignment within full-width section, max-width constraint on heading (max-w-4xl), generous vertical padding.
- **Color:** Base text in pure white, specific span uses gradient fill (indigo-300 to purple/violet) creating the word "AI" in gradient.
- **Typography:** Serif font family, light weight (300), sizes ranging from 36px mobile to 72px desktop, tight line-height (leading-none or tight).
- **Spacing:** Large vertical padding (likely 120px+), centered alignment, eyebrow text above with indigo color and uppercase tracking.
- **Radius / border / shadow:** No borders or shadows on text; potential subtle text shadow for legibility against dark backgrounds.
- **Motion:** Not explicitly evidenced in DOM for this element, but likely fade-in or blur-in on load given glassmorphism theme.

**Recreation Prompt:**
>Create a hero section with centered alignment containing a small uppercase eyebrow text in indigo-300 with wide tracking. Below, place a large serif heading (light weight, 36px-72px responsive) in white with tight line-height. Within the heading, wrap the last word or key phrase in a span that has a gradient text fill from indigo-300 to purple-400. Ensure the heading has a max-width constraint to maintain readable line length against the dark background.

**Structure Sketch:**
```html
<section class="grid-section text-center py-24 md:py-32">
  <div class="container-main">
    <p class="text-xs uppercase tracking-[0.2em] text-indigo-300 mb-6">Features</p>
    <h1 class="font-serif text-4xl md:text-6xl lg:text-7xl font-light text-white leading-tight max-w-4xl mx-auto">
      The design specs you need,<br>
      all extracted by <span class="gradient-text">AI</span>
    </h1>
    <p class="mt-6 text-white/55 max-w-2xl mx-auto">
      Subtitle description text here.
    </p>
  </div>
</section>
```

### 3. Indigo Glow Icon Container
**Purpose:**
Visual anchor for feature categories providing immediate visual recognition through iconography while maintaining the glassmorphism aesthetic with subtle glow effects.

**Evidence:**
`div.indigo-glow.mb-5.flex.h-12.w-12.items-center.justify-center.border.border-white/10.bg-white/[0.04]` containing Lucide icons with class `text-indigo-300`.

**Visual Rules:**
- **Layout:** Square aspect ratio (48px x 48px), flex centering for icon alignment, positioned at top of parent card.
- **Color:** Background at 4% white opacity, border at 10% white opacity, icon color in indigo-300, subtle indigo glow/shadow emanating from behind or around the box.
- **Typography:** N/A (icon only), but icon size appears to be 20-24px.
- **Spacing:** Margin-bottom (20px) to separate from heading text below.
- **Radius / border / shadow:** 1px solid border, likely rounded corners (2-4px), box-shadow or filter providing the "indigo glow" effect.
- **Motion:** Not specified in DOM for this specific element, but likely inherits parent hover states.

**Recreation Prompt:**
>Create a square icon container (48px) with flex centering, a 1px white/10 border, and a semi-transparent white background (4% opacity). Add a subtle indigo glow effect behind the container using box-shadow or filter drop-shadow in indigo-500 at low opacity. Center a Lucide icon inside in indigo-300 color (20-24px size). Position this at the top of a glass panel with margin-bottom to separate from content below.

**Structure Sketch:**
```html
<div class="indigo-glow mb-5 flex h-12 w-12 items-center justify-center border border-white/10 bg-white/[0.04]">
  <svg class="h-5 w-5 text-indigo-300" ...>
    <!-- Icon paths -->
  </svg>
</div>
```

### 4. Centered CTA Glass Block
**Purpose:**
High-conversion focal point containing primary call-to-action with contained messaging hierarchy within an emphasized glass panel that visually separates from the grid above.

**Evidence:**
`section.grid-section` containing `div.glass-panel.px-6.py-16` with text "Analyze your first website". Structure shows eyebrow paragraph, h2 heading, description paragraph, anchor link "Add to Chrome — It's Free", and helper text.

**Visual Rules:**
- **Layout:** Full-width section with centered content, large internal padding (64px vertical), flex column center alignment.
- **Color:** Standard glass panel background (slightly more opaque than feature cards), white text for headings, indigo pill button for primary action.
- **Typography:** Eyebrow text in indigo (uppercase, tracking-widest), h2 in large serif font-light (white), subtitle in white/55, button text uppercase with wide tracking, helper text small and muted.
- **Spacing:** 64px vertical padding, 24px gaps between elements, button has internal padding (16px 32px).
- **Radius / border / shadow:** Standard glass panel border (white/10), button has full-rounded (pill) shape with indigo background.
- **Motion:** Button likely has hover state brightness increase or subtle scale; text transitions as per global 150ms duration.

**Recreation Prompt:**
>Create a large glassmorphism panel with generous vertical padding (64px) and centered content alignment. Inside, stack elements vertically: a small uppercase eyebrow in indigo with wide tracking, a large serif heading in white (light weight), a subtitle paragraph in muted white (55% opacity), a prominent indigo pill button with uppercase text and wide letter-spacing, and small helper text below the button. The panel should have the standard white/10 border and semi-transparent dark background, creating a contained "stage" for the conversion action.

**Structure Sketch:**
```html
<section class="grid-section">
  <div class="container-main">
    <div class="glass-panel px-6 py-16 text-center">
      <p class="text-xs uppercase tracking-[0.2em] text-indigo-300 mb-4">Ready</p>
      <h2 class="font-serif text-4xl md:text-5xl font-light text-white mb-4">
        Analyze your first website
      </h2>
      <p class="text-white/55 mb-8 max-w-xl mx-auto">
        Install for free and experience full design spec extraction in 30 seconds.
      </p>
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full bg-indigo-600 text-white text-xs uppercase tracking-[0.15em] hover:bg-indigo-500 transition-colors">
        Add to Chrome — It's Free
      </a>
      <p class="mt-4 text-xs text-white/45">
        No sign-up required. Install and use immediately.
      </p>
    </div>
  </div>
</section>
```

### 5. Fixed Navigation Header with Language Toggle
**Purpose:**
Persistent wayfinding with internationalization support and primary conversion action, utilizing glassmorphism to remain visible without blocking content.

**Evidence:**
`header.fixed.top-0.left-0.right-0.z-50.transition-all` containing logo "Design Extractor", nav links (Features, Sample, Pricing, Docs, Blog), buttons for "中文" and "EN", and "Add to Chrome" link.

**Visual Rules:**
- **Layout:** Fixed position full-width header, flex row with justify-between, items-center. Logo left, nav links center (hidden on mobile), actions right (language toggle + CTA).
- **Color:** Background with backdrop blur and black/86 opacity, border-bottom white/10. Nav links in white/70, active/hover in white. Language toggle buttons with active state highlighted (indigo or white bg). CTA button in indigo.
- **Typography:** Logo uses uppercase sans-serif with tracking. Nav links use uppercase text with wide tracking (similar to 11px uppercase). Language buttons use small text.
- **Spacing:** Height approximately 64-72px, horizontal padding from container, gap-8 between nav items.
- **Radius / border / shadow:** Border-bottom 1px solid white/10. Language toggle buttons likely have subtle borders or background distinction.
- **Motion:** `transition-all` class suggests background opacity or blur changes on scroll. Language toggle likely has instant or 150ms background color switch.

**Recreation Prompt:**
>Create a fixed position header (z-50) with full width, backdrop blur, and semi-transparent dark background (black/86). Add a 1px white/10 border-bottom. Inside a container, place three groups: left side has a logo icon + "Design Extractor" text (uppercase, tracking); center has a flex row of navigation links (Features, Sample, Pricing, Docs, Blog) in uppercase with wide tracking and white/70 color; right side has a language toggle button pair (中文 | EN) where the active language has a distinct background, followed by an indigo pill button "Add to Chrome". Hide the center navigation on mobile breakpoints.

**Structure Sketch:**
```html
<header class="fixed top-0 left-0 right-0 z-50 border-b border-white/10 bg-black/86 backdrop-blur-xl transition-all">
  <div class="container-main h-16 flex items-center justify-between">
    <a href="/" class="flex items-center gap-2 text-white uppercase tracking-wider text-sm font-medium">
      <LogoIcon />
      Design Extractor
    </a>
    
    <nav class="hidden md:flex items-center gap-8">
      <a href="/features" class="text-xs uppercase tracking-[0.15em] text-white/70 hover:text-white transition-colors">Features</a>
      <a href="/sample" class="text-xs uppercase tracking-[0.15em] text-white/70 hover:text-white transition-colors">Sample</a>
      <a href="/pricing" class="text-xs uppercase tracking-[0.15em] text-white/70 hover:text-white transition-colors">Pricing</a>
      <a href="/docs" class="text-xs uppercase tracking-[0.15em] text-white/70 hover:text-white transition-colors">Docs</a>
      <a href="/blog" class="text-xs uppercase tracking-[0.15em] text-white/70 hover:text-white transition-colors">Blog</a>
    </nav>
    
    <div class="flex items-center gap-4">
      <div class="flex items-center border border-white/10 rounded">
        <button class="px-3 py-1 text-xs text-white/60">中文</button>
        <button class="px-3 py-1 text-xs text-white bg-white/10">EN</button>
      </div>
      <a href="#" class="hidden sm:inline-flex px-4 py-2 rounded-full bg-indigo-600 text-white text-xs uppercase tracking-wider">
        Add to Chrome
      </a>
    </div>
  </div>
</header>
```

## 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:** #ffffff (66)
- **color.text.secondary:** #ffffff (23)
- **color.surface.base:** #ffffff (3)
- **color.accent:** #ffffff (49)
- **color.border.default:** #ffffff (68)
- **color.focus.ring:** #ffffff (66)

#### Typography Roles
- **font.family.primary:** __Inter_f367f3 (67)
- **font.family.secondary:** ui-serif (2)
- **font.size.display:** 72px (10)
- **font.size.body:** 14px (22)
- **font.size.label:** 11px (2)
- **ratio:** display is 5.14x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 10px (20)
- **space.2:** 12px (16)
- **space.3:** 16px (12)
- **space.4:** 112px (9)
- **space.5:** 20px (9)

#### Radius Roles
- **radius.pill:** 9999px (2)

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

#### Motion Intent
- **level:** moderate
- **range:** 150-300ms
- **common durations:** 150ms (22), 300ms (1)
- **easing style:** cubic-bezier(0.4, 0, 0.2, 1) (23)

### Distinctive Implementation Signals

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

### Extraction Diagnostics

- Sampled 69 visible elements from 241 total DOM elements.
- Confidence: medium.
- 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.