# 🎨 Design system Material 3 + Apple HIG

**Format** : Figma (FIG) · 200+ components · variants & auto-layout
**Auteur** : Équipe pédagogique ITAG · Design Pack
**Mise à jour** : 2026

---

## 🎯 Description

Design system complet inspiré de Material Design 3 et Apple Human Interface Guidelines. Tokens de couleur, typographie, spacing, components avec variants, prêt à dériver pour une marque.

## 📋 Contenu

### Foundation
- **Colors** — primary, secondary, tertiary, neutral, error, success, warning (dark + light)
- **Typography** — display L/M/S, headline L/M/S, title L/M/S, body L/M/S, label L/M/S
- **Elevation** — 5 niveaux d'ombres avec mode sombre
- **Spacing** — système 4-8-12-16-24-32-48 px
- **Radius** — none / xs / sm / md / lg / full
- **Motion** — easing curves + durations (Material Motion)

### Components atomiques
- Button (primary, secondary, tertiary, ghost, destructive) × (sm, md, lg) × (default, hover, focus, disabled)
- Input, textarea, select, checkbox, radio, switch
- Tag, badge, chip, avatar
- Tooltip, popover

### Components composés
- Card (3 layouts), banner, alert, snackbar
- Modal, drawer, sheet
- Tabs (3 styles), accordion, breadcrumbs
- Table avec tri / pagination / selection
- Pagination, stepper

### Patterns
- Empty state, error state, loading state
- Form layouts (1 col, 2 col, wizard)
- Onboarding flows (tooltips guidés)

## 💼 Cas d'usage

- Démarrer un design system d'entreprise
- Standardiser une équipe produit (5-50 designers)
- Référence pour études UX
- Portfolio designer senior

## 📥 Disponibilité

> **Fichier en préparation** — Ce template nécessite un fichier binaire (system) qui est en cours de production par notre équipe pédagogique. La fiche ci-dessus décrit le contenu exact que vous recevrez.

[← Catalogue Figma](/templates.php?cat=figma)
[Parcours Design →](/parcours/tech-design.php)

---

*ITAG · Material Design et Apple HIG sont des marques déposées de Google et Apple.*