---
version: "2.1.0"
name: "Geekworkers Design System & Référentiel Intégral de Marque"
description: "Spécification officielle consolidée : directive universelle IA, design tokens, identité visuelle, normes rédactionnelles, typographie suisse romande et protocole anti-watermark de Geekworkers Sàrl (Lausanne, Suisse)."
canonical_url: "https://geekworkers.ch/brand/DESIGN.md"
brand_portal: "https://geekworkers.ch/brand/"
entity:
  name: "Geekworkers Sàrl"
  domain: "geekworkers.ch"
  legalForm: "Société à responsabilité limitée (Sàrl)"
  headquarters: "Chemin des Geais 17C, 1066 Épalinges, Vaud, Suisse"
  operationalOffices: "Avenue de Montchoisi 5, 1006 Lausanne, Suisse"
  phone: "+41 21 561 36 26"
  email: "contact@geekworkers.ch"
  jurisdiction: "Lausanne, Suisse"
  governingLaw: "Code des Obligations (CO)"
  hosting: "Infomaniak Network SA (Genève, Suisse, ISO 27001)"
  founded: 2021
  stats:
    team: "+25 experts internalisés"
    clients: "+300 clients accompagnés"
    projects: "+500 projets déployés"
    revenueGenerated: "+12 Mio. CHF"
colors:
  primary: "#19389F"
  on-primary: "#FFFFFF"
  secondary: "#122B7A"
  on-secondary: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1A202C"
  neutral: "#F6F8FF"
  on-neutral: "#2D3748"
  border: "#D8E2FF"
  dark-surface: "#000000"
  on-dark-surface: "#FFFFFF"
  accent: "#D90562"
  on-accent: "#FFFFFF"
typography:
  headings:
    fontFamily: "Nunito, sans-serif"
    fontWeight: "800"
    lineHeight: "1.1"
    color: "#19389F"
  body:
    fontFamily: "Nunito, sans-serif"
    fontWeight: "600"
    lineHeight: "1.1"
    color: "#2D3748"
  code:
    fontFamily: "JetBrains Mono, monospace"
    fontWeight: "600"
    lineHeight: "1.2"
rounded:
  sm: "6px"
  md: "12px"
  lg: "16px"
  full: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
financial_rules:
  currency: "CHF"
  thousandsSeparator: "'"
  decimalSeparator: "."
  hourlyRate: "150.00 CHF HT"
  dailyRate: "1'200.00 CHF HT"
  discoveryThreshold: "20'000.00 CHF HT"
  mediaCommission: "0.00%"
links:
  brand_portal: "https://geekworkers.ch/brand/"
  canonical_spec_md: "https://geekworkers.ch/brand/DESIGN.md"
  pdf_guide: "https://geekworkers.ch/brand/GEEKWORKERS_CHARTE_GRAPHIQUE.pdf"
  svg_pack_zip: "https://geekworkers.ch/brand/geekworkers-brand-assets.zip"
  rules_json: "https://geekworkers.ch/brand/geekworkers_editorial_rules.json"
  llms_txt: "https://geekworkers.ch/llms.txt"
  llms_full_txt: "https://geekworkers.ch/llms-full.txt"
---

# Spécification Officielle du Système de Design & Référentiel Intégral Geekworkers

Source de vérité absolue consolidant le système de design, les tokens techniques, les directives graphiques, les normes rédactionnelles suisses, le protocole anti-watermark et les consignes universelles pour assistants IA de Geekworkers Sàrl.

---

## 1. Directive Universelle pour Assistants IA & Protocole de Mise à Jour

### A. Instruction Prête à l'Emploi pour Tout Modèle IA
Copier l'instruction ci-dessous dans la configuration système de votre assistant IA (directives personnalisées, prompt système, fichier `.cursorrules` ou règles de projet) :

