01 — Logo lockups
Caissa
Caissa
Caissa
02 — Palette (HEX)
Surface
#FFFFFF
50
#FAFAFE
100
#F4F1FF
200
#E7E6F0
300
#CFC9B8
400
Ink
#E2E8F0
100
#94A3B8
300
#5e6378
500
#2e1f6f
700
#1f1d4f
800
#0c0a2b
900
Primary (Caissa purple)
#F4F1FF
50
#E9E2FF
100
#A99BE5
300
#4c3ba8
500
#2e1f6f
700
#1a1057
900
Brand (Moroccan gold)
#FFF8E5
50
#FEF6DD
100
#F4E2A8
200
#E5C77A
300
#d6a44a
500
#b08438
700
#7c5a14
900
Accent (pastels)
#3D5BFF
blue
#FF7A45
orange
#5BD17B
green
#FFD93C
yellow
#FFCFC2
peach
#B6E8C5
mint
#BFD4FF
sky
#FFC2D8
rose
#D7C2FF
lilac
Status
#16A34A
good
#D97706
warn
#DC2626
bad
#2563EB
info
#94A3B8
neutral
03 — Typography (responsive clamp() scale)
display-1 · 44–96pxCaissa pilote votre commerce.
display-2 · 36–72pxCaissa pilote votre commerce.
display-3 · 30–56pxCaissa pilote votre commerce.
h1 · 26–40pxCaissa pilote votre commerce.
h2 · 22–32pxCaissa pilote votre commerce.
h3 · 18–24pxCaissa pilote votre commerce.
body-lg · 16–18pxCaissa pilote votre commerce.
body · 14–16pxCaissa pilote votre commerce.
body-sm · 13–14pxCaissa pilote votre commerce.
caption · 12–13pxCaissa pilote votre commerce.
label · 10–11pxCatégorie · Label
tiny · 9–10pxCaissa pilote votre commerce.
04 — Spacing (4px baseline)
1 · 4px2 · 8px3 · 12px4 · 16px6 · 24px8 · 32px12 · 48px16 · 64px24 · 96px
05 — Radii (app vs marketing)
App (industrial)
none · 0xs · 2sm · 3md · 5lg · 5xl · 5full · 9999
Marketing (Caissa default)
none · 0xs · 6sm · 10md · 14lg · 18xl · 242xl · 323xl · 48full · 9999
06 — Shadow ramp
none0 0 #0000…
xs0 1px 1px 0 rgba(12,10,43,0.04)…
sm0 1px 2px 0 rgba(12,10,43,0.05), 0 1px 3…
md0 4px 6px -1px rgba(12,10,43,0.07), 0 2p…
lg0 8px 24px -8px rgba(76,59,168,0.18)…
xl0 16px 40px -12px rgba(76,59,168,0.24)…
2xl0 24px 60px -16px rgba(76,59,168,0.30)…
innerinset 0 2px 4px 0 rgba(12,10,43,0.06)…
glow0 0 0 4px rgba(214,164,74,0.18)…
07 — Motion (timing + easing)
Duration
- fast120ms
- base200ms
- slow320ms
- sloth480ms
- glacial800ms
Easing
- standard
cubic-bezier(0.4, 0.0, 0.2, 1) - enter
cubic-bezier(0.0, 0.0, 0.2, 1) - exit
cubic-bezier(0.4, 0.0, 1, 1) - spring
cubic-bezier(0.34, 1.56, 0.64, 1) - swift
cubic-bezier(0.55, 0.085, 0.68, 0.53)
08 — Z-index scale
base · z-0sticky · z-10dropdown · z-20header · z-30popover · z-40modal · z-50toast · z-60tooltip · z-70
09 — Shape gallery (24)
Scallop
Wave
Slope
Zigzag
Jagged
10 — Pattern gallery
dots
grid
diagonal
rings
wavy
noise
11 — Avatar gallery (real customer photos)
SHNPhotos générées via BFL Flux Pro 1.1 lors de la session 2026-05-06. Stockées sous /img/landing/.
12 — Illustration gallery
13 — Component primitives
Buttons
Pills
NeutralBrand · GoldPrimary · PurpleGoodWarnBadInfo
1 400+
Commerces marocains
60s
Pour démarrer
0%
Commission sur ventes
14 — Composition mock (all tokens together)
Essai gratuit · 30 jours
Une caisse SaaS adaptée à votre métier.
Restaurant, café, pharmacie, salon, retail, vétérinaire — Caissa configure automatiquement votre commerce.
1 400+
Commerces
60s
Démarrer
24+
Métiers
0%
Commission
Caissa brand maquette · 24 SVG shapes hand-drawn · tokens insrc/branding/tokens.ts