Ploomes CRM

Overview

Ploomes is Latin America's leading enterprise CRM platform, designed for mid-market and enterprise sales teams who demand both sophistication and velocity. The brand embodies "Vibrant Minimalism"—a design philosophy that pairs a clean, purposeful interface with bold purple accents (#843cff) that signal energy, innovation, and trust. The aesthetic is contemporary yet grounded: geometric organic shapes (curved wave elements in the hero) provide visual warmth, while the typography (Manrope at 600–700 weight) conveys confidence and clarity. The UI evokes a sense of control and possibility—users feel empowered to orchestrate complex sales processes without cognitive overload.

The voice is direct, professional, and optimistic. Ploomes speaks to sales leaders and operations teams in Portuguese-first, with language that is precise, action-oriented, and free of jargon. Tone examples: "Gere propostas em minutos" (Generate proposals in minutes) and "Venda de forma mais segura" (Sell more securely). The brand avoids breathlessness; instead, it grounds claims in concrete outcomes (e.g., "redução do tempo de fechamento de 64–90 dias para 25–30 dias"). Personality: pragmatic, ambitious, and deeply customer-centric.

Colors

The color system is anchored in a vibrant purple primary (#843cff), which appears on all primary CTAs, focus states, and brand-critical interactive elements. This purple is derived from the brand's heritage and is used consistently across web, mobile, and marketing collateral. The secondary accent is a deeper purple (#5211a1), reserved for hover states, secondary buttons, and container backgrounds that need visual hierarchy without competing for attention. The tertiary color (#225cd6, a professional blue) is used sparingly for informational elements, links, and status indicators.

The surface stack is anchored in pure white (#ffffff) for the main canvas, with a light purple tint (#ebe5ff) for elevated containers and cards. Neutral grays (#525252 for body text, #8d8d8d for secondary text, #

Typography

The type system uses Manrope, a geometric sans-serif from Google Fonts, across all scales. Manrope's humanist letterforms and generous spacing create warmth without sacrificing professionalism—critical for a B2B platform that must feel both approachable and authoritative. The hierarchy is built on weight and size: Display (60px, 700) and Headline-lg (54px, 600) are reserved for page titles and hero statements; Headline-md (40px, 600) and Title-lg (28px, 600) structure section breaks and card titles. Body-lg (18px, 400) and Body-md (16px, 400) carry narrative content and descriptions, with generous line-height (28px and 24px respectively) to ease scanning. Label-md (14px, 600) and Label-sm (12px, 500) are used for buttons, form labels, and UI chrome. Letter-spacing is tightened on display s

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The gutter is 24px between columns, and the outer margin (from viewport edge to container edge) is also 24px on desktop, reducing to 16px on tablet and 12px on mobile. The spacing scale is semantic: lg (40px) is used for section separation (e.g., between hero and features), md (24px) for component padding and card spacing, sm (12px) for internal element spacing, and xs (4px) for micro-interactions. The hero section uses full-width background with centered content; subsequent sections alternate between full-width backgrounds (e.g., light purple for testimonials) and contained content blocks. White-space is generous—sections are separated by at least 40px of vertical space—to prevent cognitive fatigue

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color shifts. The elevation system has three levels: Level 1 (Base) uses no shadow; Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the card is slightly raised. Level 3 (Elevated/Modal) uses box-shadow: 1px 8px 20px 5px rgba(130, 68, 152, 0.1), a larger, more diffuse shadow with a purple tint that reinforces the brand. Hover states on cards transition the shadow from Level 2 to Level 3 over 200ms, signaling interactivity. Buttons do not use shadows in thei

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used to soften the interface without sacrificing precision or professionalism. Buttons use 16px radius (lg), creating a pill-like appearance that feels modern and approachable; this radius is applied consistently across all button variants (primary, secondary, ghost). Cards and containers use 12px radius (md), a middle ground that suggests structure without rigidity. Input fields and form elements use 8px radius (DEFAULT), a tighter radius that emphasizes their functional role. Badges and small UI elements use full (9999px) radius fo

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand purple (#843cff) background with white text, 16px rounded corners, and 16px vertical / 24px horizontal padding, resulting in a 48px height. The label uses label-md typography (14px, 600 weight). On hover, the background shifts to #7714eb (a darker purple) and a subtle shadow (0 3px 8px rgba(132, 60, 255, 0.25)) appears, with a 150ms transition. On active/pressed, the background becomes #5211a1 (secondary), maintaining the white text. Secondary buttons (button-secondary) use a transparent background with a 2px primary-colored border, the same padding and height, and the same text color as the primary background. On hover, the background fills with the primary-container color (#e

Do's and Don'ts

**Do**

• Do use the primary purple (#843cff) exclusively on CTAs and interactive focus states—never on passive elements or backgrounds.
• Do maintain 40px vertical spacing between major sections to prevent cognitive overload in data-heavy contexts.
• Do apply Manrope at 600–700 weight for all headings to convey confidence and clarity; never use lighter weights for titles.
• Do use the full rounded radius (9999px) only on badges and small UI elements; reserve 12–16px for cards and buttons.
• Do include a 150–200ms transition on hover states for buttons and cards to signal interactivity without jarring the user.

**Don't**

• Don't use the secondary purple (#5211a1) or tertiary blue (#225cd6) as primary CTAs—they are supporting accents only.
• Don't apply shadows to input fields or form elements; use border-color and focus-ring instead to maintain clarity.
• Don't mix Manrope with other typefaces in the same hierarchy level; consistency is critical for a B2B platform.
• Don't reduce padding below 12px (sm) on cards or containers; white-space is essential for scannability.
• Don't use color alone to convey status or error states; always pair color with text labels or icons for accessibility.