Drop

Overview

Drop is a social commerce platform that revolutionizes customer engagement by enabling direct sales through Instagram Direct Messages. The brand embodies a philosophy of 'Minimalist Precision'—a design aesthetic that pairs stark, high-contrast black (#101010) with warm, muted neutrals (#fbf8f3) and strategic accent colors (purple #b8afda, yellow #f6f361) to create an interface that feels both authoritative and approachable. The visual language prioritizes clarity and directness: every element serves a functional purpose, and the sparse use of color focuses user attention on conversion moments. The emotional response is one of confidence and control—users feel they are operating a sophisticated tool, not a cluttered dashboard. The brand voice is direct, data-driven, and conversational: 'Move past old-school CRM. With Drop, engage your audience directly on social media. Sell faster, convert better, scale smarter.' Sentences are short, action-oriented, and avoid jargon; the tone assumes the reader is a busy marketer or founder who values efficiency over explanation.

Colors

The Drop color system operates on a principle of 'high-contrast minimalism with strategic accents.' The primary color is pure black (#101010), used for all text, buttons, and structural elements—it commands attention and establishes authority. The surface is a warm off-white (#fbf8f3), chosen to reduce eye strain and provide a premium, editorial feel compared to pure white. Secondary colors are deployed sparingly: purple (#b8afda) appears in form accents, badges, and supporting UI elements to add visual interest without overwhelming the interface; yellow (#f6f361) is reserved for highlights and micro-interactions. The error state uses a warm orange (#eb652b) for visibility without harshness. All surfaces use a carefully graduated container stack: surface-container-lowest (#fefdfb) for the

Typography

The Drop type system uses ABC Normal as the primary typeface, a geometric sans-serif that conveys modernity and precision. The hierarchy is built on weight and size rather than stylistic variation—all text is set in regular weight (400) or medium (500), avoiding bold declarations that would feel aggressive. Display text (58.88px, -0.02em letter-spacing) is reserved for hero headlines and sets the tone; headline-lg (48px) and headline-md (36px) are used for section titles and card headers, each with subtle negative letter-spacing (-0.015em to -0.01em) to tighten the visual mass. Body text (16–18px, 24–28px line-height) is set with generous line-height to ensure readability on light backgrounds; labels (12–14px) are used for form fields and badges. When applying typography over colored backg

Layout

Drop uses a 12-column grid with a maximum container width of 1280px, allowing for flexible layouts that scale from mobile to desktop. The spacing scale is semantic: xs (4px) for micro-spacing within components, sm (12px) for tight grouping, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White space is generous but purposeful—the design avoids cramped layouts, using lg spacing between major sections to create visual breathing room. The gutter width is 24px on desktop, maintaining consistent horizontal rhythm. Container max-width is 1280px, ensuring content never stretches too wide on ultra-large screens. Sections are separated by lg spacing (40px) vertically, creating a clear rhythm that guides the eye down the

Elevation & Depth

Depth in Drop is conveyed through a restrained shadow system that avoids the heavy, dark shadows common in Material Design. The elevation stack consists of three levels: Level 1 (Base) uses no shadow—elements sit flush on the surface (#fbf8f3); Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates cards from the background without drawing excessive attention; Level 3 (Modals/Elevated Surfaces) uses box-shadow: 0 2px 32px rgba(0, 0, 0, 0.16), a softer, more diffuse shadow that suggests greater distance. Hover states on cards transition

Shapes

Drop employs a philosophy of 'Soft Geometric Precision,' where rounded corners are used strategically to soften the severity of the black-and-white palette while maintaining a modern, tech-forward aesthetic. Buttons use full border-radius (9999px), creating pill-shaped CTAs that feel friendly and clickable; this is the most rounded element in the system, signaling primary actions. Cards and containers use 1.7em (27.2px at 16px base) border-radius, a generous curve that softens edges without appearing overly organic. Form inputs use 0.4em (6.4px at 16px base) border-radius, a subtle curve that

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a solid black background (#101010) with white text (#fbf8f3), full border-radius (9999px), and padding of 18px 24px, creating a 48px tall pill. On hover, the background transitions (200ms) to primary-container (#232323) with text shifting to on-primary-container (#f5f2ed), providing clear feedback without jarring color shifts. The button-secondary variant uses a transparent background with a 1px border (color: #9b9b9b) and black text, allowing for secondary actions without visual dominance. Both variants use label-md typography (14px, 500 weight, 0.01em letter-spacing) for crisp, scannable text.

Containers & Surfaces Cards are the primary content container, using a light gray backgroun

Do's and Don'ts

**Do**

• Do use black (#101010) for all primary text, buttons, and structural elements—it is the brand's anchor color and commands attention.
• Do apply purple (#b8afda) to form accents, badges, and supporting UI to add visual interest without overwhelming the minimalist aesthetic.
• Do use full border-radius (9999px) exclusively for primary CTAs; this shape is instantly recognizable as clickable and differentiates actions from containers.
• Do maintain generous white space (lg spacing: 40px) between major sections to create visual breathing room and guide the eye.
• Do use soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) on cards to clarify hierarchy without creating theatrical depth.
• Do apply 200ms cubic-bezier(0.2, 0, 0, 1) transitions to all interactive elements for a cohesive, responsive feel.

**Don't**

• Don't use pure white (#ffffff) as a background; the warm off-white (#fbf8f3) is the brand standard and reduces eye strain.
• Don't apply heavy shadows (box-shadow: 0 16px 40px) or multiple shadow layers—Drop uses restrained elevation to maintain clarity.
• Don't mix typefaces; ABC Normal is the exclusive brand typeface. Avoid system fonts, serif fonts, or script fonts.
• Don't use yellow (#f6f361) or orange (#eb652b) as primary colors; these are reserved for highlights and error states only.
• Don't create buttons with sharp corners (border-radius: 0) or minimal rounding (border-radius: 4px)—pill-shaped (9999px) is the brand standard for CTAs.
• Don't add decorative elements, gradients, or patterns to the interface; the minimalist aesthetic relies on color contrast and typography hierarchy.