```markdown
Tu agis en tant que partenaire stratégique d'ingénierie et d'excellence opérationnelle pour Geekworkers Sàrl. Tu respectes strictement les directives suivantes pour toute production écrite, code, interface ou analyse :

1. Posture et Rigueur : Neutralité bienveillante, précision d'ingénierie logicielle, exactitude factuelle absolue, zéro hallucination (aucune métrique, certification ou tarif inventé). Ton neutre et scientifique. Proscrire tout superlatif subjectif (révolutionnaire, sans couture, game-changer), nom fantaisiste ou formulation vague.
2. Typographie Financière Suisse : Utiliser exclusivement la typographie suisse romande pour les montants financiers et données chiffrées : apostrophe droite pour les milliers et point pour les décimales (ex. 1'200.00 CHF HT, 20'000.00 CHF HT, 150.00 CHF HT, commission média 0.00%). Exclure formellement devises et séparateurs étrangers.
3. Règles de Titres et Ponctuation :
- Aucun deux-points (:) et aucune précision entre parenthèses dans les titres (H1 à H4).
- Aucun point (.) à l'intérieur ou à la fin d'un titre.
- Les titres en gras de paragraphe ne peuvent JAMAIS être suivis d'un tiret court (-) : privilégier systématiquement les deux-points sur la même ligne (**Titre :** Contenu).
- Séparateurs en ligne : le tiret court (-) est réservé aux mots composés français (sur-mesure, peut-être) ; privilégier la barre verticale (|) pour séparer des concepts distincts.
- Aucune virgule avant ou après « et ».
- Proscrire les adjectifs auto-induits (ex. écrire « stratégies d'acquisition » sans ajouter « rentables »).
4. Charte Visuelle Officielle : Master Blue #19389F pour les titres et boutons CTA d'action sur fond clair (hover #122B7A). Pure White #FFFFFF pour les cartes et boutons secondaires. Surface Light Canvas #F6F8FF en fond de page. Pure Black #000000 en mode sombre. Accent Magenta #D90562 strictement restreint aux alertes critiques ponctuelles : JAMAIS en fond de forme et JAMAIS pour un bouton. Typographie unique Nunito, interlignage strict 1.1.
5. Protocole Anti-Watermark : Zéro tiret cadratin ou demi-cadratin (remplacer par deux-points, virgule ou tiret court selon le contexte). Zéro émoji. Éradication de tout caractère invisible ou stéganographique Unicode. Privilégier systématiquement les formats structurés (tableaux, diagrammes Mermaid).
6. 4 Pôles Métier Fondamentaux :
- **Création de Sites Web et E-Commerce :** Conception de sites WordPress (Elementor / Gutenberg) et de boutiques WooCommerce optimisés pour la conversion.
- **Marketing Digital SEO, SEA et GEO :** Stratégies d'acquisition (Google Ads, Meta Ads, référencement SEO local et technique, moteurs de réponse IA) | Commission média fixée à 0.00%.
- **Développement Logiciel Web et Mobile Sur Mesure :** Ingénierie applicative (React, Next.js, Laravel, Flutter, architectures d'API, régie dédiée).
- **Audit, Accompagnement et Automatisation IA pour PME :** Audit digital, optimisation des processus opérationnels, intégration d'IA et connexion aux CRM/ERP (Dolibarr, ERPNext, Odoo).
7. Référentiel d'Autorité Unique : Toute spécification technique, tarifaire ou graphique détaillée est régie exclusivement par https://geekworkers.ch/brand/DESIGN.md.
```

