LlamaIndex

Overview

LlamaIndex is an AI-powered document processing platform that transforms complex OCR workflows into agentic automation. The design system embraces a "Vibrant Minimalism" aesthetic—a bold gradient-forward visual language paired with clean, technical typography and generous whitespace. The brand serves developers and enterprises who need production-grade document understanding, and the UI evokes confidence through vivid, multi-directional color gradients (cyan #37d7fa, violet #4b72fe, magenta #ff8df2, and warm orange #ff8705) layered over a pristine white canvas. The emotional response is energetic yet trustworthy: the gradients signal innovation and AI sophistication, while the monochromatic button palette and minimal ornamentation communicate precision and control.

The brand voice is direct, technical, and outcome-focused. Vocabulary patterns favor active verbs ("turns hours into seconds," "transforms," "automates") and concrete metrics over marketing hyperbole. Tone is conversational but authoritative—the copy assumes the reader understands document processing challenges and speaks to solutions, not features. Example sentence in brand voice: "LlamaParse turns hours of manual document processing into seconds of automation, with VLM-powered document understanding agents."

Colors

The color system is anchored by a vibrant primary orange (#ff8705) used exclusively on primary CTAs, key interactive elements, and focus states. This warm accent cuts through the white background with unmistakable urgency and drives conversion. Secondary and tertiary accents—cyan (#37d7fa) and violet (#4b72fe)—appear in hero gradients, data visualizations, and accent illustrations, creating visual rhythm without competing for attention. The gradient composite (linear-gradient(148.35deg, #37d7fa -0.08%, #4b72fe 39.93%, #ff8df2 67.94%, #ff8705 99.94%)) is reserved for hero sections and premium CTAs, signaling the brand's AI-forward positioning. The surface stack is deliberately minimal: pure white (#ffffff) for primary surfaces, light gray (#f5f5f5) for subtle container backgrounds, and mid-

Typography

The type system pairs OverusedGrotesk (a contemporary geometric sans-serif) for all display and body text with IBMPlexMono (a technical monospace) reserved exclusively for labels, buttons, and UI chrome. This pairing communicates both approachability (the friendly, rounded grotesque) and technical credibility (the monospace in uppercase labels). Display sizes use fluid scaling (clamp(3.5rem, 3.0435rem + 2.087vw, 5rem)) to maintain visual hierarchy across viewports without jarring breakpoints. All headings use font-weight: 500 with letter-spacing: -0.03em to -0.01em, creating a compact, modern silhouette. Body text (16px, 400 weight, 24px line-height) is set with generous line-height for readability on screens. Labels in IBMPlexMono use 12px, 400 weight, 0.04em letter-spacing, and uppercase

Layout

The layout uses a fluid 12-column grid with a max-width of 1400px, centered with symmetric gutters that scale from 24px on mobile to 40px on desktop (using CSS custom property --gap: clamp(1rem, 6vw, 2.5rem)). Sections are built on a CSS Grid layout with named areas: [full-start] → [content-start] → [content-end] → [full-end], allowing full-bleed backgrounds while constraining text to a readable measure. Container padding follows the spacing scale: lg (40px) for major section separation, md (24px) for card interiors, and sm (12px) for input padding. White-space is intentional and generous—sections are separated by 80px vertical padding (5rem), and cards use 24px internal padding to create breathing room. The grid-column: content constraint ensures all body text stays within a ~1000px measu

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through dark overlays or heavy blur effects. Level 1 (Base): flat white background with no shadow. Level 2 (Cards & Inputs): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), a barely-perceptible lift that defines the card boundary. Level 3 (Hovered Cards & Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that creates clear separation from the background. Level 4 (Floating Elements & Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a pronounced shadow for modals and overlays. Transitions between levels use 75

Shapes

The shape philosophy is "Technical Precision with Approachability"—rounded corners are used sparingly and purposefully to soften technical interfaces without sacrificing clarity. Buttons use 6px border-radius (DEFAULT), a subtle rounding that feels modern without appearing playful. Cards and containers use 12px (md), creating a slightly more pronounced softness for larger surfaces. Premium gradient buttons use 20px (lg) to signal elevation and importance. Input fields use 6px to match buttons, creating visual cohesion in form layouts. The full (9999px) radius is reserved for badges and small a

Components

Action Elements Buttons are the primary interaction pattern and come in three variants. **Primary buttons** use solid black (#000000) background with white text, 12px padding (vertical) × 32px (horizontal), 44px height, and 6px border-radius. On hover, the background shifts to #1f1f1f (a near-black) with a 75ms transition. **Secondary buttons** use a white background with black text, a 1px border in #e7e7e7, and the same padding/height as primary. On hover, the background becomes #e7e7e7 (light gray). **Gradient buttons** are reserved for premium CTAs (e.g., hero section) and use the full four-color gradient (cyan → violet → magenta → orange) with 20px border-radius, white text, and font-weight: 500. On hover, the background-size expands from 100% to 140%, creating a subtle zoom effect

Do's and Don'ts

**Do**

• Do use the primary orange (#ff8705) exclusively on CTAs, focus states, and key interactive elements—it's the brand's signature accent and should never be diluted or overused.
• Do maintain the white background as the default canvas; it provides maximum contrast for the vibrant gradient accents and ensures legibility of technical content.
• Do apply the four-color gradient (cyan → violet → magenta → orange) only to hero sections and premium CTAs; overuse dilutes its impact and confuses visual hierarchy.
• Do use OverusedGrotesk for all body and display text, and IBMPlexMono exclusively for labels and UI chrome—this pairing is the brand's typographic signature.
• Do scale typography fluidly using clamp() functions to maintain visual hierarchy across viewports without jarring breakpoint shifts.
• Do use 75ms transitions on interactive elements (buttons, cards) to signal responsiveness without animation fatigue.
• Do maintain generous whitespace (80px section separation, 24px card padding) to create breathing room and emphasize content hierarchy.

**Don't**

• Don't use the primary orange (#ff8705) on backgrounds, body text, or non-interactive elements—it's reserved for CTAs and focus states only.
• Don't apply the gradient to anything other than hero sections and premium CTAs; it loses impact and creates visual noise.
• Don't mix typefaces beyond OverusedGrotesk and IBMPlexMono; system fonts or serif faces break the brand's technical-modern identity.
• Don't use dark backgrounds or overlays; the brand is built on white surfaces and vibrant accents, not dark mode aesthetics.
• Don't add shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12); heavy shadows contradict the clean, minimal aesthetic.
• Don't use border-radius values outside the defined scale (3px, 6px, 12px, 20px, 24px, 9999px); inconsistent rounding fragments the visual system.
• Don't animate elements with durations longer than 300ms or use easing functions beyond ease-in-out; the brand favors snappy, responsive interactions.