Globant

Overview

Globant is a digital transformation powerhouse that positions itself at the intersection of engineering excellence, innovation, and cutting-edge design. The brand serves enterprise organizations seeking to harness AI and advanced technology to drive business reinvention. The design system embodies 'Technical Optimism'—a movement that celebrates the confidence of bold, lime-green accents (#c3d500, #d6fd4e) against clean, minimal surfaces, paired with secondary cyan (#29abe2) and tertiary magenta (#e51687) for dynamic, multi-dimensional interfaces. The aesthetic evokes clarity, precision, and forward momentum: users feel they're engaging with a partner that understands both the complexity of enterprise transformation and the elegance required to communicate it.

Globant's voice is authoritative yet approachable, technical yet human. The brand speaks in active, outcome-focused language: 'We help organizations drive AI business transformation' rather than 'We provide services.' Vocabulary patterns favor concrete action verbs (drive, blend, reinforce, deepen) and avoid corporate jargon. The tone is confident without arrogance, innovative without hype. Example sentence in brand voice: 'Reinforcing our AI-native services model and deepening the security, innovation, and design that enterprises demand.'

Colors

The Globant color system is built on a foundation of high-contrast, energetic accents layered over a clean white canvas. Primary (#c3d500, a vibrant lime-green) is the signature brand accent, deployed on all primary CTAs, interactive highlights, and key brand moments—it commands attention and signals forward momentum. The primary-container variant (#d6fd4e) provides a lighter, more accessible option for backgrounds and supporting elements, while inverse-primary (#bfd732) serves as a muted fallback for reduced-motion or accessibility contexts.

Secondary (#29abe2, a bright cyan) and tertiary (#e51687, a vivid magenta) function as supporting accent colors, used to denote different data categories, status indicators, or secondary calls-to-action. Secondary-container (#0dcaf0) and tertiary-con

Typography

The typography system pairs Heebo (a geometric, modern sans-serif) for headlines and display text with Circular (a humanist sans-serif) for labels and UI elements, creating a sophisticated yet approachable voice. Display (60px, 700 weight, -0.04em letter-spacing) and headline-lg (48px, 700 weight) command attention on hero sections and major page breaks, while headline-md (32px) and title-lg (24px) structure content hierarchy. Body text uses Heebo-Regular at 18px (body-lg) and 16px (body-md) with generous 28px and 24px line-heights respectively, ensuring readability at all sizes. Labels and UI text (label-md: 14px, 600 weight; label-sm: 12px, 600 weight) use Circular-Std-Medium for visual consistency and micro-interactions. On small labels over busy backgrounds or dark overlays, apply text

Layout

The layout system uses a 12-column grid with a maximum container width of 1320px, supporting both fluid and fixed breakpoints (mobile: <768px, tablet: 768–991px, desktop: ≥992px). The spacing scale is semantic and hierarchical: unit (8px) is the base increment, with xs (4px) for micro-spacing, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero and full-width spacing. Gutter spacing is consistently 24px on desktop, reducing to 12px on tablet and 8px on mobile. White-space is generous and intentional—the brand avoids cramped layouts, using lg and xl spacing to create breathing room between content blocks and reinforce the 'clarity' positioning. Container max-width of 1320px ensures content remains scannable on

Elevation & Depth

Elevation in the Globant system is achieved through subtle, layered shadows that create depth without visual heaviness. Level 1 (Base): no shadow; surfaces sit flush on the background. Level 2 (Standard Card/Container): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and modals to lift them slightly above the background. Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), used on hover states, expanded modals, and floating action elements to signal interactivity and depth. Transitions between shadow states use 200ms ease-out timing to feel responsi

Shapes

The shape philosophy is 'Precision with Softness'—a balance between technical sharpness and human approachability. Buttons and interactive elements use rounded.md (12px / 0.75rem) for a modern, slightly rounded appearance that feels contemporary without being overly playful. Cards and containers use rounded.lg (16px / 1rem) for a more generous curve that softens larger surfaces. Input fields use rounded.DEFAULT (8px / 0.5rem) for a subtle, refined look. Badges and pills use rounded.full (9999px) for maximum softness and visual distinction. The rationale: smaller radius values (8–12px) on inter

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid lime-green background, #c3d500, with 12px 24px padding and 48px height), secondary (transparent with 2px solid lime-green border), and ghost (no border, text-only). All buttons use label-md typography (14px, 600 weight, Circular-Std-Medium) and rounded.md (12px). Hover states transition background-color and box-shadow over 200ms ease-out, lifting the button 2px via transform: translateY(-2px) and increasing shadow depth to elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)). Active states darken the background to inverse-primary (#bfd732) and maintain the elevated shadow. Focus states add a 3px outline in rgba(195, 213, 0, 0.1) to support keyboard navigation.

Containers & Surfaces C

Do's and Don'ts

**Do**

• Do use primary (#c3d500) on all primary CTAs and key interactive moments—it's the brand's signature accent and should be immediately recognizable.
• Do maintain generous white-space using lg (40px) and xl (64px) spacing between major sections to reinforce clarity and reduce cognitive load.
• Do apply negative letter-spacing (-0.04em to -0.01em) on all headlines to tighten visual weight and communicate technical precision.
• Do use Heebo-Bold for headlines and Circular-Std-Medium for labels to maintain the sophisticated-yet-approachable voice.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms ease-out to feel responsive without jarring.
• Do layer shadows subtly (elevation.sm to elevation.lg) to create depth without visual heaviness—avoid blur values exceeding 40px.

**Don't**

• Don't use primary (#c3d500) on body text or secondary UI elements—reserve it exclusively for CTAs and key brand moments to maintain impact.
• Don't apply rounded.full (9999px) to buttons or cards; use rounded.md (12px) for buttons and rounded.lg (16px) for cards to maintain technical precision.
• Don't exceed 1320px container width on desktop, even on ultra-wide displays, to maintain content focus and scanability.
• Don't use system fonts (system-ui, sans-serif) in place of Heebo or Circular—always load the custom font families to preserve brand voice.
• Don't apply shadows with pure black (rgb(0, 0, 0)); use rgba(0, 0, 0, 0.12–0.15) to maintain the clean, modern aesthetic.
• Don't mix letter-spacing values on headlines; maintain -0.04em for display, -0.02em for headline-lg, and -0.01em for headline-md for consistency.