Design Principles

The system uses SVG icons exclusively. Emoji introduce inconsistent rendering across platforms and dilute the visual precision of the interface. Every icon is a purpose-built SVG with controlled stroke weight, size, and color.

// Use SVG icons, not emoji
<svg width="16" height="16" viewBox="0 0 24 24"
  fill="none" stroke="currentColor" strokeWidth="2">
  <polyline points="20 6 9 17 4 12" />
</svg>

Primary actions use the system gradient (135deg, #1db954 to #2563eb). This creates a clear visual hierarchy -- gradient means primary, solid means secondary, ghost means tertiary.

.gradient-btn {
  background: linear-gradient(135deg, #1db954, #059669);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

Empty surfaces use a subtle dot grid pattern to add texture without distraction. The dots are 1px circles spaced 24px apart, using the border color token.

.dot-grid {
  background-image: radial-gradient(
    circle, #e5e5e5 1px, transparent 1px
  );
  background-size: 24px 24px;
}

Overlays, navigation bars, and modals use a frosted glass effect: 72% white background with a 12px blur and 180% saturation. This creates depth while maintaining readability.

.frosted-glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid #e5e5e5;
}

Interactive cards and surfaces lift 2px on hover with an elevated shadow. This provides clear affordance that an element is clickable without changing its layout footprint.

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

Focusable elements use a purple glow shadow instead of the browser default outline. The glow matches the primary color at 30% opacity, creating a clear but non-intrusive focus ring.

.focus-glow:focus {
  outline: none;
  box-shadow: 0 4px 20px rgba(29, 185, 84, 0.3);
  border-color: #1db954;
}