Initial commit — Singular Particular Space v1
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,887 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Naughty Little Whispers | Design System Documentation</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Karla:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
NAUGHTY LITTLE WHISPERS DESIGN SYSTEM
|
||||
|
||||
BOLD DISTINCTIVE CHOICE: Hover-Reveal Information Architecture
|
||||
Secondary content exists at 0.15 opacity by default, becoming fully
|
||||
visible only on hover. This creates a "whispering" interaction where
|
||||
information reveals itself playfully when you show interest.
|
||||
|
||||
The technique challenges conventional always-visible UI by treating
|
||||
secondary information as optional enrichment rather than mandatory
|
||||
clutter. Users discover deeper layers of content through curiosity
|
||||
and interaction, creating a more intimate, exploratory experience.
|
||||
|
||||
This approach works because it respects attention as a precious
|
||||
resource. Not everything needs to shout. Some things can whisper.
|
||||
============================================ */
|
||||
|
||||
/* ===== CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== DESIGN TOKENS ===== */
|
||||
:root {
|
||||
/* --- COLOR PALETTE ---
|
||||
Muted, sophisticated neutrals with subtle warm undertones
|
||||
Inspired by aged paper, twilight shadows, and whispered secrets */
|
||||
|
||||
/* Primary neutrals */
|
||||
--paper-white: #fafaf8;
|
||||
--cream: #f5f4f0;
|
||||
--warm-gray-100: #e8e6e0;
|
||||
--warm-gray-200: #d1cfc8;
|
||||
--warm-gray-400: #9c9a91;
|
||||
--warm-gray-600: #6b6960;
|
||||
--warm-gray-800: #3d3c38;
|
||||
--ink: #2a2926;
|
||||
|
||||
/* Accent colors - restrained and sophisticated */
|
||||
--blush: #d4a5a5; /* Gentle pink */
|
||||
--sage: #a8b5a0; /* Muted green */
|
||||
--dusk: #8b8fa8; /* Soft purple */
|
||||
--amber: #c4a572; /* Warm gold */
|
||||
|
||||
/* --- BACKGROUND SYSTEM --- */
|
||||
--bg-page: #fafaf8;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-subtle: rgba(250, 250, 248, 0.6);
|
||||
--bg-whisper: rgba(250, 250, 248, 0.3);
|
||||
|
||||
/* --- OPACITY LAYERS ---
|
||||
The whisper system uses specific opacity values */
|
||||
--opacity-hidden: 0;
|
||||
--opacity-whisper: 0.15; /* Nearly invisible, creates intrigue */
|
||||
--opacity-hint: 0.35; /* Barely there, suggests presence */
|
||||
--opacity-soft: 0.6; /* Gently visible */
|
||||
--opacity-full: 1; /* Fully revealed */
|
||||
|
||||
/* --- BORDER SYSTEM ---
|
||||
Delicate, almost imperceptible borders */
|
||||
--border-whisper: 1px solid rgba(61, 60, 56, 0.08);
|
||||
--border-soft: 1px solid rgba(61, 60, 56, 0.15);
|
||||
--border-visible: 1px solid rgba(61, 60, 56, 0.25);
|
||||
--border-emphasis: 2px solid rgba(61, 60, 56, 0.3);
|
||||
|
||||
/* Border radius for gentle softening */
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
|
||||
/* --- SPACING SYSTEM ---
|
||||
Generous breathing room, respecting negative space */
|
||||
--space-2xs: 0.25rem; /* 4px */
|
||||
--space-xs: 0.5rem; /* 8px */
|
||||
--space-sm: 0.75rem; /* 12px */
|
||||
--space-md: 1rem; /* 16px */
|
||||
--space-lg: 1.5rem; /* 24px */
|
||||
--space-xl: 2rem; /* 32px */
|
||||
--space-2xl: 3rem; /* 48px */
|
||||
--space-3xl: 4rem; /* 64px */
|
||||
|
||||
/* --- TYPOGRAPHY SYSTEM ---
|
||||
Lora: Elegant serif for display, adds sophistication
|
||||
Karla: Clean sans-serif for body, highly legible */
|
||||
--font-display: 'Lora', Georgia, serif;
|
||||
--font-body: 'Karla', -apple-system, system-ui, sans-serif;
|
||||
|
||||
/* Type scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
|
||||
/* --- TEXT COLORS --- */
|
||||
--text-primary: #2a2926;
|
||||
--text-secondary: #6b6960;
|
||||
--text-tertiary: #9c9a91;
|
||||
--text-inverse: #fafaf8;
|
||||
|
||||
/* --- TRANSITION TIMING ---
|
||||
Smooth, gentle transitions that feel organic */
|
||||
--timing-whisper: 0.4s;
|
||||
--timing-gentle: 0.3s;
|
||||
--timing-quick: 0.2s;
|
||||
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ===== BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
padding: var(--space-lg);
|
||||
/* Smooth scrolling for gentle navigation */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ===== LAYOUT ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
||||
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
||||
|
||||
/* ===== TYPOGRAPHY SYSTEM ===== */
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-5xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--space-lg);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Emphasis styling */
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: var(--blush);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
color: var(--sage);
|
||||
}
|
||||
|
||||
/* Code styling */
|
||||
code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
background: var(--cream);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.6;
|
||||
background: var(--cream);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-md);
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--amber);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== DISTINCTIVE CHOICE: WHISPER SYSTEM =====
|
||||
|
||||
The whisper system is the defining characteristic of this design.
|
||||
Secondary information starts nearly invisible (opacity: 0.15) and
|
||||
reveals itself on hover. This creates several benefits:
|
||||
|
||||
1. Reduced visual clutter - only essential information is prominent
|
||||
2. Exploration and discovery - users find deeper content through curiosity
|
||||
3. Attention respect - not everything demands immediate attention
|
||||
4. Playful interaction - hovering feels like sharing secrets
|
||||
|
||||
The key is using opacity rather than display or visibility. Content
|
||||
exists in the layout at all times, preventing reflow, but fades into
|
||||
the background until attention is given. The transition timing is
|
||||
crucial - fast enough to feel responsive, slow enough to feel gentle. */
|
||||
|
||||
.whisper {
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.whisper:hover,
|
||||
.whisper:focus {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* Hint level - slightly more visible for important secondary content */
|
||||
.hint {
|
||||
opacity: var(--opacity-hint);
|
||||
transition: opacity var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.hint:hover,
|
||||
.hint:focus {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* ===== CARD COMPONENTS ===== */
|
||||
.card {
|
||||
background: var(--bg-surface);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
transition: border-color var(--timing-gentle) var(--easing),
|
||||
box-shadow var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: rgba(61, 60, 56, 0.3);
|
||||
box-shadow: 0 2px 12px rgba(61, 60, 56, 0.08);
|
||||
}
|
||||
|
||||
.card-whisper {
|
||||
background: var(--bg-subtle);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: 0 2px 8px rgba(61, 60, 56, 0.06);
|
||||
}
|
||||
|
||||
.card-elevated:hover {
|
||||
box-shadow: 0 4px 16px rgba(61, 60, 56, 0.1);
|
||||
}
|
||||
|
||||
/* Card with whisper content - a common pattern */
|
||||
.card-with-whispers {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-with-whispers .whisper-content {
|
||||
margin-top: var(--space-md);
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.card-with-whispers:hover .whisper-content {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* Accent border variations */
|
||||
.card-accent-blush {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--blush);
|
||||
}
|
||||
|
||||
.card-accent-sage {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--sage);
|
||||
}
|
||||
|
||||
.card-accent-dusk {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--dusk);
|
||||
}
|
||||
|
||||
/* ===== BUTTON SYSTEM ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border: var(--border-visible);
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--text-primary);
|
||||
border-color: var(--text-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--warm-gray-800);
|
||||
border-color: var(--warm-gray-800);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(42, 41, 38, 0.15);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border-color: var(--warm-gray-400);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--cream);
|
||||
border-color: var(--warm-gray-600);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Button with whisper label - reveals on hover */
|
||||
.btn-with-whisper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-with-whisper .btn-whisper-label {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-0.5rem);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
opacity: var(--opacity-hidden);
|
||||
transition: opacity var(--timing-gentle) var(--easing),
|
||||
transform var(--timing-gentle) var(--easing);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-with-whisper:hover .btn-whisper-label {
|
||||
opacity: var(--opacity-full);
|
||||
transform: translateX(-50%) translateY(-0.75rem);
|
||||
}
|
||||
|
||||
/* ===== BADGE SYSTEM ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
padding: var(--space-2xs) var(--space-sm);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge-blush {
|
||||
background: rgba(212, 165, 165, 0.15);
|
||||
border-color: var(--blush);
|
||||
color: var(--blush);
|
||||
}
|
||||
|
||||
.badge-sage {
|
||||
background: rgba(168, 181, 160, 0.15);
|
||||
border-color: var(--sage);
|
||||
color: var(--sage);
|
||||
}
|
||||
|
||||
.badge-dusk {
|
||||
background: rgba(139, 143, 168, 0.15);
|
||||
border-color: var(--dusk);
|
||||
color: var(--dusk);
|
||||
}
|
||||
|
||||
/* ===== TABLE SYSTEM ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-emphasis);
|
||||
border-bottom-color: var(--amber);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-whisper);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Whisper columns in tables */
|
||||
.whisper-col {
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
tr:hover .whisper-col {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* ===== ALERT SYSTEM ===== */
|
||||
.alert {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-left: var(--border-emphasis);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.alert-whisper {
|
||||
border-color: var(--warm-gray-400);
|
||||
}
|
||||
|
||||
.alert-blush {
|
||||
border-color: var(--blush);
|
||||
background: rgba(212, 165, 165, 0.08);
|
||||
}
|
||||
|
||||
.alert-sage {
|
||||
border-color: var(--sage);
|
||||
background: rgba(168, 181, 160, 0.08);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
.mt-sm { margin-top: var(--space-sm); }
|
||||
.mt-md { margin-top: var(--space-md); }
|
||||
.mt-lg { margin-top: var(--space-lg); }
|
||||
.mb-md { margin-bottom: var(--space-md); }
|
||||
.mb-lg { margin-bottom: var(--space-lg); }
|
||||
|
||||
/* ===== HORIZONTAL DIVIDER ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
var(--warm-gray-200),
|
||||
transparent);
|
||||
margin: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
/* ===== DOCUMENTATION-SPECIFIC STYLES ===== */
|
||||
.opacity-demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.opacity-sample {
|
||||
flex: 1;
|
||||
padding: var(--space-lg);
|
||||
background: var(--bg-surface);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.color-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-xs);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.interactive-demo {
|
||||
background: var(--cream);
|
||||
padding: var(--space-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-lg) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
max-width: 400px;
|
||||
margin: var(--space-lg) auto 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-lg">
|
||||
<h1>Naughty Little Whispers</h1>
|
||||
<p style="font-size: var(--text-xl); color: var(--text-secondary);">
|
||||
A design system where information reveals itself playfully through interaction
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- DISTINCTIVE CHOICE EXPLANATION -->
|
||||
<section class="mb-lg">
|
||||
<div class="card-elevated">
|
||||
<h2>Distinctive Choice: Hover-Reveal Information Architecture</h2>
|
||||
|
||||
<p>This design system makes one bold, distinctive choice that governs how information is presented and discovered. Rather than displaying everything at once, we use <strong>opacity-based hover-reveal interactions</strong> where secondary content begins nearly invisible and whispers into view when you show interest through hovering or focus.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h3 class="mt-lg">The Philosophy of Whispering</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>The psychology behind this approach draws from several principles. First, <em>curiosity drives engagement</em>. When something is partially visible but not fully revealed, people want to discover what it says. Second, <em>progressive disclosure reduces cognitive load</em>. By hiding complexity until needed, we keep interfaces feeling simple while retaining depth for those who seek it. Third, <em>rewards feel better when earned</em>. The small act of hovering creates a micro-moment of discovery that feels satisfying.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHISPER SYSTEM DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>The Whisper System in Action</h2>
|
||||
|
||||
<div class="card">
|
||||
<h3>Opacity Levels</h3>
|
||||
<p class="mb-lg">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.</p>
|
||||
|
||||
<div class="opacity-demo">
|
||||
<div class="opacity-sample whisper">Whisper (0.15)</div>
|
||||
<div class="opacity-sample hint">Hint (0.35)</div>
|
||||
<div class="opacity-sample" style="opacity: 0.6;">Soft (0.6)</div>
|
||||
<div class="opacity-sample" style="opacity: 1;">Full (1.0)</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size: var(--text-sm); color: var(--text-tertiary);" class="mt-md">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-demo mt-lg">
|
||||
<h3 style="color: var(--text-secondary);">Try It: Hover to Reveal</h3>
|
||||
<p class="mb-md text-secondary">This card contains whispered secondary information. Move your cursor over it to discover what it says.</p>
|
||||
|
||||
<div class="card-with-whispers demo-card">
|
||||
<h4>Primary Content</h4>
|
||||
<p>This text is always visible because it is essential information. Everyone needs to see this.</p>
|
||||
|
||||
<div class="whisper-content">
|
||||
<hr style="margin: var(--space-md) 0;">
|
||||
<h5>Secondary Details</h5>
|
||||
<p style="font-size: var(--text-sm);">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg card-accent-blush">
|
||||
<h3>Implementation Approach</h3>
|
||||
<p class="mb-md">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.</p>
|
||||
|
||||
<pre><code>/* 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;
|
||||
}</code></pre>
|
||||
|
||||
<p class="mt-md">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.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COLOR SYSTEM -->
|
||||
<section class="mb-lg">
|
||||
<h2>Color Palette</h2>
|
||||
|
||||
<div class="card">
|
||||
<p class="mb-md">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.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-4 mt-lg">
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #fafaf8;">
|
||||
<span class="color-code">#fafaf8</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Paper White</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #d4a5a5;">
|
||||
<span class="color-code">#d4a5a5</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Blush</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #a8b5a0;">
|
||||
<span class="color-code">#a8b5a0</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Sage</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #8b8fa8;">
|
||||
<span class="color-code">#8b8fa8</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Dusk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #c4a572;">
|
||||
<span class="color-code">#c4a572</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Amber</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #9c9a91;">
|
||||
<span class="color-code">#9c9a91</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Warm Gray 400</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #6b6960;">
|
||||
<span class="color-code">#6b6960</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Warm Gray 600</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #2a2926;">
|
||||
<span class="color-code">#2a2926</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-inverse);">Ink</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COMPONENT EXAMPLES -->
|
||||
<section class="mb-lg">
|
||||
<h2>Component Library</h2>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-accent-sage">
|
||||
<h3>Interactive Elements</h3>
|
||||
<div class="btn-with-whisper">
|
||||
<button class="btn btn-primary">Primary Action</button>
|
||||
<span class="btn-whisper-label">Hover to see me whisper</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary mt-md">Secondary Action</button>
|
||||
<p class="mt-lg text-secondary" style="font-size: var(--text-sm);">
|
||||
Buttons can have whispered labels that appear on hover, providing additional context without visual clutter in the default state.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card card-accent-dusk">
|
||||
<h3>Status Indicators</h3>
|
||||
<span class="badge badge-blush">Subtle</span>
|
||||
<span class="badge badge-sage">Gentle</span>
|
||||
<span class="badge badge-dusk">Whispered</span>
|
||||
<p class="mt-lg text-secondary" style="font-size: var(--text-sm);">
|
||||
Badges use muted colors that complement rather than compete with primary content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg">
|
||||
<h3>Tables with Whispered Columns</h3>
|
||||
<p class="mb-md">Tables can use the whisper system for supplementary data columns. Hover over any row to reveal additional information.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Primary Data</th>
|
||||
<th>Always Visible</th>
|
||||
<th class="whisper-col">Whispered Detail</th>
|
||||
<th class="whisper-col">Optional Context</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Essential info</td>
|
||||
<td>Important value</td>
|
||||
<td class="whisper-col">Hover to see</td>
|
||||
<td class="whisper-col">More details here</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Core content</td>
|
||||
<td>Key metric</td>
|
||||
<td class="whisper-col">Secondary data</td>
|
||||
<td class="whisper-col">Supplementary info</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Main point</td>
|
||||
<td>Primary stat</td>
|
||||
<td class="whisper-col">Extra context</td>
|
||||
<td class="whisper-col">Technical detail</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p style="font-size: var(--text-sm); color: var(--text-tertiary);">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-lg">
|
||||
<h2>Implementation Guide</h2>
|
||||
|
||||
<div class="card-elevated">
|
||||
<h3>When to Use Whispers</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h4 class="mt-lg">Ideal Use Cases</h4>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h4 class="mt-lg">When Not to Whisper</h4>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg card-accent-blush">
|
||||
<h3>Design Principles</h3>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p><strong>Generous spacing:</strong> 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.</p>
|
||||
|
||||
<p><strong>Typographic sophistication:</strong> 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.</p>
|
||||
|
||||
<p><strong>Restrained color:</strong> 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.</p>
|
||||
|
||||
<p><strong>Gentle interactions:</strong> 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.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ALERTS DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>Alert Components</h2>
|
||||
|
||||
<div class="alert-whisper">
|
||||
<strong>Notice:</strong> Standard alerts use gentle borders and muted backgrounds, drawing attention without alarm. They fit naturally into the restrained aesthetic.
|
||||
</div>
|
||||
|
||||
<div class="alert-blush mt-md">
|
||||
<strong>Important:</strong> When something requires more attention, accent-colored borders provide emphasis while maintaining the system's soft, approachable character.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-elevated text-center" style="padding: var(--space-2xl);">
|
||||
<h2>Naughty Little Whispers</h2>
|
||||
<p class="mt-md text-secondary">
|
||||
Where information reveals itself through gentle curiosity
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user