Dancing Curve

Overview

Dancing Curve is a high-energy dance academy brand that channels the visceral intensity of live performance into a digital experience. The design system embraces **Performance Minimalism**—a aesthetic that pairs bold, saturated accent colors (primary red #ba0404, secondary cyan #40d9f1) with clean, high-contrast surfaces to create visual rhythm and motion. The brand serves aspiring dancers and fitness enthusiasts seeking structured, culturally-rich instruction (Bollywood, contemporary, fitness fusion). The UI evokes confidence, celebration, and the kinetic energy of bodies in motion through sharp typography (Oswald headlines at 700 weight, 22px CTAs), minimal ornamentation, and strategic use of the signature red as a visual pulse.

Voice: Direct, motivational, and unpretentious. The brand speaks in imperative action verbs and celebrates achievement without irony. Vocabulary leans toward movement terminology ("flow," "rhythm," "groove") and cultural specificity (Bollywood, Sangeet, workshops). Example sentence in brand voice: "New batches begin 25th July & 27th July 2026 onwards for weekends & weekdays respectively!"

Colors

The color system is built on a **high-contrast, performance-driven** philosophy. Primary (#ba0404, a deep crimson red) is the brand's signature accent—deployed on all CTAs, active navigation states, and moments of emphasis. It commands attention without aggression, evoking the energy of traditional Indian dance costumes and stage lighting. Secondary (#40d9f1, a vivid cyan) provides a complementary accent for highlights, badges, and supporting UI elements, creating visual rhythm through warm-cool contrast. Tertiary (#ff6900, luminous orange) is reserved for tertiary actions and accent highlights. The surface stack is deliberately light and neutral: white (#ffffff) as the primary canvas, with a shallow gradient through grays (#f7f7f7 surface-dim, #e6e6e6 surface-container-low, #cfeff5 surfac

Typography

The type system pairs **Oswald** (a geometric, high-contrast sans-serif) for headlines and CTAs with **Roboto** (a humanist sans-serif) for body copy and supporting text. Oswald at 700 weight and 22px (primary CTA size) creates a bold, confident voice that mirrors the energy of live performance; its compressed letterforms and high x-height ensure legibility at small sizes and convey urgency. Roboto at 400 weight and 16px (body-md) provides warm, approachable reading copy. The hierarchy is steep: display (60px, -0.04em letter-spacing), headline-lg (40px, -0.02em), headline-md (28px, -0.01em), title-lg (20px), body-lg (18px, 0.02em letter-spacing), body-md (16px, 0.01em), label-md (14px, 0.05em letter-spacing), label-sm (12px, 0.04em). All labels use Oswald 600 weight to maintain visual weig

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px (container-max), ensuring the design scales gracefully from mobile (320px) to ultra-wide displays. The gutter is fixed at 24px (md spacing), creating consistent breathing room between columns. Section separation uses lg spacing (40px) vertically to establish clear visual hierarchy and rhythm; card-to-card spacing within sections uses md spacing (24px). The hero section spans full-width with a dark overlay (rgba(0,0,0,0.4) or similar) to ensure text legibility over imagery. Primary CTAs are positioned at the bottom-right or center of hero sections, using the full button-primary component (48px height, 12px 24px padding, Oswald 22px). Secondary navigation and supporting elements use sm spacing (12px) for compact, sc

Elevation & Depth

Depth is conveyed through **precise shadow layering** rather than color shifts or transparency. The system defines three elevation levels: Level 1 (Base, no shadow): flat surfaces like body background and surface-container elements. Level 2 (Standard Card, md elevation): box-shadow: 0 3px 8px rgba(0,0,0,0.15) applied to cards, input fields, and standard interactive elements. This shadow is subtle, with a 3px vertical offset and 8px blur radius, creating a gentle lift. Level 3 (Elevated/Modal, lg elevation): box-shadow: 0 8px 24px rgba(0,0,0,0.2) applied to modals, dropdowns, and primary CTAs o

Shapes

The shape philosophy is **Architectural Sharpness**—minimal rounding that suggests precision and control while maintaining approachability. Border-radius follows a tight scale: sm (2px) for buttons and small interactive elements, DEFAULT (3px) for input fields and standard cards, md (4px) for slightly larger cards, lg (7px) for prominent cards and modals, xl (10px) for hero sections and full-width containers, and full (50px) for badges and pill-shaped elements. The rationale: small, sharp corners (2–3px) on CTAs and inputs convey decisiveness and urgency, aligning with the brand's performance-

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses backgroundColor: {colors.primary} (#ba0404), textColor: {colors.on-primary} (#ffffff), fontFamily: Oswald, fontSize: 22px, fontWeight: 400, padding: 12px 24px, height: 48px, rounded: {rounded.sm} (2px), and no border. On hover, the background darkens to #8b0000 with a 200ms ease-in-out transition. On active/pressed, it compresses to #5a0202. **button-secondary** uses a transparent background with a 2px solid border in primary color, same padding and height, and on hover transitions to backgroundColor: {colors.primary-container} (#e8b5b5) with textColor: {colors.on-primary-container} (#5a0202) over 200ms. Both button variants must never use text-decoration: underline; focus states are indicated via a

Do's and Don'ts

**Do**

• Do use Oswald 700 weight for all headlines and CTAs to maintain the brand's bold, performance-driven voice.
• Do apply primary (#ba0404) to all interactive elements (buttons, links, focus states) and reserve secondary (#40d9f1) and tertiary (#ff6900) for supporting accents and badges.
• Do maintain a minimum 24px gutter between grid columns and 40px vertical spacing between sections to create visual rhythm and breathing room.
• Do use the md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) on standard cards and lg elevation (0 8px 24px rgba(0,0,0,0.2)) on modals and hovered elements to establish clear depth hierarchy.
• Do apply 200ms ease-in-out transitions to all color and shadow changes to ensure smooth, professional interactions.
• Do use text-shadow: 0 2px 4px rgba(0,0,0,0.15) on small labels over busy backgrounds to ensure accessibility and readability.

**Don't**

• Don't use glassmorphism, backdrop-filter, or transparency effects; the design prioritizes clarity and direct color application.
• Don't apply border-radius greater than 10px (xl) except for badges and pill-shaped elements; sharp corners reinforce the brand's architectural precision.
• Don't use secondary (#40d9f1) or tertiary (#ff6900) as primary CTA colors; reserve primary (#ba0404) for all high-priority actions.
• Don't exceed 1280px container max-width; this ensures optimal readability and maintains the design's visual hierarchy across all screen sizes.
• Don't use system fonts or generic sans-serif fallbacks; always specify Oswald for headlines and Roboto for body copy to maintain brand consistency.
• Don't apply shadows with blur radius less than 3px or greater than 24px; this maintains the elevation system's clarity and prevents visual confusion.