Visual identity and design language for the Cloop customer intelligence platform.
Cloop sits at the intersection of web content understanding, customer signals, and business intelligence. The brand must work across multiple surfaces: as a SaaS platform and analytics dashboard, as a conversational widget embedded on customer websites, and as a CRM-connected intelligence layer that business owners trust with their customer relationships.
The design draws from Nordic minimalism — clean, functional, quiet confidence. It avoids the visual noise common in SaaS marketing and instead lets the product's value speak through clarity.
Indigo (#4F46E5) was chosen over pure blue to create distance from ROFFI's consulting brand while staying in a complementary family. Indigo reads as intelligent and analytical — fitting for a platform that deeply understands content, captures customer signals, and surfaces business intelligence.
Emerald (#10B981) represents the signal moment — the lead captured, the pattern detected, the insight that drives action. Green universally signals positive outcome and growth. As an accent, it draws the eye to conversion points, active signals, and success states without overwhelming the primary palette.
The logo mark is a bold C formed by a thick ring with a gap on the right — representing both the brand initial and the continuous loop of customer conversation. The main arc uses a dark indigo gradient (#818CF8 to #6366F1) while the gap transitions smoothly through lighter indigo tones (#6366F1 to #C7D2FE), creating depth and directional energy. The two-tone approach — dark C, luminous gap — says: close the loop.
The Cloop logo is a C-shaped ring with a gradient that transitions from dark indigo on the main arc to lighter tones in the gap. The icon can be used independently or paired with the "Cloop" wordmark (lockup).
Minimum size: 24px height for icon, 80px width for full logo
Clear space: Maintain padding equal to the stroke width on all sides
Wordmark: Always "Cloop" with capital C — never "cloop", "CLOOP", or "CLoop"
Don't rotate, stretch, add shadows, change the gradient colors, or place on busy backgrounds
Don't fill in the gap or change the gap position — the C shape and its opening are core to the identity
Favicon: Use the icon mark only — the SVG scales cleanly to any size
The palette is built around two purposeful hues plus a warm neutral family. Indigo for trust and intelligence, emerald for growth and conversion.
Indigo 600 is the primary action color — buttons, links, active states, the chat header, dashboard accents, and the widget.
Emerald 500 is reserved for signals, success states, and conversion CTAs — "Signal captured", "Loop closed", "Get started".
Stone 900 for body text. Never pure black (#000).
Stone 50 for page backgrounds. Never pure white (#fff) for large surfaces (use white for cards on stone-50).
Contrast: All text must meet WCAG AA. Indigo 600 on white = 5.9:1 ratio. Emerald 600 on white = 4.6:1.
Product surfaces (widget, dashboard, analytics) use indigo for primary UI and emerald for signals, status indicators, and growth metrics.
Inter is the sole typeface — used across ROFFI and Cloop for brand consistency. Weight and size variation creates all necessary hierarchy.
Tracking: Display and H1 use tight tracking (-0.025em). Body and below use default. Captions use wide tracking (0.05em).
Line height: Headings 1.1–1.3. Body 1.6. Tight for headlines, relaxed for reading.
Weight range: 400 (body), 500 (labels, nav), 600 (subheadings, buttons), 700 (headings), 800 (display only).
Core UI elements that appear across the product — dashboard, analytics views, landing page, and embed widget.
The widget is where customer conversations happen — the front line of signal capture. It must feel native on any website while maintaining Cloop's identity. Every conversation feeds back into the intelligence layer.
Header: Always Indigo 600. Displays the configurable site name (e.g., "Re-bot"). The emerald dot indicates online status.
User bubbles: Indigo 600 background, white text. Aligned right.
Bot bubbles: Stone 100 background, Stone 800 text. Aligned left. Source links in Indigo 500.
Send button: Circular, Indigo 600. Arrow icon in white.
Border radius: 16px on outer container. 10px on message bubbles (with 4px on the speaker's corner).
Shadow: 0 4px 24px rgba(0,0,0,0.08) — subtle elevation without heaviness.
Adaptability: The header color defaults to Indigo 600 and can be customized per customer to match their site.
Signal layer: Conversations are analysed for customer signals (pricing interest, competitor mentions, feature requests) that feed into the dashboard and CRM integrations.
Cloop speaks with quiet confidence. Clear, direct, never loud. The product does the convincing — the copy stays out of the way.
The conversational layer speaks Finnish by default. The tone is ystävällinen ja asiantunteva (friendly and knowledgeable) — like a helpful colleague, not a robot or a salesperson.
Consistent spacing creates visual rhythm. The scale is based on 4px increments with named tokens for common use.
Cloop is a product of ROFFI (rof.fi) — a customer experience consultancy. The brands share Inter as their typeface and overlap in their focus on customer understanding, but are visually distinct.
ROFFI: Blue (#1F7CEC) — consulting, advisory, strategic. Helps businesses understand their customers through process and expertise.
Cloop: Indigo (#4F46E5) + Emerald (#10B981) — product, intelligence, automation. Helps the same businesses understand their customers through content, conversations, signals, and data.
The relationship is "powered by" or "from the makers of" — not a sub-brand. Cloop stands on its own as a customer intelligence platform while ROFFI's consulting expertise provides domain credibility.