RedFlagDeals

Overview

RedFlagDeals is Canada's most-visited deals aggregation platform, serving millions of users seeking sales, coupons, and promotions across hundreds of retailers. The design system embodies a "Pragmatic Clarity" aesthetic—a utilitarian, information-dense interface that prioritizes scannability and rapid decision-making over decorative flourish. The brand personality is direct, helpful, and community-focused: users come to save money, and the UI gets out of their way. The emotional response is one of confidence and control—users feel empowered to find deals quickly and share them with others.

The voice is conversational yet authoritative, avoiding hype while celebrating genuine savings. Vocabulary leans into action verbs ("Save," "Shop," "Get") and concrete numbers ("up to 50%," "Labour Day deals"). Example sentence in brand voice: "Save up to 80% on mobile devices—plus stack an extra 15% with this coupon code."

Colors

The color system centers on a bold, high-contrast primary red (#cc0000) that signals urgency and action—this is the signature CTA color used on "Sign Up / Log In" buttons, deal highlights, and emphasis text. This red is paired with a crisp white (#ffffff) surface for maximum legibility and accessibility. Secondary accents include a trust-focused blue (#0f91ff) for secondary actions and informational elements, and a deeper trust blue (#1967d2) for links and tertiary interactions. The neutral palette uses carefully calibrated grays: #333333 for primary text (on-surface), #757575 for secondary text (on-surface-variant), and a light gray (#e0e0e0) for dividers and subtle backgrounds. Status colors follow semantic conventions: green (#096623) for success/savings, orange (#ac4105) for warnings,

Typography

The type system pairs Source Serif Pro (600 weight) for headlines and display text with Open Sans (400–600 weights) for body and UI text. This serif-sans pairing creates visual hierarchy: serif headlines feel authoritative and editorial (reinforcing deal legitimacy), while sans-serif body text ensures rapid scanning and accessibility. Display (48px, 600 weight, -0.02em letter-spacing) is reserved for hero sections and major announcements. Headline-lg (32px, 600 weight) anchors section titles like "Featured Deals" and "Latest Forum Deals." Body-md (14px, 400 weight) is the workhorse for deal descriptions, card copy, and list items. Label-md (14px, 600 weight) is applied to button text and badge labels to ensure clickable elements stand out. On small labels over busy deal card backgrounds, a

Layout

The layout uses a fluid 12-column grid with a max-width container of 1298px, allowing the interface to scale gracefully from mobile (single column) to desktop (multi-column card grids). The page rhythm is driven by semantic spacing: lg spacing (40px) separates major sections (hero, featured deals, sponsored content), md spacing (24px) divides card groups, and sm spacing (12px) provides breathing room within cards. The header uses 20px vertical padding (top) and 32px horizontal padding (sides) to frame the logo and navigation. Deal cards are laid out in a responsive 4-column grid on desktop, collapsing to 2 columns on tablet and 1 column on mobile. Gutters between cards are consistently 24px. The container max-width of 1298px ensures content remains scannable without excessive line lengths;

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids heavy drop-shadows in favor of subtle, precise elevation. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) applied to standard deal cards and list items, creating a barely-perceptible lift. Level 2 (Hover/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied on card-hover and modal backgrounds, signaling interactivity and focus. Level 3 (Modal/Overlay): box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) reserved for modals, dropdowns, and floating elements that demand maximum visual separation. No element uses blur o

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied conservatively to soften the utilitarian grid while maintaining a professional, trustworthy appearance. Buttons use rounded.DEFAULT (6px) for a gentle, approachable feel that avoids sharp corners without appearing overly playful. Cards and modals use rounded.md (8px) to create subtle visual distinction from buttons. Input fields use rounded.DEFAULT (6px) to align with button styling and signal interactivity. Badges and pills use rounded.full (9999px) to create a compact, self-contained appearance that draws attention without

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses a bold #cc0000 background with white text, 14px Open Sans 600 weight, 8px 16px padding, and 6px border-radius. On hover, the background shifts to #b80000 (a darker red) with a 150ms ease-in-out transition, providing clear feedback without animation jank. The button-secondary component uses a light blue background (#bae0ff) with dark blue text (#004db6), 8px border-radius, and identical padding and typography; on hover, it brightens to #85c7ff. Both button variants maintain a 40px minimum height for touch-target accessibility (WCAG 2.1 Level AAA). The "Post Deal" and "Sign Up / Log In" CTAs in the header use button-primary styling.

Containers & Surfaces Cards are the fundamental content

Do's and Don'ts

**Do**

• Do use primary red (#cc0000) exclusively for high-priority CTAs (Sign Up, Post Deal, Shop Now) and deal-highlight badges—never dilute its impact by overusing it.
• Do maintain 24px gutters between deal cards and 40px spacing between major sections to prevent visual fatigue in dense deal listings.
• Do apply 6px border-radius consistently to buttons and inputs to signal interactivity while preserving a professional, data-forward aesthetic.
• Do use Source Serif Pro 600 for all headlines (h1–h3) to establish editorial authority and differentiate deal announcements from body text.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on card-hover and modal backgrounds to create clear visual hierarchy without heavy drop-shadows.

**Don't**

• Don't use primary red (#cc0000) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and status badges only.
• Don't apply border-radius larger than 12px to any component; the system uses 6–8px for buttons/inputs and 9999px for badges only.
• Don't use box-shadow values larger than 0 5px 15px rgba(0, 0, 0, 0.3); heavier shadows create visual clutter in a deals-focused interface.
• Don't mix serif and sans-serif fonts within a single component; use Source Serif Pro for headlines and Open Sans for body/UI text exclusively.
• Don't apply opacity or transparency to primary red (#cc0000); use the dedicated lighter red (#ffb3b3) or container red (#faecea) for subtle backgrounds instead.