getwebdesign.top 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/finely crafted, playful/toy-like, magazine/editorial style, gritty/primitive, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure that your design truly aligns with the chosen aesthetic direction.

- **Constraints**: Technical requirements (framework, 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 feasible — the key lies in 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 the copy concise for quick scanning.

- Use white space, alignment, scaling, cropping, and contrast before adding borders.

- Limit the system: use no more than two fonts and one accent color by default.

# getwebdesign.top Design System

## Visual DNA

Cyber-noir SaaS aesthetic with deep void blacks and ethereal indigo glows. Glass morphism dominates the interface through translucent layered panels with backdrop blurs, creating depth against a near-black canvas. Typography pairs geometric precision (Inter) with editorial elegance (Georgia) for high-impact headings. The system employs expressive motion with glowing focus states and smooth state transitions, optimized for developer tools and technical workflows.

## Engineering CSS Evidence

### Typography

**Headings:**
- **Primary:**
  - **Font Family:** `__Inter_f367f3`
  - **Font Family Stack:** `__Inter_f367f3, __Inter_Fallback_f367f3, Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", sans-serif`
  - **Font Size:** `18px`
  - **Font Weight:** `300`
  - **Line Height:** `28px`
  - **Letter Spacing:** `2.4px`
  - **Text Transform:** `uppercase`
- **Display Variants (Serif):**
  - `Georgia, "Times New Roman", serif | 72px | 300 | 72px` (h1)
  - `Georgia, "Times New Roman", serif | 60px | 300 | 60px` (h2)
- **Sans Variants:**
  - `__Inter_f367f3... | 16px | 400 | 24px`
  - `__Inter_f367f3... | 18px | 500 | 28px`
  - `__Inter_f367f3... | 12px | 600 | 16px`

**Body:**
- **Primary:**
  - **Font Family:** `__Inter_f367f3`
  - **Font Family Stack:** `__Inter_f367f3, __Inter_Fallback_f367f3, Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", sans-serif`
  - **Font Size:** `14px`
  - **Font Weight:** `400`
  - **Line Height:** `20px`
  - **Letter Spacing:** `2.4px`
  - **Text Transform:** `uppercase`
- **Variants:**
  - `__Inter_f367f3... | 14px | 400 | 20px` (52 instances)
  - `__Inter_f367f3... | 14px | 400 | 28px` (15 instances)
  - `__Inter_f367f3... | 12px | 500 | 16px` (14 instances)
  - `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | 14px | 400 | 20px` (7 instances)

### Color

**Mode:** Mixed (Dark dominant)

**Usage:**
- **Background:** `rgba(4, 8, 15, 0.78)`, `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`, `rgb(0, 0, 0)`, `rgba(129, 140, 248, 0.1)`, `rgba(255, 255, 255, 0.05)`
- **Text Primary:** `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`, `rgb(129, 140, 248)`, `rgb(199, 210, 254)`, `rgba(255, 255, 255, 0.55)`, `rgba(255, 255, 255, 0.6)`
- **Text Secondary:** `rgb(255, 255, 255)`, `rgb(129, 140, 248)`, `rgba(255, 255, 255, 0.45)`, `rgb(199, 210, 254)`
- **Border:** `rgba(255, 255, 255, 0.16)`, `rgba(255, 255, 255, 0.1)`, `rgba(255, 255, 255, 0.08)`, `rgb(129, 140, 248)`, `rgba(129, 140, 248, 0.25)`, `rgba(129, 140, 248, 0.3)`
- **Accent:** `rgba(255, 255, 255, 0.16)`, `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`, `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`
- **Gradients:** `linear-gradient(to right, rgb(255, 255, 255), rgb(199, 210, 254), rgb(129, 140, 248))`

### Spacing

**Base Unit:** `4px`

**Scale:** `2px`, `4px`, `6px`, `8px`, `10px`, `12px`, `16px`, `20px`, `24px`, `32px`, `48px`, `112px`, `309px`

**Section Padding:** `112px 0px`, `64px 0px 0px`

**Gaps:** `2px`, `4px`, `6px`, `8px`, `10px`, `12px`, `24px`, `32px`

### Material

**Surface Style:** Glass / translucent

**Radius:** `9999px` (full pills), `1px` (sharp cards)

**Border Style:**
- `0px solid rgba(255, 255, 255, 0.16)`
- `1px solid rgba(255, 255, 255, 0.08)`
- `1px solid rgba(255, 255, 255, 0.1)`
- `1px solid rgba(255, 255, 255, 0.16)`
- `1px solid rgba(129, 140, 248, 0.25)`
- `1px solid rgba(129, 140, 248, 0.3)`
- `1px solid rgba(129, 140, 248, 0.5)`

**Shadow Style:**
- `rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.03) 0px 0px 60px 0px`
- `rgba(99, 102, 241, 0.32) 0px 0px 0px 1px, rgba(99, 102, 241, 0.28) 0px 0px 34px 0px`
- `rgba(99, 102, 241, 0.24) 0px 0px 28px 0px`
- `rgba(99, 102, 241, 0.25) 0px 0px 28px 0px`

**Blur:** `blur(4px)`, `blur(24px)`, `blur(40px)`

### Motion

**Motion Level:** Expressive

**Durations:** `0s`, `0.15s`, `0.3s`, `2s`

**Easings:**
- `ease`
- `cubic-bezier(0.4, 0, 0.2, 1)`
- `cubic-bezier(0.4, 0, 0.6, 1)`

**Hover Patterns:** `all`, `color, background-color, border-color, text-decoration-color, fill, stroke`

**Scroll Patterns:** 1 sticky/fixed elements, 9 CSS grid containers, 97 flex containers

### Component Samples

**Button (22 instances):**
- **Typography:** `16px / 24px` weight 400, `14px / 20px` weight 600, `14px / 20px` weight 500
- **Padding:** `12px 16px`, `16px 0px`, `10px 20px`, `0px 32px`
- **Radius:** `9999px`
- **Color:** `rgb(255, 255, 255)`, `rgb(199, 210, 254)`
- **Background:** `rgba(255, 255, 255, 0.04)`, `rgb(99, 102, 241)`, `rgba(255, 255, 255, 0.05)`
- **Border:** `0px solid rgba(255, 255, 255, 0.16)`, `1px solid rgba(255, 255, 255, 0.16)`
- **Shadow:** `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(99, 102, 241, 0.24) 0px 0px 28px 0px`
- **Transition:** `color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)`, `all 0.15s cubic-bezier(0.4, 0, 0.2, 1)`

**Link (26 instances):**
- **Typography:** `14px / 20px` weight 400, `12px / 16px` weight 500, `14px / 20px` weight 600
- **Padding:** `8px 16px`, `0px 32px`, `0px 40px`, `8px 20px`
- **Radius:** `9999px`
- **Color:** `rgba(255, 255, 255, 0.45)`, `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.55)`, `rgb(199, 210, 254)`
- **Background:** `rgb(99, 102, 241)`, `rgba(255, 255, 255, 0.04)`, `rgb(255, 255, 255)`
- **Border:** `0px solid rgba(255, 255, 255, 0.16)`, `1px solid rgba(255, 255, 255, 0.1)`, `1px solid rgba(129, 140, 248, 0.5)`
- **Shadow:** `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(99, 102, 241, 0.32) 0px 0px 34px 0px`, `rgba(99, 102, 241, 0.25) 0px 0px 28px 0px`

**Navigation (1 instance):**
- **Typography:** `16px / 24px`, weight 400
- **Color:** `rgb(255, 255, 255)`
- **Border:** `0px solid rgba(255, 255, 255, 0.16)`

**Section (8 instances):**
- **Typography:** `16px / 24px`, weight 400
- **Padding:** `112px 0px`, `64px 0px 0px`
- **Color:** `rgb(255, 255, 255)`

**List (25 instances):**
- **Typography:** `14px / 20px`, weight 400
- **Color:** `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.45)`

### Extraction Diagnostics

- Sampled 300 visible elements from 605 total DOM elements.
- Confidence: high.
- No extraction warnings.

**Conflict Notes:** Visual screenshots suggest body text operates in sentence case for readability, while Engineering CSS Evidence indicates `text-transform: uppercase` with `2.4px` letter-spacing for primary body styles. Implementation should scope uppercase treatment to navigational and label elements specifically.

## AI Visual Analysis

### Core Style

Dark-mode developer tool aesthetic with "cyber noir" sensibilities. The interface utilizes a near-black foundation (`#000` to `rgba(4,8,15,0.78)`) with high-contrast white typography and indigo accent glows (`rgb(99,102,241)`). Visual hierarchy relies on scale contrast between delicate uppercase tracking (Inter 300) and substantial serif display text (Georgia 72px). The aesthetic communicates technical precision through monospace code snippets interspersed with polished marketing copy.

### Texture and Atmosphere

Multi-layered glass morphism creates dimensional depth. Primary surfaces use `backdrop-filter: blur(24px)` with `rgba(4,8,15,0.78)` backgrounds. Subtle grid overlays (`linear-gradient` patterns at 48px intervals) provide technical texture without visual noise. Ethereal glows emanate from primary buttons using `box-shadow: 0 0 28px rgba(99,102,241,0.24)`. The atmosphere balances opacity levels: foreground elements at 78% opacity, borders at 8-16% white, and text ranging from 45% to 100% white for depth signaling.

### Layout and Composition

Centered single-column narrative flow with maximum content width constraints. Sticky navigation maintains context during scroll. Generous vertical section padding (`112px`) creates breathing room between content clusters. Three-column pricing grids use flexbox with equal distribution. Asymmetric two-column layouts for feature showcases (image left, content right). Interactive demo containers feature internal tab systems (Linear/Vercel/Stripe) with glass panel treatment.

### Interaction Direction

Expressive motion language prioritizes smoothness over speed. Micro-interactions utilize `0.15s` transitions with `cubic-bezier(0.4, 0, 0.2, 1)` easing. Hover states on buttons trigger indigo glow intensification and subtle brightness shifts (`brightness(1.1)`). Focus states employ `ring` shadows with indigo coloring. Accordion components animate height changes over `0.2s ease-out`. The toggle switch interaction (visible in pricing monthly/yearly) uses transform translations with elastic easing.

## Design System Rules

### Do

- Apply `text-transform: uppercase` with `2.4px` letter-spacing for navigation labels, eyebrow text, and CTAs.
- Use `border-radius: 9999px` for all buttons and interactive pills to maintain the soft, contemporary aesthetic.
- Implement glass-panel treatment for card surfaces: `background: rgba(4,8,15,0.78)` with `backdrop-filter: blur(24px)` and `border: 1px solid rgba(255,255,255,0.08)`.
- Apply indigo glow shadows (`0 0 28px rgba(99,102,241,0.24)`) to primary action buttons and active states.
- Use Georgia serif stack for H1 and H2 display text to create editorial contrast against Inter UI elements.
- Maintain minimum `0.15s` transition durations for all interactive state changes.

### Don't

- Use solid opaque backgrounds (`rgb(0,0,0)`) for content cards; always prefer translucent glass layers to maintain depth.
- Remove `backdrop-filter` support without fallback solid backgrounds, as glass morphism is central to the brand identity.
- Use `font-weight` below 300 for headings, as the thin weight is essential for the elegant, technical aesthetic.
- Apply sharp (`0px` or `1px`) border-radius to primary buttons; reserved only for large content panels and code blocks.
- Use pure white (`rgb(255,255,255)`) for secondary text; use `rgba(255,255,255,0.45)` or `rgba(255,255,255,0.6)` instead.

### Implementation Notes

- **CSS Variables:** System relies on `:root` variables including `--background: #000`, `--card: rgba(6,10,18,.78)`, `--primary: #4f46e5`, `--border: hsla(0,0%,100%,.16)`, and `--muted: hsla(0,0%,100%,.08)`.
- **Font Loading:** Inter is loaded via Next.js font optimization (`__Inter_f367f3`) with Arial fallback metrics. Georgia is used for display headings without webfont loading (system serif stack).
- **Glass Panel Class:** `.glass-panel` combines `border-radius: 1px`, `border: 1px solid rgba(255,255,255,0.08)`, `background: rgba(4,8,15,0.78)`, and `box-shadow: rgba(255,255,255,0.03) 0px 0px 0px 1px inset, rgba(255,255,255,0.03) 0px 0px 60px 0px`.
- **Motion Accessibility:** Respect `prefers-reduced-motion` by disabling the `2s` pulse animations and `0.3s` transform transitions when user preference is detected.
- **Grid Background:** Implement subtle grid using `linear-gradient(rgba(255,255,255,0.043) 1px, transparent 0px)` with `background-size: 48px 48px` masked with `linear-gradient` fadeouts at edges.

# Core Principles

1. Resolutely Reject (Negative Constraints):

- Prohibit the use of purple/blue gradients on white backgrounds

- Prohibit the use of common fonts (Inter, Roboto, Arial, system-ui)

- Prohibit the use of predictable hero-CTA-feature-review templates

- Prohibit the use of common geometric shapes or abstract spots

- Prohibit the use of images that look like image libraries or clichéd visual effects

## Performance Optimization

- Ensure fast page loading, 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 design requires 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. Remember: Claude has extraordinary creativity. Don't hold back, fully showcase the true work that can be created by Claude after breaking away from conventional thinking and fully immersing himself in a unique vision.