Sasana Digital

Overview

Sasana Digital embodies a **Technical Optimism** aesthetic—a design philosophy that merges geometric precision with warm, human-centered approachability. The brand serves Indonesian businesses navigating digital transformation, and the visual system reflects this mission: clean lines and structured layouts convey competence and reliability, while the signature coral-orange primary color (#f36f4f) injects energy and approachability into every interaction. The deep navy secondary (#0052ff) grounds the palette with corporate trust, while layered geometric patterns (visible in hero backgrounds) suggest interconnectedness and data flow without overwhelming the user.

The brand voice is consultative yet accessible—never jargon-heavy, always solution-focused. Sasana Digital speaks to business owners and decision-makers in clear, direct Indonesian and English, using concrete outcomes over abstract promises. Example: "Kami telah membantu 300+ klien sejak 2019 mengakselerasi pertumbuhan melalui software kustom dan strategi digital yang terukur." The tone balances professionalism with warmth; the UI should feel like a trusted advisor, not a corporate machine.

Colors

The color system is built on a **Warm-Technical** duality. Primary (#f36f4f, a vibrant coral-orange) is reserved exclusively for call-to-action buttons, active navigation states, and key interactive elements—it's the color users click. Secondary (#0052ff, a saturated electric blue) supports data visualization, secondary CTAs, and accent highlights, creating visual rhythm without competing for attention. Tertiary (#0274be, a deeper professional blue) is used for supporting UI elements like badges and secondary cards, reinforcing the corporate-trustworthy layer.

The surface stack is deliberately minimal and light: surface (#ffffff) is the primary canvas, with container variants (surface-container-low #f5f5f5, surface-container #eeeeee, surface-container-high #e6e6e6) providing subtle depth

Typography

The type system uses **Inter** exclusively across all scales, a choice that reinforces the brand's modern, tech-forward identity while maintaining exceptional legibility at all sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major announcements; Headline-lg (40px, 600 weight) anchors section titles; Headline-md (32px, 600 weight) is used for subsection headers and card titles. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content and descriptions; Body-md (16px, 400 weight) handles UI labels and secondary content. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, badges, and form labels, with Label-sm (12px, 500 weight) for tertiary metadata and helper text. Line-height is consiste

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1240px, centered on the viewport. Horizontal padding (gutter) is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Sections are separated by lg spacing (40px) vertically, creating a clear rhythm that guides the eye through the page. The hero section (min-height 600px, padding 80px 24px) establishes visual dominance and sets the tone; subsequent sections use 60px top/bottom padding to maintain breathing room. Container widths follow semantic breakpoints: 1240px for full-width sections, 900px for narrower content blocks (e.g., testimonials, feature grids). White-space is treated as a design element—empty space around cards and text blocks is never less than md spacing (24px), reinforcing the premium, unhurrie

Elevation & Depth

Depth is conveyed through **Subtle Layering**—a restrained shadow system that avoids the heavy drop-shadows common in older design systems. The elevation scale has three levels: Level 1 (Base/Surface, no shadow) for the page background and flat content; Level 2 (Standard Cards, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for cards, input fields, and standard containers; Level 3 (Elevated/Hover, box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) for modals, floating action buttons, and hover states on interactive elements. Shadows use a warm black (rgba(0, 0, 0, X)) rather than pure black to maintain v

Shapes

The shape philosophy is **Geometric Warmth**—a balance between sharp, technical precision and human-friendly softness. Buttons use full rounded corners (border-radius: 9999px, or 50% on circular elements) to feel approachable and clickable; this is the most prominent shape in the UI and signals interactivity immediately. Cards and containers use lg rounding (1rem / 16px) to soften edges without sacrificing the structured aesthetic. Input fields and smaller UI elements use DEFAULT rounding (0.5rem / 8px) for a subtle, professional appearance. Icon circles (used for feature highlights and servic

Components

Action Elements Buttons are the primary interaction mechanism and must be instantly recognizable. **Button-primary** (background: #f36f4f, text: white, padding: 15px 40px, height: 48px, border-radius: 9999px) is used for all primary CTAs: "Hubungi Kami", "Temukan Solusi Bisnis", form submissions. On hover, transition to button-primary-hover (background: #fa5c36) over 0.2s with cursor: pointer. **Button-secondary** (transparent background, 2px border #f36f4f, text: #f36f4f, same padding/height/radius) is used for alternative actions and secondary navigation; on hover, fill the background with surface-container-high (#e6e6e6) while maintaining the border. Both button states must include box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) to lift them off the page.

Containers & Surfaces **Card

Do's and Don'ts

**Do**

• Do use primary (#f36f4f) exclusively on CTAs and active states—never on backgrounds or large surface areas.
• Do maintain at least 24px (md spacing) of white-space around cards and content blocks to preserve the premium, breathing aesthetic.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces (cards, dropdowns, modals) for consistent depth.
• Do use Inter font at all scales—never fall back to system fonts or serif typefaces.
• Do transition interactive elements over 0.2s (buttons, cards, inputs) using ease-in-out timing for smooth, professional motion.
• Do use full rounded corners (border-radius: 9999px) on all buttons to signal interactivity and approachability.

**Don't**

• Don't use black (#000000) for body text or general UI elements—use on-surface (#4b4f58) for warmth and readability.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the brand is modern and light, not heavy or dramatic.
• Don't mix secondary (#0052ff) and primary (#f36f4f) on the same button or interactive element; choose one accent color per component.
• Don't use sharp corners (0px border-radius) on cards, buttons, or inputs—minimum is DEFAULT (0.5rem).
• Don't reduce padding below sm (12px) on form fields or button interiors; the brand values spaciousness and clarity.
• Don't apply text-shadow or text-outline to body text; reserve these techniques for small labels over busy backgrounds only.