QuickReply

Overview

QuickReply is a conversational commerce product for Instagram, Facebook and WhatsApp merchants. Its visual identity is a warm, editorial Neo-Brutalist Minimalism: heavy black-weight uppercase display headlines set on a cream canvas, paired with soft, rounded pill controls and playful tilted cards that mimic real chat threads. The emotional response is confident and fast, like a shop assistant who already knows the price.

Voice is direct, commercial and plain-spoken, favouring concrete nouns (price, catalog, inbox) over abstraction. Headlines shout in capitals while body copy stays calm and conversational. Example sentence: "Sneaker in size 9? Air Max 270 is ₹8,999 and 3 left in stock."

Colors

The canvas is warm cream #faf8f5 (body) with #f5f6f0 as the tinted section base; text is near-black #161616. Primary (#ee7d60, coral) is the signature accent: it fills the Start free CTA, the header logo tile, the DM highlight pill and the focus of brand moments. Use it sparingly so the coral keeps its pull. Primary-fixed-dim (#e06c4e) is the hover state for coral surfaces. Secondary (#161616) doubles as the dark pill for the Menu tab and the primary hero CTA, giving the page a black-and-coral two-tone rhythm. Tertiary (#e8b931, amber) marks highlights and status badges; never use it for body text. Surface stack: cream base, #ffffff for chat cards and inputs, #e2e8f0 for hover fills. Status and social accents (WhatsApp #25d366, Instagram #e1306c, Facebook #1877f2) appear only inside platfo

Typography

Type is DM Sans throughout, weight 900 for display and headline levels with tight tracking (-0.03em at 70px) to create dense, poster-like blocks. Outfit (700) is reserved for card titles, and JetBrains Mono is used for small technical labels at 12px with 0.05em tracking. Apply uppercase only to display headings; body copy stays sentence case at 16px/24px. Instrument Serif is loaded for occasional editorial accents.

Layout

The layout is fluid below 768px and fixed-width above, with the content container capped at 1320px (header at 1360px) and a 12-column grid. Section rhythm uses lg (20px) spacing between related blocks and xl (24px) gutters between cards; hero padding is 160px top and 64px bottom on desktop. White space is generous around the centred hero copy, which sits in a 768px measure.

Elevation & Depth

Depth is communicated mainly through tilt and shadow rather than blur. Primary CTAs use 0 12px 24px -6px rgba(0,0,0,0.25) and lift to 0 16px 32px -6px rgba(0,0,0,0.35) on hover with translateY(-2px) over 150ms ease-out. Header tab uses shadow-xl. Chat mockup cards are rotated between -2deg and 2deg and rest on the cream canvas with a subtle shadow-sm.

Shapes

Shape language is Soft-Rounded Pill: buttons and badges are fully round (9999px), inputs and list items sit at 16px to 20px, and product cards at 20px to 36px. The header Menu tab uses a 20px bottom radius to appear to hang from the top edge. Rounded corners keep the brutal headline from feeling hostile.

Components

Action Elements Primary buttons are coral pills at 48px height with label-md (11px, 700) text; on hover they shift to primary-fixed-dim with a 150ms transition and translateY(-2px). The hero CTA is a black pill with a 40px white circular arrow chip; its active state drops by 2px in 150ms.

Containers & Surfaces Cards sit on surface-container-lowest with a 20px radius and 20px padding. Hover raises them to surface-container-high over 200ms. Chat mockups keep platform-specific header bars and a 1px #e2e8f0 border.

Inputs & Interaction Inputs use surface-dim with a 16px radius and 20px padding; on focus they switch to pure white with a 2px primary ring. Menu tab text animates with a 300ms cubic-bezier(0.33,1,0.68,1) vertical slide on hover.

Do's and Don'ts

**Do**

• Use coral #ee7d60 only for the single most important action on a screen.
• Set display headings in DM Sans 900 uppercase with -0.03em tracking.
• Keep chat and product mockups slightly rotated to signal a live, human feel.
• Pair every black pill CTA with a white circular arrow chip.

**Don't**

• Don't introduce a second saturated accent beside coral and amber.
• Don't use pure black for body text; keep it at #161616 or #45556c.
• Don't round primary buttons below 9999px; the pill is the brand shape.
• Don't use blur-based glassmorphism; depth here comes from offset shadows and tilt.