Dekoruma

Overview

Dekoruma is Indonesia's premier furniture and interior design marketplace, serving aspirational homeowners and design-conscious consumers seeking premium, curated products with accessibility and trust. The brand aesthetic blends **Functional Minimalism** with **Warm Accessibility**—a design language that prioritizes clarity and usability while maintaining an inviting, approachable tone. The visual identity centers on a distinctive teal accent (#00b1bb) paired with a clean white canvas and neutral grays, creating a sense of calm confidence. The UI evokes the feeling of stepping into a well-lit, thoughtfully organized showroom where every product and category is immediately discoverable.

Dekoruma's voice is conversational, helpful, and locally grounded. The brand speaks to Indonesian consumers in their language (Bahasa Indonesia) with warmth and practical wisdom—never condescending, always solution-focused. Vocabulary emphasizes value ("cicilan 0%" / 0% installment), trust ("garansi uang kembali" / money-back guarantee), and lifestyle aspiration ("Japandi", "premium", "custom interior"). Example sentence in brand voice: "Desain interior sesuai ruangan Anda—cicilan 0% tersedia untuk pembelian di atas 2 juta." (Interior design tailored to your space—0% installment available for purchases over 2 million.)

Colors

The Dekoruma color system is rooted in **Teal-Neutral Harmony**, balancing a bold, trust-signaling primary accent with a serene, commerce-friendly neutral foundation. **Primary (#00b1bb)** is the signature teal used for all call-to-action buttons, active states, links, and brand moments—it signals trust, modernity, and the brand's Indonesian identity. **Secondary (#008190)** is a deeper teal reserved for hover states and secondary actions, creating visual hierarchy without jarring contrast. **Tertiary (#007eff)** is a bright blue used sparingly for promotional badges, alerts, and accent highlights. **Error (#ff5a5f)** is a warm coral-red for destructive actions, discounts, and urgency cues (e.g., price strike-throughs, limited-time badges). The **surface stack** (white #ffffff down to #e0e

Typography

The Dekoruma type system uses **Circular** (a humanist sans-serif from Spotify's design system) as the sole typeface family, paired with fallbacks to system fonts for robustness. This choice communicates modern sophistication while remaining warm and approachable—critical for an e-commerce brand serving diverse Indonesian consumers. **Display (60px, 700 weight, -0.04em tracking)** is reserved for hero headlines and brand moments. **Headline-lg (40px, 700 weight)** anchors major section titles. **Headline-md (28px, 700 weight)** structures subsections and category headers. **Title-lg (21px, 700 weight)** labels product cards and feature blocks. **Body-lg (18px, 400 weight)** is used for introductory copy and prominent descriptions. **Body-md (15px, 400 weight)** is the workhorse for product

Layout

Dekoruma employs a **fluid 12-column grid** with a fixed max-width of 1280px, centered on desktop and full-width on mobile. The page rhythm is driven by **lg spacing (40px)** for major section separation (hero to category grid, category grid to featured products), **md spacing (24px)** for card padding and subsection margins, and **sm spacing (12px)** for internal card elements and list item padding. The gutter (24px) is applied symmetrically on left and right of the container, creating breathing room around content. Product carousel sections use a horizontal scroll with 12px column gaps, allowing users to preview multiple items without leaving the viewport. Hero sections span full-width with a 1280px content container nested inside. Category grids are typically 4 columns on desktop (using

Elevation & Depth

Dekoruma uses **subtle, flat shadows** to create minimal visual hierarchy without introducing depth or glassmorphism. The elevation system consists of three levels: **Level 1 (sm, 0 1px 2px rgba(0,0,0,0.06))** for small interactive elements like badges and micro-interactions. **Level 2 (md, 0 3px 8px rgba(0,0,0,0.15))** is the default for cards, input fields, and dropdown panels—this is the most frequently used shadow, providing just enough lift to separate content from the background. **Level 3 (lg, 0 8px 24px rgba(0,0,0,0.12))** is reserved for modals, sticky headers, and hover states of car

Shapes

Dekoruma's shape philosophy is **Soft-Technical**—rounded corners are present but restrained, signaling modernity without sacrificing clarity. **sm (2px)** is used for minimal rounding on small UI elements like icon buttons and micro-interactions. **DEFAULT (4px)** is applied to input fields, small badges, and dropdown panels, providing a subtle softness. **md (6px)** appears on secondary buttons and smaller cards. **lg (8px)** is the standard for primary buttons and medium-sized interactive elements, balancing approachability with professionalism. **xl (12px)** is reserved for product cards,

Components

Action Elements **Button-primary** (#00b1bb background, white text, 40px height, 12px 24px padding, 8px radius, Circular 14px 600 weight) is the primary call-to-action for all critical user flows: "Masuk atau Daftar" (Sign In / Register), "Beli Sekarang" (Buy Now), "Tambah ke Keranjang" (Add to Cart). On hover, the background transitions to secondary (#008190) over 150ms. On active/pressed, apply a 3px inset shadow (inset 0 3px 6px rgba(0,0,0,0.1)) to signal tactile feedback. **Button-secondary** uses a transparent background with a 1px #cccccc border, white text on hover background (#e8e8e8), and the same 40px height. Used for "Lihat Lebih" (View More), "Batal" (Cancel), and secondary navigation.

Containers & Surfaces **Card** (white background, 12px radius, 24px padding, 0 3px 8