Skillpik

Overview

Skillpik is a modern recruitment platform designed to streamline enterprise talent acquisition workflows. The design system embodies 'Professional Geometric Minimalism'—a visual language that combines clean, structured layouts with vibrant geometric accents (vivid magenta, electric cyan, and golden yellow) to inject energy into traditionally austere HR interfaces. The brand personality is confident yet approachable: it speaks to HR professionals with precision and clarity, never condescending, always solution-focused. The UI celebrates process transparency through visual hierarchy and color-coded workflow steps, transforming complex candidate management into an intuitive, almost playful experience.

The tone is direct and action-oriented. Skillpik uses active verbs, concrete outcomes, and avoids jargon when possible. Example sentence in brand voice: 'Source, screen, and hire your next great candidate in half the time—without the busywork.'

Colors

The Skillpik color system is anchored by a bold primary magenta (#ba1565, deepening to #941050 on hover) that commands attention on CTAs and interactive elements, signaling decisive action in recruitment workflows. This is paired with a secondary electric blue (#007bff) used for secondary actions, links, and informational highlights, creating a complementary accent pair that feels both professional and energetic. The tertiary golden yellow (#ffc107) is reserved for active process steps, badges, and highlights—drawing the eye to critical workflow stages without overwhelming the interface.

The surface stack uses a clean white foundation (#ffffff) with carefully calibrated grays for depth: surface-container-low (#f0f2f5) for subtle backgrounds, surface-container (#e9ecef) for card containers

Typography

The typography system uses Poppins exclusively, a geometric sans-serif that reinforces the brand's 'Professional Geometric' identity. Display (60px, 700 weight) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major content blocks; headline-md (28px, 600 weight) breaks sections into digestible chunks. Body text (16px, 400 weight) maintains legibility at standard reading distance with 24px line-height, while label-md (14px, 600 weight) emphasizes UI labels and button text. Letter-spacing is minimal (-0.04em on display, -0.02em on headlines) to create visual tightness that feels premium and intentional. On small labels over busy backgrounds (e.g., process step numbers), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure contrast without sacrif

Layout

The layout uses a 12-column fluid grid with a 1280px max-width container, ensuring responsive scaling from mobile to desktop. Page rhythm is established through consistent spacing: lg (40px) separates major sections, md (24px) divides content blocks, and sm (12px) creates breathing room within components. The gutter is fixed at 24px on all sides, maintaining consistent margins from viewport edges. Hero sections occupy full-width with centered content, while card-based layouts use a 3-column grid on desktop, collapsing to 1 column on mobile. White-space is generous—never cramped—reflecting the brand's confidence and clarity. The container-max-width of 1280px prevents line-length from exceeding 75 characters on body text, optimizing readability.

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0,0,0,0.06) with 1px solid border at #dee2e6, creating a soft lift. Level 3 (Modals & Elevated Cards): box-shadow: 0 4px 12px rgba(0,0,0,0.08) with the same border, signaling higher prominence. Interactive focus states use a 3px ring at rgba(0, 123, 255, 0.1) around secondary-blue, creating a halo effect without harsh outlines. Hover transitions are smooth (200ms ease-in-out) to prevent jar

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are applied consistently but conservatively, reinforcing the professional-yet-approachable aesthetic. Buttons and inputs use 4px radius (0.5rem DEFAULT), creating a subtle softness without appearing playful. Cards and larger containers use 8px radius (1rem lg), providing visual distinction while maintaining structural clarity. Process step circles use full (9999px) border-radius for perfect roundness, emphasizing their role as focal points in the workflow. The 4px radius on buttons (border-radius: 4px) is the most-used radius,

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses magenta (#ba1565) background with white text, 44px height, 10px 24px padding, and 4px border-radius. On hover, the background darkens to #941050 with a 200ms transition. The secondary button (button-secondary) uses electric blue (#007bff) with identical sizing and transitions to #0056b3 on hover. Ghost buttons (button-ghost) have transparent backgrounds with a 1px magenta border and magenta text, inverting on hover to a light gray background (#f0f2f5). All buttons use label-md typography (14px, 600 weight) for consistent visual weight.

Containers & Surfaces Cards (card component) use a white background (#ffffff) with 1px solid border at #dee2e6, 24px padding, and 8px border-radi

Do's and Don'ts

**Do**

• Do use magenta (#ba1565) exclusively for primary CTAs and high-priority actions—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px gutter spacing on all sides and use lg (40px) spacing between major sections to create breathing room.
• Do apply 4px border-radius consistently on buttons, inputs, and small components; use 8px on cards and larger containers.
• Do use Poppins at 600 weight for all labels, headlines, and button text; reserve 400 weight for body content only.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to feel responsive without jarring.
• Do use the secondary-blue (#007bff) focus ring (3px, rgba(0, 123, 255, 0.1)) on all interactive elements for accessibility.
• Do apply box-shadow: 0 1px 2px rgba(0,0,0,0.06) to cards and 0 4px 12px rgba(0,0,0,0.08) to elevated surfaces for subtle depth.

**Don't**

• Don't use magenta for secondary or tertiary actions—it dilutes the primary CTA's impact and confuses the visual hierarchy.
• Don't apply border-radius greater than 8px on cards or containers; it reads as overly playful and undermines professionalism.
• Don't mix typefaces; Poppins is the only font family in the system—mixing introduces visual noise and breaks cohesion.
• Don't use harsh shadows (box-shadow: 0 10px 30px rgba(0,0,0,0.3)) or drop-shadows; they feel dated and clash with the modern aesthetic.
• Don't apply transitions longer than 300ms on interactive elements; they feel sluggish and reduce perceived responsiveness.
• Don't use the navy header background (#010022) on body content—it's reserved for the header to create a clear visual frame.
• Don't exceed 1280px container max-width; wider layouts break the intended rhythm and make text lines too long to read comfortably.