Mydealz DESIGN.md

Overview

mydealz is a deals-community feed running at maximum density: a single cool-gray canvas ({colors.canvas}) stacked with hundreds of white deal cards ({colors.surface}), each one a compact bundle of thumbnail, title, price, and social signals. The design's whole job is to make that firehose scannable, and it does it with one confident brand green ({colors.primary}) — the color of every price, every "Zum Deal" pill, every submit action — plus a tight status vocabulary that keeps the eye moving.

The signature move is the temperature control: every deal carries a pill showing a cold-blue down-arrow ({colors.cold}), the deal's crowd-voted temperature in hot-red ({colors.hot}), and a hot-red up-arrow — pricing turned into a live vote. That red/blue pairing, extended by a warm orange ({colors.warm}) for rising deals and a premium violet ({colors.premium}) for highlighted content, is the brand's playful counterweight to an otherwise businesslike grid. Discount percentages sit in soft mint pills ({colors.discount-surface}), so a card reads at a glance: green price, red-hot temperature, mint saving.

Geometrically the system is defined by the fully-round 540px pill — buttons, the search field, the temperature control, filter chips all curve to a complete radius, while content cards settle at a friendly 8px. Averta CY carries everything at just two weights (medium 500, bold 700), keeping headlines punchy and the dense body legible. Depth is minimal: cards separate with a hairline ({colors.hairline}) and lift on the softest shadow only when they matter.

Key Characteristics:

• One brand green ({colors.primary}) owns every action and every price — the single unifying signal across a chaotic feed
• Signature hot/cold temperature control: {colors.cold} down-vote, {colors.hot} up-vote and temperature reading, on every deal card
• Fully-round {rounded.full} (540px) pills for buttons, search, chips, and the temperature control; 8px cards
• Mint discount pills ({colors.discount-surface}) pairing green savings against the red-hot temperature
• Averta CY at two weights (500/700) driving a punchy, high-density type system
• Cool-gray canvas ({colors.canvas}) behind stacked white cards ({colors.surface}) — a scannable card feed, not a marketing page
• A compact accent set — {colors.warm} orange for rising, {colors.premium} violet for highlighted — kept strictly functional

Colors

Brand & Accent

