Le visual design
L'identité visuelle atlas® : couleurs, logo, typo, espacements, composants, voix. L'élément le plus important, la source de vérité, à respecter à la lettre.
Un socle neutre. Trois accents vifs.
L'identité repose sur un socle neutre, quatre niveaux de gris et trois niveaux de bordures, ponctué par trois couleurs vives : un bleu, un rose, un noir profond. Les neutres dominent, les couleurs signalent.
Couleurs de marque
Le bleu pour les actions et les liens, le rose pour les accents créatifs, le noir pour la structure. Toujours en aplat, jamais en gradient sauf cas exceptionnel.
Fonds
Quatre niveaux de fond, du plus pur au plus marqué. Le fond principal est le blanc absolu, tout part de là.
Texte
Quatre niveaux hiérarchiques. Primaire pour les titres et le corps important, secondaire pour les descriptions, tertiaire pour les méta, muted pour le désactivé ou décoratif.
Bordures
Trois niveaux de séparation, tous en noir avec une opacité variable. Jamais de gris pur : l'opacité s'adapte au fond et reste cohérente sur toutes les surfaces.
Lowercase, toujours.
Le logo est une marque déposée. Il est livré nativement en blanc sur fond noir. Sur fond clair, on l'inverse via filter: invert(1), jamais via un fichier « version noire » séparé. Une seule source, deux contextes.
Versions
Version native · fond sombreVersion inversée · fond clairÉchelle
Quatre tailles standardisées selon le contexte. La hauteur du glyphe (pas du fichier) sert de référence.
Zone de protection
Marge minimum autour du logo, égale à la hauteur du glyphe « a ». Aucun texte, image ou bordure n'y pénètre.
Variantes gradient
Deux gradients autorisés pour l'événementiel, les badges digitaux et les formats sociaux. Toujours en diagonale 135°, bleu et rose atlas®, jamais d'autres teintes.
Bleu → rose · logo blancRose → bleu · logo noirÀ faire / à éviter
Quatre règles non négociables. Toute production qui s'en écarte est invalide.
Déclinaisons étendues · 8 traitements
Réservées aux supports digitaux, écrans, motion et activations. Palette stricte : bleu atlas®, violet, rose. Jamais d'autres teintes. Les mêmes huit traitements s'appliquent au glyphe a®.
01 · Mesh3 halos02 · Radial haloCenter glow03 · BandesStrip 4 steps04 · GrainNoise overlay05 · Blob mesh4 radials06 · HologramConic + grain07 · ConicRotation08 · Blur haloSoft cloudsMarque secondaire
Trois cercles bleu, rose, noir, légèrement chevauchés. Marque pure, sans wordmark. Réservée aux usages compacts : avatar, badge, watermark discret. Quatre tailles standardisées.
Le glyphe a® · versions
Variante compacte du wordmark, réduite au « a » suivi du symbole déposé. Sert de favicon, d'app icon et de signature courte. Mêmes règles que le wordmark : natif blanc sur noir, inversé sur fond clair via filter.
Version native · fond sombreVersion inversée · fond clairLe glyphe a® · échelle
Conçu pour les très petits formats. Il reste lisible jusqu'à 16 px, contrairement au wordmark complet. Quatre tailles standardisées, du favicon à la couverture.
Le glyphe a® · zone de protection
Marge minimum égale à la hauteur du symbole ®. Cette zone garantit la lisibilité du glyphe à toutes les échelles, notamment en favicon.
Le glyphe a® · variantes gradient
Le ® ne se déplace ni ne se redimensionne indépendamment du « a ». Mêmes deux gradients que le wordmark, réservés aux app icons, badges sociaux, splash screens.
Indigo → rose · a® blancPerle → bleu · a® noirLe glyphe a® · à faire / à éviter
Mêmes règles que le wordmark. Le ® ne doit jamais être déplacé ni redimensionné indépendamment du « a ».
Le glyphe a® · déclinaisons étendues · 8 traitements
Mêmes huit traitements que le wordmark, appliqués au glyphe a®. Identités cohérentes entre wordmark et marque secondaire. Palette stricte : bleu atlas®, violet, rose, jamais d'autres teintes.
01 · Mesh3 halos02 · Radial haloCenter glow03 · BandesStrip 4 steps04 · GrainNoise overlay05 · Blob mesh4 radials06 · HologramConic + grain07 · ConicRotation08 · Blur haloSoft cloudsSF Pro pour la lecture, Helvetica Black pour la signature.
Deux familles, jamais plus. SF Pro pour tout ce qui se lit. Helvetica Neue Black 900 en uppercase pour les méta, les eyebrows, la navigation, partout où atlas® signe.
Display · SF Pro Display · weight 600 · sentence case
Body · SF Pro Text · weight 400 · line-height 1.55
Label · Helvetica Neue Black · weight 900 · uppercase
La signature visuelle. Toujours uppercase, letter-spacing fixe à +0.04em, jamais plus. Les uppercases atlas® ne sont jamais « trackés » : on garde la respiration minimale, sans étalement.
Une grille de 8.
Tout est multiple de 8 pixels. Cette contrainte rend la mise en page cohérente entre composants, sections et pages. Aucune valeur arbitraire.
Layout container
Largeur max : 980px pour le manifesto, 1200px pour les grilles d'images, 1080px pour les pages éditoriales. Padding latéral : 48px desktop, 24px tablette, 16px mobile.
Cinq rayons.
Chaque rayon a un usage précis. Pas de mélange à l'intérieur d'un même composant.
- 8px (sm) — boutons internes, code blocks, segmented control inner.
- 12px (md) — segmented control wrapper, cartes en grilles denses, nav items.
- 18px (lg) — cards, drawers, modales, conteneurs principaux.
- 24px (xl) — hero containers, sections élevées.
- 100px (pill) — pills de service, tags, boutons CTA arrondis.
Quatre niveaux d'élévation.
Toujours douces, jamais marquées. Une demi-pixel ring (0.5px) définit le bord, une ombre diffuse donne la profondeur. Inspiration directe iOS / macOS.
Briques prêtes à poser.
Les composants signature, tous reproductibles avec les tokens ci-dessus. À chaque nouvelle page, on pioche dedans plutôt que d'en créer. Rendus ici sur fond clair, leur surface d'origine sur le site.
Nav fixe
Design system — v1.0Hauteur 52px. Fond blanc à 72% avec backdrop-filter blur(20px) saturate(180%). Apparaît au scroll après 80px. Logo à gauche (inversé), méta à droite en label tracked.
Pills · service tags
Padding 9 / 18, weight 500, fond blanc + ombre pill. Hover : translate -1px + elevated. Active : fond noir, texte blanc.
Segmented control
Filtres exclusifs. Slider blanc qui glisse derrière l'option active, transition cubic-bezier(0.4, 0, 0.2, 1) sur 320ms.
Cards
Ghost mannequin
Packshots e-commerce sans modèle, rendu studio constant sur tout le catalogue.
Lookbook
Séries éditoriales pour collections fashion. Direction artistique, mannequins, lieux.
Border-radius lg (18px), padding 28px, shadow-card. Hover : translate -2px + elevated. Eyebrow label tracked + titre display + description body S.
Direct. Précis. Sans pose.
atlas® écrit comme on parle dans un studio le lundi matin. Pas de jargon corporate, pas de superlatif, pas de « révolutionnaire », « disruptif », « innovant ». On dit ce qu'on fait, on montre comment.
On crée des images et des vidéos par IA pour des marques et des talents qui veulent produire vite sans perdre en direction artistique.
Phrase courte. Vocabulaire concret. Sujet clair.
atlas® révolutionne la création visuelle grâce à des solutions IA innovantes au service de l'excellence créative des marques.
Vide. Aucune information. Cliché.
Règles d'écriture
- Sentence case. Les titres s'écrivent comme des phrases : première lettre en majuscule, le reste en minuscule. « Une agence créative », pas « Une Agence Créative ».
- UPPERCASE pour la signature. Méta, eyebrows, navigation, footer. C'est là que parle la marque.
- Tirets cadratins (—). Pour relier ou ouvrir. Jamais de double tiret simple. « Strasbourg — France » oui, « Strasbourg --France » non.
- Pas d'exclamations. atlas® ne crie jamais. Si une phrase a besoin d'un point d'exclamation pour fonctionner, c'est qu'elle est mal écrite.
- Phrases courtes. Si une phrase dépasse trois lignes, on la coupe.
Les huit lois.
Si quelque chose dans une page ne respecte pas ces règles, c'est la page qui doit changer, pas la règle.
Le logo atlas® est blanc nativement. Sur fond blanc, on l'inverse via filter: invert(1). On ne crée jamais de version noire séparée.
Pas de couleur d'accent hors de la palette mono. Le contraste se fait avec les niveaux de gris et les ombres. Si une page a besoin de couleur, c'est l'image qui la porte.
Toujours SF Pro et Helvetica Black. Aucune autre famille. Pas de Google Fonts, pas d'import. Tout est en système.
Multiples de 8 partout. Marges, paddings, gaps, tailles de composants. La seule exception est la typo, qui suit sa propre échelle.
Backdrop-filter sur les surfaces fixes. Nav, modales, segmented controls. Toujours saturate(180%) blur(20px) avec une transparence ~72%.
Animation = subtilité. Translate de 1 à 2 px au hover. Aucun mouvement spectaculaire, pas de bounce, pas de rotate. Juste un easing propre sur 250 à 320ms.
Border-radius cohérent dans un même composant. Une carte à 18px ne contient pas un bouton à 12px supérieur au conteneur. Tout est plus petit que le contenant.
Les images parlent, l'interface se tait. Plus une page contient d'images de projets, moins elle contient d'éléments décoratifs. L'UI s'efface devant le travail.