Dekoruma

Overview

Dekoruma is a premium interior design and custom furniture service platform serving Indonesia's commercial and residential sectors. The brand embodies "Confident Minimalism"—a design philosophy that balances warm, approachable aesthetics with the authority and precision demanded by enterprise clients (offices, developers, hospitality chains). The visual identity prioritizes clarity and craftsmanship: a teal-and-rust color story signals both trustworthiness (teal) and energy (rust), while generous whitespace and structured typography convey professionalism without coldness. The UI evokes the feeling of stepping into a well-designed showroom—calm, organized, and ready to collaborate.

Dekoruma's voice is consultative and transparent. The brand speaks in clear, benefit-driven language ("Hitung Estimasi Biayamu" — Calculate Your Estimate; "Jaminan 8 Minggu Selesai" — 8-Week Completion Guarantee), avoiding jargon while maintaining authority. Tone is warm but businesslike, never casual or overly trendy. Example sentence: "Kami menghadirkan desain interior yang mencerminkan identitas bisnis Anda, dari konsultasi gratis hingga instalasi final." (We deliver interior design that reflects your business identity, from free consultation to final installation.)

Colors

The Dekoruma palette centers on two complementary accent colors that work in concert: Primary (#a61c00, a warm rust-red) commands attention on CTAs, hero sections, and critical interactive elements—it signals urgency and confidence without aggression. Secondary (#008188, a teal-green) anchors the hero section and establishes brand recognition; it conveys stability, craftsmanship, and the natural materials central to interior design. The surface stack is deliberately light: #ffffff (pure white) for primary surfaces, #f9f9f9 for subtle container differentiation, and #f5f6f6 for mid-tone containers. Text hierarchy is anchored in #002022 (near-black, slightly warmer than pure black for readability) for primary content, with #334d4e (muted teal-gray) for secondary information. Borders and divid

Typography

The type system uses Circular (a geometric, friendly sans-serif) for headlines and brand-forward moments, paired with the system font stack (-apple-system, Segoe UI, Roboto) for body text and UI labels. This pairing balances personality with accessibility: Circular's rounded letterforms soften the commercial tone, while the system stack ensures consistent rendering across devices and maintains legibility at small sizes. Display (56px, 700 weight, -0.03em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 700 weight) breaks major sections; Headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and form labels, while Body-md (16px, 400 weight, 24px line-height) handles standard body text. Labe

Layout

Dekoruma uses a 12-column fluid grid with a max-width of 1232px, centered on the viewport. The page rhythm is built on a 40px (lg) spacing scale for major section separation (hero to form, form to portfolio gallery), 24px (md) for component-level padding and card spacing, and 12px (sm) for internal element spacing. The hero section spans full-width with 60px top/bottom padding and 40px left/right padding, creating breathing room around the teal background. The cost-estimation form sits in a white container (1232px max-width, centered) with 32px padding and subtle 1px borders at #99a6a7. Portfolio sections use a 3-column card grid on desktop, collapsing to 1 column on mobile, with 24px gaps between cards. Gutters are consistently 24px. The layout philosophy prioritizes whitespace as a desig

Elevation & Depth

Depth in Dekoruma is achieved through a restrained shadow system that avoids the heavy, dark shadows common in e-commerce. Level 1 (Base): No shadow; flat surfaces use only a 1px solid border at #99a6a7 for definition. Level 2 (Standard Cards & Forms): box-shadow: 0px 2px 12px rgba(0,0,0,0.15), paired with a 1px border at #99a6a7. This creates subtle lift without visual heaviness. Level 3 (Elevated/Modals & Hover States): box-shadow: 0px 6px 8.3px rgba(0,0,0,0.20), with the same 1px border. Hover transitions on cards increase shadow to Level 3 over 200ms (ease-in-out). Input fields use no shad

Shapes

Dekoruma employs a "Soft-Technical" radius philosophy: sharp enough to feel modern and precise, soft enough to feel approachable. Buttons and form inputs use 4px (DEFAULT) border-radius, creating a subtle roundness that suggests friendliness without sacrificing professional appearance. Cards and containers use 8px (lg) for a slightly more pronounced softness, signaling that these are secondary surfaces. Modals and elevated containers use 12px (xl) for maximum approachability. Badges and pill-shaped elements use 9999px (full) for a fully rounded appearance, creating visual distinction for statu

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background: #a61c00, text: #000000, 9px 16px padding, 40px height, 4px radius) is used for all primary CTAs: "Tanya Harga" (Ask Price), "Hitung Estimasi" (Calculate Estimate), and form submissions. On hover, the background shifts to #8c1400 (a darker rust) over 150ms, with no shadow change, maintaining visual lightness. Button-secondary (transparent background, #a61c00 text, 1px solid border at #a61c00, same padding/height/radius) is used for secondary actions like "Masuk atau Daftar" (Sign In or Register). On hover, the background becomes #d9534d (primary-container) with #000000 text, creating a subtle fill effect. Both button states use label-md typography (14px, 600 weight) and transition over 150ms ease-