Qatchup

Overview

Qatchup is a customer feedback collection widget designed for product teams and startups who believe user voices drive product excellence. The platform embodies 'Conversational Minimalism'—a design philosophy that strips away friction while maintaining warmth and approachability. The aesthetic combines a clean, neutral foundation (predominantly white and charcoal) with subtle warm accents (soft gold #e6cea0) and purposeful interaction highlights (bright blue #3898ec), creating an interface that feels like a natural extension of the product rather than an intrusive overlay. The brand personality is direct yet empathetic: it speaks to founders and product managers with clarity and respect, acknowledging that feedback is both precious and actionable. Voice example: 'Your users' voices are your competitive advantage—capture them, understand them, act on them.'

Colors

The Qatchup color system prioritizes clarity and trust through a neutral-dominant palette anchored by charcoal (#292929) as the primary action color. This deep, professional neutral appears on all primary CTAs (Login/Sign up buttons use rgb(41, 41, 41) with 100px border-radius), creating a sense of authority without aggression. The surface stack ranges from pure white (#ffffff) for primary content areas down through grays (#f5f5f5, #e5e5e5, #cccccc) to establish visual hierarchy and container separation. Secondary accent #e6cea0 (warm gold) is reserved for badges, highlights, and supporting UI elements—it humanizes the interface without overwhelming it. Tertiary blue (#3898ec) serves as the system accent for focus states, links, and interactive feedback (visible in input field focus rings

Typography

Aspekta is the sole typeface family, loaded from Google Fonts with weights 100–900, providing a cohesive, modern-professional voice across all scales. The type hierarchy follows a strict scale: Display (56px, 500 weight) anchors hero sections with -0.02em letter-spacing to create visual impact; Headline-lg (40px, 600 weight) and Headline-md (28px, 600 weight) structure content sections with -0.01em tracking; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) handle primary and secondary copy at 28px and 24px line-heights respectively, ensuring readability at 16px base font size. Label-md (14px, 500 weight) and Label-sm (12px, 500 weight) are applied to buttons, form labels, and metadata. All body text uses 0em letter-spacing except display and headline levels, which employ negative

Layout

Qatchup employs a fluid 12-column grid with a maximum container width of 1280px, allowing content to breathe on desktop while remaining compact on mobile. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero from feature cards), md (24px) creates breathing room within card groups and form sections, and sm (12px) provides micro-spacing between related elements. The gutter is consistently 24px, applied symmetrically on left and right edges. Hero sections use full-width backgrounds with centered content constrained to 940–1166px (observed container widths), creating a sense of expansiveness without overwhelming the eye. Form inputs and cards maintain consistent padding of 12px 20px (observed in input-field computed styles), with 16px border-radius

Elevation & Depth

Depth in Qatchup is conveyed through a restrained shadow system that avoids the heavy drop-shadows of skeuomorphic design. Level 1 (Base/Surface) uses no shadow—the white background (#ffffff) with 1px border (#cccccc) defines the baseline. Level 2 (Standard Cards & Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), visible on feedback cards and form containers, creating subtle separation from the background. Level 3 (Modals & Elevated Surfaces) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modal overlays and floating action panels. Hover states transition smoothly (200m

Shapes

Qatchup's shape language embodies 'Soft-Technical Pragmatism'—rounded corners are generous enough to feel approachable but not so extreme as to sacrifice visual clarity. Buttons use border-radius: 100px (or 9999px in CSS), creating pill-shaped CTAs that feel inviting and clickable (observed on primary CTA with padding 10px 16px and 100px radius). Cards and modals use 16px (1rem) border-radius, striking a balance between softness and structure—this radius is applied consistently to input fields (observed as 9.9968px, effectively 10px) and card containers. Smaller UI elements like badges and dro

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: rgb(41, 41, 41), textColor: rgb(250, 250, 250), padding: 10px 32px, height: 44px, and border-radius: 100px, with typography label-md (14px, 500 weight). On hover, transition to button-primary-hover with backgroundColor: rgb(61, 61, 61) over 200ms ease-out. The secondary button uses a transparent background with a 1px border at outline color (#b2b2b2), maintaining the same height and padding. All buttons must include a focus state with outline: 2px solid {colors.tertiary} and outline-offset: 2px for keyboard accessibility.

Containers & Surfaces Cards use backgroundColor: rgb(255, 255, 255), rounded: 16px, padding: 24px, and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On

Do's and Don'ts

**Do**

• Do use the charcoal primary (#292929) for all primary CTAs and interactive elements—it commands attention without aggression and pairs naturally with white backgrounds.
• Do apply the warm gold secondary (#e6cea0) sparingly on badges, highlights, and supporting UI to humanize the interface and create visual interest.
• Do maintain consistent padding (12px 20px for inputs, 24px for cards, 40px for modals) to establish a predictable, comfortable rhythm.
• Do use the 200ms ease-out transition timing on all hover and focus state changes to create a responsive, polished feel.
• Do ensure all text meets WCAG AAA contrast ratios (15:1 for body text on white, 7:1 minimum for secondary text) by testing with color contrast tools.

**Don't**

• Don't use the tertiary blue (#3898ec) as a primary action color—reserve it exclusively for focus states, links, and interactive feedback to maintain visual hierarchy.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the design system prioritizes lightness and clarity, not depth.
• Don't mix border-radius values inconsistently; stick to the defined scale (4px, 10px, 16px, 100px) to maintain visual cohesion.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds outside of the defined color tokens—always reference the surface and on-surface stack.
• Don't animate transitions faster than 150ms or slower than 300ms; the 200ms ease-out standard creates a responsive, professional feel without feeling sluggish or jarring.