tabbit.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
Clean, airy, and premium AI-productivity aesthetic. High-contrast black typography on expansive white backgrounds is punctuated by immersive, soft-gradient feature cards. The tone is confident, minimal, and product-centric, letting large UI mockups and colorful abstract backgrounds do the visual heavy lifting.

## Design System
### 1. Core Style
Minimalist SaaS with editorial center-aligned typography. Layout relies on generous whitespace, full-bleed sectional rhythm, and large interactive UI mockups serving as the primary illustration method.
### 2. Color Palette
Base of pure white with near-black text. Accent colors are soft, desaturated pastels used as section backgrounds (mint green, lavender, pale blue). Primary CTAs use solid black pills. The brand orange appears in the logo mark.
### 3. Font Stack
Modern geometric sans-serif, antialiased. Large display headings with tight leading, lighter weight subheadings, and clean body text.
### 4. Texture
Smooth, noiseless surfaces. Backgrounds use soft radial or aurora-like gradients behind mockups. Cards carry subtle gradient fills rather than flat colors.
### 5. Motion Design
Scroll-driven sticky animations (stacking cards), horizontal marquee carousels for social proof, and smooth cross-fades or slides between tabbed feature states.

## Component Guidelines
- **Button:** Pill-shaped with full border-radius. Primary actions use black fill with white text. Secondary actions use outlined pills or ghost text. Download buttons integrate OS icons and architecture sub-badges.
- **Card:** Massive, rounded-3xl corners. Used as feature stage containers with gradient backgrounds and internal UI mockups.
- **Navigation:** Fixed transparent header. Logo left, compact language switcher (icon plus text pill) and solid black "Download" pill right.
- **Input:** Omnibox-style chat bar integrated inside mockups; no traditional visible standalone form inputs on the landing page.
- **Typography:** Centered section headers dominate. H2s are bold and large; H3s are lighter, serving as feature subtitles inside colored cards.

## Distinctive Element Few-shot Examples

### 1. Hero with Aurora Gradient & Browser Mockup
**Purpose:**
Primary conversion area establishing product identity and offering immediate OS-specific downloads.
**Evidence:**
`section.hero` DOM contains 4 media elements and 7 buttons. Screenshot 1 shows a centered tagline, massive "Tabbit Browser" heading, three black OS download pills, and a large browser window mockup floating above a soft green-to-white aurora blur.
**Visual Rules:**
- Layout: Centered flex column. Heading sits above a horizontal row of download pills. Mockup spans nearly full width below.
- Color: White page background bleeding into a soft, diffused mint gradient behind the mockup.
- Typography: Light gray subheading above, bold black massive H1.
- Spacing: Very generous vertical padding between text, buttons, and mockup.
- Radius / border / shadow: Download pills are fully rounded capsules. Mockup has standard window chrome radius but casts a soft diffuse shadow.
- Motion: Mockup likely has a subtle float or parallax on scroll.
**Recreation Prompt:**
> Create a centered hero section for an AI browser. Place a light-gray tagline at the top, a massive bold black H1 below it, then a horizontal row of three black pill-shaped download buttons (macOS Apple Silicon, macOS Intel, Windows) each containing an OS icon and a small gray architecture badge. Below the buttons, add a large browser-window mockup screenshot showing a vertical sidebar and chat input; sit this mockup on top of a soft, diffused green-to-white radial gradient background that looks like an aurora. Use plenty of whitespace and ensure all elements are center-aligned.
**Structure Sketch:**
```html
<section class="hero">
  <p class="tagline">Understand your Context...</p>
  <h1>Tabbit Browser</h1>
  <div class="download-pills">
    <button><svg class="os-icon"/> macOS <span>Apple Silicon</span></button>
    <button><svg class="os-icon"/> macOS <span>Intel</span></button>
    <button><svg class="os-icon"/> Windows</button>
  </div>
  <div class="mockup-wrapper">
    <img src="browser-mockup.png" alt="Browser interface" />
  </div>
</section>
```

