Mydealz Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

16tokens

8type steps

3radius steps

2pxspacing base

Mydealz, in one page

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

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Mydealz design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #30a83c
- on-primary: #ffffff
- green-strong: #197e25
- discount-surface: #defde4
- hot: #ce1736
- cold: #034eb1
- warm: #fb6001
- premium: #7457dd
- canvas: #f3f5f7
- surface: #ffffff

Type:
- families: Averta CY, Mulish, Nunito Sans
- scale: 10, 12, 14, 16, 18, 20, 24, 48
- weights: 500, 700

Shape:
- radius: 2, 4, 8
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 9, 12, 16, 24, 40

Rules:
- 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.

Avoid:
- 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.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.

Type scaleRead the full spec

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

Token	Size	Weight	Line Height	Use
`{typography.display}`	48px	700	1.1	Page hero headline
`{typography.heading-lg}`	24px	700	1.2	Section titles, deal price
`{typography.heading}`	20px	700	1.25	Card / block headings
`{typography.lead}`	18px	500	1.4	Lead paragraphs, prominent links
`{typography.body}`	16px	500	1.5	Body copy, deal descriptions
`{typography.ui}`	14px	700	1.3	Button labels, temperature, badges
`{typography.caption}`	12px	500	1.3	Metadata, timestamps
`{typography.micro}`	10px	700	1.2	Micro-labels, counts
`{typography.mono}`	16px	500	1.4	Voucher codes

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.

Components and layoutRead the full spec

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-mydealz {--page-bg: #f3f5f7;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #22782a;
  --link-hover-color: #17501c;
  --border-color: #c7c9cb;
  --card-bg: #f3f5f7;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f3f5f7;
  --footer-text-color: #555656;
  --button-bg: #278430;
  --button-text-color: #ffffff;
  --button-hover-bg: #1b5d22;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #e4e6e8;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #d6d8d9;
  --button-secondary-border: 1px solid #c7c9cb;
  --prompt-bg: #e7e9eb;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

spiral 75.5%
vibrant 74.3%
posthog 72.6%
cafe 72.4%
webflow 71.3%

Where this came from

Source document: volt/design-md/mydealz/DESIGN.md · 25.0 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.