Surgev1.3

De la puissance dans chaque geste.

Ce n’est pas un guide de marque d’un autre temps. C’est un système de design vivant. Surge est le système d’exploitation qui traverse chaque surface d’Idea Studio : les principes, la voix, la marque, la couleur, la typographie et les composants qui suivent. Conçu pour l’utilisateur avec retenue et accessibilité, il récompense la personne qui s’en sert par une décharge d’énergie à chaque geste.

Saisissez la charge et tirez.

Les normes derrière chaque décision.

Quand un choix n’est pas évident, ce sont eux qui tranchent.

Intelligente, naturelle, concise.

Nous écrivons clairement et directement. Chaque phrase informe, elle ne persuade pas. Si une ligne sonne comme du marketing ou comme une machine, on la réécrit.

Un symbole d’énergie et d’identité.

La marque est un éclair. Regardez de près : le point forme un i et le trait se lit comme un s, les initiales d’Idea Studio.

Téléchargements

SVG vectoriel, une seule couleur. Sur fond sombre, la version renversée; sur fond clair, la version standard. Gardez autour de la signature une zone de protection égale à la hauteur de l’éclair; ne la recolorez jamais, ne l’étirez pas et ne la reconstruisez pas.

Signature, horizontaleAssemblage principal

Sombre Clair

Signature, empiléeEspaces carrés et verticaux

Sombre Clair

Icône éclairIcône d’application, favicon, avatar

Cyan Blanc

LogotypeEmployé seul, sans l’éclair

Sombre Clair

Marine profond, un cyan électrique.

Le système repose sur un marine presque noir, un cyan à haute énergie et une gamme de gris ardoise pour le texte. Le vert et l’orange servent d’accents secondaires, en usage limité. Chaque couleur est un jeton qui bascule entre le mode sombre et le mode clair. Survolez une bande pour l’ouvrir, puis cliquez sur une valeur pour la copier.

Secondaires, usage limité

Deux accents réservés à des tâches précises. Le vert signale la réussite et les données simples; l’orange signale l’attention et les avertissements. Ils ne portent jamais une page, ne remplacent jamais le cyan et n’apparaissent qu’avec parcimonie.

Quand utiliser le cyan

Le cyan est la seule couleur porteuse de sens. Réservez-le à l’action la plus importante d’une vue. Tout le reste est marine et ardoise; le vert et l’orange demeurent secondaires.

Deux polices pour la marque. Une pour les données.

Berthold City, en italique condensé et en capitales, est la voix d’affichage, réservée aux moments les plus grands et les plus délibérés. General Sans porte tout ce que vous lisez et construit toute la hiérarchie à partir de ses propres graisses. Une monospace système (SF Mono, Menlo) compose les valeurs mécaniques : codes hexadécimaux, specs et code. Ce guide applique cette retenue : chaque titre y est en General Sans.

Hiérarchie, bâtie en General Sans

General Sans offre toute la gamme, du Regular au Bold, avec de vrais Medium et Semibold, plus de véritables italiques. La taille, l’interlettrage, la couleur et la casse font le reste, et les libellés de navigation et d’interface reposent sur un 500. Aucune graisse synthétique.

La monospace est la pile native de la plateforme, pas une police web livrée : le choix juste et léger pour les valeurs qui comptent pour une machine.

Comment l’interface se comporte.

Le langage d’interface que vous emploierez vraiment. Tout ici provient du CSS du site : un spécimen est le vrai composant, pas son image.

Boutons

Un seul bouton, partout. Un contour : fond transparent, bordure en filet, libellé en capitales, 40px de haut, coins de 6px, semi-gras. Il ne se remplit jamais. Pointez-le et la bordure et le texte montent au cyan sous une lueur douce; la lueur est le signal de survol. Une commande sélectionnée ou active garde le même cyan mais reste stable, sans la lueur, pour que l’endroit que vous pointez et ce qui est choisi ne se lisent jamais pareil. Il n’y a pas de primaire ni de secondaire, seulement ce bouton et un lien en ligne, plus discret.

Bouton ou lien? Les commandes sont des boutons; la prose reçoit des liens. Tout ce qu’on clique pour naviguer ou agir, la navigation du haut, les filtres, les téléchargements, les liens sortants et l’appel à l’action, prend la forme du bouton à contour. Le lien texte est réservé à une référence au fil du texte, là où un bouton encadré briserait la ligne.

