Dot.SYSTEM

Introduction

Welcome to the Dot Design System. This collection of premium, accessible UI components is built to help you create clean and high-fidelity interfaces for MeloSpot.

Brand Identity
Built around the vibrant `#D74D0F` orange, Cadence represents energy, flow, and precision.
Flat Design
A clean, modernist approach with no shadows or gradients, focusing on typography and hierarchy.
Typography
Utilizing DM Sans for structure and Geist for technical clarity and interface elements.

Core Principles

  • Consistency across all MeloSpot products.
  • Accessibility by default with high-contrast combinations.
  • Performance-first components built on Next.js and Tailwind.
  • Flat aesthetic with medium radius for a modern feel.