Didrika Ruvida

Overview

Didrika Ruvida is a digital creator and filmmaker's portfolio system rooted in Strategic Minimalism—an aesthetic that prioritizes clarity, intentional whitespace, and purposeful accent color placement to guide user attention through creative work. The brand serves creative professionals and clients seeking transparent, strategic communication about digital storytelling and visual production. The UI evokes a sense of refined professionalism through a light, airy canvas (white surfaces at #ffffff with subtle container layers at #f0f0f0–#e0e0e0) anchored by a distinctive teal primary (#005059) that appears on all interactive elements, creating a visual anchor that feels both contemporary and trustworthy.

The voice is direct, strategic, and grounded in craft. Didrika's tone avoids hyperbole; instead, it speaks in concrete terms about process, collaboration, and creative outcomes. Example sentence in brand voice: 'Cerita, Strategi, dan Visual dalam Setiap Proyek'—every project is a deliberate combination of narrative, planning, and visual execution. The personality balances approachability with expertise: warm enough to invite collaboration, precise enough to instill confidence in the work.

Colors

The color system is built on a light-dominant foundation with a single, powerful accent. Surface colors range from pure white (#ffffff) through subtle grays (#f5f5f5 surface-dim, #e8e8e8 surface-container, #d8d8d8 surface-container-highest) to create depth without visual noise. Body text is set at #363636 (on-surface), providing sufficient contrast (WCAG AA+) against white while maintaining warmth. The primary accent, teal #005059, is reserved exclusively for interactive elements: primary buttons, links, focus states, and the logo. This color appears at 100% opacity on CTAs (button-primary background with white text #ffffff), creating an unmistakable call-to-action. Secondary teal #407077 and its container #719398 support status indicators and secondary UI elements. The tertiary accent #ff

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys modern professionalism while remaining highly legible at all sizes. Display text (56.8px, weight 600, line-height 68px) is reserved for hero headlines like 'Memproses Ide Kreatif, dengan alur Strategis,' using a tight -0.02em letter-spacing to create visual impact. Headline-lg (40px, 600, 48px line-height) anchors section introductions; headline-md (28px, 600) breaks up content zones. Body text defaults to 15px at weight 400 with 24px line-height, providing comfortable reading rhythm for longer passages. Labels and button text use 14.24px at weight 600 with 0.01em letter-spacing, ensuring UI text remains crisp and scannable. All typography maintains a consistent vertical rhythm based on 8px increments. For small

Layout

The layout operates on a 12-column grid with a maximum container width of 1320px, allowing content to breathe on larger screens while maintaining focus on smaller viewports. The page rhythm uses semantic spacing: lg spacing (40px) separates major sections (hero, portfolio grid, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The hero section occupies full-width with a split composition: left side holds text content (headline, body copy, CTA) with 40px left gutter; right side features a full-height image. Portfolio grids use a 3-column layout on desktop, collapsing to 2 columns on tablet and 1 on mobile. Cards maintain consistent 24px padding with 4px border-radius and subtle shadows (0 3px 8px rgba(0, 0,

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the white background (#ffffff) with no shadow, establishing the ground plane. Level 2 (Standard Cards & Containers): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with a 1px border in #cccccc outline-variant, lifting cards 4px from the surface; background is white or surface-container-low (#f0f0f0). Level 3 (Hover/Active States & Modals): 4px 4px 12px rgba(0, 0, 0, 0.12) shadow with background shifted to surface-container-high (#e0e0e0), creating visual separation. Inte

Shapes

The shape philosophy is Refined Pragmatism: corners are subtle and functional, never decorative. Buttons and primary interactive elements use 12px border-radius (rounded.lg), creating a soft-edged appearance that feels contemporary without sacrificing legibility. Cards and containers default to 4px (rounded.DEFAULT), maintaining a clean, architectural feel. Input fields and smaller UI components use the same 4px radius for consistency. The logo and badge elements use 9999px (rounded.full) for perfect circles or pills, creating visual distinction for these key brand markers. This graduated appr

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses solid teal #005059 background with white text, 12px border-radius, and 9.92px vertical × 14.08px horizontal padding, resulting in a 40px height. On hover, the background shifts to primary-container #0b4047 with a 200ms ease-in-out transition, providing clear feedback. Button-secondary is transparent with a 1px border in primary #005059 and primary text; on hover, it gains a surface-container-high background (#e0e0e0) while maintaining the border. Button-ghost is fully transparent with primary text; hover adds a subtle surface-container background. All buttons use Poppins 600 weight at 14.24px for crisp, scannable text. Links use primary text color #005059 with no underline by default; on hover, they gain a

Do's and Don'ts

**Do**

• Do use primary teal #005059 exclusively for interactive elements—buttons, links, focus states—to create a consistent visual anchor that users learn to recognize as actionable.
• Do maintain minimum 40px spacing between major content sections and 24px gutters between grid items to preserve the minimalist aesthetic and prevent cognitive overload.
• Do apply Poppins 600 weight at 14.24px for all button and label text to ensure crisp, scannable UI copy that stands out from body content.
• Do use the shadow system (0 3px 8px rgba(0, 0, 0, 0.15) for standard, 4px 4px 12px rgba(0, 0, 0, 0.12) for elevated) to create depth without visual noise; never stack multiple shadows.
• Do transition all interactive state changes (hover, focus, active) over 150–200ms using ease-in-out timing to feel responsive and intentional.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs; reserve teal #005059 for the most important interactive elements to maintain visual hierarchy.
• Don't reduce border-radius below 4px on cards or containers; the refined pragmatism aesthetic requires soft corners that feel contemporary, not sharp.
• Don't apply shadows to buttons or text-based links; let solid color fill and state changes (hover background shift) signal interactivity instead.
• Don't mix typefaces; Poppins is the exclusive font family across all UI. Avoid system-ui, Georgia, or serif fallbacks in production.
• Don't use the full color palette on a single page; restrict primary accent to teal, secondary to supporting UI, and tertiary orange only for sparse highlights or imagery accents.