• Deal Green ({colors.primary} — #30a83c): The brand's core. Fills every primary CTA pill, every deal price, submit actions, active links, and highlighted stats. On-color content is {colors.on-primary}.
• Strong Green ({colors.green-strong}): A darker green for green text on light surfaces (discount-badge label, outline-button glyphs) where the fill green would be too light.
• Hot Red ({colors.hot}): The temperature "hot" signal — the deal's degree reading and the up-vote arrow. The brand's excitement color.
• Cold Blue ({colors.cold}): The temperature "cold" signal — the down-vote arrow. Always paired against {colors.hot} in the temperature control.
• Rising Orange ({colors.warm}): A warm accent for rising/trending deals, sitting between cold and hot on the temperature spectrum.
• Premium Violet ({colors.premium}): Highlight accent for premium / featured content markers.
• Discount Mint ({colors.discount-surface}): The soft green pill behind a saving percentage.

Surface

• Canvas ({colors.canvas}): The cool light-gray page ground that stacked white cards sit on.
• Surface ({colors.surface}): Pure white — every card, the nav, the footer, buttons.
• Hairline ({colors.hairline}): The 1px border on cards, buttons, and dividers.

Text

• Ink ({colors.ink}): True black for deal titles, headings, and primary text.
• Body ({colors.body}): Mid gray for secondary copy, metadata, muted button labels.
• Muted ({colors.muted}): Light gray for the quietest captions and placeholder text.

Semantic

• Warning Surface / Text ({colors.warning-surface} / {colors.warning-text}): The soft-yellow pill and amber-brown text used for expiring / caution deal states.

Typography

Font Family

Averta CY — a humanist geometric sans — carries the entire system at two weights: medium (500) for body and lead copy, bold (700) for headings, UI labels, prices, and micro-labels. A monospace face appears in rare technical contexts (voucher codes). There is no light or black weight; the two-weight discipline keeps the dense feed consistent.

Hierarchy

Principles

• Two weights only — 500 for reading, 700 for everything that signals or acts.
• Prices and temperatures are always bold; they're the two numbers that matter most on a card.
• The dense feed leans on size and weight, never on color, for text hierarchy (color is reserved for status).

Note on Font Substitutes

Averta CY is a commercial face. For open-source builds, Mulish or Nunito Sans (500/700) reproduce the humanist-geometric warmth with near-identical metrics; keep the two-weight split. Any system monospace substitutes for the voucher-code face.

Layout

Spacing System

• Base unit: 8px
• Tokens (front matter): {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 40px
• Cards pad {spacing.lg}; card rows stack with {spacing.sm}–{spacing.md} gaps for maximum density.

Grid & Container

A two-column shell above ~768px: the main deal feed (single stacked column of full-width cards) plus a right sidebar of coupon, news, and discussion cards. Below the breakpoint the sidebar drops and the feed goes full-width. The container is wide and content-dense rather than a narrow reading column.

Whitespace Philosophy

Whitespace is rationed — this is an information product, not a marketing page. Cards sit close together with tight internal padding; the cool-gray canvas gutters between white cards do the separating work, and the hairline borders keep each card crisp against its neighbors.

Responsive Strategy

Breakpoints

Touch Targets

Pill buttons ({components.button-primary}) and the temperature control clear a comfortable tap height; vote arrows, comment, share, and bookmark icons carry generous hit areas on the card foot.

Collapsing Strategy

The category strip and right sidebar collapse first; the nav condenses to the "Menü" pill + search + submit; deal cards reflow from a media-left row into a stacked thumbnail-over-body layout on narrow screens.

Image Behavior

Deal thumbnails are contained in {rounded.md} frames on the card's media side, never full-bleed; avatars are perfect circles ({rounded.circle}). Merchant logos and app-store badges render inline at fixed heights.

Elevation & Depth

Depth is hairline-first. Cards separate by border and canvas gutter; the soft 4–12px shadow is reserved for elements that lift (menus, sticky bars, elevated cards). There are no heavy shadow stacks in the resting feed.

Decorative Depth

The brand's playfulness lives in illustration, not gradients — a green cartoon frog mascot and companion characters appear in the consent and empty-state surfaces. The palette itself is flat; there are no brand gradients.

Shapes

Border Radius Scale

Photography Geometry

Deal thumbnails sit in {rounded.md} frames on the card's media column; author and community avatars are circles ({rounded.circle}). There is no hero photography — the product IS the card grid.

Components

Buttons

button-primary — the green action ("Zum Deal", "Deal-Alarm anlegen", "Hinzufügen")

• Fill {colors.primary}, label {colors.on-primary} in {typography.ui}, shape {rounded.full}, padding 0px 14px, often with a trailing external-link or plus glyph

button-outline-green — brand-tinted secondary ("+ Beitrag")

• {colors.surface} fill, {colors.primary} label + border, {rounded.full}, padding 0px 14px

button-outline-neutral — quiet chrome ("Menü")

• {colors.surface} fill, {colors.ink} label, {colors.hairline} border, {rounded.full}, padding 0px 12px

button-muted — de-emphasized action ("Ohne Zustimmung weiter")

• {colors.surface} fill, {colors.body} label, {colors.hairline} border, {rounded.full}

button-tag — compact utility control

• {colors.surface} fill, {colors.ink} label, {rounded.md}, tight 0px 4px padding

Cards & Containers

deal-card — the feed's atom

• {colors.surface} on {colors.hairline}, {rounded.md}, {spacing.lg} padding; media-left thumbnail, bold black title, a price-lockup, a temperature-control, merchant + author line, and a button-primary foot with comment/share/bookmark icons

sidebar-card — coupon / news / discussion tiles

• Same white-on-hairline {rounded.md} chrome as deal-card, in the right rail

timestamp-pill — "Gepostet vor …" marker

• {colors.canvas} fill, {colors.body} {typography.caption}, {rounded.md}, pinned top-right on a card

Inputs & Forms

search-pill — the header search

• {colors.surface} pill at {rounded.full}, {colors.hairline} border, {colors.body} placeholder in {typography.body}, magnifier glyph left

text-input

• {colors.surface} field, {colors.ink} text, navy-translucent border, fully-round {rounded.full}, padding 9px 35px

email-input

• {colors.surface} field at {rounded.md} (square-cornered against the pill search), padding 9px 16px

Navigation

nav-bar

• {colors.surface} bar with {colors.hairline} bottom rule: mydealz frog logo, button-outline-neutral "Menü", search-pill, "Deal-Alarm anlegen" and "Einloggen" text links, button-outline-green "+ Beitrag"; a category strip (Kategorien, Gutscheine, Freebies, Deals, Diskussionen, Club) sits below

footer

• {colors.surface} over a {colors.hairline} top rule; link columns (Firma, Community, Rechtliches) in {colors.body} with green links, social circle icons, app-store badges, and a country-selector

country-selector

• {colors.surface} {rounded.md} dropdown with flag + label, {colors.hairline} border

Signature Components

temperature-control — the brand's defining component

• A fully-round {rounded.full} pill: temperature-down cold-blue ({colors.cold}) down-arrow, the deal's temperature reading in hot-red ({colors.hot}), and a temperature-up hot-red up-arrow — the crowd's price vote made visible

temperature-up / temperature-down — the vote arrows

• Up in {colors.hot}, down in {colors.cold}, both in {typography.ui}

price-lockup — the deal's number

• {colors.primary} green current price in {typography.heading-lg}, a struck-through {colors.muted} original, and a discount-badge

discount-badge — the saving

• {colors.discount-surface} mint pill with {colors.green-strong} label in {typography.ui}, {rounded.sm}, 4px 8px

badge-neutral-subtle / badge-filled — status chips

• Subtle: white / black / {rounded.md}. Filled: {colors.canvas} fill, {colors.body} text, {rounded.sm} with a white hairline

premium-badge — highlighted-content marker

• {colors.premium} violet label on {colors.surface}, {rounded.sm}

warning-badge — expiring / caution state

• {colors.warning-surface} soft-yellow pill, {colors.warning-text} amber-brown label, {rounded.sm}

avatar — author / community

• Circle ({rounded.circle}) on {colors.canvas} with a white ring

Examples (illustrative)

Kit-mirror demonstration surfaces. These are not brand-native components — each ex-* entry references the brand primitives above so every example surface is shaped by this spec rather than template defaults.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

Do's and Don'ts

Do

• Reserve {colors.primary} green for actions and prices — it is the single thread tying the feed together.
• Keep the temperature-control pairing intact: {colors.cold} down, {colors.hot} up and temperature — it's the brand's signature.
• Pill every button, chip, search, and the temperature control to {rounded.full}; keep content cards at {rounded.md}.
• Put savings in the {colors.discount-surface} mint badge beside the green price.
• Hold typography to Averta CY 500 / 700; bold every price and temperature.
• Separate cards with {colors.hairline} borders and the {colors.canvas} gutter, not heavy shadows.

Don't

• Don't recolor prices or primary actions away from {colors.primary} green.
• Don't split the temperature pairing or recolor the vote arrows — cold is blue, hot is red, always.
• Don't introduce shadows on resting feed cards; the soft 4–12px shadow is for elements that lift.
• Don't use a third or fourth type weight — the system is 500 and 700 only.
• Don't let {colors.warm} orange or {colors.premium} violet drift into decorative use; they are functional status colors.
• Don't square off the pills — the fully-round {rounded.full} button is the brand's shape signature.