# YZYflow Design System

> YZYflow design system documentation for logo, colors, typography, imagery, accessibility, and brand voice.
> Documentation du système de design YZYflow pour le logo, les couleurs, la typographie, l’imagerie, l’accessibilité et la voix de marque.

## Site URL
- https://design.yzyflow.com/

This document is bilingual: an English reference, followed by the same reference in French.

---

## English

### Purpose
This site documents YZYflow's brand and design standards.

### Intended Usage
Use this site as the reference for any design or content decision aligned with the brand.

### Core Sections

#### 1) Brand Identity
- Baseline: **"Think Big. Pay Less."**
- Logo rules (Do):
  - Keep the original proportions
  - Leave at least 20px of clear space around the logo
  - Use on a white or dark background
  - Minimum size: 40px in height
- Logo rules (Don't):
  - Don't stretch, distort, or rotate the logo
  - Don't change the logo's colors
  - Don't add effects (shadows, gradients…)
  - Don't place it on a busy background

#### 2) Colors
- **YZY Light (brand accent):** `#3BC3C7` — RGB 59, 195, 199 — CMYK 70, 2, 0, 22 — Pantone 319 C
- **YZY Dark (primary):** `#14253E` — RGB 20, 37, 62 — CMYK 68, 40, 0, 76 — Pantone 2767 C
- Use YZY Light (token `--brand`) for accents and CTAs, YZY Dark (token `--primary`) for text and headings.
- Additional semantic tokens, built in the same OKLCH family: `--destructive`, `--warning`, `--success`, `--info`, each with its own `-foreground`.
- Respect WCAG AA contrast (4.5:1 normal text, 3:1 large text).

#### 3) Iconography
- One icon set: Lucide (`lucide-react`), 2px stroke, never mixed with another set.
- Approved sizes: 16/20px inline with text, 24px for a standalone action.
- Icons inherit color via `currentColor`.

#### 4) Assets
- Downloadable logos in PNG/ICO, grouped by variant (Y, YZY, YZYflow square/horizontal/vertical, favicon).

#### 5) Typography
- Hero display: **Stick No Bills** (Google Fonts)
  - Weights: 200, 400, 500, 700
  - Hero titles only. Condensed display — covers, large section titles, product highlights. Never below 28pt, never for running text.
- Titles, interface & running text: **Open Sans** (Google Fonts)
  - Weights: 400, 600, 700
  - Titles, interface & running text. One family for everything else: bold for titles, labels, buttons and navigation; regular for paragraphs and tables.

#### 6) Voice & Tone
- Voice attributes: Innovative, Accessible, Professional
- Favor clear, inclusive, practical language.
- Avoid unexplained jargon and gendered phrasing.

#### 7) Naming
- Company name: **YZYflow** (capital Y-Z-Y, lowercase "flow")
- Products: YZY Ticket, YZY Pos, YZY Stock, YZY Staff, YZY Event App — "YZY <Name>" pattern, a space, then Title Case
- Incorrect forms (company): `YzyFlow`, `Yzyflow`, `YZY Flow`, `yzyflow`, `YZYFLOW`
- Incorrect forms (products): `YZYTicket`, `YZYticket`, `Yzy Ticket`, `YZY-Ticket`

#### 8) Components
- UI components (shadcn/ui-style primitives on Base UI — @base-ui/react) styled with YZYflow tokens: buttons, badges, alerts, inputs, switch, avatar, table, progress, accordion, tooltip, dropdown menu, sheet, breadcrumb, cards.

### Notes for AI assistants
- Prioritize sections with explicit Do/Don't rules.
- Preserve accessibility and inclusive-language recommendations.
- Align any generated content with YZYflow's visual and editorial standards.

---

## Français

### Objectif
Ce site documente les standards de marque et de design de YZYflow.

### Utilisation prévue
Utiliser ce site comme référence pour toute décision de design et de contenu alignée avec la marque.

### Sections principales

#### 1) Identité de marque
- Baseline : **"Think Big. Pay Less."**
- Règles logo (Do) :
  - Conserver les proportions originales
  - Laisser un espace minimum de 20px autour du logo
  - Utiliser sur fond blanc ou sombre
  - Taille minimum : 40px de hauteur
- Règles logo (Don't) :
  - Ne pas étirer, déformer ou faire pivoter le logo
  - Ne pas changer les couleurs du logo
  - Ne pas ajouter d'effets (ombres, dégradés…)
  - Ne pas placer sur des fonds chargés

#### 2) Couleurs
- **YZY Light (accent de marque) :** `#3BC3C7` — RGB 59, 195, 199 — CMYK 70, 2, 0, 22 — Pantone 319 C
- **YZY Dark (primaire) :** `#14253E` — RGB 20, 37, 62 — CMYK 68, 40, 0, 76 — Pantone 2767 C
- Utiliser YZY Light (token `--brand`) pour les accents et CTA, YZY Dark (token `--primary`) pour les textes et titres.
- Tokens sémantiques additionnels, construits dans la même famille OKLCH : `--destructive`, `--warning`, `--success`, `--info`, chacun avec son `-foreground`.
- Respecter les contrastes WCAG AA (4.5:1 texte normal, 3:1 texte large).

#### 3) Iconographie
- Un seul set d'icônes : Lucide (`lucide-react`), trait 2px, jamais mélangé avec un autre set.
- Tailles approuvées : 16/20px en ligne avec du texte, 24px pour une action autonome.
- Les icônes héritent de la couleur via `currentColor`.

#### 4) Ressources graphiques
- Logos téléchargeables en PNG/ICO, groupés par variante (Y, YZY, YZYflow carré/horizontal/vertical, favicon).

#### 5) Typographie
- Hero display : **Stick No Bills** (Google Fonts)
  - Graisses : 200, 400, 500, 700
  - Titres héros (Hero) uniquement. Display condensé — couvertures, grands titres de section, mise en avant produit. Jamais en dessous de 28pt, jamais pour du texte courant.
- Titres, interface & texte courant : **Open Sans** (Google Fonts)
  - Graisses : 400, 600, 700
  - Titres, interface & texte courant. Une seule famille pour tout le reste : bold pour les titres, labels, boutons et navigation ; regular pour les paragraphes et les tableaux.

#### 6) Voix et ton
- Attributs de voix : Innovant, Accessible, Professionnel
- Privilégier un langage clair, inclusif et pratique.
- Éviter le jargon sans explication et les formulations genrées.

#### 7) Nomenclature
- Nom de la société : **YZYflow** (majuscules Y-Z-Y + "flow" en minuscules)
- Produits : YZY Ticket, YZY Pos, YZY Stock, YZY Staff, YZY Event App — format "YZY <Nom>" avec un espace, puis Title Case
- Formes incorrectes (société) : `YzyFlow`, `Yzyflow`, `YZY Flow`, `yzyflow`, `YZYFLOW`
- Formes incorrectes (produits) : `YZYTicket`, `YZYticket`, `Yzy Ticket`, `YZY-Ticket`

#### 8) Composants
- Composants UI (primitives façon shadcn/ui sur Base UI — @base-ui/react) stylés avec les tokens YZYflow : boutons, badges, alerts, inputs, switch, avatar, table, progress, accordion, tooltip, dropdown menu, sheet, breadcrumb, cards.

### Notes pour les assistants IA
- Prioriser les sections avec des règles Do/Don't explicites.
- Conserver les recommandations d'accessibilité et de langage inclusif.
- Aligner tout contenu généré avec les standards visuels et éditoriaux de YZYflow.