L’effet Surge

L’expression la plus visible de Surge, et le seul mouvement qu’un bouton produit. Appuyez et une étincelle naît sur le contour, enfle en parcourant le bord supérieur le long du rehaut cyan, puis redescend et s’efface. Volontairement retenu, et reduced-motion le supprime entièrement. Tout demeure pleinement utilisable et lisible sans mouvement et au clavier. Création originale d’Idea Studio, 2026.

Variantes

Le bouton ne change jamais de forme; une icône nomme l’action. Un téléchargement tire vers le bas. Un lien qui quitte le site pointe vers le haut et l’extérieur. Rien d’autre ne s’ajoute.

Interactivité et mouvement

Chaque geste de Surge peut devenir mouvement dynamique et interaction. Pour montrer jusqu’où la commande peut aller, nous avons fait un petit jeu.

Saisissez la charge bleue et dessinez une forme fermée. Évitez le rouge. Emprisonnez-le dans votre forme pour des points bonis.

Iconographie

Une seule graisse pour chaque icône : monoligne, trait de 2px, extrémités arrondies, sur une grille de 24, montrées à leur taille d’emploi. Le mouvement a un but : une icône ne bouge que pour montrer ce qu’elle fait. Survolez une tuile pour la voir.

Étiquettes d’état

Un petit cachet presque carré pour un état qui paraîtrait autrement dépassé : disponibilité, page tout juste publiée, fonction en direct. Police de corps, 11px, capitales, coins de 5px, avec un fond teinté et une bordure en filet dans la couleur de l’état. Elle se place en fin de ligne, jamais seule. Le vert marque un état positif et actuel; le cyan marque une nouveauté. Toute date est posée par script pour que l’avis ne vieillisse jamais.

Champs et états

Cartes

Images

Un seul cadre pour chaque image. Un .frame est une fenêtre fixe qui rogne son image : au survol, l’image s’enfonce, elle grandit et se fait rogner par le cadre, sans jamais redimensionner la mise en page. Image entière : <figure class="frame">. Rognée selon un ratio, pour les grilles et les cartes : <figure class="frame crop" style="--ar:3/2">. Réglez avec --ar (ratio) et --r (rayon); ajoutez bare pour retirer le filet. Une galerie n’est qu’une grille de cadres. Cartes, galeries et photos d’équipe partagent toutes ce survol qui pousse l’image à travers la fenêtre.

Survolez le cadre : l’image grandit et se fait rogner, un zoom à travers une fenêtre fixe. Le cadre, la bordure et le rayon restent en place; seule l’image bouge. Respecte reduced-motion.

.frame crop · --ar fixe le ratio, --r le rayon

Film et audio

Les médias ne se lancent jamais seuls avec le son. La vidéo montre une affiche avec une seule commande de lecture circulaire qui se remplit de cyan au survol. Le lecteur audio emploie la barre Surge comme glissière, la même piste de progression en filet et lueur qui anime la navigation des témoignages : une ligne à l’épaisseur du contour de bouton, un remplissage cyan lumineux jusqu’au point courant, sans poignée. Saisissez-la pour vous déplacer.

Chargeurs et visionneuse

Le chargeur de page, c’est l’éclair lui-même : le cyan traverse la marque en se chargeant, puis elle fonce vers le lecteur dès que la page et chaque modèle 3D sont prêts. Les images d’importance s’ouvrent dans une visionneuse presque opaque, jusqu’à 94vw / 84vh, d’où leur pleine résolution à la source.

Travailler avec le système.

Ce système est généré à partir du site en ligne : ce que vous voyez ici est ce qui est livré. Quelques points pour rester au diapason :

Partez des pièces. Puisez dans les couleurs, la typographie et les composants définis ici avant d’en inventer. S’il vous manque quelque chose, c’est une conversation, pas une supposition. Ça a sans doute sa place dans le système.

Réservez le cyan. Un seul accent d’action par vue. Appuyez-vous sur le marine et les ardoises pour tout le reste, et gardez le vert et l’orange dans leurs rôles secondaires limités.

Demandez ce qui manque. Fichiers sources, un assemblage de logo supplémentaire, une valeur de couleur, la spec d’un composant : on vous l’envoie.

Système de design Surge · Généré à partir de ideastudio.ca