TEMA 20

Overview

TEMA 20 is a digital invitation platform designed for Indonesian life celebrations—weddings, engagements, anniversaries, and milestone gatherings. The aesthetic draws from **Warm Minimalism with Tactile Depth**: a philosophy that combines the restraint of minimalist design with the sensory richness of warm earth tones, soft shadows, and carefully considered typography. The brand personality is intimate, respectful, and celebratory—never flashy, always purposeful. The UI evokes the feeling of opening a handcrafted invitation: there's weight to the interactions, texture in the surfaces (via inset shadows and dashed borders), and a sense of occasion in every detail.

The voice is warm and conversational, speaking directly to life's meaningful moments without breathlessness or hyperbole. Vocabulary leans toward the personal: 'your celebration,' 'share your story,' 'gather your loved ones.' Example sentence in brand voice: 'Your guests arrive on May 18th—let them know with elegance.'

Colors

The color system centers on a warm, earthy palette anchored by two complementary browns: **Primary (#6c3333)** is a deep, sophisticated burgundy used for all primary CTAs, links, and interactive focus states—it commands attention without aggression. **Secondary (#452626)** is a darker, more austere brown that grounds the interface and appears in secondary navigation and text hierarchies. The **Error accent (#ce1717)** is a vivid red reserved for reservation counts, alerts, and critical actions—it breaks the warm palette intentionally to signal importance. The **surface stack** (#f3f0eb as base, stepping down to #e7e3dd for containers) provides a warm, off-white canvas that feels less sterile than pure white, evoking aged paper or linen. **On-surface text (#212529)** is nearly black but sli

Typography

The type system pairs **Alata** (a geometric, warm sans-serif) for display and headline work with **DM Sans** (a humanist sans-serif) for body and label text. This pairing creates visual hierarchy through personality rather than weight alone: Alata's rounded, approachable forms signal moments of celebration and emphasis, while DM Sans's neutral stance ensures readability and professionalism in supporting text. Display text (50px, 500 weight) is reserved for hero moments like event titles; headlines (24–32px, 700 weight) structure content sections; body text (16–18px, 400 weight) maintains legibility at all scales. Labels (12–14px, 500–600 weight) with 0.01–0.05em letter-spacing guide interaction. On small labels over textured backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to

Layout

The layout follows a **fluid, single-column rhythm** with a max-width of 800px, optimized for mobile-first viewing (the platform's primary use case is sharing invitations via messaging). The grid uses 12 columns internally but presents content in a centered, breathing layout: sections are separated by lg spacing (40px) to create visual rest between invitation components (cover, details, gallery, RSVP form, wishes). The gutter (24px) provides consistent left-right padding on mobile, collapsing to md spacing (24px) on larger screens. White-space is generous—never cramped—reflecting the brand's respect for the user's attention. Container max-width of 800px ensures text remains readable and images maintain their intended aspect ratios without distortion.

Elevation & Depth

Depth is conveyed through a **Tactile Inset Shadow system** rather than traditional drop shadows. Level 1 (Base Surface) uses no shadow, relying on the warm background color (#f3f0eb) for definition. Level 2 (Interactive Elements & Cards) applies inset shadows: box-shadow: 2px 2px 5px inset rgba(67, 67, 67, 0.21), creating a subtle embossed effect that suggests physical depth—as if the element is slightly recessed into the page. Level 3 (Modals & Overlays) combines a semi-transparent dark overlay (rgba(0, 0, 0, 0.84)) with a 3px blur filter to separate the modal layer from the background. Coun

Shapes

The shape philosophy is **Soft-Technical Warmth**: rounded corners are used consistently but with intention, never purely decorative. **Buttons and primary interactive elements** use 1rem (16px) border-radius, creating a friendly, approachable feel while maintaining clear clickability. **Cards and containers** use 0.75rem (12px) for a slightly sharper, more structured appearance that grounds content. **Input fields** use 0.5rem (8px) for a more technical, form-like appearance. **Countdown counters** use 1rem (16px) on the left-right edges and 0 on the top-left and top-right (via nth-child sele

Components

Action Elements **Buttons** come in two primary variants: Primary (background: #6c3333, text: white, 48px height, 24px horizontal padding, 1rem radius) for main CTAs like 'Open Invitation' and 'RSVP'; Secondary (transparent background, 2px solid #6c3333 border, text: #6c3333) for alternative actions. Both use label-md typography (14px, 600 weight). On hover, Primary buttons transition to #8b4d7f (primary-fixed-dim) with a 0.2s ease transition and elevated shadow (0 4px 8px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.06)). Secondary buttons shift background to surface-container-high (#ede9e3) on hover. **Badges** (like reservation counts) use error red (#ce1717) background, white text, 12px label-sm typography, full border-radius (9999px), 3px 9px padding, and a 3px 3px 9px shadow (

Do's and Don'ts

**Do**

• Do use inset shadows (2px 2px 5px inset rgba(67, 67, 67, 0.21)) on cards and containers to create tactile depth—never rely solely on drop shadows.
• Do pair Alata for headlines and DM Sans for body text to create a warm, readable hierarchy without excessive weight changes.
• Do apply the primary color (#6c3333) to all primary CTAs, focus states, and interactive elements—it's the brand's signature accent.
• Do use the error red (#ce1717) sparingly for badges, alerts, and critical actions to maintain its signal strength.
• Do maintain 40px (lg spacing) between major sections to create visual breathing room and respect the user's attention.
• Do apply 0.2–0.3s ease transitions on hover states for buttons and cards to signal interactivity without jarring motion.

**Don't**

• Don't use pure white (#ffffff) as the primary surface—always use the warm off-white (#f3f0eb) to reduce eye strain and maintain warmth.
• Don't apply drop shadows (0 X px Y px rgba(0, 0, 0, Z)) to primary surfaces; inset shadows are the system's depth language.
• Don't mix Alata and DM Sans weights arbitrarily—use Alata at 500–700 weight for display/headlines only, DM Sans at 400–600 for body/labels.
• Don't override the 800px container max-width on desktop; the narrow column maintains focus and readability for invitation content.
• Don't use secondary color (#452626) for primary CTAs—it's reserved for secondary navigation and text hierarchies.
• Don't apply border-radius smaller than 0.5rem (8px) to interactive elements; the system's warmth depends on generous rounding.