### 2. Sticky Scroll-Stacked Feature Cards
**Purpose:**
Demonstrate context-aware features through a scroll-driven, color-coded card stacking experience.
**Evidence:**
`section.scroll-cards-section` is 6101px tall and contains `div.scroll-cards-sticky` (700px tall) plus three `article.scroll-card` children (`card-1`, `card-2`, `card-3`). Screenshot 2 shows massive full-width cards with distinct gradient backgrounds (green, purple) that overlap, each containing a left-aligned feature phrase and a right-aligned UI mockup.
**Visual Rules:**
- Layout: Tall scroll container with a sticky viewport wrapper. Cards fill most of the viewport width and replace one another as the user scrolls.
- Color: Each card has its own soft pastel gradient (e.g., mint green, lavender). White text for headings inside the card.
- Typography: Large white heading on the left side of each card; smaller supporting text.
- Spacing: Cards have comfortable internal padding; they overlap in the sticky viewport.
- Radius / border / shadow: Cards have very large, uniform border radii (rounded-3xl appearance).
- Motion: Scroll-triggered stacking; cards slide up and stack inside the sticky container.
**Recreation Prompt:**
> Build a scroll-driven feature section titled "Context, right where you are". The section should be very tall to allow scrolling. Inside a sticky viewport wrapper, place three massive, full-width cards with extremely rounded corners. Give each card a unique soft pastel gradient background (mint green, lavender, etc.). On each card, left-align large white text (e.g., "Highlight, Screenshot...", "Chat with your bookmarks...") and right-align a semi-transparent UI mockup or floating chat widget. As the user scrolls, the cards should stack on top of one another inside the sticky wrapper.
**Structure Sketch:**
```html
<section class="scroll-cards-section">
  <div class="scroll-cards-sticky">
    <article class="scroll-card card-1">
      <h3>Tabs, Groups, Files.</h3>
      <div class="mockup"></div>
    </article>
    <article class="scroll-card card-2">
      <h3>Highlight, Screenshot.</h3>
      <div class="mockup"></div>
    </article>
    <article class="scroll-card card-3">
      <h3>Chat with your bookmarks...</h3>
      <div class="mockup"></div>
    </article>
  </div>
</section>
```

### 3. OS-Specific Download Pill Group
**Purpose:**
Provide clear, platform-native download actions with architecture specificity.
**Evidence:**
DOM CTAs show distinct buttons for `macOSAppleSilicon`, `macOSIntel`, and `Windows`. Screenshot 1 shows these as three prominent black capsules in the hero. Each pill contains an OS icon, the OS name, and a smaller secondary badge for chip architecture.
**Visual Rules:**
- Layout: Horizontal flex row, centered. Buttons share equal visual weight.
- Color: Black background, white text and icons. Secondary architecture badge is a subtle gray pill inside the main black pill.
- Typography: White sans-serif text; architecture badge uses slightly smaller, muted text.
- Spacing: Comfortable horizontal gap between pills.
- Radius / border / shadow: Fully rounded capsule shape. No border, subtle soft shadow.
- Motion: Hover state likely lifts or brightens.
**Recreation Prompt:**
> Create a horizontal group of three download buttons. Each button should be a long black pill with fully rounded ends. Inside each pill, from left to right: an OS logo icon (Apple or Windows), the OS name in white, and a smaller inner pill/badge indicating the architecture (e.g., "Apple Silicon", "Intel"). Center the group horizontally beneath the main heading. Keep spacing between buttons tight but even.
**Structure Sketch:**
```html
<div class="download-pills">
  <button class="pill">
    <span class="icon"></span>
    <span class="label">macOS</span>
    <span class="badge">Apple Silicon</span>
  </button>
  <button class="pill">
    <span class="icon"></span>
    <span class="label">macOS</span>
    <span class="badge">Intel</span>
  </button>
  <button class="pill">
    <span class="icon">⊞</span>
    <span class="label">Windows</span>
  </button>
</div>
```

