Teamwork.com

Overview

Teamwork.com is a Professional Services Automation (PSA) platform that unifies project management, resource optimization, and financial visibility into a single, AI-augmented interface. The design system embraces a "Vibrant Minimalism" aesthetic—a movement that pairs high-energy gradient backgrounds (purples, pinks, and blues) with crystalline, functional UI elements that cut through visual noise. The brand personality is confident yet precise: it speaks to operations leaders and project managers who demand both beauty and accountability. The emotional response is one of clarity emerging from complexity—users feel empowered to make profitable decisions. Voice: direct, data-driven, never jargon-heavy. Example: "Your project margin just dropped 3%—here's why, and what to fix."

Colors

The color system is built on a vibrant-to-neutral spectrum anchored by two primary accents: Purple (#6438e0) for primary actions and AI-related UI, and Pink (#ff61c7) for secondary highlights and status indicators. The background gradient (light lavender #f5f7fa transitioning through #fbe4f3 to #fcade2) provides energetic visual momentum without overwhelming content. Primary (#6438e0) is used exclusively on high-priority CTAs ("Start your free trial"), navigation highlights, and focus states—it commands attention through saturation and contrast against the light surface. Secondary Pink (#ff61c7) appears on supporting CTAs, badges, and accent elements that require visual distinction but lower hierarchy than primary. The surface stack uses soft pastels: surface-container-low (#f8cae8) for el

Typography

The type system uses Work Sans across all scales, a humanist sans-serif that balances geometric precision with warmth—essential for a platform that must feel both technical and approachable. Display (72px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; Headline-lg (54px, 700 weight) frames section introductions; Headline-md (46px, 600 weight) breaks up content zones. Body-lg (20px, 400 weight, 0.01em tracking) is used for descriptive copy and subheadings; Body-md (16px, 400 weight) is the workhorse for card content and form labels. Label-md (14px, 600 weight, 0.01em tracking) marks buttons, badges, and UI chrome; Label-sm (12px, 500 weight, 0.02em tracking) is reserved for tertiary information and helper text. All headings use line-height of 115% (tight, confi

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered with auto margins and 24px horizontal gutters on desktop (15px padding on mobile). Section padding follows a semantic scale: lg spacing (40px) separates major content blocks (hero, feature sections, footer), md spacing (24px) divides subsections, and sm spacing (12px) creates breathing room within cards. The hero section occupies full viewport height with a radial gradient background (purples and pinks) that draws the eye to the centered CTA cluster. Container max-widths vary by content type: 1280px for full-width sections, 1100px for constrained feature grids, 991px for mobile breakpoints. White-space is used aggressively—cards float in generous padding, and text blocks never exceed 65 characters per line for r

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics light falling on layered glass. Level 1 (Base): the gradient background with no shadow, establishing the canvas. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that lifts cards 4px above the surface—used on default cards, input fields, and standard buttons. Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a deeper, more spread shadow that creates a sense of floating interaction—applied on card-hover, button-hover, and modal overlays. Inset borders (1px solid rgba

Shapes

The shape philosophy is "Soft-Technical"—rounded corners that feel modern and approachable without sacrificing clarity. Buttons use full radius (9999px / border-radius: 50%) to create pill-shaped affordances that feel inviting and clickable; this 56px height + full radius creates a distinctive, recognizable CTA silhouette. Cards and containers use lg radius (1rem / 16px) for a subtle, professional curve that softens hard edges without appearing playful. Input fields use md radius (0.75rem / 12px), a middle ground that signals form interaction while maintaining visual hierarchy below buttons. B

Components

Action Elements Buttons are the primary interaction primitive. The button-primary component uses {colors.primary} (#6438e0) with full radius, 56px height, and 20px vertical / 36px horizontal padding. On hover, the background shifts to {colors.primary-fixed-dim} (#aa8df8) with a 200ms transition. The button-secondary variant uses a 2px solid border in {colors.on-surface} (#1d1c39) with transparent background, creating a clear visual hierarchy. Focus states apply a 3px glow (0 0 0 3px rgba(100, 56, 224, 0.1)) to both variants. Button-tertiary uses {colors.tertiary} (#4da2f8) for supporting actions like "Book a demo." All buttons use {typography.label-md} (14px, 600 weight) and apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) when placed over gradients.

Containers & Surfaces Cards are

Do's and Don'ts

**Do**

• Do use {colors.primary} (#6438e0) exclusively on high-priority CTAs and focus states—it's the brand's signature accent and must remain rare and impactful.
• Do apply full radius (9999px) to all buttons to create a distinctive, recognizable affordance that signals interactivity.
• Do maintain 7:1 contrast between {colors.on-surface} (#1d1c39) and all light surfaces to ensure WCAG AA compliance and readability.
• Do use the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition timing on all interactive state changes (hover, focus, active) for consistent, professional motion.
• Do layer shadows (Level 1 → Level 2 → Level 3) to create clear visual hierarchy and depth without relying on color alone.

**Don't**

• Don't use {colors.secondary} (#ff61c7) on primary CTAs—it's a supporting accent and will dilute the primary's visual authority.
• Don't apply sharp corners (0px radius) to buttons or cards; the brand requires softness and approachability.
• Don't exceed 1280px container max-width; the layout is optimized for focus and readability within this constraint.
• Don't use text-shadow on body copy or large text blocks—it's reserved for small labels over busy backgrounds only.
• Don't mix shadow levels within a single interaction state; if a card is elevated on hover, use Level 3 shadow consistently across all hover cards.