Jepreto

Overview

Jepreto is an Indonesian digital photobooth platform that transforms event photography into a playful, accessible experience. The brand embodies **Playful Maximalism**—a design philosophy that celebrates bold color, expressive typography, and illustrated characters while maintaining functional clarity. The UI evokes joy and spontaneity, inviting users to capture moments without friction. The emotional response is one of creative confidence: users feel empowered to design their own photobooth experiences, not constrained by rigid templates.

The brand voice is warm, energetic, and conversational—speaking directly to event creators in Indonesian with enthusiasm and humor. Vocabulary patterns favor action words ("Abadikan," "Coba," "Buat") and playful descriptors ("keren," "seru," "praktis"). The tone avoids corporate stiffness; instead, it celebrates the joy of shared moments. Example sentence: "Abadikan momen seru bareng teman—template keren, efek gila-gilaan, semua dalam genggaman."

Colors

Jepreto's color system is built on **saturated, high-energy accents** layered over a clean, light neutral foundation. Primary (#8e36ff) is a vivid purple used for all interactive CTAs, focus states, and brand-critical UI elements—it commands attention without aggression. Secondary (#f9d645) is a warm, saturated yellow deployed on accent badges, highlight labels, and secondary action buttons; it pairs with primary to create visual rhythm and playfulness. Tertiary (#f28df8) is a hot pink reserved for decorative elements, illustrations, and tertiary CTAs. The surface stack (surface: #f5f5f5, surface-container-high: #e0dce8, surface-bright: #ffffff) provides breathing room and ensures text legibility at 16px body size. On-surface (#0a0a0a) is near-black for maximum contrast on light background

Typography

The type system pairs **Chillax** (a rounded, geometric display font) with **Poppins** (a humanist sans-serif) and **Inter** (a neutral, highly legible workhorse). Chillax is reserved for headlines (display: 72px/900, headline-lg: 48px/700, headline-md: 32px/700) and button labels (label-md: 14px/600), where its playful curves reinforce the brand's energetic personality. Poppins serves as the secondary headline and label font (title-lg: 20px/600, label-sm: 12px/500), adding warmth without sacrificing clarity. Inter handles all body copy (body-lg: 18px/400, body-md: 16px/400) and ensures readability at small sizes. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to display-size headlines over photographic backgrounds to ensure legibility. Use letter-spacing: -0.04em on display sizes to tigh

Layout

Jepreto uses a **fluid, centered-column layout** with a max-width of 1280px and 24px horizontal gutters on mobile/tablet, scaling to 40px on desktop. The grid is 12-column, but the design favors single-column or two-column layouts for clarity. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The page rhythm alternates between full-width hero sections (with background gradients or illustrations) and contained content blocks, creating visual momentum. Container backgrounds use surface (#f5f5f5) with a subtle grid pattern (36px × 36px, rgba(0, 0, 0, 0.06)) to add texture without distraction. Apply lg spacing (40px) between majo

Elevation & Depth

Depth in Jepreto is achieved through **subtle shadows and layered surfaces**, not through dark overlays or blur effects. Level 1 (Base): surface (#f5f5f5) with a faint grid texture (36px × 36px, rgba(0, 0, 0, 0.06)) establishes the foundation. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in outline-variant (#c5c5d0) creates subtle lift. Level 3 (Modals & Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with surface-bright (#ffffff) background and a 2px border in primary (#8e36ff) for emphasis. Hover states elevate cards to Level 3 with a smooth 200

Shapes

Jepreto employs a **Soft-Technical** shape philosophy: rounded corners are generous but not organic, signaling approachability without sacrificing modern precision. Buttons use full (9999px) border-radius for a pill-shaped, friendly appearance (e.g., button-primary: 8px 32px padding, 44px height, 9999px radius). Cards and containers use lg (1rem / 16px) or xl (1.5rem / 24px) radius, creating visual softness while maintaining grid alignment. Input fields use DEFAULT (0.5rem / 8px) radius for subtle definition. Navigation items and badges use md (0.75rem / 12px) radius. The rationale: full-radiu

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (backgroundColor: #8e36ff, textColor: #faf8ff, fontFamily: Chillax, fontWeight: 700, padding: 8px 32px, height: 44px, borderRadius: 9999px) is used for all primary CTAs ("Coba Sekarang," "Buat Template"). On hover, shift backgroundColor to #7a2ce0 and apply transform: translateY(-2px) with a 200ms cubic-bezier(0.34, 1.56, 0.64, 1) transition for a subtle bounce effect. **button-secondary** uses a transparent background with a 2px solid primary border; on hover, fill with primary-container (#d4b6ff) and shift text to on-primary-container (#2a2a36). **button-accent-yellow** (backgroundColor: #f9d645, textColor: #1f1f27, fontFamily: Chillax, fontWeight: 700, padding: 12px 28px, height: 48px, borderRadius: 1rem

Do's and Don'ts

**Do**

• Do use primary (#8e36ff) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain visually distinct.
• Do pair Chillax headlines with Inter body copy for maximum contrast between playful and functional; never use Chillax for body text.
• Do apply full (9999px) border-radius to all buttons and badges to reinforce the friendly, approachable brand personality.
• Do use md (24px) spacing between cards and lg (40px) spacing between major sections to create visual breathing room and rhythm.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and input fields for subtle depth without visual heaviness.
• Do use secondary (#f9d645) and tertiary (#f28df8) as accent highlights, never as primary action colors—they support, not lead.

**Don't**

• Don't use primary (#8e36ff) and secondary (#f9d645) together in the same button or component—they create visual competition; choose one.
• Don't apply shadows to text; use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) only on display-size headlines over busy backgrounds.
• Don't use sharp corners (0px border-radius) on interactive elements; minimum is sm (4px), preferably lg (16px) or full (9999px).
• Don't exceed 1280px container max-width; maintain 24px gutters on mobile and 40px on desktop for consistent rhythm.
• Don't mix Poppins and Inter for body copy; reserve Poppins for labels and secondary headlines only.
• Don't use near-black (#1f1f27) or near-white (#faf8ff) as primary or secondary colors; they are reserved for text and backgrounds.