Skillpik

Overview

Skillpik is a professional B2B SaaS platform designed to streamline workforce solutions and skill-matching at enterprise scale. The design system embodies 'Professional Minimalism with Vibrant Accents'—a contemporary aesthetic that balances corporate trust (deep navy #010022 header, clean white surfaces) with energetic brand personality (magenta primary #941050, electric blue secondary #007bff). The UI evokes confidence and accessibility: users encounter a clean, uncluttered canvas where critical CTAs and data points pop with intentional color, guiding attention without visual noise. The emotional response is one of clarity and competence—a platform that respects the user's time and intelligence.

Voice and brand personality are direct, professional, and human-centered. Skillpik speaks in active, outcome-focused language: 'Tell us how we can help' rather than 'Submit your inquiry.' Vocabulary emphasizes partnership ('solution,' 'collaboration,' 'support') over transactional language. Tone is warm but authoritative, never patronizing. Example sentence in brand voice: 'We're happy to help you find the right talent—give us a call or fill out the form below.'

Colors

The color system is anchored by a deep navy header (#010022) that establishes corporate credibility, paired with a clean white surface (#ffffff) for maximum readability and modern simplicity. Primary accent color is magenta (#941050), used exclusively on high-priority CTAs ('Register' button, section headings like 'Contact Us'), creating a memorable, clickable focal point. Secondary accent is electric blue (#007bff), deployed on secondary actions, links, and form focus states to provide visual feedback and hierarchy. Tertiary gray (#6c757d) serves as the workhorse for body text, labels, and disabled states, ensuring WCAG AA contrast (4.5:1 on white). Error states use red (#dc3545) for validation feedback. Surface stack follows a subtle gray progression: surface-container-lowest (#f5f5f5) f

Typography

The type system uses Poppins exclusively, a geometric sans-serif that conveys modern professionalism while remaining highly legible at all sizes. Display (60px, 700 weight) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) marks section breaks like 'Contact Us'; Headline-md (28px, 600 weight) introduces subsections; Title-lg (20px, 600 weight) labels form sections ('TELL US HOW WE CAN HELP'). Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry primary content and form descriptions, with 24px and 28px line-heights respectively for comfortable reading. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) annotate form fields and badges. Weight hierarchy is strict: 700 for display, 600 for headlines and labels, 400 for body. Letter-spacing is minim

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on viewport. The header spans full width with 24px horizontal gutter and 16px vertical padding. Main content uses a two-column split: left column (8 columns) contains the contact form, right column (4 columns) displays contact info and social links. Spacing rhythm is governed by the 8px unit: section separations use lg spacing (40px), card padding uses md spacing (24px), form field margins use sm spacing (12px). White-space is generous—the page breathes. Container max-width is 1280px; on tablets (< 960px), the layout shifts to single column with the contact info moving below the form. Gutter remains 24px on desktop, reduces to 16px on tablet, 12px on mobile. The form itself uses 24px gaps between field groups, 12

Elevation & Depth

Depth is conveyed through subtle shadows and surface color shifts rather than dramatic layering. Level 1 (Base): white background (#ffffff) with no shadow, establishing the neutral canvas. Level 2 (Cards & Inputs): 0 1px 2px rgba(0, 0, 0, 0.06) shadow with 1px border in #ced4da, creating a gentle lift. Level 3 (Hover & Focus): 0 4px 12px rgba(0, 0, 0, 0.08) shadow on card hover, signaling interactivity. Form inputs use a 1px solid border (#ced4da) at rest; on focus, the border becomes #007bff and a 3px rgba(0, 123, 255, 0.1) box-shadow appears, providing clear visual feedback without harsh con

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, avoiding both sharp brutalism and excessive roundness. Buttons and inputs use 0.5rem (8px) border-radius, a subtle curve that feels contemporary without being playful. Cards use 0.75rem (12px) for slightly more presence. The full-circle (50% / 9999px) is reserved for badges and social media icons, signaling completeness and brand identity. Form labels and section headings use 0px (sharp) to maintain hierarchy and formality. The rationale: 8px curves on interactive elements (buttons, inputs) signal 'touch me,'

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses magenta (#941050) background, white text, 10px vertical / 24px horizontal padding, 44px height, 8px border-radius, and label-md typography (14px, 600 weight). On hover, background shifts to #c2185b with a 200ms ease-in-out transition. On active, background becomes #941050 with a slight scale(0.98) transform. Focus state adds a 0 0 0 3px rgba(148, 16, 80, 0.2) box-shadow. Secondary buttons mirror the primary but use blue (#007bff) with a 0056b3 hover state. Ghost buttons (transparent background, magenta border, magenta text) are used for tertiary actions; on hover, they fill with #e83e8c background and white text. All buttons have cursor: pointer and disabled state at opacity: 0.5 with cursor: not-all

Do's and Don'ts

**Do**

• Do use magenta (#941050) exclusively for primary CTAs and section headings—it's the brand's signature and must never be diluted or overused on secondary elements.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile (16px tablet, 12px mobile) to preserve the breathing room that defines the interface.
• Do apply 8px border-radius to all interactive elements (buttons, inputs) and 0px to text-only elements (headings, labels) to maintain clear hierarchy and formality.
• Do use the full Material 3 color token stack (surface-container-lowest through surface-container-highest) for hover states and depth—never hardcode grays or invent new shades.

**Don't**

• Don't use blue (#007bff) as a primary CTA color; it's secondary and must defer to magenta. Blue is reserved for secondary actions, links, and form focus states.
• Don't apply shadows heavier than 0 4px 12px rgba(0, 0, 0, 0.08)—the aesthetic is flat-modern, not skeuomorphic. Avoid drop-shadows, blur, or glassmorphism.
• Don't round corners beyond 12px on any element; the shape philosophy is soft-technical, not playful. Avoid 16px+ radii or organic curves.
• Don't use the navy header color (#010022) on body backgrounds or cards—it's reserved for the header only. Maintain white (#ffffff) as the primary surface to preserve legibility and modernity.