### B. Protocole de Mise à Jour pour Collaborateurs
1. **Consultation de la Source Unique :** Se référer à l'URL canonique [https://geekworkers.ch/brand/DESIGN.md](https://geekworkers.ch/brand/DESIGN.md) pour prendre connaissance des évolutions de règles ou de tarifs.
2. **Actualisation des Consignes IA :** Copier le bloc ci-dessus et l'insérer directement dans les paramètres système de l'outil d'IA utilisé (Antigravity, Claude, Gemini, ChatGPT, Cursor).
3. **Exploitation Automatisée :** Les assistants IA dotés d'un accès Web ingèrent directement l'URL [https://geekworkers.ch/brand/DESIGN.md](https://geekworkers.ch/brand/DESIGN.md) comme source de vérité déterministe.

---

## 2. Identité Institutionnelle et Pôles d'Expertise Métier

Geekworkers Sàrl est une agence suisse d'ingénierie logicielle, de création web et de marketing digital de performance basée à Lausanne et Épalinges (Vaud, Suisse). Elle accompagne durablement les PME et entrepreneurs de Suisse romande grâce à plus de 25 experts internalisés alliant créativité et rigueur technique.

### Les 4 Pôles Métier Fondamentaux
- **Création de Sites Web et E-Commerce :** Conception de sites vitrines WordPress (Elementor / Gutenberg) et de boutiques en ligne WooCommerce optimisées pour la conversion, Core Web Vitals A+ et conformité nLPD / RGPD.
- **Marketing Digital SEO, SEA et GEO :** Stratégies d'acquisition rentables (Google Ads Search / Performance Max, Meta Ads, LinkedIn Ads, référencement naturel local et technique, optimisation pour moteurs de réponse IA / GEO) | Commission média fixée à 0.00%.
- **Développement Logiciel Web et Mobile Sur Mesure :** Ingénierie logicielle de pointe (React, Next.js, Laravel, Flutter iOS/Android, architectures d'API headless, régie dédiée et outsourcing d'ingénieurs seniors).
- **Audit, Accompagnement et Automatisation IA pour PME :** Audit digital 360°, rationalisation des flux opérationnels, intégration d'agents IA, RAG et interconnexion aux ERP/CRM (Dolibarr, ERPNext, Odoo).

---

## 3. Système de Design et Tokens Visuels

### A. Palette Chromatique Structurée
La palette visuelle équilibre ancrage institutionnel, lisibilité maximale (contraste conforme WCAG 2.2 AAA) et hiérarchie d'action stricte :

| Jeton Chromatique | HEX | RGB | Rôle Stratégique et Règle d'Usage |
| :--- | :---: | :---: | :--- |
| **Master Blue** | `#19389F` | `rgb(25, 56, 159)` | **Ancrage absolu :** Couleur invariable de tous les titres (H1, H2, H3), boutons d'action (CTA) sur fond clair et logos principaux. Contraste 8.68:1 sur blanc. |
| **Hover Deep Blue** | `#122B7A` | `rgb(18, 43, 122)` | **État d'interaction unique :** Survol (hover) exclusif de tous les boutons et liens Master Blue. |
| **Surface Pure White** | `#FFFFFF` | `rgb(255, 255, 255)` | **Fond prédominant :** Arrière-plan de toutes les cartes de contenu, modules de lecture et boutons secondaires sur fond clair. |
| **Surface Light Canvas** | `#F6F8FF` | `rgb(246, 248, 255)` | **Fond de page neutre :** Toile de fond structurelle réduisant la fatigue oculaire et découpant nettement les cartes blanches sans bordures lourdes. |
| **Pure Black** | `#000000` | `rgb(0, 0, 0)` | **Contraste dense :** Réservé aux sections sombres, bannières inversées, pieds de page techniques et Dark Mode. |
| **Subtle Border** | `#D8E2FF` | `rgb(216, 226, 255)` | Délimitation discrète (`1px solid #D8E2FF`) pour structurer les conteneurs et cartes blanches. |
| **Accent Magenta** | `#D90562` | `rgb(217, 5, 98)` | **RÈGLE STRICTE ET INVIOLABLE :** Usage exceptionnel strictement réservé aux micro-signaux de contraste indispensable (pastille d'état critique, alerte ponctuelle). **JAMAIS en fond de forme**, **JAMAIS en fond de carte** et **JAMAIS pour des boutons**. |

### B. Hiérarchie des Boutons et Règle d'Interaction
1. **Harmonie Texte et Icône :** L'icône vectorielle SVG intégrée dans un bouton possède exactement la même couleur que son libellé textuel (texte blanc = icône blanche ; texte bleu = icône bleue).
2. **Boutons Sans Bordure (`border: 0`) :** Tous les boutons d'action sont dépourvus de contour graphique et s'appuient sur une ombre portée légère (`0 2px 8px rgba(25, 56, 159, 0.20)`).
3. **Inversion Dark Mode :**
   - *Sur Fond Clair :* Bouton primaire en Master Blue (`#19389F`, texte blanc), bouton secondaire en blanc (`#FFFFFF`, texte Master Blue).
   - *Sur Fond Sombre :* Bouton primaire en blanc pur (`#FFFFFF`, texte Master Blue), bouton secondaire en Master Blue (`#19389F`, texte blanc).

### C. Typographie et Échelle Visuelle
- **Police Unique :** `Nunito, sans-serif` sur l'intégralité des interfaces web, documents et présentations.
- **Titres (H1, H2, H3) :** Graisse 800 (Extra-Bold) ou 900 (Black), couleur systématique Master Blue (`#19389F`), interligne verrouillé à 1.1.
- **Corps de Texte :** Graisse 600 (Semi-Bold) par défaut, assurant une assise visuelle solide et une grande lisibilité, interligne verrouillé à 1.1.
- **Données Techniques & Code :** `JetBrains Mono, monospace` (graisse 400 ou 600, interligne 1.2).

### D. Grille Modulaire, Espacements et Densité Ergonomique
L'agencement des interfaces suit une grille rigoureuse basée sur les multiples de 4px et 8px :
- **Paliers d'Espacement :** `4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `64px`.
- **Densité Informative Suisse :** Aspect compact et dense, éliminant les espaces vides superflus tout en maintenant une ergonomie géométrique.
- **Accessibilité Tactile :** Zone tactile interactive minimale de `44x44px` pour les boutons, liens et champs de saisie.

### E. Catalogue des 12 Assets Vectoriels Officiels au Format SVG
1. `gw-logo-original-blue-default.svg` : Logotype principal bleu `#19389F` (sans mention).
2. `gw-logo-original-blue-without-swiss.svg` : Logotype bleu avec mention Agence Web (sans Suisse).
3. `gw-logo-original-blue-with-swiss.svg` : Logotype bleu avec mention Agence Web & Suisse (pastille rouge).
4. `gw-icon-round-blue.svg` : Favicon et avatar circulaire bleu sur fond clair.
5. `gw-icon-square-blue.svg` : Icône carrée bleue standard.
6. `gw-icon-square-blue-with-swiss.svg` : Icône carrée bleue avec drapeau suisse.
7. `gw-logo-white-default.svg` : Logotype blanc pur sur fond sombre (sans mention).
8. `gw-logo-white-without-swiss.svg` : Logotype blanc avec mention Agence Web (sans Suisse).
9. `gw-logo-white-with-swiss.svg` : Logotype blanc avec mention Agence Web & Suisse.
10. `gw-icon-round-white.svg` : Icône ronde blanche (monogramme bleu sur cercle blanc).
11. `gw-icon-square-white.svg` : Icône carrée blanche pour contrastes sombres.
12. `gw-icon-square-white-with-swiss.svg` : Icône carrée blanche avec drapeau suisse.

---

## 4. Normes Rédactionnelles, Typographie Suisse et Protocole Anti-Watermark

### A. Posture Professionnelle et Exactitude Factuelle
- **Densité Informative :** Privilégier systématiquement la précision technique et les indicateurs mesurables par rapport à l'ornementation stylistique.
- **Zéro Hallucination :** Règle cardinale inviolable. Aucune statistique, métrique, certification ou tarif ne doit être inventé ou extrapolé sans source vérifiée.
- **Éradication des Superlatifs et Clichés :** Proscription formelle des termes marketing creux (*révolutionnaire*, *sans couture*, *game-changer*, *holistique*, *synergie*, *disruptif*, *incontournable*).
- **Proscription des Adjectifs Auto-Induits :** Si un concept ou livrable se qualifie par lui-même, supprimer tout qualificatif superflu (ex. écrire *« stratégies d'acquisition »* et non *« stratégies d'acquisition rentables »*).

### B. Typographie Financière et Numérique Suisse Romande
- **Séparateur des Milliers :** Apostrophe droite (`'`).
- **Séparateur Décimal :** Point (`.`).
- **Monnaie :** Code `CHF` systématique en majuscules (ex. `1'200.00 CHF HT`, `20'000.00 CHF HT`, `150.00 CHF HT`, commission média `0.00%`).
- **Notations Proscrites :** Exclure formellement `1 200 €`, `1,200 CHF` ou `20 000 CHF`.

### C. Règles des Titres, Ponctuation et Conjonctions
- **Proscription des Deux-Points dans les Titres Autonomes :** Aucun deux-points (`:`) dans les balises H1, H2, H3 ou H4.
- **Deux-Points Autorisés Après Titre en Gras sur la Même Ligne :** Pour structurer un paragraphe descriptif, privilégier la formulation en ligne : `**Titre :** Description du livrable`.
- **Interdiction Formelle du Tiret Court Après un Titre en Gras :** Ne jamais écrire `**Titre** - Description`.
- **Proscription des Points dans les Titres :** Aucun point final ou intérieur dans un titre autonome ou en gras.
- **Proscription des Précisions Entre Parenthèses dans les Titres :** Le libellé doit être autosuffisant.
- **Exclusion des Virgules Autour de « et » :** Aucune virgule avant ou après la conjonction « et ».
- **Séparateur en Ligne :** Réserver le tiret court (`-`) aux mots composés de la langue française ; privilégier la barre verticale (`|`) pour séparer deux concepts distincts.

### D. Protocole Anti-Watermark et Anti-Stéganographie IA
- **Éradication des Tirets Cadratins (tiret cadratin) et demi-cadratin :** Remplacés par des virgules, des parenthèses ou des deux-points selon le contexte grammatical.
- **Zéro Émoji :** Proscription totale des symboles décoratifs et émojis dans tous les livrables professionnels.
- **Nettoyage Unicode :** Élimination des césures conditionnelles (`­`), espaces insécables parasites et caractères de largeur nulle (`​`).
- **Primauté des Formats Structurés :** Privilégier les tableaux comparatifs, matrices et schémas Mermaid par rapport à la prose continue.

### E. Normes de Pagination A4 pour Livrables PDF
- **Rupture de Page :** Les chapitres principaux débutent obligatoirement sur une nouvelle page (`break-before: page`).
- **Intégrité des Blocs :** Interdiction formelle de scinder les tableaux, schémas et blocs structurés entre deux pages (`break-inside: avoid`).
- **Corps de Texte A4 :** Taille fixée à 11pt, interligne strict 1.1.

---

## 5. Configurations Techniques Prêtes à l'Emploi

### A. Configuration Tailwind CSS v3 (`tailwind.config.js`)
```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        gw: {
          blue: '#19389F',
          hoverDeep: '#122B7A',
          white: '#FFFFFF',
          surface: '#F6F8FF',
          black: '#000000',
          magenta: '#D90562',
          border: '#D8E2FF'
        }
      },
      fontFamily: {
        sans: ['Nunito', 'sans-serif'],
        heading: ['Nunito', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace']
      },
      lineHeight: {
        brand: '1.1'
      }
    }
  }
}
```

### B. Thème Tailwind CSS v4 (`@theme`)
```css
@theme {
  --color-gw-blue: #19389F;
  --color-gw-hover: #122B7A;
  --color-gw-surface: #F6F8FF;
  --color-gw-magenta: #D90562;
  --color-gw-border: #D8E2FF;
  --font-sans: 'Nunito', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --leading-brand: 1.1;
}
```

### C. Balise Sémantique Schema.org Organization (JSON-LD)
```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Geekworkers Sàrl",
  "url": "https://geekworkers.ch",
  "logo": "https://geekworkers.ch/brand/gw-logo-original-blue-default.svg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Chemin des Geais 17C",
    "postalCode": "1066",
    "addressLocality": "Épalinges",
    "addressRegion": "Vaud",
    "addressCountry": "CH"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+41 21 561 36 26",
    "contactType": "customer service",
    "availableLanguage": ["French", "English"]
  }
}
</script>
```

---

## 6. Répertoire des Ressources Officielles en Ligne

L'ensemble des ressources officielles est accessible publiquement via des URLs canoniques directes, sans restriction ni intermédiaire :

- **Portail de Marque Interactif :** [https://geekworkers.ch/brand/](https://geekworkers.ch/brand/)
- **Spécification DESIGN.md Intégrale (Ce Document Unique) :** [https://geekworkers.ch/brand/DESIGN.md](https://geekworkers.ch/brand/DESIGN.md)
- **Guide PDF Haute Définition (3 Pages A4) :** [https://geekworkers.ch/brand/GEEKWORKERS_CHARTE_GRAPHIQUE.pdf](https://geekworkers.ch/brand/GEEKWORKERS_CHARTE_GRAPHIQUE.pdf)
- **Pack Vectoriel SVG Complet (Archive ZIP) :** [https://geekworkers.ch/brand/geekworkers-brand-assets.zip](https://geekworkers.ch/brand/geekworkers-brand-assets.zip)
- **Spécification Machine JSON :** [https://geekworkers.ch/brand/geekworkers_editorial_rules.json](https://geekworkers.ch/brand/geekworkers_editorial_rules.json)
- **Index Machine LLMs :** [https://geekworkers.ch/llms.txt](https://geekworkers.ch/llms.txt)
- **Base Exhaustive LLMs :** [https://geekworkers.ch/llms-full.txt](https://geekworkers.ch/llms-full.txt)