Design System

Noiseless
Design Language

A comprehensive look at our design patterns, components, and visual philosophy

Design Principles

Clarity

Clear visual hierarchy and intuitive navigation paths

Performance

Fast animations and efficient component rendering

Responsive

Seamless experience across all device sizes

Interactive

Subtle hover states and smooth transitions

Common Design Patterns

Color System
Our color palette uses OKLCH color space for consistent theming

Primary

Brand color

Secondary

Neutral accent

Muted

Subtle backgrounds

Accent

Highlight elements

Implementation:

  • • CSS custom properties for theming
  • • Dark mode support with .dark class
  • • Automatic color generation for consistent variations
  • • OKLCH color space for better perceptual uniformity
Typography
Geist Sans and Geist Mono for optimal readability

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-semibold

Body text with good contrast and readability

text-base (default)

Muted text for secondary information

text-sm text-muted-foreground

Layout Patterns
Consistent spacing and grid systems throughout the application

Container Patterns:

Container 1: Centered Container

container mx-auto - Responsive max-width

<div className="container mx-auto px-4">
  <div className="max-w-5xl mx-auto">
    <!-- Content automatically centers and scales -->
  </div>
</div>

Visual output:

Browser viewport
container mx-auto px-4
max-w-5xl mx-auto
Content

Container 2: Single Column Layout

max-w-3xl mx-auto - Content column

<div className="max-w-3xl mx-auto">
  <div className="space-y-12">
    <ContactForm />
    <ArticleContent />
  </div>
</div>

Visual output:

Browser viewport
max-w-3xl mx-auto
ContactForm
space-y-12
ArticleContent

Grid Systems:

Grid 1: Two Column Layout

grid md:grid-cols-2 gap-6

<div className="grid md:grid-cols-2 gap-6">
  <Card>First column content</Card>
  <Card>Second column content</Card>
</div>

Visual output:

Container
Card
First column
Card
Second column
gap-6

Grid 2: Three Column Layout

grid lg:grid-cols-3 gap-8

<div className="grid lg:grid-cols-3 gap-8">
  {features.map((feature) => (
    <FeatureCard key={feature.id} {...feature} />
  ))}
</div>

Visual output:

Container
FeatureCard
Card 1
FeatureCard
Card 2
FeatureCard
Card 3
gap-8

Spacing: Vertical Stack

space-y-8 - Consistent gaps

<div className="space-y-8">
  <section>Hero Section</section>
  <section>Features Section</section>
  <section>Testimonials</section>
</div>

Visual output:

Container
Hero Section
space-y-8
Features Section
space-y-8
Testimonials

Page Animation Pattern:

Consistent fade-in animations with staggered delays

const { isVisible } = usePageAnimation({ timing: 'fast' });

<section 
  className={`transition-all duration-[1800ms] ease-out delay-500 ${
    isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
  }`}
>
  <h2>Section Content</h2>
</section>

Responsive Breakpoints:

  • • sm: 640px - Small tablets
  • • md: 768px - Tablets
  • • lg: 1024px - Laptops
  • • xl: 1280px - Desktops
Animation Patterns
Subtle animations that enhance user experience without distraction

Page Transitions:

  • • usePageAnimation hook for consistent fade-ins
  • • Variable timing: slow (100ms) for home, fast (25ms) for other pages
  • • Staggered delays for layered content appearance

Interaction States:

  • • hover:text-primary - Color transitions on hover
  • • transition-colors - Smooth color changes
  • • hover:scale-105 - Subtle scale effects

Loading States:

  • • Custom quarter rest spinner for brand consistency
  • • animate-spin for rotation animation
  • • Multiple sizes: small (h-6 w-6), default (h-8 w-8), large (h-12 w-12)

Loading Spinners

Our custom loading spinner featuring the quarter rest musical note

Default Spinner
The standard loading spinner used throughout the application
Large Spinner
A bigger version for main loading states
Small Spinner
Compact version for buttons and inline elements
Colored Variations
Different color themes for various contexts
Interactive Demo
Click the button to see the spinner in action with a simulated loading process
Spinner Implementation
How the spinner is constructed and used throughout the application

Structure:

  • • Rotating border ring with Tailwind's animate-spin
  • • Centered QuarterRest icon using absolute positioning
  • • Responsive sizing with consistent proportions
  • • Smooth animation with proper accessibility considerations

Usage:

  • • Authentication and authorization screens
  • • Data loading states in tables and forms
  • • Button loading states during async operations
  • • Page transitions and navigation

Design Philosophy:

The quarter rest (♪) represents a pause in music, perfectly symbolizing the momentary pause in the user experience while content loads. It reinforces our "Noiseless" brand identity while providing a unique, memorable loading experience.