Passgage

Overview

Passgage is a unified HR super-application designed for Turkish enterprises seeking to consolidate shift management, attendance tracking (PDKS), performance monitoring, and employee engagement into a single, intuitive platform. The brand embodies 'Energetic Pragmatism'—a design philosophy that pairs vibrant, optimistic visual energy with straightforward, no-nonsense functionality. The UI celebrates action and progress through bold primary colors (vivid orange-red #ff5722 paired with warm gold #ffb300), clean typography hierarchies, and generous white space that prevents cognitive overload. Users experience the interface as both approachable and trustworthy: the rounded corners and bright palette signal friendliness, while the structured layout and consistent component system convey reliability and professional competence.

Passgage's voice is direct, encouraging, and solution-oriented. The brand speaks in Turkish with clarity and warmth, avoiding corporate jargon in favor of concrete benefits ('2 Haftada Yarıya Düşürüyoruz!'—'We Cut It in Half in 2 Weeks!'). Tone examples: 'Passgage Kullanmak Değil, Kullanmamak Pahalı!' (Not using Passgage is expensive). The vocabulary emphasizes speed, simplicity, and human-centered outcomes. Every interaction is framed as progress toward operational excellence, never as burden or complexity.

Colors

Passgage's color system is built on a foundation of neutral, professional surfaces (light gray #e8e8e8 as primary surface, with a bright white #fcfcfc for elevated content) paired with two energetic accent colors that drive user action and attention. Primary (#ff5722, a vivid orange-red) is reserved exclusively for call-to-action buttons, critical interactive elements, and focus states—it commands attention without aggression and conveys urgency and forward momentum. Secondary (#ffb300, warm gold) supports primary in secondary CTAs, badges, and highlights, creating a complementary accent pair that feels cohesive and optimistic. Tertiary (#2872fa, vivid blue) is used sparingly for informational elements, links, and status indicators, providing visual separation from the action-driven primar

Typography

Passgage employs a two-font system: Plus Jakarta Sans for all display, headline, and label typography (conveying modernity and approachability), and Roboto for body and long-form content (ensuring legibility at small sizes and in dense data tables). The type hierarchy is steep and intentional: display text (70px, weight 700, line-height 78px) anchors hero sections with commanding presence; headline-lg (48px, weight 700) breaks major sections; headline-md (32px, weight 600) introduces subsections; and body-md (16px, weight 400, line-height 24px) carries primary content. Letter-spacing is conservative (–0.04em on display, 0.02em on body) to maintain warmth and prevent sterility. All interactive labels use Plus Jakarta Sans at 15px weight 600 with 0.01em tracking, creating visual distinction

Layout

Passgage uses a fluid 12-column grid with a maximum container width of 1290px, allowing the design to scale gracefully from mobile (single column) to desktop (multi-column layouts). The page rhythm is driven by the lg spacing token (40px) for section separation, creating breathing room between major content blocks without excessive white space. Gutters are set to 24px (md spacing), and internal card padding is 24px, establishing a consistent rhythm that feels neither cramped nor wasteful. The hero section occupies full viewport height with a vibrant orange background (#ff5722), white content card (rounded 20px), and right-aligned imagery, creating an asymmetrical, dynamic composition. Below the fold, content sections alternate between full-width colored backgrounds and constrained white ca

Elevation & Depth

Passgage's depth model relies on subtle shadows and layered surfaces rather than dramatic depth effects. Level 1 (base surface) uses the light gray background (#e8e8e8) with no shadow. Level 2 (standard card) applies box-shadow: 0px 10px 20px rgba(41, 51, 61, 0.1), creating a soft, diffuse shadow that suggests gentle lift without drama. Level 3 (elevated modals, expanded cards) uses box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1), a larger blur radius and spread that conveys significant elevation. All shadows use a cool-toned black (rgba(41, 51, 61, ...)) rather than pure black, maintaining warmt

Shapes

Passgage employs a 'Soft-Technical' shape philosophy: rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and CTAs use full-radius (100px border-radius) to maximize approachability and signal interactivity—the extreme rounding creates a pill shape that feels friendly and modern. Cards and containers use 20px border-radius (lg token), a moderate curve that balances warmth with structure; this radius is applied consistently across all card types (data cards, feature cards, modals) to create visual cohesion. Input fields and small

Components

Action Elements Buttons are the primary interaction mechanism and are designed for high visibility and clarity. The primary button (button-primary) uses the brand's signature orange-red (#ff5722) with white text, full-radius (100px), and 12px vertical / 32px horizontal padding, creating a 48px height that is touch-friendly and visually prominent. On hover, the background shifts to a slightly darker orange (#ff6f3d) over 200ms, providing tactile feedback without color shift fatigue. The secondary button (button-secondary) uses the warm gold (#ffb300) with dark text, slightly smaller padding (10px / 24px), and the same full-radius treatment, allowing it to sit comfortably alongside primary buttons without visual conflict. Ghost buttons (button-ghost) have a transparent background, dark t