neo
76c4c5b4fe
- 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
2.4 KiB
2.4 KiB
name, title, description, tags, source
| name | title | description | tags | source | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| psychology/trust-signals | Trust Signals & Credibility Indicators | Badges, certifications, security indicators, social proof placement. |
|
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
<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>
.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
<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>
.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
<section class="guarantee">
<div class="guarantee-badge">🛡️</div>
<h3>30-день гарантия возврата</h3>
<p>Если вам не понравится — вернём деньги без вопросов.</p>
<div class="trust-logos">
<img src="/vis...[truncated]