Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tighten UX with Synthwave design system

Browse Source 
Design System: Synthwave aesthetic with 8px grid
- Add CSS variables for colors, spacing, shadows, glows
- Consistent 8px spacing grid throughout
- Unified border-radius (8px) and shadows
- Better typography scale and hierarchy
- Refined button styles with smooth transitions
- Tighter card layouts with hover effects
- Cleaner input fields with focus states
- More polished player boxes and sections
- Consistent use of neon accent colors (#00ff88, #ffaa44)
- Improved visual hierarchy and readability

All spacing now uses calc(var(--spacing-unit) * N) for consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-18 19:55:05 +00:00
parent a262f714e5
commit 00e4944971
1 changed files with 165 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+165 -103
View File
@@ -5,81 +5,130 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Motif - Procedural Music Synthesis</title> <title>Motif - Procedural Music Synthesis</title>
<style> <style>
body { /* Design System: Synthwave - 8px grid, consistent neon accents */
font-family: 'Monaco', 'Consolas', monospace; :root {
background: --color-bg: #0a0a0a;
radial-gradient(1200px 800px at 50% -200px, rgba(0, 255, 136, 0.18), transparent 60%), --color-surface: #141414;
radial-gradient(900px 700px at 110% 20%, rgba(255, 170, 68, 0.10), transparent 55%), --color-surface-elevated: #1a1a1a;
radial-gradient(900px 700px at -10% 30%, rgba(120, 90, 255, 0.10), transparent 55%), --color-border: #2a2a2a;
#070707; --color-text: #e8e8e8;
color: #e0e0e0; --color-text-dim: #999;
margin: 0; --color-accent-primary: #00ff88;
padding: 20px; --color-accent-secondary: #ffaa44;
line-height: 1.5; --spacing-unit: 8px;
--radius: 8px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
--glow-primary: 0 0 20px rgba(0, 255, 136, 0.3);
--glow-secondary: 0 0 20px rgba(255, 170, 68, 0.3);
} }
* {
box-sizing: border-box;
}
body {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
background:
radial-gradient(1000px 600px at 50% -150px, rgba(0, 255, 136, 0.12), transparent 60%),
radial-gradient(800px 600px at 110% 20%, rgba(255, 170, 68, 0.08), transparent 55%),
var(--color-bg);
color: var(--color-text);
margin: 0;
padding: calc(var(--spacing-unit) * 3);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { .container {
max-width: 980px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
} }
h1 { h1 {
color: #00ff88; color: var(--color-accent-primary);
text-align: center; text-align: center;
margin-bottom: 30px; margin: 0 0 calc(var(--spacing-unit) * 4) 0;
letter-spacing: 0.08em; font-size: 2em;
text-shadow: 0 0 18px rgba(0, 255, 136, 0.18); font-weight: 700;
letter-spacing: 0.05em;
text-shadow: var(--glow-primary);
} }
.controls { .controls {
margin: 20px 0; margin: calc(var(--spacing-unit) * 3) 0;
text-align: center; text-align: center;
} }
button { button {
background: #333; background: var(--color-surface);
color: #e0e0e0; color: var(--color-text);
border: 1px solid #555; border: 1px solid var(--color-border);
padding: 10px 20px; padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
margin: 0 10px; border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; font-size: 14px;
font-weight: 500;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
} }
button:hover {
background: #444; button:hover:not(:disabled) {
background: var(--color-surface-elevated);
transform: translateY(-1px); transform: translateY(-1px);
border-color: #6a6a6a; border-color: #444;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); box-shadow: var(--shadow-md);
} }
button:active:not(:disabled) {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
button:disabled { button:disabled {
opacity: 0.5; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
transform: none;
box-shadow: none;
} }
button.primary { button.primary {
background: #00ff88; background: var(--color-accent-primary);
color: #000; color: #000;
border-color: rgba(0, 255, 136, 0.65); border-color: var(--color-accent-primary);
font-weight: 600;
} }
button.primary:hover {
background: #00cc6a; button.primary:hover:not(:disabled) {
box-shadow: 0 10px 40px rgba(0, 255, 136, 0.12); background: #00dd77;
box-shadow: var(--glow-primary), var(--shadow-md);
} }
#status { #status {
margin: 20px 0; margin: calc(var(--spacing-unit) * 3) 0;
padding: 10px; padding: calc(var(--spacing-unit) * 2);
background: #1a1a1a; background: var(--color-surface);
border-left: 3px solid #00ff88; border-left: 3px solid var(--color-accent-primary);
min-height: 20px; border-radius: var(--radius);
border-radius: 6px; box-shadow: var(--shadow-md);
box-shadow: 0 18px 70px rgba(0, 0, 0, 0.35); font-size: 14px;
min-height: 24px;
} }
input {
background: #333; input[type="text"] {
color: #e0e0e0; background: var(--color-surface);
border: 1px solid #555; color: var(--color-text);
padding: 8px 12px; border: 1px solid var(--color-border);
margin: 0 10px; padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
border-radius: var(--radius);
font-family: inherit; font-family: inherit;
font-size: 16px; /* Prevent iOS auto-zoom */ font-size: 16px;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
input[type="text"]:focus {
outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
} }
.results-section { .results-section {
@@ -140,80 +189,97 @@
margin: 20px 0; margin: 20px 0;
} }
.player-box { .player-box {
background: #1a1a1a; background: var(--color-surface);
padding: 15px; padding: calc(var(--spacing-unit) * 3);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius);
box-shadow: 0 18px 80px rgba(0, 0, 0, 0.55); box-shadow: var(--shadow-md);
position: relative; transition: transform 150ms ease, box-shadow 150ms ease;
overflow: hidden;
} }
.player-box::before {
content: ""; .player-box:hover {
position: absolute; transform: translateY(-2px);
inset: 0; box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, rgba(0, 255, 136, 0.10), transparent 55%);
opacity: 0.35;
pointer-events: none;
} }
.player-box h4 { .player-box h4 {
margin-top: 0; margin: 0 0 calc(var(--spacing-unit)) 0;
color: #00ff88; color: var(--color-accent-primary);
position: relative; font-size: 15px;
font-weight: 600;
} }
.player-box p { .player-box p {
font-size: 0.85em; font-size: 13px;
color: #888; color: var(--color-text-dim);
margin: 5px 0 15px 0; margin: 0 0 calc(var(--spacing-unit) * 2) 0;
position: relative;
} }
.player-box button { .player-box button {
width: 100%; width: 100%;
margin: 5px 0; margin: calc(var(--spacing-unit)) 0 0 0;
position: relative;
} }
.player-box button:first-of-type {
margin-top: 0;
}
.player-info { .player-info {
background: #1a1a1a; background: var(--color-surface);
padding: 15px; padding: calc(var(--spacing-unit) * 3);
margin: 15px 0; margin: calc(var(--spacing-unit) * 3) 0;
border-left: 3px solid #555; border-left: 3px solid var(--color-accent-primary);
border-radius: 10px; border-radius: var(--radius);
box-shadow: 0 18px 80px rgba(0, 0, 0, 0.55); box-shadow: var(--shadow-md);
} }
.player-info h4 {
margin: 0 0 calc(var(--spacing-unit)) 0;
color: var(--color-text);
font-size: 16px;
}
.player-info p {
margin: 0;
font-size: 13px;
color: var(--color-text-dim);
}
.section { .section {
margin-top: 26px; margin-top: calc(var(--spacing-unit) * 5);
} }
.section-header { .section-header {
display: flex; margin: 0 0 calc(var(--spacing-unit) * 2) 0;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 18px 0 10px 0;
} }
.section-title { .section-title {
margin: 0; margin: 0;
font-size: 1.1em; font-size: 13px;
letter-spacing: 0.06em; font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: #d8ffe9; color: var(--color-text);
} }
.section-subtitle { .section-subtitle {
margin: 0; margin: calc(var(--spacing-unit) / 2) 0 0 0;
font-size: 0.9em; font-size: 13px;
color: #8f8f8f; color: var(--color-text-dim);
} }
.divider { .divider {
height: 1px; height: 1px;
margin: 10px 0 18px 0; margin: 0 0 calc(var(--spacing-unit) * 3) 0;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.35), rgba(255, 170, 68, 0.22), transparent); background: linear-gradient(90deg, transparent, var(--color-border), transparent);
} }
.original-grid { .original-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px; gap: calc(var(--spacing-unit) * 2);
} }
@media (max-width: 920px) { @media (max-width: 920px) {
.original-grid { .original-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -221,15 +287,11 @@
} }
.motif-stage { .motif-stage {
margin-top: 18px; background: var(--color-surface-elevated);
padding: 22px; padding: calc(var(--spacing-unit) * 3);
border-radius: 14px; border-radius: var(--radius);
background: border: 1px solid rgba(255, 170, 68, 0.2);
radial-gradient(900px 400px at 20% 0%, rgba(255, 170, 68, 0.18), transparent 55%), box-shadow: var(--shadow-lg), var(--glow-secondary);
radial-gradient(900px 400px at 80% 0%, rgba(0, 255, 136, 0.12), transparent 60%),
rgba(16, 16, 16, 0.75);
border: 1px solid rgba(255, 170, 68, 0.22);
box-shadow: 0 30px 120px rgba(0, 0, 0, 0.65);
} }
.motif-grid { .motif-grid {
display: flex; display: flex;