Fondations

Espacements & formes

Base 4 px, rondeurs maîtrisées qui rappellent les arcs du symbole, trois niveaux d’ombre discrets. Densité confortable par défaut, compacte dans les tableaux.

Espacements

Échelle Tailwind sur base 4 px : n’utiliser que ces paliers.

4 pxp-1 · gap-1Écart icône / libellé serré
8 pxp-2 · gap-2Écart entre boutons, puces
12 pxp-3 · gap-3Marge intérieure des champs
16 pxp-4 · gap-4Gouttière mobile, écart entre champs
24 pxp-6 · gap-6Gouttière desktop, marge des cartes
32 pxp-8 · gap-8Entre sections d’un formulaire
48 pxp-12 · gap-12Entre blocs de page
64 pxp-16 · gap-16Respiration des pages vides

Rayons

rounded-xs2px · Détails fins
rounded-sm4px · Badges carrés, raccourcis clavier
rounded-md6px · Champs de saisie
rounded-lg8px · Boutons, menus
rounded-xl12px · Cartes, modales
rounded-2xl16px · Grandes surfaces
rounded-full9999px · Avatars, badges de statut, pastilles

Ombres

Teintées du marine de la marque, très discrètes. En mode sombre, les surfaces se distinguent surtout par leur fond.

shadow-xsCartes, boutons
shadow-smCarte survolée
shadow-mdMenus flottants, popovers
shadow-lgModales, tiroirs

Dimensions de mise en page

Variables CSS --sy-* utilisables en arbitraire Tailwind, ex. h-(--sy-header-height).

Variable	Valeur	Aperçu
--sy-sidebar-width	248px
--sy-sidebar-width-collapsed	64px
--sy-header-height	56px
--sy-content-max-width	1600px
--sy-control-height-sm	28px
--sy-control-height-md	36px
--sy-control-height-lg	44px
--sy-touch-target	48px

Grille

12 colonnes ; gouttières 24 px (desktop), 16 px (tablette et mobile).

Points de rupture

≥ 1280 desktop (xl)
1024–1279 desktop compact (lg) — sidebar en tiroir en dessous
768–1023 tablette (md) — cible des écrans terrain
< 768 smartphone — listes en cartes

Impression

Modèles imprimables (PrintLayout) : format A4, marges et sauts de page maîtrisés.

PrintPageBreak — saut de page forcé

Quand l’utiliser : Dans un modèle d’impression, faire commencer un bloc sur une nouvelle page (annexe, bulletin suivant d’un lot, détail après la synthèse). À l’écran, un filet pointillé signale le saut dans l’aperçu ; il disparaît à l’impression.

Procès-verbal d’arrêté de caisse — synthèse

Solde théorique, total compté, écart et signatures.

Annexe — billetage détaillé

Commence en haut de la page suivante à l’impression.

Équivalents en classes : sy-page-break (saut après), sy-break-before (saut avant), sy-avoid-break (bloc insécable). hideOnScreen masque le repère dans l’aperçu.

Afficher le code

<PrintLayout …>
  <PrintTable … />
  <PrintPageBreak />
  <section>Annexe — détail des lignes</section>
</PrintLayout>