WPPConnect design system

One identity. Every interface.

One shared foundation for the WPPConnect website and Cloud. Original branding, Geist typography, accessible colors and consistent components.

English fallbackLight and dark themesOriginal brand assets

View the website reference

v2 / SHA256 b1e5ddfbe5f5d1decefa74e8589c069eaacd5e6a267464b0baa6b679341daaeb

Identity

Use the official logo variant for each background. Preserve its colors, spacing and aspect ratio.

Cloud

Brand green

#25d366

Accessible green

#11763a

Cyan

#22d3ee

Violet

#8b5cf6

Pink

#ec4899

Light canvas

#fafbfc

Dark canvas

#07080a

Bright brand green is used with dark text. Use accessible green for small text on light backgrounds. Cyan, violet and pink are secondary accents.

Typography

Geist for headings and interface text. Geist Mono for code, identifiers and technical examples.

48 / 52

Build your next integration.

24 / 32

Clear actions, useful information.

14 / 24

Use concise labels and explain what happens next.

12 / 20

Authorization: Bearer YOUR_KEY

Components

Shared components include keyboard focus, loading, disabled, error and empty states. These examples do not modify account data.

Actions

Choose the variant that matches the action and its impact.

Form fields

Labels, hints and validation follow the selected language.

Localization

English is the source language and fallback. Portuguese is fully supported. Language selection is saved and applied to the initial HTML, interface, metadata and number formatting.

Date example: November 8, 2026
Number example: 12,345.67
Price example: $9.99

Missing translations and unsupported languages fall back to English. Product names, API paths, secrets and user-generated content are preserved.