Identity & Core Concept
Named for the defining flavor principle of Sichuan cuisine — málà (麻辣), the electric union of mouth-numbing Sichuan pepper and deep, searingly hot chili — Mala is designed to make the same impression. Bold. Layered. Unforgettable.
Project Name
Mala 麻辣
Tagline
Peppercorn Society Automation
Aesthetic Philosophy
Dark by default. Sophisticated. Editorial yet functional. Like the misty mountain terraces of Sichuan province, the interface layers depth upon depth — deep colour, high-contrast accents, precision and warmth coexisting in the same breath.
Color Palette
Drawn from lacquered red ceremonial vessels, the gold of Sichuan opera masks, and the deep black of iron woks seasoned over a lifetime. Every colour has a function; nothing is decorative noise.
Mala Red
Primary actions · branding accents · form focus · card top-borders
Mala Gold
Headings in dark mode · Brand mark (dark) · Admin-specific UI elements
Mala Black
Main application background
Mala Dark Grey
Component backgrounds · cards · modals
Mala Green
Success states · positive transitions
Surface Accent
Form inputs · inactive UI elements
Typography
Three voices in concert. Cinzel commands attention at the highest level — page titles, section headings, and the brand mark. Lora brings warmth and heritage to content headings (h3–h6) and prose. DM Mono labels and annotates with quiet precision. Together they carry the dual nature of Mala — functional heat and refined culture.
MALA
ABCDEFGHIJKLMNOPQRSTUVWXYZ & 0123456789
Warmth & Heritage
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz & 0123456789
Interface clarity
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz & 0123456789
UI Components & Patterns
Every interactive element should feel intentional — like reaching for a perfectly lacquered chopstick. Hover any component below to observe its active state.
Card Component
Peppercorn Reserve
Background: #1E1E1E · 3px Mala Red top border · 12px radius · lifts on hover.
Navigation Bar
backdrop-filter: blur(10px) · rgba(18,18,18,0.9)
Buttons
Primary: solid Mala Red · Secondary: outline, lower hierarchy
Form Input
Focus state: Mala Red border · rgba(198,40,40,0.15) glow ring
Technical Stack
Chosen for longevity and composability. The stack should feel as considered as the design — no unnecessary complexity, no missing capabilities.