Humaan

Overview

Humaan is an award-winning digital agency that designs, builds, and ships world-class digital products for forward-thinking brands. The design system embodies a philosophy of 'Chromatic Minimalism'—a bold, nature-inspired aesthetic that uses vibrant, saturated accent colors (lime green #90f188, teal #3dbeac, hot pink #fd589e) against a refined, near-neutral palette (cream #f3f3e9, deep forest #0f1d07) to create visual clarity and emotional resonance. The brand personality is confident yet approachable, technical yet human-centered, delivering complex digital experiences with warmth and precision.

Humaan's voice is direct, purposeful, and grounded in craft. The tone avoids hyperbole and breathless marketing speak; instead, it speaks with the authority of makers who understand both strategy and execution. Example: 'We design, build and ship world-class digital products for forward-thinking brands.' Every interaction—from navigation to CTAs—reflects a commitment to intentional, friction-free design that respects the user's time and intelligence.

Colors

The Humaan color system operates on a dual-layer principle: a vibrant, saturated primary accent (lime green #90f188, primary-text #23bb16) paired with a sophisticated neutral foundation. Primary (#90f188) is the signature brand accent, used exclusively on call-to-action buttons, active navigation states, and interactive focus indicators. It commands attention without aggression, evoking growth and forward momentum. Secondary (#0f1d07, a deep forest-black) serves as the dominant text and structural color, providing maximum contrast and legibility at 15px body sizes. The surface stack uses warm, off-white tones: surface (#f3f3e9) as the default background, surface-container-low (#e9fbec) for subtle depth, and surface-container-high (#eafb7f) for elevated interactive states. Supporting accent

Typography

The Humaan type system is built entirely on Neue Montreal, a geometric sans-serif that conveys modernity and precision while remaining highly legible at all scales. The hierarchy spans from display (130px, 500 weight, -0.02em tracking) for hero headlines down to label-sm (12px, 500 weight, 0.02em tracking) for metadata and captions. All weights are set to 500 (medium), creating a consistent visual rhythm that avoids the jarring contrast of traditional light-to-bold hierarchies. Display and headline-lg use negative letter-spacing (-0.02em to -0.015em) to tighten large letterforms and enhance impact; body and label sizes use neutral or slightly positive tracking (0em to 0.02em) to maintain readability. Line heights are set generously—130px for display (1:1 ratio), 64px for headline-lg (1.14:

Layout

Humaan uses a fluid 12-column grid with a maximum container width of 1432px (plus 20px gutters on each side, totaling 1472px at desktop). The gutter scale is responsive: 20px on mobile, 30px (1.875rem) on tablet, and clamp(40px, 2.6455vw, 53px) on desktop, ensuring proportional breathing room across all viewports. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections (hero, featured work, testimonials), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within component clusters. The container-narrow variant (1220px max-width) is used for text-heavy content and case studies to optimize line length for readability. Grid-based layouts use CSS Grid with repeat(auto-fit, minmax(300px, 1fr)) for card grids, allowi

Elevation & Depth

Humaan's elevation strategy uses subtle, layered shadows to create visual hierarchy without introducing visual noise or darkness. The system defines three elevation levels: Level 1 (base surface, no shadow) for default cards and containers; Level 2 (standard elevation, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for interactive cards, modals, and hover states; Level 3 (prominent elevation, box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1)) for floating elements, dropdowns, and modal overlays. Shadows use warm, slightly desaturated black (rgba(0, 0, 0, ...)) rather than pure black to maintain the brand'

Shapes

Humaan's shape philosophy is 'Geometric Warmth'—combining sharp, architectural precision with subtle softness to balance technical sophistication and human approachability. Buttons and primary interactive elements use full-rounded corners (border-radius: 9999px, or {rounded.full}), creating pill-shaped forms that feel friendly and modern. Cards and containers use lg radius (20px, {rounded.lg}) for a gentle, approachable aesthetic that avoids harsh corners while maintaining geometric clarity. Input fields and secondary interactive elements use DEFAULT radius (6px, {rounded.DEFAULT}), providing

Components

Action Elements Buttons are the primary interaction pattern and use a consistent structure: 500-weight Neue Montreal, 15px body-md typography, 10px vertical / 20px horizontal padding, full-rounded corners (9999px), and 150ms color + background transitions. Primary buttons (button-primary) use secondary background (#0f1d07) with primary text (#90f188), creating a bold, high-contrast CTA that commands attention. On hover, the button maintains its background but adds a 2px inset border in primary (#90f188), creating a subtle 'pressed' effect without color shift. Secondary buttons (button-secondary) use transparent background with secondary text and a 1px secondary border; on hover, they invert to primary background with secondary text. Ghost buttons (button-ghost) are transparent with sec

Do's and Don'ts

**Do**

• Do use primary (#90f188) exclusively on CTAs, active states, and focus indicators—never on backgrounds or body text.
• Do maintain the 8px baseline grid for all spacing and sizing to ensure visual rhythm and alignment.
• Do apply Neue Montreal at 500 weight for all typography; avoid mixing weights or using serif fallbacks.
• Do use lg spacing (40px) between major sections and md spacing (24px) between subsections to create clear visual hierarchy.
• Do include a :focus-visible outline (3px dashed secondary, 2px offset) on all interactive elements for keyboard accessibility.
• Do transition interactive states (hover, focus, active) over 150ms using ease-in-out timing to signal interactivity smoothly.

**Don't**

• Don't use primary (#90f188) on large background areas or as body text color—it's reserved for accents and CTAs only.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 6px, md: 10px, lg: 20px, xl: 30px, full: 9999px).
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur radii greater than 24px; Humaan's elevation is subtle and refined.
• Don't use color alone to communicate state or error; always pair with icons, text, or outline changes for accessibility.
• Don't exceed 1432px container width on desktop; use container-narrow (1220px) for text-heavy content to optimize line length.
• Don't animate transitions faster than 150ms or slower than 300ms; maintain the brand's responsive, purposeful feel.