Papier, encre et signal
Le design system de Neoservice AI et de Neoffice : la couleur, la typographie, les logos et les mouvements de nos interfaces, de nos sites et de nos documents.
Une maison, un produit
Neoservice AI est la maison, Neoffice son produit : l'ERP suisse tout-en-un. Les métiers en dérivent sous la forme « neo » suivi du métier.
La marque est suisse, précise et rassurante, avec la chaleur et le calme d'un produit soigné, jamais le bleu froid du logiciel d'entreprise.
Le ton
La langue
Le français de Suisse romande d'abord. Les montants en francs suisses : CHF 149.–, CHF 48 250.
L'adresse
Toujours « vous ». On parle au client de son entreprise : « Pilotez votre entreprise ».
Le ton
Confiant, pragmatique, serein : sans surprise, sans engagement, 100 % suisse, tout-en-un.
La casse
Des phrases en minuscules, des surtitres en capitales espacées, aucun emoji dans l'interface.
Des logos, une seule encre
Les logos sont vectorisés et toujours à l'encre. On ne retouche jamais leurs tracés, et on les dessine avec toutes leurs formes.
Sur le clair
neoffice
« neo » plein, « ffice » en contour. Le produit : l'ERP suisse tout-en-un.
Sur le clair
Neoservice AI
Le logo de la maison. Le AI sort du mot : le v retourné devient le Λ, la barre du i devient le I. Il se place à droite, à la taille du mot.
Sur le clair
Nora AI
L'assistante IA de Neoservice. « nora » plein comme « neo », sans tête, à l'encre, puis le AI de Neoservice AI, une espace de mot après le a.
Sur le clair
Nora AI · marque carrée
Là où le mot ne tient pas : favicon, icône d'app, barre latérale repliée, avatar. Le AI en grand, « nora » dessous, aussi large que lui.
La famille neo
« neo » reste, le métier change. Le métier est en contour, comme « service », et « neo » est dessiné par-dessus.
Sur le clair
Sur le clair
Sur le clair
Sur le clair
Les règles
- Toujours à l'encre, le AI compris. La couleur ne vient que dans le mouvement.
- Le AI à droite, à la taille du mot : jamais plus petit, jamais en dessous.
- Toutes les formes du fichier : sans son halo, « neo » devient un bloc.
- Sur le sombre, l'encre devient papier et les parties claires prennent la couleur du fond.
L'icône neoffice
Là où le mot ne tient pas : O2, le seul o de « neoffice », là où « neo » finit et « office » commence, dans les deux graisses du mot. À gauche un corps noir dans un liseré blanc, comme « neo » ; à droite un corps blanc dans un liseré noir, comme « ffice ». Toujours sur le papier : sur le blanc, le liseré blanc disparaît.
Sur le clair
neoffice · icône
Le favicon, l'icône d'écran d'accueil et l'icône de l'app, sur le papier, avec le coin de la famille (comme Nora AI et Neoservice AI).
Sur le clair
neoffice · marque
La même sans carré : barre latérale, avatar, écran de démarrage, sur un fond qui n'est pas blanc.
Motion · icône
« neo » et « office » se rencontrent
Les deux moitiés du mot se rejoignent et leurs o tombent l'un sur l'autre. La moitié pleine se replie sur la couture, les lettres s'en vont, le carré se referme et le o fait un tour complet. À l'encre, joué une fois, il finit sur l'icône.
Motion · en-tête
« office » se loge dans « neo »
Le logo d'en-tête de neoffice.ch : « office » glisse et se loge dans « neo » en 1,6 s, une fois au chargement. La dernière image est le logo exact.
Calme et suisse : aucun rebond
Des transitions courtes, de 120 à 320 ms, sur des courbes douces. Les entrées se font en fondu, avec un court glissement. Tout mouvement respecte le réglage « réduire les animations » : on montre alors l'état final.
Motion 9 · retenue
Ensemble, puis le salto
- Le v et la barre du i se remplissent d'encre dans leur contour.
- Ils glissent ensemble derrière la fin du mot, qui reste entier.
- Seul le v fait un salto arrière et devient le Λ.
- La barre se rapproche et se range contre lui.
Joué une fois au chargement, il s'arrête sur le logo complet.
Motion 4
L'en-tête qui se replie
Au défilement, le logo se replie lettre par lettre depuis la fin du mot, jusqu'à ce qu'il ne reste que « AI ». Il suit la lecture et ne se joue jamais seul.
Motion 3
La famille
« neo » reste, le métier change toutes les deux secondes.
Les courbes
--ease-standardLa plupart des transitions. cubic-bezier(0.2, 0, 0, 1)--ease-emphasizedUn geste qui part. cubic-bezier(0.3, 0, 0, 1)
Survol et appui
Au survol, un léger changement de fond ou de bordure. À l'appui, un peu plus sombre, et les boutons se réduisent à 98 %.
Motion 9 · Nora AI
Le AI sort de derrière le a
« nora » n'a ni v ni i à prêter : le v et la barre sortent ensemble de derrière le a, le v fait son salto arrière en Λ, la barre se range contre lui. Une fois, au chargement.
Motion 4 · Nora AI
« nora » se replie jusqu'au AI
Au défilement, les lettres se replient depuis la fin du mot (a, r, o, n) jusqu'à ce qu'il ne reste que « AI », comme sur noraai.ch. Les lettres se chevauchent : chacune rend la place qui la sépare de la suivante.
Le signal vit sur le fond
Le papier porte la page, l'encre porte le poids et le signal est l'unique accent : un champ, une teinte, un état actif, le geste d'un mouvement.
#FAF3EA#FFFFFFLe papier
Un crème chaud pour la page, le blanc pour les cartes. Jamais de page blanc pur, jamais de noir pur en fond.
#141414L'encre
Le texte, les logos et toutes les actions : le bouton plein est noir. Sur le sombre, il devient papier.
#F55D1ALe signal
Un champ, une teinte, une pastille, un état actif, une barre de progression. Ce qui se pose dessus est à l'encre.
La gamme du signal
- 50
#FFEAE2teinte - 100
#FFD1C1pastille - 200
#FFB599 - 300
#FF8D64 - 400
#F55D1Ale signal - 500
#D54600ne porte rien - 600
#AA3700texte sur le papier - 700
#81300F
L'encre sur le signal
L'encre s'y lit à 5,7:1.
Pas de texte clair sur le signal
Le blanc ne s'y lit qu'à 3,3:1 : refusé.
Le signal en texte, à son cran profond
Sur le papier, pour un prix, un lien, le prénom du bonjour : 5,9:1.
Les actions sont à l'encre
Jamais un bouton au signal, le bouton d'appel du site compris.
clay-500 · #C2723FL'argile, la matière
Elle reste le second ton des icônes et la matière des illustrations, la mascotte de Nora comprise.
Les statuts
Des tons terreux, toujours avec un mot ou une pastille, jamais la couleur seule. Le bleu n'est pas une couleur de marque : une ardoise discrète, pour l'information seulement.
Pas de couleur par produit
Les métiers se distinguent par leur nom. Des couleurs qui ne diffèrent que par la teinte se confondent pour un lecteur daltonien.
Forum pour la voix, Karla pour le reste
Deux familles. La hiérarchie vient de la taille, pas de la graisse.
Forum
--font-displayPilotez votre entreprise
CHF 48 250
Un sérif évasé, à une seule graisse. Les titres, le bonjour, les en-têtes de panneau et les grands chiffres.
Karla
--font-sansToute votre facturation suisse dans un seul outil.
- Aa 1'027400
- Aa 1'027500
- Aa 1'027600
- Aa 1'027700
Surtitre
Une grotesque humaniste, aux chiffres tabulaires. L'interface, le texte courant, les libellés et les données. Les surtitres : Karla, en capitales espacées.
L'échelle
text-6xl · 84pxVotre ERP cloud suissetext-5xl · 64pxVotre ERP cloud suissetext-4xl · 48pxVotre ERP cloud suissetext-3xl · 36pxVotre ERP cloud suissetext-2xl · 28pxVotre ERP cloud suissetext-xl · 22pxVotre ERP cloud suissetext-lg · 18pxVotre ERP cloud suissetext-md · 16pxVotre ERP cloud suissetext-base · 15pxVotre ERP cloud suissetext-sm · 14pxVotre ERP cloud suissetext-xs · 12pxVotre ERP cloud suissetext-2xs · 11pxVotre ERP cloud suisse
Cal Sans ne sert qu'aux logos, vectorisés. Le mono du système sert aux identifiants, aux IBAN et aux chaînes QR.
Une grille de 4 px
Des conteneurs jusqu'à 1280 px. Des bordures fines et chaudes avant les ombres, et des ombres retenues, teintées de brun.
L'espacement
Les rayons
- Contrôles
10px - Cartes
14px - Panneaux
20px - Surfaces de tête
28px - Pastilles et avatars
999px
Les ombres
shadow-xsshadow-smshadow-mdshadow-lgshadow-xl
Le focus
Un anneau au signal autour du champ actif.
La chaleur vient du papier
Aucun dégradé bleu-violet, aucune photo de banque d'images.
Le papier dégradé
Crème, avec une lueur du signal en haut à droite : le fond par défaut.
Les filets de colonne
Un papier réglé de fines lignes verticales, derrière le contenu.
La grille
Des carrés de 8,5 rem qui s'effacent sous les en-têtes.
Les aurores
Deux lueurs floues : le signal à gauche, la sauge à droite.
Le dégradé de titre
De l'encre au signal, puis de nouveau l'encre.
L'espresso
Le sombre chaud, pour Nora et les vues de nuit.
Des icônes dessinées à la main
Streamline Freehand Duotone : le tracé principal suit la couleur du texte, le second ton est en argile, figé dans le fichier. On ne les recolore jamais.
archive-box
arrow-left
arrow-right
arrow-up-right
bell
book
box
brain
briefcase
building
calendar
chart-up
chat-bubble
check-circle
check
chevron-down
chevron-left
chevron-right
clipboard
clock
close
code
coins
credit-card
document
envelope
facebook
fire
gear
globe
graduation
handshake
lightbulb
linkedin
location
lock
map-pin
medal
menu
microphone
minus
monitor
moon
pause
phone
play
plus
question
rocket
scan-document
search
send
shield
smartphone
smile
sun
target
twitter
user
users
wave
website
wifi
wrench
Nora
La mascotte de l'assistante est une illustration, pas une icône : jamais recolorée, jamais sous 40 px, jamais dans une rangée d'icônes.
Quatre scènes isométriques
Une scène par secteur, pour le site.
Les jetons, clair et sombre
Chaque valeur vient du design system, en deux couches : les gammes, puis les rôles qui s'y réfèrent.
Les gammes
Signal
- signal-50
#FFEAE2 - signal-100
#FFD1C1 - signal-200
#FFB599 - signal-300
#FF8D64 - signal-400
#F55D1A - signal-500
#D54600 - signal-600
#AA3700 - signal-700
#81300F
Encre et sable
- white
#FFFFFF - sand-25
#FBFAF7 - sand-50
#F6F3ED - sand-100
#ECE7DE - sand-200
#DCD4C7 - sand-300
#BFB5A4 - sand-400
#968C7C - sand-500
#6F665A - sand-600
#524B41 - sand-700
#3A342C - sand-800
#232020 - sand-900
#1A1817 - sand-950
#141414 - black
#000000
Papier
- paper-bright
#FFFDF8 - paper-cream
#FAF3EA
Argile
- clay-50
#FAEFE6 - clay-100
#F3DECC - clay-200
#E9C5A4 - clay-300
#DDA479 - clay-400
#D68A59 - clay-500
#C2723F - clay-600
#A15A2E - clay-700
#7E4523
Succès
- green-50
#E9F7EE - green-100
#CBEDD7 - green-500
#1F9D57 - green-600
#178347 - green-700
#11663A
Attention
- amber-50
#FCF2DD - amber-100
#F8E2B4 - amber-500
#E0980F - amber-600
#BC7D0B - amber-700
#92610C
Danger
- red-50
#FBEBE7 - red-100
#F6D2C9 - red-500
#DC4A3D - red-600
#C1372C - red-700
#9C2920
Information
- blue-50
#EEF2F6 - blue-100
#DCE4EC - blue-500
#4A6B8F - blue-600
#3A5572 - blue-700
#2C4156
Les rôles
Pour chaque texte, son contraste sur la page.
| Rôle | Clair | Sombre |
|---|---|---|
--color-bg | #FAF3EA | #141414 |
--surface-card | #FFFFFF | #1B1611 |
--surface-raised | #FFFFFF | #221C16 |
--surface-sunken | #F6F3ED | #100E0D |
--surface-subtle | #FBFAF7 | #161413 |
--surface-inverse | #141414 | #FFFDF8 |
--surface-overlay | rgba(24, 20, 16, 0.55) | rgba(0, 0, 0, 0.66) |
--text-primary | #14141416,7:1 | #FFFDF818,1:1 |
--text-secondary | #524B417,8:1 | #BFB5A49,1:1 |
--text-tertiary | #968C7C3:1 | #968C7C5,6:1 |
--text-disabled | #BFB5A41,8:1 | #524B412,1:1 |
--text-inverse | #FFFDF8 | #141414 |
--text-brand | #AA37005,9:1 | #FF8D648,1:1 |
--text-link | #81300F8,1:1 | #FF8D648,1:1 |
--border-subtle | #ECE7DE | rgba(255, 251, 245, 0.08) |
--border-default | #DCD4C7 | rgba(255, 251, 245, 0.14) |
--border-strong | #BFB5A4 | rgba(255, 251, 245, 0.24) |
--border-focus | #F55D1A | #F55D1A |
--color-primary | #141414 | #FFFDF8 |
--color-primary-hover | #232020 | #ECE7DE |
--color-primary-active | #000000 | #DCD4C7 |
--color-primary-fg | #FFFDF8 | #141414 |
--color-primary-soft | #ECE7DE | rgba(255, 251, 245, 0.10) |
--color-primary-soft-fg | #1A1817 | #FFFDF8 |
--color-accent | #F55D1A | #F55D1A |
--color-accent-hover | #D54600 | #D54600 |
--color-accent-active | #AA3700 | #AA3700 |
--color-accent-strong | #AA3700 | #AA3700 |
--color-accent-fg | #141414 | #141414 |
--color-accent-soft | #FFEAE2 | rgba(245, 93, 26, 0.16) |
--color-accent-soft-fg | #81300F | #FFB599 |
--color-info | #4A6B8F | #4A6B8F |
--color-info-soft | #EEF2F6 | #EEF2F6 |
--color-info-fg | #2C4156 | #2C4156 |
--color-success | #1F9D57 | #1F9D57 |
--color-success-soft | #E9F7EE | #E9F7EE |
--color-success-fg | #11663A | #11663A |
--color-warning | #E0980F | #E0980F |
--color-warning-soft | #FCF2DD | #FCF2DD |
--color-warning-fg | #92610C | #92610C |
--color-danger | #DC4A3D | #DC4A3D |
--color-danger-soft | #FBEBE7 | #FBEBE7 |
--color-danger-fg | #9C2920 | #9C2920 |
La typographie
- Familles
--font-display'Forum', 'Times New Roman', serif--font-sans'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif--font-monoui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace
- Échelle
--text-2xs0.6875rem--text-xs0.75rem--text-sm0.875rem--text-base0.9375rem--text-md1rem--text-lg1.125rem--text-xl1.375rem--text-2xl1.75rem--text-3xl2.25rem--text-4xl3rem--text-5xl4rem--text-6xl5.25rem
- Graisses
--fw-light300--fw-regular400--fw-medium500--fw-semibold600--fw-bold700--fw-extrabold800
- Interlignes
--leading-none1--leading-tight1.15--leading-snug1.3--leading-normal1.5--leading-relaxed1.65
- Approches
--tracking-tighter-0.03em--tracking-tight-0.015em--tracking-normal0--tracking-wide0.02em--tracking-wider0.08em--tracking-caps0.14em
Espace, rayons, ombres et mouvement
- Espacement
--space-10.25rem--space-1-50.375rem--space-20.5rem--space-2-50.625rem--space-30.75rem--space-41rem--space-51.25rem--space-61.5rem--space-71.75rem--space-82rem--space-102.5rem--space-123rem--space-164rem--space-205rem--space-246rem--space-328rem
- Rayons
--radius-xs4px--radius-sm6px--radius-md10px--radius-lg14px--radius-xl20px--radius-2xl28px--radius-pill999px
- Ombres
--shadow-xs0 1px 2px rgba(40, 28, 18, 0.05)--shadow-sm0 1px 2px rgba(40, 28, 18, 0.05), 0 1px 3px rgba(40, 28, 18, 0.07)--shadow-md0 2px 4px rgba(40, 28, 18, 0.04), 0 6px 16px rgba(40, 28, 18, 0.08)--shadow-lg0 6px 12px rgba(40, 28, 18, 0.06), 0 16px 36px rgba(40, 28, 18, 0.10)--shadow-xl0 12px 24px rgba(40, 28, 18, 0.08), 0 32px 64px rgba(40, 28, 18, 0.16)
- Courbes
--ease-standardcubic-bezier(0.2, 0, 0, 1)--ease-emphasizedcubic-bezier(0.3, 0, 0, 1)--ease-outcubic-bezier(0, 0, 0.2, 1)--ease-incubic-bezier(0.4, 0, 1, 1)
- Durées
--duration-fast120ms--duration-base200ms--duration-slow320ms--duration-slower480ms
Une question sur la marque ?
Pour utiliser nos logos, ou pour travailler avec nous, écrivez-nous.
Nous écrire