BRAND24

Overview

BRAND24 is an enterprise-grade AI monitoring platform designed for marketing teams, PR professionals, and brand managers who need real-time visibility across the entire digital landscape. The design system embodies 'Data-Driven Clarity'—a modern, minimalist aesthetic that prioritizes information hierarchy and conversion. The interface uses a clean white canvas (rgb(255, 255, 255)) with a vibrant emerald primary accent (#0fb36c) that signals trust, growth, and actionable insights. The brand personality is professional yet approachable: precise, confident, and never condescending. Every interaction feels purposeful—from the moment a user lands on the homepage to the moment they export their first report.

The voice is direct and benefit-focused, avoiding jargon while maintaining credibility. Example sentence in brand voice: 'See every mention of your brand across 1,000+ sources in real time—no setup required, no delays.' The typography pairs Inter (headlines, data-heavy contexts) with DM Sans (body copy, UI labels), creating a sophisticated yet accessible reading experience. The color palette is deliberately restrained: the emerald primary (#0fb36c) appears on all CTAs and interactive elements, while a secondary blue (#3860be) supports secondary actions and data visualization. Grays (from #f8f8f8 to #22272a) provide the structural foundation, ensuring content remains the focal point.

Colors

The color system is built on a foundation of trust and clarity. Primary (#0fb36c) is the brand's signature emerald—used exclusively on call-to-action buttons, active states, and key interactive elements. This color appears 90 times across the site's most critical conversion paths, signaling confidence and encouraging action. On-primary is pure white (#ffffff) to ensure maximum contrast and readability at 15px font weight 700. The primary-container (#d4f5e8) provides a soft, approachable background for secondary information or disabled states, while on-primary-container (#0a5c3a) ensures text remains legible over the lighter background.

Secondary (#3860be) is a professional blue used for secondary CTAs, data visualization accents, and informational elements. It appears 24 times in the desi

Typography

The typography system uses a two-font strategy: Inter for headlines and data-dense contexts (where precision and authority matter), and DM Sans for body copy and UI labels (where warmth and accessibility are priorities). Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles, commanding attention with its 68px line-height. Headline-lg (40px, 600 weight) is used for section headers and prominent CTAs, while headline-md (28px, 600 weight) breaks up content into digestible chunks. Title-lg (20px, 600 weight) labels cards, modals, and subsections.

Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and introductory paragraphs, ensuring readability at a glance. Body-md (16px, 400 weight, 24px line-height) is the default for all bo

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable and scannable on all screen sizes. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero spacing and full-width sections. The gutter value (24px) is applied consistently to all horizontal padding, creating a unified visual rhythm. White-space is treated as a design element, not an afterthought—generous margins around hero sections (40px lg spacing) create breathing room and emphasize key messages. Cards and containers use md (24px) padding internally, with lg (40px) spacing between sections. The contai

Elevation & Depth

Depth in BRAND24's design system is achieved through a restrained shadow palette that maintains clarity while creating visual hierarchy. The system uses three elevation levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on hover states and small UI elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 12px 50px rgba(0, 0, 0, 0.4)) for elevated modals and floating elements. These shadows are never harsh or dramatic—they're designed to feel natural and professional, consistent with the brand's data-driven aesthetic. Cards in the default state use md eleva

Shapes

The shape system follows a 'Soft-Technical' philosophy: rounded corners are used strategically to soften the interface while maintaining a professional, data-focused aesthetic. Buttons use lg (1rem / 16px) border-radius, creating a modern, approachable appearance that feels inviting without being playful. Cards and containers use xl (1.5rem / 24px) border-radius, providing a generous curve that makes content feel contained and organized. Input fields use full (9999px) border-radius, creating pill-shaped inputs that feel contemporary and mobile-friendly. Small UI elements like badges and tags u

Components

Action Elements Buttons are the primary driver of conversion and engagement. The button-primary component uses {colors.primary} (#0fb36c) background with {colors.on-primary} (#ffffff) text, applied at 15px font-size with 700 font-weight and 14px vertical padding, 48px horizontal padding. The border-radius is {rounded.lg} (1rem). On hover, the background transitions to #0a8c52 (a darker emerald) over 200ms using ease-in-out timing, maintaining the same text color. On active/pressed state, the background darkens further to #078a4f with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create tactile feedback. Button-secondary uses a transparent background with a 2px solid border in {colors.primary}, allowing secondary actions to feel less prominent while remaining accessible. Butto

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0fb36c) exclusively on primary CTAs and high-priority interactive elements—this color has been tested and optimized for conversion.
• Do apply {spacing.md} (24px) padding to all cards and containers to maintain visual consistency and breathing room.
• Do use Inter for headlines (display, headline-lg, headline-md) and DM Sans for body copy and labels to create a clear typographic hierarchy.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards in their default state and transition to {elevation.lg} on hover over 200ms for smooth, intentional depth.
• Do use {rounded.lg} (1rem) for buttons, {rounded.xl} (1.5rem) for cards, and {rounded.full} (9999px) for input fields and badges to maintain shape consistency.
• Do reference color tokens (e.g., {colors.primary}) in all component definitions rather than hardcoding hex values—this enables rapid theme updates and maintains system integrity.

**Don't**

• Don't use secondary colors (#3860be, #f78da7) on primary CTAs—these are reserved for secondary actions and supporting elements to avoid visual confusion.
• Don't apply shadows heavier than {elevation.lg} (0 12px 50px rgba(0, 0, 0, 0.4))—excessive shadows create visual noise and undermine the clean, data-focused aesthetic.
• Don't mix font families within a single component (e.g., Inter headline with DM Sans body)—maintain the established pairing to preserve typographic hierarchy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—custom values fragment the design system and reduce consistency.
• Don't apply color directly to components; always use token references like {colors.primary} to ensure changes propagate across the entire system.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements—this compromises touch targets and accessibility on mobile devices.