Humwork

Overview

Humwork is a B2B SaaS platform that bridges AI agents and human expertise through the Model Context Protocol (MCP). The brand embodies a "Technical Pragmatism" aesthetic—combining the precision of enterprise software with the approachability of consumer-grade design. The visual language is clean, high-contrast, and purposefully minimal: a light neutral canvas (#f7f7f7) with deep charcoal accents (#333333) and vibrant accent colors (orange #ff5a00, cyan #38f3f3) that signal energy and real-time capability. The UI evokes confidence and speed—users should feel that expert help is seconds away, not hours. The brand personality is direct, technical but not jargon-heavy, and solution-focused. Voice example: "Your AI agent hit a wall. We'll connect it to a human expert in under 30 seconds—no setup, no friction."

Colors

The color system is anchored in a high-contrast, light-first palette designed for clarity and accessibility. Primary (#333333) is the dominant text and interactive color—used for headings, buttons, and the navigation bar. It conveys authority and stability. Secondary (#ff5a00, a warm orange) is the brand's signature accent, deployed on CTAs, highlights, and status indicators to signal action and urgency. Tertiary (#38f3f3, a bright cyan) provides a complementary accent for secondary information, success states, and decorative elements. The surface stack ranges from #f7f7f7 (base background) through #d8d8d8 (highest container), creating subtle depth without relying on shadows. Error states use #f04d3e (a muted red-orange) to maintain visual consistency with the warm palette. All text on dar

Typography

The type system pairs brittiSans (a custom, geometric display font) for headlines with Inter (a neutral, highly legible sans-serif) for body and UI text. This pairing creates visual hierarchy and personality: brittiSans conveys modernity and confidence at large sizes (display: 83px, headline-lg: 58px), while Inter ensures readability at smaller scales (body-md: 16px, label-sm: 12px). Letter-spacing is tightened on headlines (-0.03em to -0.015em) to enhance impact and reduce visual weight. Body text uses 0em letter-spacing for optimal readability. Line-height is generous on body copy (28px for 18px text) to support scanning and reduce cognitive load. All interactive labels (buttons, links) use font-weight 600 at 14px with 0.01em letter-spacing to signal clickability. On small labels over bu

Layout

The layout follows a 12-column grid with a max-width of 1240px, centered on the viewport. The page uses a fluid gutter of 20px on mobile, scaling to 40px on desktop. Sections are separated by 40px (lg spacing) vertically, creating a rhythm that feels spacious without being wasteful. The hero section uses a two-column layout on desktop (left: text and CTAs, right: interactive demo) with a 38px gap, collapsing to single-column on mobile. Cards and containers use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The navigation bar is fixed at the top with 14px top offset on mobile, 22px on desktop, and uses 8px internal padding. Container backgrounds (cards, modals) are inset by 20px from the viewport edge on mobile to prevent edge-to-edge layouts. White-spac

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. The elevation stack consists of three levels: Level 1 (Base) uses no shadow and the default surface color (#f7f7f7). Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a background of #ffffff and a 1px border at rgba(51, 51, 51, 0.1). Level 3 (Elevated/Modal) uses box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) with the same background and border. Interactive elements (buttons) use inset shadows to create a tactile, pressed appearance: inset 0 4px 12px 0

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but conservatively to balance approachability with professionalism. Buttons and primary interactive elements use 1rem (16px) border-radius, creating a friendly, modern appearance without sacrificing legibility. Cards and containers use 1rem as well, maintaining visual cohesion. Input fields and smaller UI components use 0.5rem (8px) for a more refined, technical feel. The navigation bar uses 1rem to match button styling and create a unified top-level container. Badges and pills use full border-radius (9999px) to sig

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses a dark gradient background (linear-gradient(to bottom, #333333, #262626)) with white text, 14px padding vertical and 20px horizontal, and a 16px border-radius. The inset shadow (inset 0 4px 12px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 1px 0 #000000) creates a beveled, tactile appearance. On hover, the button translates up 1px (transform: translateY(-1px)) with a 200ms cubic-bezier(0.2, 0, 0, 1) transition. Secondary buttons use a transparent background with a 1px border at #333333 and the same text color, padding, and radius. Ghost buttons (used in the nav bar) use rgba(255, 255, 255, 0.14) background with white text and 10px vertical / 16px horizontal padding. All button text uses Inter, font-weight

Do's and Don'ts

**Do**

• Do use the primary color (#333333) for all body text, headings, and primary interactive elements to maintain visual consistency and hierarchy.
• Do apply the secondary orange (#ff5a00) exclusively to CTAs, success states, and brand-critical highlights—never use it for neutral UI.
• Do maintain the 40px vertical spacing between major sections and 24px internal padding in cards to preserve the spacious, high-confidence aesthetic.
• Do use brittiSans for headlines at 44px or larger; use Inter for all body text and UI labels to ensure readability and visual clarity.
• Do apply the inset shadow (inset 0 4px 12px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 1px 0 #000000) to primary buttons to create tactile depth.
• Do use 1rem (16px) border-radius on buttons, cards, and the nav bar to create a cohesive, approachable visual language.

**Don't**

• Don't use the primary color (#333333) as a background for large areas—reserve it for the nav bar and small, focused UI elements.
• Don't apply the secondary orange (#ff5a00) to non-interactive elements or backgrounds; it should signal action and urgency only.
• Don't reduce padding or spacing below the defined scale (xs: 4px, sm: 12px, md: 24px) to maintain visual breathing room and reduce cognitive load.
• Don't mix brittiSans and Inter in the same headline or body paragraph; use brittiSans for display/headline levels only, Inter for everything else.
• Don't use hard shadows (box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)) or dark overlays; keep shadows soft and restrained (max 0 8px 18px rgba(0, 0, 0, 0.2)).
• Don't apply border-radius smaller than 0.5rem (8px) to primary interactive elements; maintain the soft-technical aesthetic by keeping corners consistently rounded.