Pricebox

The use of the consistent LIDL pricebox is an elementary part of our brand awareness.

The pricebox contains several obligatory and optional elements and is available in different color combinations due to different visualizations (basic, offer, etc.).

Recommendations#

  • If there is already a currency symbol in the pricebox no additional currency sign should be displayed in the recommended retail price or label.

Elements#

TypesAttributesPreview
Basic1. Prefix
2. Price
3. Asterisk
4. Currency		basic pricebox
Offer5. Offer
6. Basic pricebox		offer pricebox
Discount7. Discount text
8. Recommended Retail Price (rrp)		discount pricebox

Overall styling#

  • The text-style is pricebox-price for the price.
  • The text-style is pricebox-addon for asterisk, currency & prefix.
  • The line-height is set to default.
  • Additionally you can choose between a pricebox with or without prefix.
TypesAttributesPreview
Basictext-color: basic-black
background-color: basic-white
outline-color: gray-light		basic pricebox no-prefix pricebox with-prefix pricebox
Actiontext-color: basic-white
background-color: danger-base		basic pricebox no-prefix pricebox with-prefix pricebox

Label#

  • The text-style always is pricebox-label.
  • The line-height is set to default.
  • Always use the base-color as background-color.
  • Combine the standard pricebox with a label to display promotions or discounts.
  • Use the label as an add-on for the offer pricebox.
  • You can advertise discounts, promotions or offers.
  • Like the pricebox, you can choose between different label colors.
TypesAttributesPreview
Actiontext-color: basic-white
background-color: danger-base		action label
Offertext-color: basic-black
background-color: mark-base		offer label

Basic quantity#

  • The text-style is always basic-quantity.
  • The line-height is set to default.
  • It's used as additional info for the packaging unit, quantity or drained weight.
TypesAttributesPreview
Basic quantitytext-color: basic-blackbasic quantity

Discount#

  • The text-style always is pricebox-addon for the discount text and the recommended retail price (rrp).
  • The line-height is set to default.
  • If you want to use a discount, it can be placed in the pricebox standard (positive) as well as in the pricebox offer (negative) - with or without prefix.
  • The strike comes either in basic-black or basic-white.
  • There is a positive and negative version matching the underlying standard pricebox.
TypesAttributesPreview
Positivetext-color: basic-black
strike-color: basic-black		discount positive
Negativetext-color: basic-white
strike-color: basic-white		disocunt negative

Spacing & measurements#

  • The height of the pricebox depends on the content and the additional components shown.
  • The width of the pricebox depends on the content.
  • The width of the label depends on the content of the pricebox.
  • The height of the label is fixed for a single-line text.

Pricebox#

TypesAttributesPreview
Vertical spacingSM: 6px/5px
XS: 4px / 3px		pricebox horizontal spacing SM pricebox horizontal spacing XS
Horizontal spacingSM: 8px / 4px
XS: 4px / 4px		pricebox vertical spacing SM pricebox vertical spacing XS

Label#

TypesAttributesPreview
Vertical spacingSM: 4px
XS: 4px		label vertical spacing SM label vertical spacing XS
Horizontal spacingSM: 8px
XS: 4px		label horizontal spacing SM label horizontal spacing XS
HeightSM: 24px
XS: 22px		label height SM label height XS

Discount#

TypesAttributesPreview
DiscountSM: 6px / 2px
XS: 3px / 1px		discount SM discount XS

Position#

Basic quantity#

  • This information always is placed to the right below the pricebox.
TypesAttributesPreview
Basic quantitytext and pricebox align right
margin-top: 2px		special offer

Combinations#

  • There are only three different combinations of priceboxes and labels in the LIDL universe.
TypesAttributesPreview
Offer #1label: action
pricebox: basic		offer #1
Offer #2label: offer
pricebox: basic		offer #2
Special offerlabel: offer
pricebox: action		special offer

Our workflow in Sketch#

  • Use the "Overrides"-function to change the text.
  • Enter the text first. Then adjust the width of the symbol.
  • The color variants of the label can be selected in the complete pricebox via the "Overrides"-function.

Change log#

1.1.0 Mail - 2021-07-22#

Changed#

  • Doc: "Pricebox" | Cleaned up the documentation for the right structure and sentence case

1.0.0 Mail - 2021-06-24#

Highlights#

  • Sketch, Doc: "Pricebox" | Harmonized pricebox to be closer to the print pricebox with new text color, text size and spacings

1.0.0-beta.2 - 2020-01-16#

Changed#

  • "Pricebox" | Changed symbols to new smart layout of Sketch