Cloop
Brand Guide
Visual identity and design language for the Cloop AI chat widget platform.
Logo
The Cloop identity consists of two elements: the symbol and the wordmark. Both use the refreshed indigo palette.
Symbol
The Cloop symbol is the primary mark for product UI, favicons, app icons, and compact spaces.
On white
On dark (#1C1917)
On brand (#5B54F0)
Wordmark
The full Cloop wordmark for marketing, headers, and contexts where the name should be spelled out alongside the symbol.
On white
On dark (#1C1917)
On brand (#5B54F0)
Clear Space & Minimum Size
Maintain clear space equal to roughly 25% of the symbol height on all sides. For the wordmark, use the symbol height within the wordmark as the clear space unit.
Clear space: 25% of symbol height on all sides
Minimum size: 24px for digital, 8pt for print
Dashed line indicates minimum clear space boundary.
Color Palette
Refreshed indigo for primary actions, emerald for accents and success states, warm stone neutrals for text and backgrounds.
Primary — Refreshed Indigo
Brighter and more vibrant than the previous Tailwind indigo-600. Inspired by the Stripe #635BFF direction, shifted to feel fresh and premium.
Migration note: The previous primary was Tailwind indigo-600 (#4F46E5). The refreshed 600 (#5B54F0) is brighter and slightly more blue-violet. The 500 (#6C6FFF) is the new "vibrant" shade for gradients and highlights.
Accent — Emerald
Success states, positive metrics, call-to-action accents. The emerald green provides contrast against the indigo primary.
Neutrals — Stone
Warm neutrals for text, borders, and backgrounds. Warmer than slate, giving the product a more approachable feel.
Color Usage Rules
Indigo 600 (#5B54F0) is the primary action color -- buttons, links, interactive elements, CTAs.
Indigo 500 (#6C6FFF) for gradients, highlights, and vibrant accents where you want extra pop.
Indigo 950 (#1E1A5E) for hero gradient start, dark sections, and premium depth.
Emerald 500 (#10B981) for success states, positive metrics, and secondary CTAs.
Stone 900 (#1C1917) for body text. Never pure black (#000).
Stone 50 (#FAFAF9) for page backgrounds. Use white for cards on stone-50.
Contrast: All text must meet WCAG AA. Indigo 600 on white = 5.2:1 ratio.
Typography
Inter is the sole typeface across all Cloop surfaces -- product UI, marketing site, and documentation.
Use for: Everything -- headings, body text, UI elements, buttons, inputs, labels, navigation, captions
Weights: 400 (body), 500 (labels), 600 (buttons, subheadings), 700 (headings), 800 (display)
Weight Scale
Type Scale
48 / 800 AI chat for your site
36 / 700 Smart conversations
28 / 700 Turn visitors into leads
20 / 600 Easy to integrate
16 / 400 Cloop is an AI chat widget that helps websites engage visitors with context-aware conversations.
14 / 400 Answers from your own content, not hallucinations
12 / 500 Powered by Cloop
Rules
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.
Never use more than 3 weights on a single page. Typical combo: 400 body + 600 labels + 700 headings.
Usage Guidelines
Rules for using the Cloop symbol, wordmark, and brand colors consistently across all touchpoints.
Logo
Do
- Use the Cloop symbol for product UI, favicons, app icons, and compact contexts
- Use the Cloop wordmark for marketing materials, headers, and larger brand surfaces
- Maintain the prescribed clear space around both the symbol and wordmark
- Use the refreshed indigo palette (#5B54F0, #6C6FFF) on light backgrounds
- Use white versions of the symbol and wordmark on dark or brand-colored backgrounds
- Keep the minimum size at 24px for digital, 8pt for print
Don't
- Don't use the old blue (#1c75bc) from the original designer file
- Don't stretch, rotate, or skew the symbol or wordmark
- Don't add drop shadows, outlines, or gradient overlays
- Don't place on busy photography or low-contrast backgrounds
- Don't alter the proportions of the symbol or wordmark
- Don't use the previous Tailwind indigo (#4F46E5) -- it's been replaced
Colors
Do
- Use Indigo 600 (#5B54F0) as the primary action color
- Use the 50-200 range for subtle backgrounds and tints
- Pair indigo with emerald for visual variety in dashboards
- Use Stone neutrals for text and UI chrome
- Maintain WCAG AA contrast ratios for all text
Don't
- Don't use pure black (#000000) for text -- use Stone 900
- Don't mix the old and new indigo palettes in the same context
- Don't use indigo for error states -- reserve red for errors
- Don't place light indigo text on white (insufficient contrast)
- Don't use emerald as a primary action color -- it's accent only
Widget Accent Presets
Customers can choose from these preset accent colors for their chat widget, or enter a custom hex value. The default is Cloop Indigo.
Customers can also enter any custom hex color. The widget automatically adjusts text contrast (white or dark) based on the accent color luminance.