Lucide

Overview

Lucide is a community-driven icon toolkit that embodies **Minimalist Clarity**—a design philosophy that prioritizes precision, accessibility, and visual consistency over decorative flourish. The brand serves developers, designers, and product teams who demand icons that integrate seamlessly into modern interfaces without visual noise. The aesthetic is deliberately austere: a clean white canvas (rgb(255, 255, 255)), precise charcoal text (rgb(51, 51, 51)), and two accent colors—a warm coral-red primary (#f56565) for action and a cool cyan secondary (#58c4dc) for highlights—that create visual rhythm without clutter. The UI evokes a sense of professional reliability and technical sophistication, as if the interface itself is a well-engineered tool.

The brand voice is direct, unpretentious, and community-focused. Lucide speaks in active, declarative sentences: 'Beautiful & consistent icons. Made by the community.' There is no marketing hyperbole, no soft language. The vocabulary is technical but accessible—'toolkit,' 'scalable,' 'lightweight'—reflecting the audience of developers and designers. The tone is collaborative and inclusive, emphasizing that this is a shared resource built by many hands. Example sentence in brand voice: 'Search 1712 icons, customize stroke width, and export in your preferred format.'

Colors

The color system is built on a **high-contrast, purposeful palette** that prioritizes legibility and functional clarity. The primary surface is pure white (#ffffff, rgb(255, 255, 255)), which serves as the neutral canvas for all content. Text defaults to a near-black charcoal (#333333, rgb(51, 51, 51)) for maximum contrast and readability at 16px body size. Secondary text uses a mid-gray (#666666, rgb(102, 102, 102)) for hierarchy without sacrificing accessibility.

The primary accent color is a warm, saturated coral-red (#f56565, rgb(245, 101, 101))—the most prominent CTA color on the page, used exclusively for primary action buttons ('View all icons'), version badges, and key interactive elements. This color commands attention without aggression, evoking urgency and community energy. The

Typography

The type system uses **Inter exclusively** across all scales, a geometric sans-serif that embodies the brand's technical precision and modern sensibility. The hierarchy is built on a 4px baseline grid with clear visual separation: display (60px, 700 weight, -0.04em tracking) for hero statements; headline-lg (40px, 600 weight) for section titles; body-md (16px, 400 weight, 24px line-height) for primary content; and label-md (14px, 600 weight, 0.01em tracking) for interactive elements and buttons. The letter-spacing is tightened on display and headline scales (-0.04em to -0.02em) to create visual density and authority, while body text uses positive tracking (0.01–0.02em) to improve legibility at smaller sizes. Line-height is set generously (1.5x font size for body, 1.2x for headlines) to ens

Layout

The layout system uses a **fluid 12-column grid** with a maximum container width of 1280px, allowing content to breathe on large screens while remaining readable on mobile. The page rhythm is governed by a semantic spacing scale: gutter (24px) for horizontal padding and section separation, lg (40px) for major section breaks, md (24px) for component padding, and sm (12px) for internal component spacing. The hero section uses lg spacing above and below to create visual breathing room, while card grids use md spacing between items. The search input and button group sit at md spacing from the hero headline, creating a clear visual hierarchy. On mobile (< 768px), gutter reduces to sm (12px) to preserve screen real estate. The white background (rgb(255, 255, 255)) extends edge-to-edge, with no c

Elevation & Depth

Depth in Lucide is achieved through **subtle layering and soft shadows** rather than color or blur effects. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on 1px solid borders at outline-variant (#cccccc) for definition. Level 2 (Cards, Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift that suggests interactivity without visual heaviness. Level 3 (Modals, Dropdowns) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer spread shadow that indicates modal prominence. On hover, cards transition from Level 2 to Level 3 shadow o

Shapes

The shape system follows **Soft-Technical Precision**—a philosophy that balances geometric clarity with approachable softness. Buttons use border-radius: 50px (full pill shape), creating a friendly, inviting affordance that contrasts with the austere background. Cards and panels use border-radius: 6px (0.75rem), a subtle rounding that feels modern without being organic. Input fields use border-radius: 4px (0.25rem), maintaining visual distinction from buttons while remaining approachable. The search input uses the same 4px radius to signal its functional role. Icon containers and badges use bo

Components

Action Elements Buttons are the primary interaction mechanism and use the full pill shape (border-radius: 50px) to signal affordance. The primary button (button-primary) uses the coral-red accent (#f56565) with white text, padding 12px 24px, and height 44px for touch targets. On hover, the background darkens to #e84a4a over 200ms, providing clear feedback. The secondary button (button-secondary) uses surface-container (#ebebeb) with a 1px outline-variant border, maintaining visual hierarchy while offering an alternative action path. The ghost button (button-ghost) has no background or border, relying on text color and hover state (surface-container-low background) for affordance. All buttons use label-md typography (14px, 600 weight) and apply transition: background-color 200ms ease-in

Do's and Don'ts

**Do**

• Do use the coral-red primary (#f56565) exclusively for primary CTAs and critical interactive states—it is the brand's signature accent and must not be diluted.
• Do maintain 1px solid borders at outline-variant (#cccccc) on all cards and inputs; this creates visual definition without heaviness and is essential to the minimalist aesthetic.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and panels; this signals interactivity while preserving the flat, modern look.
• Do use Inter 600 weight for all interactive text (buttons, links, labels) to signal affordance and create visual hierarchy.
• Do set button height to 44px minimum to ensure comfortable touch targets on mobile devices, even if the text is small.

**Don't**

• Don't use the secondary cyan (#58c4dc) for primary actions; it is reserved for promotional banners and supporting highlights only.
• Don't apply hard shadows, gradients, or blur effects; the design system relies on flat color, soft shadows, and subtle borders for depth.
• Don't round button corners below 50px border-radius; the pill shape is a core brand affordance and must be preserved.
• Don't exceed 1px border width on cards or inputs; thicker borders introduce visual weight that contradicts the minimalist philosophy.
• Don't use system fonts or fallback sans-serif; Inter must be loaded and applied consistently across all text scales to maintain brand coherence.