Wedew

Overview

Wedew is a digital wedding invitation platform designed for modern Indonesian couples who seek to blend tradition with technology. The brand serves the millennial and Gen-Z wedding market, offering a vibrant, approachable aesthetic that celebrates joy and connection. The design language embraces "Playful Minimalism"—a fusion of clean, spacious layouts with bold accent colors (electric blue #2d66e5 and sunny yellow #ebda0e) that evoke celebration and optimism. The UI communicates efficiency and ease: every interaction feels light, responsive, and delightful, never bureaucratic or heavy.

Wedew's voice is warm, conversational, and encouraging—speaking directly to couples as partners in their journey, not as customers. The tone avoids corporate jargon; instead, it uses phrases like "Semua lebih praktis #bersamaWedew" (Everything is simpler together with Wedew) and "Solusi pernikahan lebih hemat, praktis, dan kekinian" (A smarter, simpler, more modern wedding solution). The vocabulary is accessible, action-oriented, and celebrates the couple's agency. Example sentence in brand voice: "Bagikan undangan Anda ke WhatsApp dalam satu klik—tamu Anda akan terpukau." (Share your invitation to WhatsApp in one click—your guests will be amazed.)

Colors

Wedew's color system balances a clean, neutral foundation with vibrant, energetic accents that signal joy and modernity. The primary color, Electric Blue (#2d66e5), is the signature accent used on all call-to-action buttons, interactive elements, and key links—it conveys trust, clarity, and forward momentum. The secondary color, Slate Gray (#717a86), provides a sophisticated, readable text and supporting UI layer. The tertiary accent, Sunshine Yellow (#ebda0e), is reserved for highlights, badges, and celebratory moments, adding warmth and optimism without overwhelming the interface.

Surface colors follow a light, airy palette: the primary surface is pure white (#ffffff) for maximum clarity and elegance, with subtle container variants (surface-container at #eeeff2, surface-container-high a

Typography

Wedew's type system pairs Poppins (headings, bold accents) with Source Sans Pro (body, UI labels), creating a dynamic contrast between expressive and readable. Poppins—a geometric, rounded sans-serif—conveys friendliness and modernity; it's used at display (64px, 700 weight) for hero headlines, headline-lg (40px, 600 weight) for section titles, and title-lg (20px, 600 weight) for card headers. Source Sans Pro—a neutral, highly legible sans-serif—anchors body copy at 16px (400 weight, 24px line-height) and UI labels at 14px (600 weight, 20px line-height). Letter-spacing is conservative: -0.02em on display to tighten the visual impact, 0em on body for maximum readability. On small labels over busy backgrounds (e.g., badges on hero imagery), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to

Layout

Wedew uses a 12-column fluid grid with a max-width of 1280px (container-max), ensuring responsive scaling from mobile (320px) to desktop. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero to features, features to testimonials), md (24px) creates breathing room within card groups and form layouts, and sm (12px) provides micro-spacing between labels and inputs. The gutter (24px) is applied consistently to horizontal padding on all container elements, creating a unified margin system. White-space is treated as a design element: the hero section uses 40px top/bottom padding and 24px horizontal gutter, allowing the headline (64px Poppins) and CTA button to breathe. Cards are laid out in a 3-column grid on desktop (each card 1/3 width minus gutter)

Elevation & Depth

Wedew's depth system uses subtle shadows and micro-interactions to create a sense of layering without visual heaviness. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, input fields) applies elevation.md: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that suggests the element is slightly lifted. Level 3 (modals, popovers, hovered cards) uses elevation.lg: 0 5px 40px rgba(0, 0, 0, 0.16), a larger, more diffuse shadow that conveys prominence and focus. On hover, cards transition from Level 2 to Level 3 with a 250ms cubic-bezier(0.4,

Shapes

Wedew employs a "Soft-Technical" shape philosophy: rounded corners are used consistently but conservatively, avoiding both sharp edges and excessive roundness. The default border-radius is 0.5rem (8px), applied to input fields, small buttons, and list items—this creates a friendly, approachable feel without sacrificing professionalism. Larger containers (cards, modals) use 1rem (16px) radius, providing visual softness while maintaining clarity. The primary CTA button uses 1rem (16px) radius, making it feel inviting and clickable. Badges and pills use full (9999px) radius for a playful, badge-l

Components

Action Elements Primary buttons (button-primary) use the signature Electric Blue (#2d66e5) background with white text, 16px Poppins 600-weight label, 16px vertical and 24px horizontal padding, and 1rem border-radius. The shadow is 0 3px 8px rgba(45, 102, 229, 0.2). On hover (button-primary-hover), the background darkens to #1f4fb8, the shadow deepens to 0 5px 16px rgba(45, 102, 229, 0.3), and the element translates up 2px (transform: translateY(-2px)) over 200ms. On active (button-primary-active), the background is #1a3fa8 and shadow reduces to 0 2px 4px, creating a pressed effect. Secondary buttons (button-secondary) are transparent with a 2px solid primary border, primary text color, and the same padding and radius; on hover, the background fills with primary-container (#e8f0ff) whil

Do's and Don'ts

**Do**

• Do use Electric Blue (#2d66e5) exclusively for primary CTAs and interactive focus states—it's the brand's signature accent and must remain distinctive.
• Do apply 24px (md) spacing between major sections and 12px (sm) spacing within component groups to maintain the airy, breathing aesthetic.
• Do pair Poppins (headings) with Source Sans Pro (body) consistently; never mix serif fonts or use system-ui as a fallback.
• Do animate state changes (hover, focus, active) with 200–250ms cubic-bezier easing and subtle transforms (translateY, shadow shifts); avoid instant, jarring transitions.
• Do use 1rem (16px) border-radius on cards and buttons to reinforce the soft-technical, approachable brand personality.
• Do ensure all text on light surfaces meets WCAG AA contrast (4.5:1 minimum); use on-surface (#333b47) for body copy and on-surface-variant (#717a86) for secondary text.

**Don't**

• Don't use primary blue (#2d66e5) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't apply shadows larger than 40px blur radius or use opacity-based layering (e.g., rgba(0, 0, 0, 0.5)) for depth; stick to the defined elevation scale (md: 0 3px 8px, lg: 0 5px 40px).
• Don't mix rounded corners inconsistently; use 0.5rem (8px) for inputs and small elements, 1rem (16px) for cards and buttons, and full (9999px) only for badges.
• Don't use the yellow tertiary (#ebda0e) as a background for large areas or body text—it's a highlight accent only; reserve it for badges, small callouts, and celebratory moments.
• Don't override the typography pairing; Poppins is for headings and emphasis, Source Sans Pro is for body and UI labels—never reverse these roles.
• Don't add decorative gradients or complex textures to the surface; Wedew's aesthetic is clean and minimal, with color and spacing doing the visual work.