OrderForm.store

Overview

OrderForm.store is a social commerce platform that eliminates friction in the DM-to-order workflow, designed for Instagram sellers who need a lightweight, conversion-focused storefront without the complexity of traditional e-commerce platforms. The aesthetic is 'Minimal Pragmatism'—a design philosophy that prioritizes clarity and speed over decoration, using a clean off-white canvas (rgb(252, 252, 252)) anchored by a deep forest-green primary color (rgb(0, 49, 31)) that signals trust and commerce readiness. The UI evokes a sense of calm efficiency: every element serves a function, every interaction is direct, and the visual language communicates 'this is built for sellers who move fast.' The brand personality is direct, action-oriented, and respectful of the user's time. Voice: conversational but purposeful, never flowery. Example: 'Your store is live. Orders land in WhatsApp in real time.'

Colors

The color system is anchored in a sophisticated neutral palette (grays from hsl(0, 0%, 99%) to hsl(0, 0%, 9%)) paired with a distinctive deep forest-green primary (#003d26, rgb(0, 49, 31)) that appears on all primary CTAs, active states, and brand-critical interactions. This primary is never used decoratively—it signals actionability. Secondary accent is a vibrant orange (#ff4500) reserved for highlights, social media integrations, and secondary CTAs that need visual distinction without competing with primary. Tertiary blue (#5865f2) is used for informational elements, links, and status indicators. The surface stack is carefully calibrated: surface-container-lowest (#f7f7f5) for cards and contained regions, surface-container (#e8e8e5) for subtle dividers, and surface-container-high (#dcdcd

Typography

The type system pairs Montserrat (geometric, confident) for headlines and CTAs with Inter (neutral, highly legible) for body copy and UI labels. This combination creates a visual hierarchy that guides the eye naturally: Montserrat's 52px headline-lg at 400 weight (not bold) conveys authority without aggression, while Inter's 16px body-md at 400 weight ensures long-form copy remains scannable at any screen size. Letter-spacing is conservative (ranging from -0.04em on display to 0.02em on labels) to maintain density and prevent the interface from feeling sparse. Label-md (15px, 600 weight, Montserrat) is used exclusively on buttons and interactive elements, creating a visual contract: if text is in this weight and size, it's clickable. Apply text-rendering: optimizeLegibility and -webkit-fon

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered with symmetric gutters of 24px on desktop. The spacing scale is semantic: lg (40px) separates major sections (hero from features), md (24px) separates card groups and subsections, sm (12px) separates inline elements. The hero section uses a single-column centered layout with max-width 960px to focus attention on the headline and primary CTA. Cards and dashboard elements use a 4-column grid on desktop, 2-column on tablet, 1-column on mobile, with consistent 24px gaps. White space is aggressive but purposeful: the off-white background (rgb(252, 252, 252)) is never fully white, creating subtle visual breathing room. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile.

Elevation & Depth

Depth is conveyed through subtle shadows and color shifts rather than dramatic layering. Level 1 (Base): flat surface with no shadow, background rgb(252, 252, 252). Level 2 (Cards/Containers): box-shadow 0 4px 12px rgba(0, 0, 0, 0.08), background rgb(247, 247, 245), border 1px solid rgba(0, 0, 0, 0.06). Level 3 (Modals/Overlays): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12), background rgb(255, 255, 255), border 1px solid rgba(0, 0, 0, 0.08). Hover states elevate by one level: a card at Level 2 moves to Level 3 shadow on hover. Focus states use a 3px inset box-shadow in primary color at 10% opac

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used to reduce visual harshness and improve touch targets, but never so much that the interface feels playful or casual. Buttons use rounded.lg (1rem / 16px) to create a clear, tappable target (minimum 44px height) while maintaining a professional appearance. Cards use rounded.xl (1.5rem / 24px) for a softer container feel that contrasts with the sharp typography. Input fields use rounded.DEFAULT (0.5rem / 8px) to signal 'form element' without excessive rounding. Badges and chips use rounded.full (9999px) to create pill-shaped c

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses background rgb(0, 49, 31), color rgb(255, 255, 255), padding 8px 20px, height 44px, rounded 1rem, with a 200ms transition on background-color. On hover, background shifts to rgb(0, 83, 31) (primary-container). On active/focus, background becomes rgb(0, 43, 26) with a 3px inset focus ring at rgba(0, 49, 31, 0.1). button-secondary uses a transparent background with a 1px border in outline-variant, same padding and height, with hover state shifting to surface-container-high. Both button variants use label-md typography (Montserrat 15px 600 weight) and support disabled state with opacity 0.5 and cursor not-allowed.

Containers & Surfaces Cards are the primary container for grouped content. card uses backgr

Do's and Don'ts

**Do**

• Do use primary (rgb(0, 49, 31)) exclusively on CTAs, active states, and brand-critical interactions—never as a decorative accent.
• Do maintain minimum 44px height on all interactive elements (buttons, inputs, list items) to ensure touch-friendly targets.
• Do apply 200ms transitions on background-color and border-color for all interactive state changes to provide tactile feedback.
• Do use Montserrat for headlines and CTAs, Inter for body copy—never mix them within a single text block.
• Do respect the spacing scale: use lg (40px) for section separation, md (24px) for card groups, sm (12px) for inline elements.
• Do apply box-shadow 0 4px 12px rgba(0, 0, 0, 0.08) to cards and containers to establish clear visual hierarchy.

**Don't**

• Don't use primary color on non-interactive elements or as a background fill—it must always signal actionability.
• Don't create buttons shorter than 44px or narrower than 80px; respect minimum touch targets.
• Don't apply animations longer than 300ms or use easing functions other than ease or ease-in-out; the interface should feel responsive, not theatrical.
• Don't mix rounded corners: buttons use lg (16px), cards use xl (24px), inputs use DEFAULT (8px)—consistency prevents visual confusion.
• Don't use the full gray scale (gray1 through gray12) in a single component; limit to 3 adjacent grays to maintain contrast and readability.
• Don't add decorative elements, gradients, or patterns; every pixel must serve a functional purpose.