add new designs

2026-04-01 15:58:51 +03:00
parent 3976d28923
commit ed3c8649c3
53 changed files with 9390 additions and 2 deletions
--- a/design-md/elevenlabs/DESIGN.md
+++ b/design-md/elevenlabs/DESIGN.md
@@ -0,0 +1,265 @@
+# Design System: ElevenLabs
+
+## 1. Visual Theme & Atmosphere
+
+ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
+
+The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
+
+What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
+
+**Key Characteristics:**
+- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
+- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
+- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
+- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
+- Pill buttons (9999px) with warm stone-tinted backgrounds
+- WaldenburgFH bold uppercase for specific CTA labels
+- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
+- Geist Mono / ui-monospace for code snippets
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
+- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
+- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
+- **Black** (`#000000`): Primary text, headings, dark buttons
+
+### Neutral Scale
+- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
+- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
+- **Near White** (`#f6f6f6`): Alternate light surface
+
+### Interactive
+- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
+- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
+- **Border Light** (`#e5e5e5`): Explicit borders
+- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
+
+### Shadows
+- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
+- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
+- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
+- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
+- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
+- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
+- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
+- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
+- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
+- **Body / UI**: `Inter`, fallback: `Inter Fallback`
+- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
+| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
+| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
+| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
+| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
+| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
+| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
+| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
+| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
+| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
+| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
+| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
+
+### Principles
+- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
+- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
+- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
+- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Black Pill**
+- Background: `#000000`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 9999px (full pill)
+- Use: Primary CTA
+
+**White Pill (Shadow-bordered)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 9999px
+- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
+- Use: Secondary CTA on white
+
+**Warm Stone Pill**
+- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
+- Text: `#000000`
+- Padding: 12px 20px 12px 14px (asymmetric)
+- Radius: 30px
+- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
+- Use: Featured CTA, hero action — the signature warm button
+
+**Uppercase Waldenburg Button**
+- Font: WaldenburgFH 14px weight 700
+- Text-transform: uppercase
+- Letter-spacing: 0.7px
+- Use: Specific bold CTA labels
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid #e5e5e5` or shadow-as-border
+- Radius: 16px–24px
+- Shadow: multi-layer stack (inset + outline + elevation)
+- Content: product screenshots, code examples, audio waveform previews
+
+### Inputs & Forms
+- Textarea: padding 12px 20px, transparent text at default
+- Select: white background, standard styling
+- Radio: standard with tw-ring focus
+- Focus: `var(--tw-ring-offset-shadow)` ring system
+
+### Navigation
+- Clean white sticky header
+- Inter 15px weight 500 for nav links
+- Pill CTAs right-aligned (black primary, white secondary)
+- Mobile: hamburger collapse at 1024px
+
+### Image Treatment
+- Product screenshots and audio waveform visualizations
+- Warm gradient backgrounds in feature sections
+- 20px–24px radius on image containers
+- Full-width sections alternating white and light gray
+
+### Distinctive Components
+
+**Audio Waveform Sections**
+- Colorful gradient backgrounds showcasing voice AI capabilities
+- Warm amber, blue, and green gradients behind product demos
+- Screenshots of the ElevenLabs product interface
+
+**Warm Stone CTA Block**
+- `rgba(245,242,239,0.8)` background with warm shadow
+- Asymmetric padding (more right padding)
+- Creates a physical, tactile quality unique to ElevenLabs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
+
+### Grid & Container
+- Centered content with generous max-width
+- Single-column hero, expanding to feature grids
+- Full-width gradient sections for product showcases
+- White card grids on light gray backgrounds
+
+### Whitespace Philosophy
+- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
+- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
+- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
+
+### Border Radius Scale
+- Minimal (2px): Small links, inline elements
+- Subtle (4px): Nav items, tab panels, tags
+- Standard (8px): Small containers
+- Comfortable (10px–12px): Medium cards, dropdowns
+- Card (16px): Standard cards, articles
+- Large (18px–20px): Featured cards, code panels
+- Section (24px): Large panels, section containers
+- Warm Button (30px): Warm stone CTA
+- Pill (9999px): Primary buttons, navigation pills
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
+| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
+| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
+| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
+| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
+
+**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
+- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
+- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
+- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
+- Use 9999px radius for primary buttons — pill shape is standard
+- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
+- Keep the page predominantly white with subtle gray section differentiation
+- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
+
+### Don't
+- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
+- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
+- Don't use cool gray borders — the system is warm-tinted throughout
+- Don't skip the inset shadow component — half-pixel inset borders define edges
+- Don't apply negative letter-spacing to body text — Inter uses positive tracking
+- Don't use sharp corners (<8px) on cards — the generous radius is structural
+- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
+- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <1024px | Single column, hamburger nav, stacked sections |
+| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
+
+### Touch Targets
+- Pill buttons with generous padding (12px–20px)
+- Navigation links at 15px with adequate spacing
+- Select dropdowns maintain comfortable sizing
+
+### Collapsing Strategy
+- Navigation: horizontal → hamburger at 1024px
+- Feature grids: multi-column → stacked
+- Hero: maintains centered layout, font scales proportionally
+- Gradient sections: full-width maintained, content stacks
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots scale responsively
+- Gradient backgrounds simplify on mobile
+- Audio waveform previews maintain aspect ratio
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
+- Text: Black (`#000000`)
+- Secondary text: Dark Gray (`#4e4e4e`)
+- Muted text: Warm Gray (`#777169`)
+- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
+- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
+
+### Example Component Prompts
+- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
+- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
+- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
+- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
+- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
+
+### Iteration Guide
+1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
+2. Waldenburg 300 for headings — never bold, the lightness is the identity
+3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
+4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
+5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
+6. Pill (9999px) for buttons, generous radius (16px–24px) for cards