Architecture et système de design

Kingsbell est un thème Online Store 2.0 construit avec Liquid, modèles JSON, sections, blocs, assets, réglages, routes et formulaires Shopify. Il n’utilise pas de framework frontend séparé.

Répertoires d’exécution

assets/      CSS, JavaScript et assets boutique
blocks/      Blocs de thème réutilisables
config/      Schéma et configuration globale
layout/      Documents de mise en page
locales/     Traductions boutique et éditeur
sections/    Sections configurables
snippets/    Unités Liquid réutilisables
templates/   Modèles JSON et Liquid

Les prototypes .design, la documentation, les scripts et contrats compagnons sont hors runtime.

Couches d’architecture

1. Fondation — tokens, polices, styles, métadonnées, icônes et primitives accessibles.
2. Moteur commerce — produits, variants, formulaires, panier, filtres, recherche et prix.
3. Système de modèles — compositions standard, éditoriale, archive, commande et privée.
4. Système de contenu — blogs, articles, galeries, citations, entretiens, notes et cartes.
5. Frontière compagnon — présentation membre et spécification d’autorisation séparée.

Ne dupliquez pas la logique panier dans une section visuelle et ne considérez pas une condition Liquid comme une autorisation serveur.

Direction visuelle

Le système par défaut utilise Obsidian et Alabaster, un accent champagne discret, Playfair Display pour les titres, Inter pour l’interface, des angles nets, de grands espaces, une grille éditoriale 12 colonnes et la photographie produit comme élément principal.

Couleurs

Les composants doivent utiliser les rôles sémantiques de fond, surface, texte, bordure, accent et erreur.

Typographie et mise en page

Les réglages contrôlent familles, échelles, interlignage, approche, largeur de page, largeur de lecture, marges, gouttière, espacement de section et arrondi.

Valeurs par défaut : 1440px de largeur, 780px de lecture, 32px de gouttière et 120px entre sections.

Conservez la hiérarchie sémantique des titres indépendamment de leur taille visuelle.

Blocs

Les blocs réutilisables comprennent titre, texte, bouton, image, statistique, carte ressource, espaceur et groupe. Flexible content accepte aussi les app blocks.

Les groupes autorisent un seul niveau imbriqué afin de garder l’éditeur compréhensible.

Amélioration progressive

Le contenu essentiel reste disponible sans JavaScript. Les onglets sont lisibles comme panneaux successifs, la progression de lecture est optionnelle et les animations respectent le mouvement réduit.

Accessibilité

La fondation comprend lien d’évitement, focus visible, contenu principal ciblable, contrôles sémantiques, gestion des textes alternatifs et navigation clavier.

Chaque composant doit préserver ordre source, zoom, reflow, focus et états compréhensibles.

Cycle de l’éditeur

Shopify recharge des sections indépendamment. Le JavaScript doit prendre en charge chargement, déchargement, sélection de blocs et réinitialisation sans écouteurs dupliqués.

.design reste une référence visuelle uniquement, jamais une dépendance de production.