• Welcome
  • Getting Started
  • Foundations
  • Components
  • Patterns
  1. Design System
  2. foundations

Foundations

Core design principles, spatial systems, and visual specifications that form the structural basis of the VOXFM interface.

Accessibility

Guidelines for inclusive audio-first interfaces, focusing on keyboard navigation, contrast ratios, and ARIA labels.

Explore Accessibility

Colors

The semantic OKLCH token architecture used to style the interactive elements and structural layers of VOXFM.

Explore Colors

Icons

The centralized Lucide icon library mapping, categorized for intuitive use across media and navigation components.

Explore Icons

Images

Rules and aspect ratios for rendering media artwork, user avatars, and system-generated fallback states.

Explore Images

Layout

The REM-based spatial system and responsive app shell architecture guiding the primary VOXFM viewport.

Explore Layout

Typography

Typographic scales, hierarchy rules, and tracking specifications leveraging the Plus Jakarta Sans brand font.

Explore Typography
VOXFM DESIGN

An accessible, component-driven design system built with Radix UI, Tailwind CSS, and Next.js for a high-density, generative AI audio interfaces.

Explore
  • Getting Started
  • Foundations
  • Components
  • Patterns
Foundations
  • Accessibility
  • Colors
  • Grid & Layout
  • Typography
Resources
  • Radix UI
  • shadcn/ui
  • Tailwind CSS
  • Lucide Icons

© 2026 VOXFM Design System. All rights reserved.

Built with Next.js, Radix UI & Tailwind CSS.