Capsule

Contexto Histórico

Estética Y2K revisitada: formas pílula (pill-shape), paleta pastel-pop e modularidade de cards. Popularizado por marcas DTC (Direct-to-Consumer) e portfolios de criadores no Instagram/TikTok.

Quando Usar

Reach for capsule components when your product needs to feel approachable without being childish. Social apps, dating platforms, music discovery tools, anything where the interaction model is casual and the audience skews younger. They work beautifully for tags, status indicators, user chips, and action buttons where you want tap targets that feel generous and forgiving. Avoid them in data-dense enterprise interfaces or anywhere precision and information density matter more than personality. The capsule earns its place when delight is a product requirement, not a nice-to-have.

Princípios de Design

• Generous padding is non-negotiable — the interior space defines the capsule's personality. Cramped content inside a pill shape looks like a manufacturing defect, not a design choice.
• Limit your radius to exactly half the component height. Anything less creates a rounded rectangle pretending to be a capsule. Commit to the form or don't use it.
• Pastel backgrounds with high-contrast foreground text. The softness lives in the container, not the content. Legibility is never sacrificed for aesthetic.
• Shadows should whisper, never shout. A 2-4px blur with 5-8% opacity maximum. If your capsule casts a visible shadow on scroll, you've gone too far.
• Maintain consistent capsule proportions across breakpoints — scale the entire component rather than stretching width while keeping height fixed. Capsules that become lozenges at wide viewports lose their charm entirely.

Especificações Técnicas

Relacionados

Flat & Soft UI

Neumorphism

Flat & Soft UI

Glassmorphism

Flat & Soft UI

Soft UI Evolution

Brutalismo

Brutalism

Futurista & Tech

3D & Hyperrealism