DealNews

Overview

DealNews is a deal discovery and curation platform that transforms the overwhelming landscape of online retail into a curated, trustworthy shopping experience. The design system embraces a "Professional Clarity" aesthetic—combining the authority of corporate blue (#2c65af) with the energy of success green (#00a863) to create an interface that feels both credible and action-oriented. The brand serves deal-conscious shoppers who value expert vetting and time-saving discovery; the UI evokes confidence, efficiency, and the satisfaction of finding a great bargain. Every interaction is designed to reduce friction between discovery and purchase.

The voice is expert yet approachable, never condescending. DealNews speaks with the authority of 25+ years of deal curation, using clear, direct language that respects the user's time. Vocabulary emphasizes specificity: "Up to 90% off" rather than "huge savings," "Staff Pick" rather than "trending." Example sentence in brand voice: "This Woot clearance spans tablets, routers, and smartwatches—all at 90% off with free Prime shipping."

Colors

The color system is built on a foundation of trust (primary blue #2c65af) and action (secondary green #00a863), with supporting accents for urgency and exclusivity. Primary (#2c65af) dominates the header, CTAs, and interactive states—it is the signature brand color used on the "Sign In" button, filter toggles, and section headings. Secondary (#00a863) is reserved for price callouts, success badges, and the prominent "SHOP NOW" button, signaling deal activation and savings. Tertiary (#f58345) provides warmth on secondary CTAs and highlights. Error red (#b53635) marks expired deals and warnings with high contrast (box-shadow: 0 0 4px 0 rgba(0,0,0,0.12), 0 4px 4px 0 rgba(0,0,0,0.24)).

The surface stack uses a clean white base (#ffffff) with subtle container layers: surface-container (#eff0f3

Typography

The typography system uses Roboto as the primary typeface, chosen for its clarity at small sizes and professional neutrality. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for section titles and modal headers. Headline-md (28px, 600 weight) breaks up content regions. Title-lg (20px, 600 weight) labels deal cards and feature blocks. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry descriptive copy and deal descriptions. Label-md (14px, 500 weight, 0.01em letter-spacing) is the workhorse for buttons, badges, and UI labels. Label-sm (12px, 500 weight, 0.05em letter-spacing) is used for bylines, disclaimers, and small callouts. Roboto Condensed (fontFamily: "Roboto Condensed", fontWeight:

Layout

The layout uses a 12-column grid with a max-width of 1280px (container-max-width: 1280px), centered with auto margins. The page rhythm is driven by semantic spacing: lg spacing (40px) separates major sections (hero, featured deals, newsletter signup), md spacing (24px) divides card groups, and sm spacing (12px) creates breathing room within cards. The gutter (24px) is applied consistently to left/right padding on the main container, collapsing to 16px on tablets and 8px on mobile. Cards are laid out in a responsive grid: 1 column on mobile, 2–3 columns on tablet, 4–5 columns on desktop. The filter bar (FILTER, Staff Pick, Category, Store, Brand dropdowns) sits sticky at the top of the deal feed with a white background and 1px bottom border at {colors.outline}. The right sidebar (newsletter

Elevation & Depth

Elevation is achieved through a two-tier shadow system that respects the flat, modern aesthetic while creating clear visual hierarchy. Level 1 (Base/Surface): no shadow; white background (#ffffff) with 1px border at {colors.outline} (#c1c4cc). Level 2 (Standard Card): box-shadow: 0 0 4px 0 rgba(0,0,0,0.12), 0 4px 4px 0 rgba(0,0,0,0.24); used on deal cards, input fields, and menu items. Level 3 (Elevated/Modal): box-shadow: 0 0 4px 0 rgba(0,0,0,0.12), 0 4px 4px 0 rgba(0,0,0,0.24) with a 2px primary border; applied to featured cards, modals, and the newsletter signup panel. Hover states transiti

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used sparingly and strategically to soften the interface without sacrificing clarity or professionalism. Buttons use rounded.DEFAULT (4px, border-radius: 4px) for a subtle, modern feel that avoids the softness of larger radii. Cards and modals use rounded.lg (12px, border-radius: 12px) to create a friendly, approachable container that still feels structured. Input fields use rounded.DEFAULT (4px) to align with buttons and maintain visual consistency. Filter chips and badges use rounded.full (9999px, border-radius: 50%) to create a pi

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants. **Button-primary** (backgroundColor: {colors.primary}, textColor: {colors.on-primary}, padding: 12px 24px, height: 40px, rounded: {rounded.DEFAULT}, fontWeight: 500) is used for primary CTAs like "Sign In" and filter actions. On hover, transition to button-primary-hover (backgroundColor: #214b82) with a 0.2s ease-out timing. **Button-cta-success** (backgroundColor: {colors.secondary}, fontWeight: 600, padding: 12px 24px) is reserved for deal activation ("SHOP NOW") and price-related actions; it uses a heavier weight (600) to draw maximum attention. On hover, darken to #005a38. **Button-secondary** (backgroundColor: transparent, border: 1px solid {colors.primary}, textColor: {colors.primary}) is us

Do's and Don'ts

**Do**

• Do use primary blue (#2c65af) exclusively on CTAs, headers, and interactive states—never on backgrounds or body text.
• Do apply secondary green (#00a863) to price callouts and "SHOP NOW" buttons to create a clear visual signal for deal activation.
• Do enforce a minimum 40px touch target height on all buttons and interactive elements for mobile accessibility.
• Do use Roboto Condensed at 700 weight for price displays to create visual emphasis and urgency without increasing font size.
• Do maintain md spacing (24px) between card groups and lg spacing (40px) between major sections to create a clear visual rhythm.
• Do apply the two-tier shadow system (Level 2 for cards, Level 3 for modals) consistently; never mix shadow styles within a component family.
• Do use rounded.lg (12px) on cards and modals, rounded.DEFAULT (4px) on buttons and inputs, and rounded.full (9999px) on filter chips to create a cohesive shape language.
• Do transition all interactive states (hover, focus, active) with a 0.2–0.3s ease-out timing to feel responsive without feeling sluggish.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#303437) for dark text and on-primary (#ffffff) only on primary-colored backgrounds.
• Don't apply primary blue to large background areas or containers; reserve it for interactive elements and accents only.
• Don't mix Roboto and Roboto Condensed in the same line of text; use Roboto Condensed exclusively for price displays and Roboto for all other typography.
• Don't create buttons smaller than 40px in height or with padding smaller than 12px 24px; this violates touch target guidelines and reduces accessibility.
• Don't apply more than one shadow level to a single component; a card is either Level 2 or Level 3, never both.
• Don't use border-radius: 0 on interactive elements; all buttons, inputs, and cards must have rounded corners (minimum 4px).
• Don't apply color transitions longer than 0.3s; faster transitions (0.2s) feel more responsive and modern.
• Don't use the error color (#b53635) for non-error states; reserve it for expired deals, warnings, and validation errors only.