2a703a8969
New mood icon styles: - Weather (☀️ → ⛈️) - Garden (🌸 → 🥀) - Hearts (💖 → 💔) - Cosmic (⭐ → 🕳️) Widget improvements: - Small vote widget: 3-over-2 grid layout - Medium vote widget: single horizontal row - Redesigned voted stats view with checkmark badge - Fixed text truncation on non-subscriber view - Added comprehensive previews for all widget types Bug fix: - Voting header now updates when mood image style changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1029 lines
45 KiB
HTML
1029 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Feels — Mood Icon System Concepts</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=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #FAFAF8;
|
|
--bg-card: #FFFFFF;
|
|
--text: #1A1A18;
|
|
--text-secondary: #6B6B66;
|
|
--text-muted: #9C9C96;
|
|
--border: #E8E8E4;
|
|
--accent: #E85D04;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
padding: 60px 40px;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 80px;
|
|
padding-bottom: 40px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.doc-label {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
header p {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
gap: 32px;
|
|
margin-top: 32px;
|
|
padding: 20px 24px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.legend-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.legend-dot.horrible { background: #742A2A; }
|
|
.legend-dot.bad { background: #9B4D4D; }
|
|
.legend-dot.average { background: #888888; }
|
|
.legend-dot.good { background: #6B8E6B; }
|
|
.legend-dot.great { background: #2D5A3D; }
|
|
.legend-dot.missing { background: #D0D0CC; border: 1px dashed var(--text-muted); }
|
|
.legend-dot.placeholder { background: transparent; border: 1px dashed var(--text-muted); }
|
|
|
|
.concepts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
.concept-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.concept-card:hover {
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.concept-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 40px;
|
|
padding: 32px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.concept-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.concept-number {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.concept-name {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 1.75rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.concept-theme {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.concept-use-case {
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.use-case-label {
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.use-case-text {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.concept-icons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.icons-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.icon-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 8px;
|
|
background: var(--bg);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon-cell:first-child {
|
|
background: #FDF2F2;
|
|
}
|
|
|
|
.icon-cell:nth-child(2) {
|
|
background: #FEF6F2;
|
|
}
|
|
|
|
.icon-cell:nth-child(3) {
|
|
background: #F8F8F6;
|
|
}
|
|
|
|
.icon-cell:nth-child(4) {
|
|
background: #F2F7F2;
|
|
}
|
|
|
|
.icon-cell:nth-child(5) {
|
|
background: #EDF5EF;
|
|
}
|
|
|
|
.icon-cell:nth-child(6) {
|
|
background: #F4F4F2;
|
|
}
|
|
|
|
.icon-cell:nth-child(7) {
|
|
background: #F4F4F2;
|
|
}
|
|
|
|
.icon-emoji {
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.icon-label {
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.concept-footer {
|
|
padding: 24px 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.color-palette {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.color-swatch {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.sf-symbols {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.sf-badge {
|
|
background: #007AFF;
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.notes {
|
|
margin-top: 80px;
|
|
padding: 32px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.notes h2 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.notes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 32px;
|
|
}
|
|
|
|
.note-section h3 {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.note-section ul {
|
|
list-style: none;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.note-section li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.note-section li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
body {
|
|
padding: 32px 20px;
|
|
}
|
|
|
|
.concept-header {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.icons-row {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.legend {
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.notes-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div class="doc-label">Design Reference Document</div>
|
|
<h1>Mood Icon Systems</h1>
|
|
<p>Exploration of 10 thematic icon systems for the Feels mood tracking app. Each concept provides visual metaphors for the emotional spectrum from horrible to great.</p>
|
|
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-dot horrible"></div>
|
|
<span>Horrible</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot bad"></div>
|
|
<span>Bad</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot average"></div>
|
|
<span>Average</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot good"></div>
|
|
<span>Good</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot great"></div>
|
|
<span>Great</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot missing"></div>
|
|
<span>Missing</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-dot placeholder"></div>
|
|
<span>Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="concepts">
|
|
|
|
<!-- Concept 1: Weather -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">01</div>
|
|
<h2 class="concept-name">Weather</h2>
|
|
<p class="concept-theme">Atmospheric conditions as emotional states. Universal metaphor that translates across cultures — everyone understands a sunny day vs. a storm.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">General audiences, wellness apps, users who prefer indirect emotional expression</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⛈️</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌧️</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">☁️</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⛅</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">☀️</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌫️</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">◌</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #1E3A5F"></div>
|
|
<div class="color-swatch" style="background: #4A6FA5"></div>
|
|
<div class="color-swatch" style="background: #94A3B8"></div>
|
|
<div class="color-swatch" style="background: #87CEEB"></div>
|
|
<div class="color-swatch" style="background: #FFD93D"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
cloud.bolt, cloud.rain, cloud, cloud.sun, sun.max
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 2: Plants -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">02</div>
|
|
<h2 class="concept-name">Garden</h2>
|
|
<p class="concept-theme">Plant life cycle from wilted to flourishing. Organic, nurturing metaphor that frames emotional health as something you cultivate over time.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Mindfulness-focused users, nature lovers, those who view wellness as growth</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🥀</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🍂</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌱</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌿</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌸</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🕳️</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⚬</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #5D4E37"></div>
|
|
<div class="color-swatch" style="background: #8B7355"></div>
|
|
<div class="color-swatch" style="background: #90A955"></div>
|
|
<div class="color-swatch" style="background: #4F772D"></div>
|
|
<div class="color-swatch" style="background: #FFB7C5"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
leaf.fill, leaf, seedling, tree, flower
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 3: Hearts -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">03</div>
|
|
<h2 class="concept-name">Hearts</h2>
|
|
<p class="concept-theme">Heart states from broken to overflowing. Direct emotional symbolism that feels personal and intimate. The universal symbol of feeling.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Emotionally expressive users, relationship-focused tracking, romantic aesthetic preference</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">💔</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🩶</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🤍</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🩷</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">💖</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🖤</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">♡</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #8B0000"></div>
|
|
<div class="color-swatch" style="background: #A0A0A0"></div>
|
|
<div class="color-swatch" style="background: #F5F5F5"></div>
|
|
<div class="color-swatch" style="background: #FFB6C1"></div>
|
|
<div class="color-swatch" style="background: #FF69B4"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
heart.slash, heart, heart.fill, heart.circle.fill, heart.fill (sparkling)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 4: Fire/Energy -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">04</div>
|
|
<h2 class="concept-name">Energy</h2>
|
|
<p class="concept-theme">Fire and energy levels from extinguished to blazing. Dynamic, active metaphor that frames mood as vitality and inner power.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Active/athletic users, those tracking energy alongside mood, motivational framing</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🪨</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">💨</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🕯️</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🔥</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⚡</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⬛</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">◇</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #2C2C2C"></div>
|
|
<div class="color-swatch" style="background: #6B6B6B"></div>
|
|
<div class="color-swatch" style="background: #FFA500"></div>
|
|
<div class="color-swatch" style="background: #FF4500"></div>
|
|
<div class="color-swatch" style="background: #FFD700"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
circle.slash, wind, flame, flame.fill, bolt.fill
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 5: Ocean -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">05</div>
|
|
<h2 class="concept-name">Ocean</h2>
|
|
<p class="concept-theme">Water states from turbulent depths to calm, sparkling surface. Evokes the ebb and flow of emotions with aquatic serenity.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Meditation practitioners, beach/ocean lovers, calm aesthetic preference</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌊</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌀</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">💧</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🐚</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🐬</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🫧</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">○</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #1A3A5C"></div>
|
|
<div class="color-swatch" style="background: #2E6B8A"></div>
|
|
<div class="color-swatch" style="background: #5BA3C6"></div>
|
|
<div class="color-swatch" style="background: #87CEEB"></div>
|
|
<div class="color-swatch" style="background: #E0F4FF"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
water.waves, tornado, drop, fish, sparkles
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 6: Space -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">06</div>
|
|
<h2 class="concept-name">Cosmic</h2>
|
|
<p class="concept-theme">Celestial objects from black holes to radiant stars. Vast, awe-inspiring metaphor that puts daily emotions in a grander perspective.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Astronomy enthusiasts, philosophical users, dark mode lovers, night owls</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🕳️</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌑</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌓</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🌕</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⭐</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">✧</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">·</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #0D0D1A"></div>
|
|
<div class="color-swatch" style="background: #2D2D44"></div>
|
|
<div class="color-swatch" style="background: #6B6B8D"></div>
|
|
<div class="color-swatch" style="background: #C9C9E0"></div>
|
|
<div class="color-swatch" style="background: #FFE066"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
circle.fill (black), moon, moon.lefthalf.filled, moon.fill, star.fill
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 7: Animals -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">07</div>
|
|
<h2 class="concept-name">Spirit Animals</h2>
|
|
<p class="concept-theme">Animal archetypes representing different emotional states. Playful approach that externalizes feelings as creature companions.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Playful users, animal lovers, those who prefer indirect expression, younger demographics</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🦔</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🐌</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🐢</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🦋</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🦅</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🐾</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🥚</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #8B7355"></div>
|
|
<div class="color-swatch" style="background: #CD853F"></div>
|
|
<div class="color-swatch" style="background: #9ACD32"></div>
|
|
<div class="color-swatch" style="background: #87CEEB"></div>
|
|
<div class="color-swatch" style="background: #4169E1"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
tortoise.fill, hare, bird, bird.fill, pawprint.fill
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 8: Beverages -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">08</div>
|
|
<h2 class="concept-name">Beverages</h2>
|
|
<p class="concept-theme">Drink states from bitter to sweet celebration. Relatable daily ritual metaphor — mood as the drink you need or deserve right now.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Coffee/tea lovers, foodies, casual/humorous tone preference</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🧊</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🫖</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">☕</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🧋</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🍾</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🫗</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🥛</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #E0E8F0"></div>
|
|
<div class="color-swatch" style="background: #C9A66B"></div>
|
|
<div class="color-swatch" style="background: #6F4E37"></div>
|
|
<div class="color-swatch" style="background: #90EE90"></div>
|
|
<div class="color-swatch" style="background: #FFD700"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
cup.and.saucer, mug, takeoutbag.and.cup.and.straw, wineglass
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 9: Music -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">09</div>
|
|
<h2 class="concept-name">Soundtrack</h2>
|
|
<p class="concept-theme">Musical expressions from silence to symphony. Mood as the music playing in your mind — what genre is your day?</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Music lovers, creative/artistic users, those who connect emotion to sound</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🔇</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🔈</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🎵</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🎶</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">🎸</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⏸️</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">⏺️</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #2C2C2C"></div>
|
|
<div class="color-swatch" style="background: #666666"></div>
|
|
<div class="color-swatch" style="background: #9966CC"></div>
|
|
<div class="color-swatch" style="background: #FF6B9D"></div>
|
|
<div class="color-swatch" style="background: #00D4FF"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
speaker.slash, speaker.wave.1, music.note, music.note.list, guitars
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Concept 10: Abstract Shapes -->
|
|
<div class="concept-card">
|
|
<div class="concept-header">
|
|
<div class="concept-meta">
|
|
<div class="concept-number">10</div>
|
|
<h2 class="concept-name">Abstract</h2>
|
|
<p class="concept-theme">Geometric shapes representing emotional complexity. Minimal, non-figurative approach for those who prefer understated, design-forward aesthetics.</p>
|
|
<div class="concept-use-case">
|
|
<div class="use-case-label">Best For</div>
|
|
<div class="use-case-text">Minimalists, design-conscious users, those who want subtle/private expression</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-icons">
|
|
<div class="icons-row">
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">▼</span>
|
|
<span class="icon-label">Horrible</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">◆</span>
|
|
<span class="icon-label">Bad</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">■</span>
|
|
<span class="icon-label">Average</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">●</span>
|
|
<span class="icon-label">Good</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">★</span>
|
|
<span class="icon-label">Great</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">○</span>
|
|
<span class="icon-label">Missing</span>
|
|
</div>
|
|
<div class="icon-cell">
|
|
<span class="icon-emoji">·</span>
|
|
<span class="icon-label">Placeholder</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="concept-footer">
|
|
<div class="color-palette">
|
|
<div class="color-swatch" style="background: #1A1A1A"></div>
|
|
<div class="color-swatch" style="background: #4A4A4A"></div>
|
|
<div class="color-swatch" style="background: #8A8A8A"></div>
|
|
<div class="color-swatch" style="background: #CACACA"></div>
|
|
<div class="color-swatch" style="background: #FAFAFA"></div>
|
|
</div>
|
|
<div class="sf-symbols">
|
|
<span class="sf-badge">SF</span>
|
|
triangle.fill, diamond.fill, square.fill, circle.fill, star.fill
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Implementation Notes -->
|
|
<div class="notes">
|
|
<h2>Implementation Notes</h2>
|
|
<div class="notes-grid">
|
|
<div class="note-section">
|
|
<h3>Technical Considerations</h3>
|
|
<ul>
|
|
<li>All emoji options render natively on iOS without custom assets</li>
|
|
<li>SF Symbols alternatives provided for each concept (requires custom drawing)</li>
|
|
<li>Consider emoji skin tone variations where applicable</li>
|
|
<li>Test emoji rendering across iOS versions (some are newer)</li>
|
|
<li>Placeholder/missing states should be visually distinct but unobtrusive</li>
|
|
</ul>
|
|
</div>
|
|
<div class="note-section">
|
|
<h3>User Preference System</h3>
|
|
<ul>
|
|
<li>Allow users to select their preferred icon style in Settings</li>
|
|
<li>Store preference in UserDefaults (existing pattern)</li>
|
|
<li>Consider offering 2-3 options to avoid choice paralysis</li>
|
|
<li>Default to "Weather" or "Hearts" as most universally understood</li>
|
|
<li>Could offer as premium/subscription unlock</li>
|
|
</ul>
|
|
</div>
|
|
<div class="note-section">
|
|
<h3>Accessibility</h3>
|
|
<ul>
|
|
<li>Ensure VoiceOver reads mood names, not emoji descriptions</li>
|
|
<li>Color palettes should maintain sufficient contrast</li>
|
|
<li>Consider adding subtle labels in larger widget sizes</li>
|
|
<li>Test with reduced motion settings</li>
|
|
</ul>
|
|
</div>
|
|
<div class="note-section">
|
|
<h3>Recommended Shortlist</h3>
|
|
<ul>
|
|
<li><strong>Weather</strong> — Most universal, works for everyone</li>
|
|
<li><strong>Hearts</strong> — Emotional, personal, familiar</li>
|
|
<li><strong>Garden</strong> — Wellness-aligned, growth mindset</li>
|
|
<li><strong>Cosmic</strong> — Unique, works great in dark mode</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|