Fondations

Logo & lockups

Le mot-symbole et les lockups par surface sont des composants React de @forme-ch/ui/lockups, aux tracés Aeonik exacts. Ce sont des SVG monochromes qui héritent de currentColor : tu ne fournis pas de couleur, tu pilotes color sur le parent.

Import

import { FormeWordmark, FormeAdminLockup } from "@forme-ch/ui/lockups";

<FormeWordmark height={26} />
<FormeAdminLockup height={26} />

Le mot-symbole & les lockups par surface

Rendus en direct. Chaque lockup correspond à une surface Forme ; le nom sous le tracé est l'export.

<FormeWordmark height={26} />
<FormeAdminLockup height={26} />
<FormeAILockup height={26} />
<FormeSpaceLockup height={26} />
<FormeStudioLockup height={26} />
<FormeFontManagerLockup height={26} />

La map FORME_LOCKUPS indexe les surfaces : { portal, admin, space, studio, fonts, frame, ai }. Autres exports disponibles : FormeFrameLockup, FormePortalLockup.

Hauteur

On dimensionne par height ; la largeur se déduit du ratio du tracé. Une plage de 20–28 couvre la plupart des en-têtes. Norme de parité cap-height base 32 : la hauteur rendue vaut height × vbHeight / 32, ce qui aligne optiquement tous les lockups entre eux quelle que soit la surface.

<FormeAdminLockup height={20} />
<FormeAdminLockup height={24} />
<FormeAdminLockup height={28} />

Héritage de currentColor

Le même wordmark, sous trois couleurs de texte parent. Aucune prop de couleur : c'est le contexte qui décide.

<span style={{ color: "var(--color-text-primary)" }}><FormeWordmark height={26} /></span>
<span style={{ color: "var(--color-accent)" }}><FormeWordmark height={26} /></span>