mydealz

Difficulty:
Industry
mydealz Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 4px
md · 8px
lg · 12px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

mydealz runs a maximum-density deals feed: white deal cards stack on a cool-gray canvas (#f3f5f7), each one compressing thumbnail, price, discount and social signals into 16px padding. Brand green (#30a83c) owns both the price and the 'Zum Deal' pill, while a red (#ce1736) and blue (#034eb1) temperature control turns saving into a crowd vote. Averta CY uses only two weights, 500 and 700, and buttons, search and chips all resolve to a 540px full-round pill.

mydealzE-commerce

Prompt Template

Base Template
Design a mydealz-inspired interface. - A cool-gray canvas (#f3f5f7) carrying a dense stack of white deal cards separated by 1px hairlines; - Brand green (#30a83c) on every price and every primary 'Zum Deal' pill; - The signature temperature control: cold-blue (#034eb1) down-vote, hot-red (#ce1736) reading and up-vote, always paired; - Fully-round 540px pills for buttons, search, filters and temperature, while content cards stay at 8px; - Averta CY at only two weights -- 500 for reading, 700 for prices, labels and temperatures; - Mint discount badges (#defde4) and a cool-gray timestamp pill keep the card scannable. Colors: #30a83c, #f3f5f7, #ce1736, #034eb1, #defde4 with #30a83c accent. Typography: Averta CY, 500/700.

Variant Prompts

📱 Mobile
Design a mobile deals app with mydealz aesthetics. Single-column white cards on #f3f5f7, green price pills, red/blue temperature voting and 540px round controls. Dense but tappable.
💻 Web
Design a web app with mydealz style. Feed plus right sidebar, #30a83c action pills, hairline cards and a scannable discount vocabulary. High-density, responsive.
📊 Dashboard
Design a dashboard with mydealz design language. Cool-gray shell, #30a83c metrics, red/blue sentiment indicators and compact 8px cards. Fast to scan.
📄 Landing Page
Design a landing page with mydealz visual identity. #30a83c conversion pills, deal-card proof points and a playful frog mascot moment. Energetic, conversion-focused.

Usage Examples

mydealz Deal Feed

Web
Build a deals community web app with mydealz design language and the #30a83c price system.

mydealz Community Dashboard

Dashboard
Create a community moderation dashboard using mydealz style with red/blue temperature signals and dense 8px cards.

✅ Best For

  • Coupon and price-comparison communities
  • E-commerce sale feeds
  • UGC discount platforms

❌ Avoid For

  • Luxury brand sites
  • Minimal long-form reading blogs

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download