PT Multikarya Sinardinamika

Overview

PT Multikarya Sinardinamika is an industrial automotive parts supplier serving the manufacturing sector across Indonesia and the Asia-Pacific region. The design system embodies 'Technical Confidence'—a visual language that combines deep navy-blue authority with strategic accent colors (vibrant yellow and cyan) to convey reliability, precision, and industrial competence. The brand personality is professional yet approachable: the UI prioritizes clarity and functional hierarchy, avoiding unnecessary ornamentation while maintaining visual warmth through generous whitespace and carefully calibrated color contrast. The emotional response is one of trust and capability—users should feel assured that they are engaging with a serious, well-organized supplier.

The voice is direct, factual, and solution-oriented. Vocabulary patterns emphasize capability ('solutions,' 'support,' 'ecosystem,' 'competitive advantage') and avoid hyperbole. Example sentence in brand voice: 'Our integrated supply chain ensures your production line stays moving—on schedule, on spec, every time.'

Colors

The color system is anchored by a commanding deep navy primary (#000090) used exclusively for primary CTAs, active states, and brand-critical interactive elements. This color conveys industrial authority and is applied at full opacity on white backgrounds (contrast ratio 21:1 against #ffffff). Secondary color (#54595f, a warm gray) provides supporting hierarchy for secondary actions and metadata, while the tertiary accent (#fab702, a vibrant golden yellow) highlights critical information, warnings, and promotional elements—used sparingly to maintain visual impact. The surface stack progresses from pure white (#ffffff) through carefully graded grays (#f8f9f9 → #e9e9e9 → #cccccc) to create depth without introducing color. All text on white surfaces uses #222222 (on-surface) for primary conte

Typography

The type system pairs Plus Jakarta Sans (display weight 700, 75px) for hero headlines with Montserrat (600 weight, 40px–20px) for section headers and Montserrat subheadings, creating a confident, modern hierarchy. Body copy uses PT Sans (400 weight, 16px–18px, 24–28px line-height) for accessibility and readability at small sizes. The system enforces a 1.5–1.75 line-height ratio across all body text to ensure legibility in dense industrial content. Letter-spacing is tightened on display text (-0.04em) to create visual impact, while body and label text use +0.01em to +0.05em spacing to enhance clarity. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) when overlaid on photographic backgrounds or busy surfaces to maintain contrast. Montserrat's geometric structu

Layout

The layout uses a 12-column fluid grid with a fixed container max-width of 1230px, centered on desktop viewports. Page rhythm is established through lg spacing (40px) for major section separation and md spacing (24px) for component grouping. The gutter width is consistently 24px between grid columns. Hero sections occupy full-width viewport height with a semi-transparent dark overlay (rgba(0, 0, 0, 0.3)) over background imagery to ensure text legibility. Content sections use a 2–3 column layout on desktop, collapsing to single-column on tablet (768px breakpoint) and mobile (480px breakpoint). Whitespace is generous: minimum 40px padding on all sides of container content, with 64px (xl spacing) reserved for breathing room between major content blocks. The container-max-width of 1230px preve

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts rather than heavy drop shadows. Level 1 (Base Surface) uses no shadow and sits at #ffffff. Level 2 (Standard Cards) applies md-elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px border in #e5e5e5, creating a subtle lift. Level 3 (Modals, Popovers, Elevated Surfaces) uses lg-elevation shadow (0 9px 14px rgba(0, 0, 0, 0.05)) with a 1px border in #cccccc and a background color shift to #f7f7f7 or #f0f0f0. Interactive hover states increase shadow depth by one tier (Level 2 → Level 3) and shift backgrou

Shapes

The shape philosophy is 'Technical Minimalism'—sharp, precise corners that reflect industrial manufacturing while maintaining approachability through selective rounding. Buttons and inputs use 3px border-radius (DEFAULT) for a slightly softened edge that feels modern without sacrificing technical character. Cards and larger containers use 6px (lg) for a more pronounced softness that invites interaction. Full-width modals and hero sections use 0px (no rounding) to anchor the design to the viewport. Badges and pills use 9999px (full) for maximum softness, creating visual distinction from functio

Components

Action Elements Buttons follow a three-tier system: primary (navy #000090 background, white text, 48px height, 12px 24px padding, 3px border-radius) for main CTAs; secondary (transparent background, navy text, 2px navy border) for alternative actions; and accent (golden yellow #fab702 background, black text) for promotional or warning states. All buttons apply md-elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and transition to lg-elevation on hover with a 200ms ease-out timing function. Focus states add a 3px inset box-shadow in rgba(0, 0, 144, 0.1). Disabled buttons reduce opacity to 0.5 and remove hover effects.

Containers & Surfaces Cards use a white background (#ffffff) with 1px border in #e5e5e5, 24px padding, and 6px border-radius. Standard card shadow is md-elevation (0 3

Do's and Don'ts

**Do**

• Do use primary navy (#000090) exclusively for primary CTAs and active states—never for body text or backgrounds.
• Do apply md-elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and floating elements for consistent depth.
• Do maintain minimum 24px padding (md spacing) inside all containers and 40px (lg spacing) between major sections.
• Do use Montserrat 600 for all headlines and PT Sans 400 for body text to maintain the technical-yet-approachable voice.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) on small labels overlaid on photographic backgrounds.
• Do use the tertiary yellow (#fab702) sparingly—only for critical alerts, promotional badges, or data highlights.

**Don't**

• Don't use primary navy (#000090) for body text or large surface backgrounds—reserve it for interactive elements only.
• Don't apply border-radius greater than 6px to buttons or inputs; maintain technical sharpness with 3px (DEFAULT) or 4px (md).
• Don't mix font families within a single component; use Montserrat for headers and PT Sans for body consistently.
• Don't apply shadows greater than lg-elevation (0 9px 14px rgba(0, 0, 0, 0.05)) to avoid visual heaviness.
• Don't use the secondary gray (#54595f) for primary CTAs or interactive elements—it's reserved for metadata and supporting hierarchy.
• Don't reduce padding below 12px (sm spacing) on interactive elements; maintain touch-target minimum of 48px height for buttons.