Decathlon Vitamin Design System

# Vitamin — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/decathlon-vitamin
sources:
  - https://www.decathlon.design/
  - https://www.decathlon.design/726f8c765/p/8086f8-colors
  - https://github.com/Decathlon/vitamin-web
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Decathlon. "Vitamin" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Vitamin
**Owner:** Decathlon
**Official documentation:** https://www.decathlon.design/
**Visual character:** Sport-retail vitality: digital blue with a conversion-yellow burst, Roboto Condensed urgency, and tokens shipped for four frameworks.

---

## Summary

Decathlon's open-source design system offering React, Vue, and Svelte components plus Tailwind-based CSS and tokens.

_Editorial confidence: high. Values are drawn from well-documented public token references. Field-level evidence: 0/77 claims source-linked, 0/77 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=decathlon-vitamin)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Blue | `#3643ba` | `--vtmn-color_brand-digital` | Primary actions (Decathlon digital blue) |
| Content Primary | `#101010` | `--vtmn-color_content-primary` | Primary text |
| Content Secondary | `#687787` | `--vtmn-color_content-secondary` | Secondary text |
| Background Primary | `#ffffff` | `--vtmn-color_background-primary` | Surfaces |
| Background Secondary | `#f7f8f9` | `--vtmn-color_background-secondary` | Subtle background |
| Border | `#d9dde1` | `--vtmn-color_border-primary` | Borders |
| Danger | `#d70321` | `--vtmn-color_danger` | Errors |
| Success | `#02be8a` | `--vtmn-color_success` | Success (sport green) |
| Warning | `#e86312` | `--vtmn-color_warning` | Warnings |
| Conversion Yellow | `#ffea28` | `--vtmn-color_brand-conversion` | Conversion CTAs (Decathlon yellow) |

## Typography

- **Body:** Roboto / Roboto Condensed — weights 400, 500, 700 — `Roboto, 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display-1 | `44px` | `48px` |
| title-1 | `32px` | `36px` |
| title-3 | `20px` | `24px` |
| body | `16px` | `24px` |
| caption | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| radius-100 | `4px` |
| radius-200 | `8px` |
| radius-400 | `16px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-100 | `0 1px 4px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease-out` |

## Quick start (CSS)

```css
/* Vitamin — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://www.decathlon.design/
   Field evidence: https://www.designsystems.one/api/style-spec?system=decathlon-vitamin */

:root {
  /* Color */
  --vtmn-color_brand-digital: #3643ba; /* Primary actions (Decathlon digital blue) */
  --vtmn-color_content-primary: #101010; /* Primary text */
  --vtmn-color_content-secondary: #687787; /* Secondary text */
  --vtmn-color_background-primary: #ffffff; /* Surfaces */
  --vtmn-color_background-secondary: #f7f8f9; /* Subtle background */
  --vtmn-color_border-primary: #d9dde1; /* Borders */
  --vtmn-color_danger: #d70321; /* Errors */
  --vtmn-color_success: #02be8a; /* Success (sport green) */
  --vtmn-color_warning: #e86312; /* Warnings */
  --vtmn-color_brand-conversion: #ffea28; /* Conversion CTAs (Decathlon yellow) */

  /* Typography */
  --font-body: Roboto, 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-display-1: 44px; /* line-height 48px */
  --text-title-1: 32px; /* line-height 36px */
  --text-title-3: 20px; /* line-height 24px */
  --text-body: 16px; /* line-height 24px */
  --text-caption: 12px; /* line-height 16px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-radius-100: 4px;
  --radius-radius-200: 8px;
  --radius-radius-400: 16px;

  /* Elevation */
  --shadow-shadow-100: 0 1px 4px rgba(0,0,0,0.15);

  /* Motion */
  --motion-default: 200ms ease-out;
}
```

## Engineering profile

- **Ships for:** React, Vue, Svelte, Tailwind
- **Token pipeline:** Style Dictionary
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Vitamin by Decathlon — Decathlon's open-source design system offering React, Vue, and Svelte components plus Tailwind-based CSS and tokens. Character: Sport-retail vitality: digital blue with a conversion-yellow burst, Roboto Condensed urgency, and tokens shipped for four frameworks. Use a primary colour near #3643ba, the typeface "Roboto / Roboto Condensed" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Vitamin documentation](https://www.decathlon.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/decathlon-vitamin) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._