design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,115 @@
|
||||
---
|
||||
name: psychology/trust-signals
|
||||
title: Trust Signals & Credibility Indicators
|
||||
description: Badges, certifications, security indicators, social proof placement.
|
||||
tags: [psychology, trust, credibility, badges, security, cialdini]
|
||||
source: stripe.com, raycast.com, resend.com, baymard.com
|
||||
---
|
||||
|
||||
# Trust Signals & Credibility Indicators
|
||||
|
||||
## Пирамида доверия
|
||||
|
||||
```
|
||||
[Security Certifications] ← PCI DSS, GDPR, SOC 2
|
||||
↓
|
||||
[Brand Logos] ← Known clients, partners
|
||||
↓
|
||||
[Statistics] ← Numbers, users, uptime
|
||||
↓
|
||||
[Testimonials] ← Reviews, case studies
|
||||
↓
|
||||
[Guarantees] ← Money-back, free trial
|
||||
```
|
||||
|
||||
## 1. Security Badges
|
||||
|
||||
```html
|
||||
<div class="trust-badges">
|
||||
<div class="badge">
|
||||
<svg width="24" height="24">🔒</svg>
|
||||
<span>SSL Encrypted</span>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<svg width="24" height="24">🛡️</svg>
|
||||
<span>GDPR Compliant</span>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<svg width="24" height="24">✓</svg>
|
||||
<span>SOC 2 Certified</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.trust-badges {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
```
|
||||
|
||||
## 2. Uptime/Status
|
||||
|
||||
```html
|
||||
<div class="status-bar">
|
||||
<div class="status-indicator online">
|
||||
<span class="dot"></span>
|
||||
<span>99.9% uptime</span>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
<span>⚡ Fastest in Russia</span>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
<span>🌍 Moscow, SPb, Vladivostok</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.status-bar {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Guarantee Section
|
||||
|
||||
```html
|
||||
<section class="guarantee">
|
||||
<div class="guarantee-badge">🛡️</div>
|
||||
<h3>30-день гарантия возврата</h3>
|
||||
<p>Если вам не понравится — вернём деньги без вопросов.</p>
|
||||
<div class="trust-logos">
|
||||
<img src="/vis...[truncated]
|
||||
Reference in new issue
Block a user