# Sinopharma — Design System

> Médecine traditionnelle chinoise · compléments à base de plantes
> E-commerce (PrestaShop 9) · refonte graphique totale

A botanical-apothecary system that meets the precision of a modern laboratory:
quiet **sage khaki**, warm **cream**, leaf-green and plum accents drawn from the
logo. Fine lines, generous space, clean sans-serif titles, and the occasional
soft gradient "wave" to modernise without losing the calm.

---

## 1 · Brand context

**Sinopharma** sells plant-based formulas following the recommendations of
traditional Chinese medicine (TCM). The brief: a total visual refonte of the
storefront conveying **expertise, clarity, a laboratory feel — refined, clean,
with fine lines and air**. A light "lifting" of the existing logo is permitted
without denaturing it.

- **Products:** herbal supplements (gélules, comprimés, poudres, tisanes)
  organised by *besoin* — Sommeil, Immunité, Digestion, Énergie, Sérénité,
  Articulations — each with a Latin / pinyin formula name (e.g. *Suan Zao Ren Tang*).
- **Audience:** French-speaking wellness buyers seeking trustworthy, traceable
  herbal medicine; reassured by transparency, sourcing and expert advice.
- **Platform:** PrestaShop 9.

### Sources provided
- `uploads/sino-pharma-logo.jpg` — original "Sinopharma" wordmark (plum script
  *Sino* + green *pharma*, leaf accent on the *i*). Copied & processed into
  `assets/` (transparent PNG + cream knockout). No codebase or Figma was supplied —
  this system is the **new** direction, designed from the written brief.

> ⚠️ If a PrestaShop theme or Figma exists, share it and we'll align the UI kit to
> the real templates.

---

## 2 · Content fundamentals

**Language:** French, throughout. **Tone:** calm, expert, reassuring — never
hype. Speaks like a knowledgeable herboriste, not a marketer.

- **Voice:** confident and sober. Short, declarative lines. Nature + rigour held
  together: *"Sélectionnées, dosées, tracées."*
- **Person:** addresses the customer as **vous** (polite). The house refers to
  itself sparingly ("Maison Sinopharma", "notre herboriste").
- **Casing:** sentence case everywhere in running copy. Headlines in sentence
  case. **Eyebrows / labels** are UPPERCASE with wide tracking (0.18em).
- **Numbers & specs:** lab-style, in monospace — dosages, lots, titrage,
  conservation temps (`2 × 500 mg`, `L24·06·B`, `≥ 1.5 %`, `15–25 °C`).
- **Product naming:** French common name + *Latin/pinyin* in italic serif
  underneath (e.g. **Tranquillité du Cœur** · *Suan Zao Ren Tang*).
- **Emoji:** none. **Iconography** carries all visual shorthand (see §5).
- **Vocabulary to favour:** plantes tracées, formule, pharmacopée, titrage,
  équilibre, terrain, vitalité, Wei Qi, cure, conseil.
- **Compliance reflex:** herbal supplements — never medical claims; the footer
  carries *"ne se substitue pas à un avis médical."*

**Example microcopy**
- Hero: *"L'équilibre, cultivé avec précision."*
- Sub: *"Des formules à base de plantes, fidèles à la tradition chinoise et
  validées par la rigueur d'un laboratoire."*
- CTA: *"Découvrir la boutique" · "Faire mon bilan" · "Ajouter au panier"*
- Reassurance: *"Plantes tracées · conseil d'herboriste · livraison offerte dès 49 €"*

---

## 3 · Visual foundations

### Colour
- **Cream** (`--cream-50/100/200`) is the default canvas — warm, paper-like
  off-white, never pure `#fff`. White is reserved for cards/surfaces that need to
  lift off the cream.
- **Sage / khaki** (`--sage-300 #bec7b5` is the brand reference) is the signature —
  used for soft fills, section bands, placeholders, hairlines-with-presence.
- **Leaf green** (`--green-500 #789048`, from the logo) is the action colour:
  primary buttons, links, in-stock, add-to-cart.
- **Plum / aubergine** (`--plum-500 #604860`, from the logo) is a quiet secondary
  accent — limited-edition badges, "bilan personnalisé", a dusk gradient.
- **Ink** (`--ink-900 #232a20`) is a deep botanical near-black for dark sections;
  text on dark uses cream, never pure white.
- **Warm grays** carry body text on light (`--text-body #4a4d46`). Greys are
  warm/olive-tinted, not neutral steel.

### Type
- **Display / headings:** *Schibsted Grotesk* — precise, clean grotesque (the
  "laboratory clarity"). Weights 400–800, tracking −0.02em, `text-wrap: balance`.
- **Body / UI:** *Hanken Grotesk* — warm humanist sans, 15px base, line-height 1.55.
- **Editorial accent:** *Newsreader* (serif, italic) — pull-quotes and the Latin
  formula names only. Used lightly, for heritage warmth.
