A design system where information reveals itself playfully through interaction
This design system makes one bold, distinctive choice that governs how information is presented and discovered. Rather than displaying everything at once, we use opacity-based hover-reveal interactions where secondary content begins nearly invisible and whispers into view when you show interest through hovering or focus.
This approach challenges the conventional wisdom that all interface content must be immediately and equally visible. Instead, it treats secondary information as optional enrichment rather than mandatory clutter. The result is interfaces that feel lighter, less overwhelming, and more intimate. Content reveals itself gradually, like secrets shared between friends.
Not every piece of information deserves equal attention. When everything shouts, nothing is heard. The whisper system creates hierarchy through selective visibility. Primary content is always fully visible because it is essential for understanding. Secondary content—supplementary details, contextual information, helpful hints—exists at fifteen percent opacity, creating visual texture without demanding attention.
This technique respects attention as a precious resource. Users decide what they want to explore more deeply by hovering over areas of interest. The interaction feels like leaning in to hear something said softly rather than being shouted at from all directions. It creates a more thoughtful, intentional relationship between interface and user.
The psychology behind this approach draws from several principles. First, curiosity drives engagement. When something is partially visible but not fully revealed, people want to discover what it says. Second, progressive disclosure reduces cognitive load. By hiding complexity until needed, we keep interfaces feeling simple while retaining depth for those who seek it. Third, rewards feel better when earned. The small act of hovering creates a micro-moment of discovery that feels satisfying.
The system uses specific opacity values to create different levels of visibility. Each level serves a specific purpose in the information hierarchy. Try hovering over the samples below to see them fully reveal.
The transition timing is set to 0.4 seconds with an easing function that feels organic. This timing is fast enough to feel responsive but slow enough that the reveal feels gentle rather than abrupt.
This card contains whispered secondary information. Move your cursor over it to discover what it says.
This text is always visible because it is essential information. Everyone needs to see this.
This information only appears when you hover over the card. It provides additional context without cluttering the initial view. This is perfect for technical specifications, extended descriptions, or helpful hints that not everyone needs.
The whisper effect is implemented using CSS opacity and transitions. Unlike display or visibility changes, opacity-based hiding keeps content in the layout, preventing jarring reflows when revealed. The content exists but fades into the background, creating texture without noise.
/* Basic whisper pattern */
.whisper {
opacity: 0.15;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.whisper:hover {
opacity: 1;
}
/* Card that reveals whispered content on hover */
.card-with-whispers .whisper-content {
opacity: 0.15;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-with-whispers:hover .whisper-content {
opacity: 1;
}The key is using a parent hover state to reveal child content. This creates a generous interaction area where any hover over the card triggers the reveal, rather than requiring precise cursor placement over the whispered text itself.
The color system uses muted, sophisticated neutrals with warm undertones. The palette evokes aged paper, twilight shadows, and intimate conversations. Accent colors are restrained, providing gentle emphasis without demanding attention. Everything supports the whispering aesthetic—subtle, refined, inviting closer inspection.
Buttons can have whispered labels that appear on hover, providing additional context without visual clutter in the default state.
Badges use muted colors that complement rather than compete with primary content.
Tables can use the whisper system for supplementary data columns. Hover over any row to reveal additional information.
| Primary Data | Always Visible | Whispered Detail | Optional Context |
|---|---|---|---|
| Essential info | Important value | Hover to see | More details here |
| Core content | Key metric | Secondary data | Supplementary info |
| Main point | Primary stat | Extra context | Technical detail |
This pattern works well for data tables where some columns contain important but not critical information. The whispered columns create visual hierarchy without removing data from the interface.
The whisper system works best when applied thoughtfully. Not every piece of secondary information should be hidden. The technique is most effective for content that fits these criteria. First, the information is helpful but not essential for all users. Second, revealing it does not cause significant layout shifts. Third, users can easily discover it through natural interaction patterns like hovering over relevant areas.
Consider using whispers for supplementary details that enrich understanding but are not required for basic comprehension. Technical specifications often fall into this category. A product listing might show the name, price, and main feature prominently, while whispering the detailed specifications, dimensions, and warranty information. Users interested in those details will naturally hover to read more, while others are not overwhelmed by information they do not need.
Contextual help represents another strong use case. Imagine a form where field labels are always visible, but explanatory text about what to enter or why the information is needed whispers into view on focus or hover. This keeps the form feeling light and approachable while providing guidance exactly when users need it.
Metadata and timestamps benefit from the whisper treatment. In a content feed, the main text and author might be prominent while the publication date, category tags, and edit history whisper into view on hover. This creates cleaner initial layouts while making supplementary information discoverable.
Avoid using whispers for critical information that every user must see. Error messages, required form validation feedback, and key calls to action should be fully visible. The whisper technique is about progressive disclosure of helpful supplementary content, not hiding necessary information.
Similarly, primary navigation should not whisper. Users expect navigation to be immediately obvious. While you might whisper secondary navigation items or additional options within a menu, the main pathways through your interface should be clear and prominent.
Touch interfaces require special consideration. Hover interactions do not translate to touch, so whispered content must have an alternative reveal method such as tapping or focus states. Consider whether the content should be fully visible on mobile devices where hover is not available.
Beyond the whisper system, several principles guide this design approach and contribute to its refined character. Understanding these principles helps you maintain consistency when extending the system.
Generous spacing: White space is not wasted space. The system uses ample padding and margins to create breathing room. When content is not crowded, each element can be appreciated individually. The generous spacing also provides larger hover targets for revealing whispered content.
Typographic sophistication: The pairing of Lora and Karla creates contrast between display and body text. Lora brings elegance and personality to headings with its refined serifs. Karla provides excellent readability for body text with clean, geometric forms. The combination feels both classic and contemporary.
Restrained color: The palette stays in the warm neutral family, avoiding bright or saturated colors. This restraint creates sophistication and ensures that when accent colors do appear, they carry weight. Color becomes meaningful rather than decorative.
Gentle interactions: All animations use slow timing and gentle easing. Nothing snaps or jerks. Transitions feel organic, as if content is naturally flowing into view rather than being mechanically revealed. This creates an interface that feels responsive yet calm.