Clockster

Overview

Clockster is an enterprise HR management platform designed for retail chains, restaurants, and mid-market businesses seeking to automate payroll, attendance, scheduling, and document workflows. The design system embraces a 'Gradient-Glassmorphism' aesthetic—a fusion of vibrant gradient overlays with frosted-glass card surfaces—creating a sense of technological sophistication and depth. The visual language evokes clarity and control: users navigate complex HR data through layered, floating UI elements that feel both modern and approachable. The emotional response is one of confidence and efficiency: the interface whispers 'your team's data is organized, secure, and always within reach.'

The brand voice is direct, professional, and solution-oriented. Clockster speaks in the language of business outcomes: 'Эффективное управление персоналом' (effective personnel management), 'Удобное управление' (convenient management), 'Гибкость' (flexibility). The vocabulary avoids jargon bloat; instead, it pairs technical precision with human clarity. Example sentence in brand voice: 'Сегодняшнее расписание: время начала 09:00, приход подтвержден' (Today's schedule: start time 09:00, arrival confirmed)—factual, scannable, actionable.

Colors

The color system is anchored by a deep navy-to-black surface stack (#0a0e1a → #000000 at the lowest level) that provides a calm, professional canvas. The primary accent is a vibrant indigo-blue (#536dfe), used exclusively for call-to-action buttons, active states, and key interactive elements. This primary is never used for body text or passive surfaces; it is reserved for moments of user intent. Secondary accent is a fresh mint-green (#5def84), deployed sparingly for success states, confirmations, and positive feedback. Tertiary is a purple (#7e67ff) used for badges, secondary highlights, and decorative accents. The gradient system is critical to Clockster's identity: hero CTAs use a 90° linear gradient from primary (#536dfe) to a vibrant magenta (#b453fe), creating visual momentum. Card

Typography

The type system pairs ALS Hauss (a geometric, tech-forward sans-serif) for headlines and labels with Manrope (a humanist sans-serif) for body copy, creating a dual-personality hierarchy that balances precision with warmth. Display (64px, 700 weight, -0.04em letter-spacing) commands attention in hero sections and major announcements; Headline-lg (40px, 600 weight) anchors section titles; Body-lg (18px, 400 weight, 28px line-height) ensures readability in dense content areas. The letter-spacing strategy is deliberate: negative spacing (-0.04em to -0.02em) on large headlines creates visual compression and energy, while body copy uses neutral or slightly positive spacing (0em to 0.01em) for legibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) when layer

Layout

The page grid is a fluid 12-column layout with a max-width of 1280px, centered on viewport. The spacing scale follows an 8px base unit: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for standard gutter and card padding, lg (40px) for section separation, and xl (64px) for major layout breaks. Hero sections use lg spacing (40px) above and below to create breathing room; feature cards are separated by lg spacing vertically and md spacing horizontally. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. The rhythm is deliberate: sections are never adjacent without whitespace; floating glass cards (used in feature showcases) are positioned with absolute or relative positioning to create depth

Elevation & Depth

Depth is achieved through a three-tier elevation system that combines shadow, backdrop-filter blur, and background opacity. Level 1 (Base/Background): The page background is a solid dark surface (#0a0e1a) with optional animated gradient orbs (blue, green, purple) pulsing at 8–22s intervals and 0.08–0.22 opacity, creating subtle movement without distraction. Level 2 (Standard Glass Card): backdrop-filter: blur(24px), background: rgba(17, 29, 58, 0.98), border: 1px solid rgba(255, 255, 255, 0.1), box-shadow: 0 11px 66.8px rgba(255, 255, 255, 0.25). This is the workhorse component for feature car

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are generous enough to feel modern and approachable, yet restrained enough to maintain professional authority. Buttons use rounded.md (12px / 0.75rem), creating a pill-like silhouette that invites interaction without appearing playful. Cards use rounded.xl (1.5rem / 24px), softening the edges of glass surfaces and allowing the blur effect to diffuse naturally. Input fields use rounded.DEFAULT (0.5rem / 8px), a subtle curve that distinguishes them from buttons while maintaining visual cohesion. Integration logos and badges use rounded.ful

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a linear gradient background (90deg, #536dfe 0%, #b453fe 100%) with a 0.75rem border-radius, 14px vertical padding, 40px horizontal padding, and a distinctive box-shadow: 0 7px 32px rgba(143, 83, 254, 0.55). On hover, the button transitions opacity to 0.9 and applies a subtle transform: scale(1.02) over 200ms, creating tactile feedback. The button-primary-gradient variant is identical but explicitly named for clarity in component libraries. Secondary buttons are transparent with a 1px border (outline-variant color) and inherit the primary text color; on hover, they fill with surface-container-high and maintain the border. All buttons use label-md typography (14px, 600 weight, ALS Hauss) and

Do's and Don'ts

**Do**

• Do use the primary gradient (90deg, #536dfe → #b453fe) exclusively on hero CTAs and high-priority actions; never apply it to secondary or tertiary buttons.
• Do layer glass cards with backdrop-filter: blur(24px) and a 1px rgba(255, 255, 255, 0.1) border to maintain the frosted-glass aesthetic; avoid solid backgrounds on feature cards.
• Do apply negative letter-spacing (-0.04em to -0.02em) on display and headline text to create visual compression and energy; maintain neutral spacing (0em to 0.01em) on body copy for legibility.
• Do use the rounded token scale consistently: xl (24px) for cards, md (12px) for buttons, DEFAULT (8px) for inputs, full (9999px) for badges; never hardcode arbitrary border-radius values.
• Do separate sections with lg spacing (40px) vertically and md spacing (24px) horizontally to create breathing room and visual hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over gradient or animated backgrounds to ensure legibility without sacrificing the glassmorphic aesthetic.

**Don't**

• Don't use the primary color (#536dfe) for body text, passive surfaces, or non-interactive elements; reserve it exclusively for CTAs, active states, and key interactive moments.
• Don't apply solid backgrounds to feature cards; always use the glass-card component with backdrop-filter blur and semi-transparent backgrounds to maintain visual cohesion.
• Don't mix typefaces within a single headline or button; use ALS Hauss for all headlines and labels, Manrope for body copy only.
• Don't create custom border-radius values; always reference the rounded token scale (sm, DEFAULT, md, lg, xl, full) to ensure consistency across the system.
• Don't apply shadows without a corresponding elevation level; use the three-tier system (Level 1 base, Level 2 glass card, Level 3 elevated modal) to maintain visual hierarchy.
• Don't use the secondary or tertiary colors as primary accents; they are supporting roles only. Primary (#536dfe) is the signature brand color and must dominate the interactive layer.