smuch Design System

A 1950s Palm Springs-inspired design system for modern mobile experiences. Clean lines, vibrant colors, and thoughtful spacing create an accessible, delightful interface.

Design Principles

Mobile-First PWA

Optimized for touch interactions with compressed spacing, larger tap targets, and efficient information density.

Accessibility First

High contrast ratios, clear typography, and solid color fills ensure readability for all users.

Voice-Enabled

Designed for natural voice interactions with visual feedback and conversational UI patterns.

Retro Modern

1950s Palm Springs aesthetic meets contemporary functionality with warm, inviting colors.

Color Palette

Primary Colors

Background--color-backgroundWarm cream base

Card--color-cardElevated surfaces

Text--color-textPrimary text color

Border--color-borderSubtle dividers

Accent Colors

Primary Accent--color-accent-primaryCoral/orange CTAs

Secondary--color-secondarySage green success

Secondary Accent--color-accent-secondarySky blue highlights

Text Light--color-text-lightSecondary text

Typography

System font stack optimized for readability across all platforms, with mobile-first sizing.

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Heading 1

h1 - Mobile: 1.875rem (30px) / Desktop: 2.25rem (36px), Weight: 800

Heading 2

h2 - Mobile: 1.5rem (24px) / Desktop: 1.875rem (30px), Weight: 700

Heading 3

h3 - Mobile: 1.25rem (20px) / Desktop: 1.5rem (24px), Weight: 700

Body text with comfortable line height for extended reading. Optimized for mobile screens with proper contrast ratios.

p - Size: 1rem (16px), Weight: 400, Line Height: 1.6

Small text for captions and metadata

small - Size: 0.875rem (14px), Weight: 400

Spacing System

Mobile-optimized spacing scale with compressed values for efficient screen usage.

--spacing-xs: 0.5remCompact spacing for mobile

--spacing-sm: 1remDefault element spacing

--spacing-md: 2remSection spacing

--spacing-lg: 4remMajor section breaks

Component Examples

Buttons

No gradients for maximum readability. Solid fills with hover states.

Cards

Default Card

Standard card with subtle border and shadow for elevation.

Accent Card

Highlighted card for important information or success states.

Form Elements

Mobile Optimizations

Touch Targets

Minimum 44px height for all interactive elements

Compressed Spacing

Reduced padding and margins for efficient screen usage

Responsive Typography

Smaller font sizes on mobile with maintained readability

Voice-First Interaction

Large microphone buttons and visual voice feedback

PWA Features

Offline capability, installable, native app feel

Animation & Transitions

Transition Timing

--transition-fast: 0.2s easeQuick UI responses

--transition-normal: 0.3s easeStandard transitions

Hover to see scale animation

Hover to see lift animation