Paper, ink and signal
The design system of Neoservice AI and Neoffice: colour, typography, logos and motion for our interfaces, our websites and our documents.
One house, one product
Neoservice AI is the house, Neoffice its product: the all-in-one Swiss ERP. The trade editions follow as “neo” plus the trade.
The brand is Swiss, precise and reassuring, with the warmth and calm of a well-made product, never the cold blue of enterprise software.
The tone
The language
Swiss French first. Amounts in Swiss francs: CHF 149.–, CHF 48 250.
The form of address
Always the polite form. We speak to clients about their own company: “Run your business.”
The tone
Confident, pragmatic, calm: no surprises, no commitment, 100% Swiss, all-in-one.
Case
Sentences in lower case, eyebrows in spaced capitals, no emoji in the interface.
Three logos, one ink
The logos are vectorised and always in ink. Their outlines are never retouched, and they are drawn with all their shapes.
On light
neoffice
“neo” solid, “ffice” outlined. The product: the all-in-one Swiss ERP.
On light
neoservice
“neo” solid, set apart by a light halo; “service”, a light interior inside an ink outline. The house.
On light
Neoservice AI
The AI comes out of the word: the upside-down v becomes the Λ, the bar of the i becomes the I. It sits on the right, at the size of the word.
The rules
- Always in ink, the AI included. Colour only appears in motion.
- The AI on the right, at the size of the word: never smaller, never set lower.
- All the shapes of the file: without its halo, “neo” becomes a block.
- On dark, the ink becomes paper and the light parts take the colour of the background.
Calm and Swiss: no bounce
Short transitions, 120 to 320 ms, on soft curves. Entrances fade in, with a short slide. Every movement respects the “reduce motion” setting: the final state is shown instead.
Motion 9 · restrained
Together, then the backflip
- The v and the bar of the i fill with ink within their outline.
- They slide together behind the end of the word, which stays whole.
- Only the v does a backflip and becomes the Λ.
- The bar moves closer and settles against it.
Played once on loading, it stops on the complete logo.
Motion 4
The header that folds away
On scroll, the logo folds away letter by letter from the end of the word, until only “AI” remains. It follows the reading and never plays on its own.
Motion 3
The family
“neo” stays, the trade changes every two seconds.
The curves
--ease-standardMost transitions. cubic-bezier(0.2, 0, 0, 1)--ease-emphasizedA gesture that sets off. cubic-bezier(0.3, 0, 0, 1)
Hover and press
On hover, a slight change of background or border. On press, a little darker, and buttons shrink to 98%.
The signal lives on the background
Paper carries the page, ink carries the weight, and the signal is the only accent: a field, a tint, an active state, the gesture of a movement.
#FAF3EA#FFFFFFPaper
A warm cream for the page, white for cards. Never a pure white page, never pure black as a background.
#141414Ink
The text, the logos and all actions: the solid button is black. On dark, it becomes paper.
#F55D1AThe signal
A field, a tint, a dot, an active state, a progress bar. What sits on it is in ink.
The signal scale
- 50
#FFEAE2tint - 100
#FFD1C1dot - 200
#FFB599 - 300
#FF8D64 - 400
#F55D1Athe signal - 500
#D54600carries nothing - 600
#AA3700text on paper - 700
#81300F
Ink on the signal
Ink reads at 5.7:1 on it.
No light text on the signal
White reads at only 3.3:1 on it: not allowed.
The signal as text, at its deep step
On paper, for a price, a link, the first name in the greeting: 5.9:1.
Actions are in ink
Never a button in the signal, the site’s call button included.
clay-500 · #C2723FClay, the material
It remains the second tone of the icons and the material of the illustrations, Nora’s mascot included.
Statuses
Earthy tones, always with a word or a dot, never colour alone. Blue is not a brand colour: a discreet slate, for information only.
No colour per product
The trades are told apart by their name. Colours that differ only in hue merge for a colour-blind reader.
Forum for the voice, Karla for the rest
Two families. The hierarchy comes from size, not weight.
Forum
--font-displayRun your business
CHF 48 250
A flared serif, in a single weight. Headings, the greeting, panel headers and large figures.
Karla
--font-sansAll your Swiss invoicing in one tool.
- Aa 1'027400
- Aa 1'027500
- Aa 1'027600
- Aa 1'027700
Eyebrow
A humanist grotesque, with tabular figures. The interface, body text, labels and data. Eyebrows: Karla, in spaced capitals.
The scale
text-6xl · 84pxYour Swiss cloud ERPtext-5xl · 64pxYour Swiss cloud ERPtext-4xl · 48pxYour Swiss cloud ERPtext-3xl · 36pxYour Swiss cloud ERPtext-2xl · 28pxYour Swiss cloud ERPtext-xl · 22pxYour Swiss cloud ERPtext-lg · 18pxYour Swiss cloud ERPtext-md · 16pxYour Swiss cloud ERPtext-base · 15pxYour Swiss cloud ERPtext-sm · 14pxYour Swiss cloud ERPtext-xs · 12pxYour Swiss cloud ERPtext-2xs · 11pxYour Swiss cloud ERP
Cal Sans is used only for the logos, which are vectorised. The system mono is used for identifiers, IBANs and QR strings.
A 4 px grid
Containers up to 1280 px. Fine, warm borders before shadows, and restrained shadows tinted brown.
Spacing
Radii
- Controls
10px - Cards
14px - Panels
20px - Header surfaces
28px - Pills and avatars
999px
Shadows
shadow-xsshadow-smshadow-mdshadow-lgshadow-xl
Focus
A signal ring around the active field.
The warmth comes from the paper
No blue-violet gradients, no stock photos.
The gradient paper
Cream, with a glow of the signal at the top right: the default background.
The column rules
Paper ruled with fine vertical lines, behind the content.
The grid
8.5 rem squares that fade out under the headers.
The auroras
Two soft glows: the signal on the left, sage on the right.
The title gradient
From ink to the signal, then back to ink.
Espresso
The warm dark, for Nora and night views.
Hand-drawn icons
Streamline Freehand Duotone: the main stroke follows the text colour, the second tone is clay, fixed in the file. They are never recoloured.
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
The assistant’s mascot is an illustration, not an icon: never recoloured, never below 40 px, never in a row of icons.
Four isometric scenes
One scene per sector, for the website.
Tokens, light and dark
Every value comes from the design system, in two layers: the scales, then the roles that refer to them.
The scales
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
Ink and sand
- 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
Paper
- paper-bright
#FFFDF8 - paper-cream
#FAF3EA
Clay
- clay-50
#FAEFE6 - clay-100
#F3DECC - clay-200
#E9C5A4 - clay-300
#DDA479 - clay-400
#D68A59 - clay-500
#C2723F - clay-600
#A15A2E - clay-700
#7E4523
Success
- green-50
#E9F7EE - green-100
#CBEDD7 - green-500
#1F9D57 - green-600
#178347 - green-700
#11663A
Warning
- 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
The roles
For each text, its contrast on the page.
| Role | Light | Dark |
|---|---|---|
--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 |
Typography
- Families
--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
- Scale
--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
- Weights
--fw-light300--fw-regular400--fw-medium500--fw-semibold600--fw-bold700--fw-extrabold800
- Line heights
--leading-none1--leading-tight1.15--leading-snug1.3--leading-normal1.5--leading-relaxed1.65
- Tracking
--tracking-tighter-0.03em--tracking-tight-0.015em--tracking-normal0--tracking-wide0.02em--tracking-wider0.08em--tracking-caps0.14em
Space, radii, shadows and motion
- Spacing
--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
- Radii
--radius-xs4px--radius-sm6px--radius-md10px--radius-lg14px--radius-xl20px--radius-2xl28px--radius-pill999px
- Shadows
--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)
- Curves
--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)
- Durations
--duration-fast120ms--duration-base200ms--duration-slow320ms--duration-slower480ms