Skills Alliance

Overview

Skills Alliance is a specialized talent acquisition platform serving the life sciences and STEM sectors, combining professional recruitment expertise with a vibrant, human-centered visual identity. The design system embraces "Precision Vitalism"—a movement that pairs rigorous, corporate professionalism (deep navy primary #0c4da2, clean typography in MartianGroteskWide) with energetic accent colors (lime green #6c3, sky blue #89cefc, warm orange #f57f42) that evoke innovation, growth, and human connection. The UI conveys competence and trustworthiness while remaining approachable and contemporary, reflecting the brand's mission to connect exceptional talent with forward-thinking organizations.

The brand voice is direct, confident, and human-first. Tone: precise without being cold, optimistic without being naive. Vocabulary favors action verbs ("connecting," "matching," "unlocking") and avoids corporate jargon. Example sentence in brand voice: "We don't just fill roles—we build teams that drive breakthrough science."

Colors

The color system operates on a dual-layer strategy: a professional foundation anchored by primary blue (#0c4da2, used for CTAs, focus states, and trust-critical elements) paired with a vibrant secondary palette that humanizes the interface and signals opportunity. Primary (#0c4da2) appears on all action buttons, link hover states, and focus rings (box-shadow: 0 0 0 3px rgba(12, 77, 162, 0.1)). Secondary green (#6c3) and its lighter variant (#bded98) highlight key achievements, growth metrics, and positive outcomes—reinforcing the brand's association with career advancement. Tertiary orange (#f57f42) and its tint (#f8ad86) accent supporting CTAs, warnings, and secondary navigation. The surface stack uses near-white (#ffffff, #f1f1f1, #eeeeee) for light, accessible backgrounds with subtle de

Typography

The type system balances geometric precision with human warmth. Headlines use MartianGroteskWide (a geometric sans-serif with distinctive letterforms) at weights 700 exclusively, reinforcing the brand's technical credibility and modern edge: display at 60px/68px line-height, headline-lg at 46px/54px, headline-md at 32px/40px. Body copy and UI labels use Author (a humanist sans-serif) at 400 weight for primary content (20px/28px for body-lg, 16px/24px for body-md) and 600 weight for interactive labels (14px/20px). Letter-spacing is minimal (-0.04em on display, -0.02em on headlines) to create visual density and authority; body text uses 0em spacing for natural readability. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) when placed over colored backgrounds t

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). Page rhythm is established through lg spacing (40px) for major section breaks, md spacing (24px) for component grouping, and sm spacing (12px) for internal element separation. The hero section occupies 80px vertical padding above and below content, creating breathing room that emphasizes the primary message. Cards and containers use md padding (24px) internally, with surface-container (#dedede) borders at 1px to define edges without visual heaviness. Flex layouts default to 0.5em gap (4px) for tight component clusters; grid layouts use the same gap for consistency. White-space is treated as a design element: negative spa

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics paper layering without introducing darkness. Level 1 (Base/Surface): no shadow; elements sit flush on the white background (#ffffff). Level 2 (Raised Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift for interactive containers and form fields. Level 3 (Modals/Dropdowns/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for overlays and elevated interactions. All shadows use a soft, diffuse blur (8px–24px) rather than sharp edges, maintaining the brand's approachable aesthetic. Hover t

Shapes

The shape philosophy is "Technical Warmth"—combining geometric precision with human-friendly curves. Buttons use full border-radius (9999px) to create pill-shaped affordances that feel inviting and modern, differentiating them from utilitarian rectangular inputs. Cards and containers use md radius (12px) for a subtle roundness that softens corners without appearing playful; this radius is applied consistently across all surface-container elements. Form inputs use DEFAULT radius (8px), slightly less rounded than cards, to signal their functional, data-entry purpose. Badges and accent highlights

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background: {colors.primary} (#0c4da2), text: {colors.on-primary} (#ffffff), padding: 12px 32px, height: 48px, and border-radius: 9999px. On hover, background transitions to #0a3a7f (a 15% darkening) over 200ms ease-in-out, with no shadow change. On focus, apply box-shadow: 0 0 0 3px rgba(12, 77, 162, 0.1) in addition to the hover state. Secondary buttons use transparent background with border: 1px solid {colors.primary} and box-shadow: inset 0 0 0 1px currentColor; on hover, background becomes {colors.primary-container} (#d4e3f7) with text remaining {colors.primary}. Ghost buttons (tertiary) have no border or background; on hover, background becomes {colors.surface-container-high} (#e8e8e8) and text color

Do's and Don'ts

**Do**

• Do use the primary blue (#0c4da2) exclusively for all CTAs, focus rings, and trust-critical interactive elements—never substitute with secondary colors.
• Do apply the secondary green (#6c3) and orange (#f57f42) accents to highlight positive outcomes, growth metrics, and supporting actions—they humanize the interface and signal opportunity.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; use 12px (sm spacing) only for tight component clusters or internal element separation.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease-in-out to maintain perceived responsiveness without feeling sluggish.
• Do use MartianGroteskWide exclusively for headlines (h1–h3) at 700 weight; reserve Author for body copy and UI labels to create clear visual hierarchy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use #191919 for primary text and #707070 for secondary to reduce eye strain and maintain brand warmth.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur radii smaller than 8px—the brand relies on soft, diffuse elevation, not sharp contrast.
• Don't mix border-radius values within a single component family (e.g., buttons should all use 9999px, not a mix of 12px and 16px).
• Don't override the 200ms ease-in-out transition timing on interactive elements; slower transitions feel sluggish, faster ones feel jarring and undermine the brand's precision.