Design system

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.

Le papier#FAF3EAPorte la page : un crème chaud, jamais un blanc pur.

L'encre#141414Porte le poids : le texte, les logos et toutes les actions.

Le signal#F55D1AL'unique accent : un champ et un geste, jamais un bouton.

La marque

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.

Logos

Trois 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

Sur le sombre

neoffice

« neo » plein, « ffice » en contour. Le produit : l'ERP suisse tout-en-un.

Sur le clair

Sur le sombre

neoservice

« neo » plein, détaché par un halo clair ; « service », un intérieur clair dans un contour d'encre. La maison.

Sur le clair

Sur le sombre

Neoservice AI

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.

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.

Mouvement

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)

120ms200ms320ms480ms

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 %.

Couleur

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.

Page#FAF3EA

Carte#FFFFFF

Le papier

Un crème chaud pour la page, le blanc pour les cartes. Jamais de page blanc pur, jamais de noir pur en fond.

sand-950#141414

L'encre

Le texte, les logos et toutes les actions : le bouton plein est noir. Sur le sombre, il devient papier.

signal-400#F55D1A

Le 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

Nouveau

Oui

L'encre sur le signal

L'encre s'y lit à 5,7:1.

Nouveau

Non

Pas de texte clair sur le signal

Le blanc ne s'y lit qu'à 3,3:1 : refusé.

CHF 149.–

Oui

Le signal en texte, à son cran profond

Sur le papier, pour un prix, un lien, le prénom du bonjour : 5,9:1.

Commencer

Oui

Les actions sont à l'encre

Jamais un bouton au signal, le bouton d'appel du site compris.

clay-500 · #C2723F

L'argile, la matière

Elle reste le second ton des icônes et la matière des illustrations, la mascotte de Nora comprise.

PayéEn attenteEn retardInformationBrouillon

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.

Typographie

Forum pour la voix, Karla pour le reste

Deux familles. La hiérarchie vient de la taille, pas de la graisse.

Forum

--font-display

Pilotez 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-sans

Toute 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 suisse
text-5xl · 64pxVotre ERP cloud suisse
text-4xl · 48pxVotre ERP cloud suisse
text-3xl · 36pxVotre ERP cloud suisse
text-2xl · 28pxVotre ERP cloud suisse
text-xl · 22pxVotre ERP cloud suisse
text-lg · 18pxVotre ERP cloud suisse
text-md · 16pxVotre ERP cloud suisse
text-base · 15pxVotre ERP cloud suisse
text-sm · 14pxVotre ERP cloud suisse
text-xs · 12pxVotre ERP cloud suisse
text-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.

Espace et formes

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

space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-728px
space-832px
space-1040px
space-1248px
space-1664px
space-2080px
space-2496px
space-32128px

Les rayons

Contrôles10px
Cartes14px
Panneaux20px
Surfaces de tête28px
Pastilles et avatars999px

Les ombres

shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

Le focus

Un anneau au signal autour du champ actif.

Motifs

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.

Icônes

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

Elles signent le site. L'ERP et la caisse utilisent Lucide, l'app mobile a son propre jeu.

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.

Illustrations

Quatre scènes isométriques

Une scène par secteur, pour le site.

Jetons

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`	`#141414`16,7:1	`#FFFDF8`18,1:1
`--text-secondary`	`#524B41`7,8:1	`#BFB5A4`9,1:1
`--text-tertiary`	`#968C7C`3:1	`#968C7C`5,6:1
`--text-disabled`	`#BFB5A4`1,8:1	`#524B41`2,1:1
`--text-inverse`	`#FFFDF8`	`#141414`
`--text-brand`	`#AA3700`5,9:1	`#FF8D64`8,1:1
`--text-link`	`#81300F`8,1:1	`#FF8D64`8,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