pollinations.ai

Overview

Pollinations.ai is a developer-first AI infrastructure platform designed to democratize access to multimodal AI models (text, image, audio, video) through a unified API. The brand embodies "Retro-Digital Maximalism"—a deliberate fusion of 1980s pixel-art aesthetics with contemporary tech culture, evoking nostalgia while signaling cutting-edge capability. The visual language combines Press Start 2P's blocky, arcade-style typography with a warm, cream-colored canvas (rgb(243, 235, 222)) layered beneath a dreamy gradient sky of purples and pinks, populated by animated pollen particles. This creates an approachable, almost playful atmosphere that contradicts the technical sophistication underneath—users feel welcomed into a community, not intimidated by complexity.

The brand voice is direct, energetic, and unapologetically technical. Pollinations speaks in short, punchy sentences with occasional emoji accents (⚡, 🌱, 🎯) and uses bold typography to emphasize key metrics ("10K weekly active devs", "1.5M daily requests"). The tone avoids corporate jargon; instead, it celebrates developer autonomy ("Users bring their own credits") and community-driven economics ("you optionally take a share"). Example sentence: "Build with one API for text, image, audio, and video. We handle the models and infrastructure."

Colors

The color system is rooted in a warm, analog foundation—the surface is a soft cream (rgb(243, 235, 222), #f3edde) that evokes aged paper or a retro computer screen. This neutral anchor allows three vibrant accent colors to pop: Primary (rgb(232, 243, 114), #e8f372) is a neon lime-yellow used exclusively for the most important CTAs ("ENTER", "REGISTER") and draws the eye with high contrast against the dark text (rgb(17, 5, 24), #110518). Secondary (rgb(164, 180, 222), #a4b4de) is a soft periwinkle that softens the interface—used for secondary buttons and informational cards, it maintains legibility while reducing visual aggression. Tertiary (rgb(168, 230, 162), #a8e6a2) is a muted sage-green reserved for success states and tertiary actions ("READ THE DOCS"). All buttons use a 2px solid bord

Typography

The type system is a deliberate two-tier hierarchy: Press Start 2P (a pixel-perfect bitmap font) handles all headlines, buttons, and labels, reinforcing the retro-arcade identity and ensuring instant brand recognition. IBM Plex Mono serves as the secondary typeface for smaller labels, metadata, and technical copy, grounding the design in developer culture. Body text uses the system font stack (ui-sans-serif, system-ui, sans-serif) for legibility at small sizes. Display text (48px, 900 weight, -0.02em letter-spacing) is reserved for hero headlines like "Build an AI app." Headline-lg (32px) and headline-md (24px) use the same Press Start 2P at 900 weight for section titles. Title-lg (18px, IBM Plex Mono, 700 weight) is used for card headers and subsections. Body-lg (16px) and body-md (14px)

Layout

The page uses a fluid 12-column grid with a max-width of 1280px (container-max), centered with mx-auto. The hero section spans full-width with a fixed background gradient (sky-blue to pink with animated pollen particles), while content cards sit on top with 24px (md spacing) gutters on mobile and 40px (lg spacing) on desktop. The cream surface (#f3edde) acts as the primary container background, creating visual separation from the animated sky. Sections are vertically separated by 40px (lg) or 64px (xl) margins to establish rhythm and breathing room. Cards use 32px padding (md × 1.33) internally, with 24px gaps between grid items. The header is fixed at the top with a transparent background, allowing the gradient sky to show through, and uses 12px (sm) padding vertically with 24px (gutter)

Elevation & Depth

Depth is conveyed through a tactile, retro-inspired shadow system rather than subtle gradients. Level 1 (Base): The cream surface (#f3edde) with no shadow, establishing the ground plane. Level 2 (Standard Card): 2px solid border in the on-color (#110518) + 4px drop-shadow (rgba(17, 5, 24, 0.3)), creating a subtle "raised" effect reminiscent of printed cards. Level 3 (Elevated/Hover): 2px border + 6px drop-shadow (rgba(17, 5, 24, 0.4)), pushing the element further forward. On button press, the shadow reduces to 2px and the element translates 2px down (transform: translate(2px, 2px)), simulating

Shapes

The design philosophy is "Retro-Angular Precision"—all components use 0px border-radius (sharp, 90-degree corners) except for badges and full-width elements, which use 9999px (border-radius: full) for pill-shaped containers. This sharp-vs-round contrast mirrors the pixel-art aesthetic: buttons and cards are rectilinear and grid-aligned, while badges and tags are organically rounded. Buttons use 0px radius with 2px borders and 4px shadows to emphasize their tactile, pressable nature. Input fields use 0px radius with 2px borders (outline-variant color #d0d0d0 by default, primary #e8f372 on focus

Components

Action Elements Buttons are the primary interactive element and use a consistent 44px height (padding: 12px 20px) with Press Start 2P typography (14px, 900 weight). All buttons have a 2px solid border in the on-color and a 4px drop-shadow (rgba(17, 5, 24, 0.3)). Button-primary uses #e8f372 background with #110518 text, button-secondary uses #a4b4de, and button-tertiary uses #a8e6a2. On hover, the shadow increases to 6px (rgba(17, 5, 24, 0.4)) and the background shifts to the container variant (e.g., primary-container #f5fabe). On active/press, the shadow reduces to 2px and the element translates 2px down (transform: translate(2px, 2px)), simulating a physical button press with a 100ms transition. Button-ghost uses a transparent background with a 2px border and no shadow, filling with s

Do's and Don'ts

**Do**

• Do use Press Start 2P for all headlines, buttons, and labels to maintain the retro-arcade brand identity—it's the signature typeface that makes Pollinations instantly recognizable.
• Do apply 2px solid borders and 4px drop-shadows (rgba(17, 5, 24, 0.3)) to all interactive elements to preserve the tactile, pressable aesthetic and ensure accessibility through visual feedback.
• Do maintain the cream surface (#f3edde) as the primary background and reserve the three accent colors (primary #e8f372, secondary #a4b4de, tertiary #a8e6a2) for CTAs and status indicators—never invert this hierarchy.
• Do use 0px border-radius for buttons, cards, and inputs to reinforce the angular, grid-aligned aesthetic; reserve 9999px (full) for badges and metadata only.
• Do implement the button press animation (transform: translate(2px, 2px) with 100ms transition) on all interactive elements to create tactile feedback and reinforce the retro-digital theme.

**Don't**

• Don't use rounded corners (border-radius > 0) on buttons or cards—the sharp, 90-degree aesthetic is core to the brand identity and differentiates Pollinations from modern, soft-UI competitors.
• Don't apply shadows without a 2px border; the combination of border + shadow creates the signature retro-digital depth. A shadow alone reads as flat and modern, breaking the brand.
• Don't use system fonts (ui-sans-serif, system-ui) for headlines or buttons—Press Start 2P is non-negotiable for brand recognition. System fonts are reserved for body text only.
• Don't exceed a 4px drop-shadow on standard elements or 6px on hover; deeper shadows flatten the retro aesthetic and make the interface feel heavy rather than playful.
• Don't mix the three accent colors on a single button or card—each color has a semantic role (primary for main CTAs, secondary for supporting actions, tertiary for success). Mixing dilutes the visual hierarchy and confuses users.