- **Mono:** *IBM Plex Mono* — lab readouts (dosage, lot, titrage, SKU).
- ⚠️ **Fonts are served from Google Fonts** (`tokens/fonts.css`). For production,
  self-host `.woff2` and swap the `@import` for `@font-face`. **Flag:** if you have
  licensed brand fonts, share them and we'll replace these.

### Space & layout
- 4px spacing base; **generous** section rhythm (`--section-y` clamps 64→128px).
- Container 1240px, text measure ~720px. Wide gutters (`clamp(20px,4vw,64px)`).
- Composition leans on **air and fine lines** rather than boxes and dividers.

### Surfaces, borders, elevation
- **Cards:** white (or `--sage-50`/`--cream-50`), 1px hairline border
  (`--border-hairline #e1ddcf`), radius `--radius-lg (18px)`, very soft warm
  shadow (`--shadow-sm`). Interactive cards lift −2/−3px on hover.
- **Hairlines** are the primary separator — `--border-hairline` on cream,
  `--border-on-dark` (cream @16%) on ink.
- **Radii:** restrained — 8/12/18px for most UI; pills for chips, badges, search
  and toggles. Nothing sharp, nothing bubbly.
- **Shadows** are low, warm-tinted (green-black), never grey or harsh.

### Gradients & "waves"
Soft, used sparingly to modernise and soften — never busy:
- `--wave-sage` (hero washes, placeholders), `--wave-cream` (section breaks),
  `--wave-green` (accent), `--wave-dusk` (sage→plum, dark cards),
  `--wave-dark` (footer / dark sections), `--glow-sage` (radial top glow).

### Motion & states
- **Calm, precise — no bounce.** `--ease-out` cubic-bezier, durations 140/220/420ms.
- **Hover:** buttons darken one step; cards lift + deepen shadow; the product
  card's add button fills from sage → green.
- **Press:** subtle `translateY(0.5px) scale(0.99)` — a small physical "click".
- **Focus:** 3px sage-green focus ring (`--shadow-focus`).
- Imagery vibe (when real photography lands): warm, natural daylight, botanical,
  shallow depth — matte not glossy. Placeholders use sage gradients + a leaf glyph.
- `prefers-reduced-motion` respected; entrance animation is minimal.

---

## 4 · Iconography

- **System:** [Lucide](https://lucide.dev) — fine, consistent line icons, rendered
  at **stroke-width 1.6** to match the brand's thin-line aesthetic. Loaded from
  CDN in the UI kit (`lucide@0.460.0`). **Flag / substitution:** no icon set was
  provided, so Lucide is the closest-match stroke library; swap if you have a
  house set.
- **Usage:** functional UI only (search, cart, account, filters, trust badges,
  category glyphs: `moon`, `shield`, `leaf`, `flame`, `flower-2`, `bone`).
  Green-600 or gray-500 on light; sage-300 on dark.
- **Leaf motif:** the logo's leaf is echoed as a quiet decorative node in
  `.sp-rule` dividers and as a botanical placeholder glyph. This is the only
  bespoke mark; everything else is Lucide.
- **No emoji. No unicode-glyph icons.** Numbers/units set in mono, not iconified.

---

## 5 · What's in here (index)

**Root**
- `styles.css` — the single entry point consumers link (`@import` list only).
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `layout.css`, `base.css`.
- `assets/` — `sinopharma-logo.jpg` (original), `sinopharma-logo.png`
  (transparent), `sinopharma-logo-cream.png` (knockout for dark).
- `SKILL.md` — Agent-Skill front-matter for Claude Code portability.

**Foundations** — `guidelines/*.html` (Design System tab cards)
- Colors: neutrals, sage, green, plum, gray/text, semantic, gradients.
- Type: display, body, serif, mono, scale, eyebrow.
- Spacing: scale, radius, elevation.
- Brand: logo, logo-on-dark, botanical motifs.

**Components** — `window.SinopharmaDesignSystem_d11735.*`
- `core/` — **Button**, **IconButton**, **Badge**, **Card**
- `forms/` — **Input**, **Select**, **Checkbox**, **Switch**
- `commerce/` — **ProductCard**, **Rating**
- `trust/` — **TrustBlock** (réassurance renforcée, secteur santé)
- `reviews/` — **ReviewSummary**, **ReviewCard** (preuve sociale encadrée)
- Each: `<Name>.jsx` + `.d.ts` (+ `.prompt.md`); one demo card per group.

**UI kit** — `ui_kits/website/`
- Full interactive storefront: home → boutique (filterable grid) → fiche produit →
  slide-in cart drawer. Factored into `Header`, `Footer`, `HomeScreen`,
  `ShopScreen`, `ProductScreen`, `app.jsx`, with `data.js` + `Icon.jsx`.

---

## 6 · Using the system

Link the styles, load the bundle, read components off the namespace:

```html
<link rel="stylesheet" href="styles.css">
<script src="_ds_bundle.js"></script>
<script type="text/babel">
  const { Button, ProductCard } = window.SinopharmaDesignSystem_d11735;
</script>
```

Reference colour/space/type via the CSS custom properties (`var(--green-500)`,
`var(--space-5)`, `var(--font-display)`) — don't hard-code hex.