A purchase info badge is a badge with a beak that introduces a short purchase tip.
Tokens, sizes and requirements. Values come from the live token package and from Figma: Good buy, Good to know.
Resolved from the live token package.
| Variant | Part | Token | Value |
|---|
Figma uses the color primitive system/dark_red (#d90000) for Good buy. It has the same value as surface-danger-default, which is used here.
Padding of the label, at true size. Window follows the window width; Desktop (769px and up) and Mobile force the breakpoint.
| Part | Desktop (769px and up) | Mobile |
|---|---|---|
| Label padding | 4px 3px 4px 5px | 3px 4px |
| Label type | 14/14, 0.56px | 12/12, 0.48px |
| Beak | 10 × 22px, as high as the label | 8 × 18px |
| Gap badge to text | 8px (space-8) | 8px |
| Text | body-sm 14/20, 0.36px | 14/20, 0.28px |
| Part | Value |
|---|---|
| Gap badge to text | space-8 |
| Label padding | Figma values: 5px, 4px, 3px (no tokens) |
| Part | Value |
|---|---|
| Label | Breuer Condensed Bold (600), uppercase, label-sm; 14/14 desktop, 12/12 mobile |
| Text | Breuer Condensed Regular, body-sm 14/20, text-secondary |
| Links in the text | Underlined, same color as the text |
| Feature settings | 'ss02' 1, 'ss03' 1 (text also 'ss06' 1) |
The badge has no interaction states. Links in the text have the states of an inline link.
| Topic | Rule |
|---|---|
| Interaction | None on the badge. Links in the text are normal links. |
| Wrapping | The text wraps beside the badge; the badge keeps its size. |
| Beak | Always points right, to the text. |
| Topic | Requirement |
|---|---|
| Name | Label and text, read in order. The beak is decorative (empty). |
| Color | Not the only carrier of meaning: the label says “Bra köp” or “Bra att veta”. |
| Contrast | White on red or on surface-50 (#737373, 4.7:1). Text text-secondary on white. |
| Links | Underlined, keyboard reachable, visible focus. |