TaalMala

Overview

TaalMala is a customizable accompaniment studio for Indian classical music practitioners, serving vocalists, instrumentalists, and rhythm players across Android, iOS, and Windows. The design aesthetic is "Warm Minimalism with Serif Elegance"—a fusion of traditional Indian craftsmanship and contemporary digital clarity. The interface evokes the feeling of a personal music teacher: warm, approachable, and deeply focused. Soft terracotta and saffron accents punctuate a cream-and-paper palette, while Georgia serif headlines convey cultural authenticity and timelessness. The emotional response is one of calm mastery: users feel supported, not overwhelmed, even when composing complex multi-track sequences.

The brand voice is precise, encouraging, and culturally grounded. TaalMala speaks to musicians as peers, using terminology from Indian classical music (Taal, Lehra, Tanpura, SwarMandal) without condescension. The tone avoids breathless marketing; instead, it prioritizes clarity and respect for the user's practice. Example sentence in brand voice: "Compose a 7-beat Taal with Pakhawaj accompaniment, then save it as a sequence for tomorrow's riyaaz."

Colors

The color system is rooted in the warm earth tones of Indian classical instruments and the natural materials of traditional music-making spaces. Primary (#8b3729, terracotta) is the signature accent—used on all call-to-action buttons, interactive focus states, and brand-critical UI elements. It evokes the clay of tabla drums and the warmth of a music room lit by afternoon sun. Secondary (#efa632, saffron) is a supporting accent for highlights, badges, and feature cards; it brings energy and draws attention to key features without competing with primary. Tertiary (#b67a12, gold) is reserved for premium or elevated states, reinforcing the precious nature of musical practice.

The surface stack is built on cream and paper tones: surface (#fffdf8) is the base canvas, while surface-container va

Typography

The type system pairs Georgia serif for headlines with Inter sans-serif for body and UI text, creating a visual hierarchy that balances cultural authenticity with modern clarity. Display (99.84px, 500 weight, -0.045em tracking) is reserved for the hero headline, where the serif's elegance commands attention. Headline-lg through headline-md (56px–40px) use the same serif family with consistent negative letter-spacing (-0.04em to -0.035em) to create visual compression and sophistication. Body text (18px–16px, 400 weight) in Inter is set at 1.6 line-height for comfortable reading; label-md (14px, 600 weight) is used for buttons and UI labels with 0.01em tracking for precision. Label-sm (12px, 800 weight, 0.16em tracking) is applied to eyebrows, badges, and uppercase UI text, creating visual d

Layout

The page uses a fluid 12-column grid with a max-width of 1380px (including padding), centered on the viewport. The hero section spans full width with asymmetric padding: 150px top, 80px bottom, and horizontal padding calculated as max(3rem, 50vw - 690px) to maintain breathing room on ultra-wide screens. Section rhythm is governed by the spacing scale: lg (40px) separates major sections, md (24px) is used for card padding and internal component spacing, and sm (12px) for tight groupings. The container max-width of 1380px is applied to content sections to prevent line-length from exceeding 80 characters on display text. White-space philosophy prioritizes clarity over density: feature cards are spaced 1.2rem apart, and section headers include 1.5rem padding-bottom with a 1px border to signal

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast. Level 1 (Base): the background is a subtle radial gradient (circle at 76% 22%, #fcbc7057 fading to transparent at 31%) layered over a linear gradient (120deg, #fff9ed to #f8e9e5), creating a soft, directional light source without flatness. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px border at rgba(139, 55, 41, 0.1) defines card edges. Level 3 (Elevated/Modals): box-shadow: 0 18px 45px rgba(67, 42, 33, 0.06) with the same border treatment creates visual separation. The shadow color

Shapes

The shape philosophy is "Organic Warmth with Technical Precision." Buttons and interactive elements use border-radius: 999px (full pill shape) to feel approachable and touchable, reflecting the rounded forms of musical instruments. Cards and containers use 24px (1rem) border-radius for a softer, more inviting appearance than sharp corners, while maintaining enough definition to feel intentional. Input fields use 8px (0.5rem) for a tighter, more technical feel that signals data entry. The hero section includes decorative circular halos (border-radius: 50%) at varying sizes (460px, 320px) to cre

Components

Action Elements Buttons follow a two-tier system: primary (terracotta #8b3729 background, white text, 999px radius, 12.8px 23.2px padding, 800 font-weight) is used for the main CTA ("Start practising"). On hover, the background shifts to the primary-fixed-dim (#e6ab49) and the button translates up 2px (transform: translateY(-2px)) with a 0.16s transition. Secondary buttons use a transparent background with a 1px border at the primary color and the same text color; on hover, they fill with surface-container-high (#f2e4da). The header CTA ("Get TaalMala") is a variant with a 1px border at primary, transparent background, and 750 font-weight at 0.84rem; it follows the same hover behavior as secondary. All buttons use Inter sans-serif at label-md weight.

Containers & Surfaces Cards ar

Do's and Don'ts

**Do**

• Do use terracotta (#8b3729) as the primary accent for all CTAs, focus states, and brand-critical interactions—it is the signature color that users associate with TaalMala.
• Do pair Georgia serif headlines with Inter sans-serif body text to balance cultural authenticity with modern clarity; never use sans-serif for display text.
• Do apply negative letter-spacing (-0.045em to -0.04em) to serif headlines to create visual compression and sophistication; this is essential for the brand's polished feel.
• Do use the full spacing scale (xs, sm, md, lg, xl) to create rhythm; never hardcode arbitrary pixel values—reference the token system.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces; the shadow color should use terracotta at low opacity, not pure black.
• Do use 999px border-radius for buttons and pills to feel warm and approachable; reserve 24px for cards and 8px for inputs to create hierarchy.

**Don't**

• Don't use the secondary color (#efa632) as a background for body text or large surfaces—it is a highlight accent, not a canvas color.
• Don't apply harsh shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.3)) or high-contrast borders; TaalMala's aesthetic is warm and soft, not stark.
• Don't mix serif and sans-serif in the same headline or body paragraph; maintain clear separation: serif for display/headlines, sans-serif for UI and body.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use the defined on-surface (#241b18) and surface (#fffdf8) tokens.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the visual system.
• Don't use the error color (#c66ed1) for non-error states; reserve it strictly for validation failures, warnings, and destructive actions.