RightMessage

Overview

RightMessage is a website personalization platform that transforms static digital experiences into dynamic, visitor-centric journeys. The brand serves marketing teams and agencies seeking to increase conversion through real-time content adaptation driven by CRM data, behavioral signals, and survey responses. The aesthetic is 'Warm Minimalism'—a sophisticated blend of approachable, human-centered design with technical precision. The UI evokes clarity and confidence: warm cream backgrounds (#fffaf3) paired with a bold, energetic orange accent (#ff7a01) create an inviting yet purposeful atmosphere. The emotional response is one of empowerment: users feel they have control over their messaging and audience understanding.

The brand voice is direct, conversational, and outcome-focused. RightMessage speaks in active verbs and concrete benefits, avoiding jargon while maintaining authority. Vocabulary emphasizes 'personalization,' 'real-time,' 'visitor,' and 'conversion'—words that signal agency and measurable impact. Example sentence in brand voice: 'Each visitor sees the right message at the right moment, so more people convert.'

Colors

The color system centers on a warm, approachable palette anchored by a vibrant orange primary (#ff7a01) that commands attention on CTAs and interactive elements. This accent is paired with a sophisticated navy secondary (#286983) used for navigation, headlines, and secondary actions, creating a professional yet energetic duality. The surface stack uses warm, off-white tones: the base surface is #fffaf3 (a soft cream), with container variants ranging from #faf4ed (dim) to #e8ddd6 (highest), providing subtle depth without coldness. Text on surface is #575279 (a warm taupe), ensuring readability while maintaining warmth. The outline/border system uses #dfdad9 and #cecacd, creating soft visual separation that feels refined rather than harsh. Primary (#ff7a01) is reserved exclusively for high-p

Typography

The type system employs a two-family strategy: Poppins (700 weight) for headlines and display text, and Satoshi (400–600 weights) for body copy and UI labels. This pairing balances geometric precision with humanistic warmth. Display text (83px, poppinsHero, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures section breaks; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewport sizes. Labels use Satoshi at 12–14px with 900 weight for maximum emphasis on buttons and form fields, creating visual hierarchy through weight rather than size. All headlines employ negative letter-spacing (-0.04em to -0.01em) to tighten letterforms and enhance visual impact. Body text uses 1.5–1.75 line-

Layout

The layout follows a 12-column grid with a maximum container width of 1280px, maintaining a fluid approach on smaller viewports. The page rhythm uses semantic spacing: lg (40px) for section separation, md (24px) for component padding and gutter widths, and sm (12px) for internal element spacing. The hero section occupies full viewport height with centered content, using a soft gradient background (transitioning from #e8ddd6 to #fffaf3) to add visual depth without distraction. Cards and content blocks are inset from the container edge by gutter (24px) on desktop, collapsing to 12px on mobile. White-space is generous: sections breathe with 64px (xl) vertical margins, and internal card padding uses md (24px) consistently. The spacing scale is semantic and predictable—every margin and padding

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background layering rather than aggressive drop shadows. Level 1 (Base): the page background is a soft cream (#fffaf3) with no shadow. Level 2 (Standard Card): cards use a 1px solid border (#dfdad9) and a soft shadow (0 12px 24px -16px rgba(87, 82, 121, 0.32)), creating gentle separation from the background. Level 3 (Elevated/Hover): on hover or focus, cards elevate to a stronger shadow (0 16px 28px -16px rgba(87, 82, 121, 0.38)) and a slightly lighter background (#f2e9e1), signaling interactivity. Input fields and form elements u

Shapes

The shape philosophy is 'Warm Geometric'—a balance between technical precision and human approachability. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and clickable, while cards and containers use lg (1rem / 16px) for a modern, slightly softened corner that avoids both sharp edges and excessive roundness. Input fields use md (0.75rem / 12px) to signal their functional nature while maintaining visual consistency. Modals and overlays use xl (1.5rem / 24px) for a more pronounced, premium feel. The rationale: full-radius buttons are instantly recognizable a

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the full primary orange (#ff7a01) background with on-primary text (#191724), full border-radius (9999px), and label-sm typography (12px, 900 weight). Padding is 12px 24px, height 48px. On hover, the background shifts to #e66017 (a deeper orange), the element translates up 1px (transform: translateY(-1px)), and the shadow elevates to lg (0 16px 28px -16px rgba(87, 82, 121, 0.38)). Transition timing is 160ms ease for all properties. Secondary buttons use a transparent background with secondary text (#286983), a 1px outline border (#dfdad9), and lg border-radius (16px). On hover, the background becomes surface-container-high (#f2e9e1) and the border shifts to outline-variant (#cecacd). Ghost b

Do's and Don'ts

**Do**

• Do use the primary orange (#ff7a01) exclusively for high-priority CTAs and focus indicators—it is the brand's signature accent and must remain distinctive.
• Do apply the full button border-radius (9999px) to all primary CTAs to signal immediate clickability and maintain brand consistency.
• Do maintain the warm cream surface (#fffaf3) as the page background; it is the foundation of the approachable aesthetic.
• Do use lg spacing (40px) for section separation and md spacing (24px) for component padding to preserve the generous, breathing layout.
• Do apply the 160ms ease transition timing to all interactive state changes (hover, focus, active) for a cohesive, responsive feel.
• Do use Poppins 700 for all headlines and Satoshi 400–600 for body copy to maintain the warm-geometric type pairing.

**Don't**

• Don't use the primary orange (#ff7a01) for non-interactive elements, backgrounds, or text—reserve it exclusively for CTAs and focus states.
• Don't apply sharp border-radius (0px or 2px) to buttons or cards; the brand uses lg (16px) minimum for a modern, approachable feel.
• Don't use cold grays or pure blacks for text; on-surface (#575279) is the standard body text color, maintaining warmth.
• Don't exceed the container max-width of 1280px; maintain the structured grid to preserve visual hierarchy and readability.
• Don't apply shadows stronger than lg (0 16px 28px -16px rgba(87, 82, 121, 0.38)) to avoid a heavy, dated appearance.
• Don't mix font families within a single headline or button; use Poppins for display/headlines and Satoshi for body/labels consistently.