### 4. Tabbed Feature Showcase with Mockup
**Purpose:**
Allow users to toggle between specific product use-cases while a contextual browser mockup updates.
**Evidence:**
`section.skills` contains 5 buttons (`Switch to Tabbit for Work`, `Switch to Tabbit for Fun`, etc.) and 5 media items. `section.scripts` contains 3 buttons and 3 media. Screenshot 3 shows a section header ("Possibility, shaped by need") with a subheader and a large browser mockup displaying "Data Insights," indicating a section header plus tab buttons plus large mockup stage pattern.
**Visual Rules:**
- Layout: Centered text header at top. Below it, a horizontal row of text or icon tabs. Below tabs, a massive centered browser mockup.
- Color: White background for the section. Mockup may have its own subtle gradient backdrop.
- Typography: Large dark H2 header, gray subheader below.
- Spacing: Large vertical gap between tabs and mockup.
- Radius / border / shadow: Mockup has standard window radius; active tab may be highlighted with a ring or underline.
- Motion: Clicking a tab cross-fades or slides the mockup image to the corresponding feature state.
**Recreation Prompt:**
> Design a feature showcase section with a centered H2 title ("Possibility, shaped by need") and a gray subheading below it. Add a horizontal row of icon/text tabs representing use cases (e.g., Data Insights, Resource Hunter, etc.). Below the tabs, place a large browser mockup image that changes based on the active tab. The mockup should show an internal app UI (like a data table or chat). Keep the section background white and use generous vertical padding.
**Structure Sketch:**
```html
<section class="feature-showcase">
  <h2>Possibility, shaped by need</h2>
  <p class="subhead">No coding required...</p>
  <div class="tabs">
    <button aria-label="Switch to Data Insights" class="active">Data Insights</button>
    <button aria-label="Switch to Resource Hunter">Resource Hunter</button>
    <button aria-label="Switch to Personalized Style">Personalized Style</button>
  </div>
  <div class="mockup-stage">
    <img src="feature-mockup.png" alt="Feature preview" />
  </div>
</section>
```

### 5. Testimonial Horizontal Marquee
**Purpose:**
Display social proof in a wide, scrollable or auto-moving carousel.
**Evidence:**
`div.testimonials-cards-wrapper` has a width of 4116px (far exceeding viewport width) and contains 8 child divs with 10 media items. `section.testimonials` also contains 10 media. The extreme width strongly indicates a horizontal marquee layout.
**Visual Rules:**
- Layout: Full-width overflow-hidden container. Inner track is a continuous horizontal flex row of cards.
- Color: White or very light gray card backgrounds; dark text.
- Typography: Quote text in readable sans-serif; name and title below in smaller lighter text.
- Spacing: Cards have internal padding and a gap between them.
- Radius / border / shadow: Cards are rounded-xl with subtle borders or shadows.
- Motion: Auto-scrolling marquee from right to left, or draggable horizontal scroll. Pauses on hover.
**Recreation Prompt:**
> Build a testimonial section with a full-width, horizontally overflowing track. Inside, place a long flex row of rounded cards (total width roughly four times the viewport). Each card contains a user quote, a name, and a role (e.g., "Joey, Content Creator"). The container should hide overflow and the inner track should continuously scroll horizontally like a marquee. Keep card backgrounds clean white with subtle shadows and rounded corners.
**Structure Sketch:**
```html
<section class="testimonials">
  <h2>Testimonial</h2>
  <div class="testimonials-cards-wrapper">
    <div class="testimonial-card">
      <p>"Tabbit's Agent background processing..."</p>
      <div class="author">
        <span class="name">Joey</span>
        <span class="role">Content Creator</span>
      </div>
    </div>
    <!-- repeated cards -->
  </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:** #1d1d1f (74)
- **color.text.secondary:** #000000 (19)
- **color.surface.base:** #000000 (16)
- **color.accent:** #1d1d1f (55)
- **color.border.default:** #e5e7eb (94)
- **color.focus.ring:** #1d1d1f (74)

#### Typography Roles
- **font.family.primary:** Montserrat (74)
- **font.family.secondary:** PingFang SC (29)
- **font.size.display:** 60px (20)
- **font.size.body:** 18px (15)
- **font.size.label:** 12px (4)
- **ratio:** display is 3.33x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 4px (42)
- **space.2:** 24px (33)
- **space.3:** 28px (15)
- **space.4:** 80px (15)
- **space.5:** 160px (10)

#### Radius Roles
- **radius.medium:** 6px (5)
- **radius.pill:** 1000px (14)

#### Shadow Intent
- **level:** subtle elevation
- **usage:** 12
- **note:** 4 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** expressive
- **range:** 200-800ms
- **common durations:** 200ms (25), 300ms (8), 350ms (6)
- **easing style:** ease, ease (6)

### Distinctive Implementation Signals

- Frequent pill radius (1000px) creates a soft/capsule interaction language.
- Motion is expressive, centered around 200-800ms.
- Type hierarchy is ratio-driven: display is 3.33x body.

### Extraction Diagnostics

- Sampled 159 visible elements from 540 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.