LenteraSafety

Overview

LenteraSafety is Indonesia's premier occupational safety & health (K3) training and certification authority, serving enterprises across all sectors with government-certified courses (Kemenaker RI, BNSP) and SMK3 consulting. The design system embodies 'Professional Clarity'—a visual language that combines authoritative navy-blue backgrounds with vibrant orange accents, creating an atmosphere of trust, competence, and forward momentum. The interface evokes the precision of safety protocols while remaining approachable and navigable for diverse user audiences. Users encounter a confident, data-driven aesthetic that reassures them of institutional credibility.

The brand voice is direct, regulatory-aware, and solution-focused. LenteraSafety speaks in the language of compliance and risk mitigation, never resorting to hyperbole or casual tone. Example sentence: 'Sertifikasi Ahli K3 Umum kami memenuhi Keputusan Menteri Tenaga Kerja RI No. Kep-186/MEN/1999—kepatuhan yang terukur, hasil yang terbukti.'

Colors

The color system is anchored by a deep navy primary surface (#0f1b2d, rgb(15, 27, 45)) that dominates hero sections and card backgrounds, paired with a vibrant orange accent (#f36c20, rgb(243, 108, 32)) reserved exclusively for call-to-action buttons, badges, and critical interactive elements. This orange-on-navy combination creates high contrast (WCAG AAA compliant) and psychological urgency without aggression. Secondary blue (#3884c6, rgb(56, 132, 198)) is used for secondary buttons, links, and informational highlights, providing a cooler alternative when primary orange would overwhelm. Neutral grays (#6c757d for outline, #e9ecef for surface-container) serve as dividers, disabled states, and body text on light backgrounds. The surface stack progresses from pure white (#ffffff) for main c

Typography

The type system uses General Sans exclusively across all weights (400, 500, 600, 700, 800), a humanist sans-serif that balances technical precision with approachability. Display (60px, 800 weight, -0.04em tracking) anchors hero headlines with commanding presence; Headline-lg (40px, 800 weight) and Headline-md (28px, 700 weight) establish section hierarchy with tight negative letter-spacing (-0.02em, -0.01em) that conveys authority. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) maintain readability at 1.5–1.6 line-height ratios, critical for regulatory content. Label-sm (13px, 800 weight, 0.02em tracking) is reserved for button text and badges, where uppercase-like density reinforces action hierarchy. All headlines use 800 weight to differenti

Layout

The layout employs a 12-column grid with a fixed max-width of 1280px, centered on desktop and full-width on mobile (< 768px). The hero section spans full viewport height with a layered background: a dark navy gradient base (#0f1b2d → #1a2f4a) overlaid with animated dot-grid and glow decorations (positioned via CSS ::before/::after pseudo-elements). Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for card groups, creating rhythm that feels neither cramped nor excessive. The gutter (24px) applies consistently to container padding, ensuring content breathing room. Cards within sections use a 3-column layout on desktop (grid-template-columns: repeat(3, 1fr)), collapsing to 1 column on mobile. Hero CTAs ('LIHAT DETAIL', 'Login') are positioned with md pa

Elevation & Depth

Depth is achieved through a three-level shadow and backdrop system. Level 1 (Base): The hero background uses a subtle radial gradient (center: rgba(255, 255, 255, 0.05), edges: transparent) with a fixed dot-grid texture (1px dots at rgba(255, 255, 255, 0.08) spaced 20px apart) and animated glow orbs (blur: 80px, opacity: 0.15) positioned at top-left (blue, #3884c6) and bottom-right (orange, #f36c20). Level 2 (Standard Card): Glass cards use backdrop-filter: blur(8px), background: rgba(10, 24, 48, 0.55), border: 1px solid rgba(255, 255, 255, 0.1), and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15).

Shapes

The shape philosophy is 'Technical Softness'—sharp enough to convey professionalism, rounded enough to feel modern and approachable. Buttons use full border-radius (9999px, border-radius: 50% on icon-only variants) to create pill-shaped affordances that feel clickable and friendly. Cards use lg radius (1rem, 16px) for primary content containers, balancing geometric precision with organic warmth. Input fields and dropdowns use md radius (0.75rem, 12px), slightly less rounded than cards to signal 'form' rather than 'content.' Decorative elements (dot grids, glow orbs) have no radius (0px) or ful

Components

Action Elements Buttons are the primary interaction mechanism and use three variants: primary (orange, #f36c20, full-width on mobile, 44px height, 12px 24px padding, label-sm typography, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)), secondary (blue, #3884c6, same dimensions), and ghost (transparent with 1px primary border). All buttons use border-radius: 9999px and transition: background-color 200ms ease-out on hover. Primary-hover shifts to #e55a0f (darker orange) and secondary-hover to #2a6ba8 (darker blue). Icon-only buttons (e.g., search toggle, carousel nav) use 44px × 44px with border-radius: 50% and centered icon (16px, mdi icon font).

Containers & Surfaces Cards are the primary content container and use glass-morphism: background: rgba(10, 24, 48, 0.55), backdrop-filter: blu

Do's and Don'ts

**Do**

• Do use primary orange (#f36c20) exclusively for CTAs, badges, and critical interactive states—never for body text or secondary information.
• Do apply glass-morphism (backdrop-filter: blur(8px), rgba background, 1px border) to all cards over gradient backgrounds to maintain visual hierarchy and readability.
• Do use General Sans 800 weight for all headlines (Display, Headline-lg, Headline-md) to establish authority and differentiate from body text.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) between card groups to create rhythm without visual chaos.
• Do apply transition: background-color 200ms ease-out to all interactive elements (buttons, list items, cards) for smooth, predictable feedback.

**Don't**

• Don't use primary orange on backgrounds, body text, or non-interactive elements—it is reserved for CTAs and accents only.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08) on standard components; reserve lg elevation for modals and overlays.
• Don't mix border-radius values arbitrarily; use the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px) to maintain visual consistency.
• Don't use system fonts or fallback sans-serif; always load General Sans from Fontshare CDN to preserve the brand's humanist, professional character.
• Don't reduce line-height below 1.5 on body text or below 1.2 on headlines; regulatory content requires generous vertical spacing for accessibility and legibility.