Ressources et tokens

Télécharger

Fichier	Format	Usage
Logo AL-E (encre)	SVG	Fonds clairs
Logo AL-E (clair)	SVG	Fonds sombres
Logo compact (encre) · clair	SVG	Petits formats
Monogramme AL (encre) · clair	SVG	Icône, avatar
Icône d’application	PNG 512 × 512	Réseaux, annuaires
Image de partage	PNG 1200 × 630	Aperçu des liens partagés
Tous les tokens	JSON	Variables CSS de la landing et de l’application

Toutes les variables

Relevées dans les feuilles de style en ligne par scripts/extraire_tokens.py : 171 variables pour la landing, 125 pour l’application (variables internes du framework CSS masquées).

Application

Couleurs 39

Variable	Clair	Sombre
--accent	var(--color-blue-500)
--accent-soft	color-mix(in srgb, var(--color-blue-500) 12%, transparent)	color-mix(in srgb, var(--color-blue-500) 20%, transparent)
--ale-steel	var(--color-blue-500)
--assistant-accent	#3d9e8c
--assistant-accent-deep	#2f7d6f
--bloub-c	#0a0a0c	#f5f2ec
--bloub-o	#f9f9f9	#0a0a0c
--bloub-yeux	#2b8fe0	#0a0a0c
--border	var(--color-border)	var(--color-dark-border)
--border-strong	#d6d0c4	#464a5c
--color-blue-100	#aacadf
--color-blue-300	#6baac8
--color-blue-500	#3d7fae
--color-blue-700	#2a5a7e
--color-blue-900	#1a3a54
--color-border	#e8e4dc
--color-cream	#f8f6f1
--color-danger	#e8533a
--color-dark-bg	#1d1f2c
--color-dark-border	#353848
--color-dark-muted	#969db1
--color-dark-surface	#252836
--color-dark-text	#f0ede8
--color-info	#6baac8
--color-ink	#1a1a18	var(--color-dark-text)
--color-muted	#9a9589
--color-success	#3d9e8c
--color-surface	#fff
--color-warning	#f0c94a
--stage	var(--color-blue-500)
--stage-analysed	#2f6db5
--stage-designed	#1c9a96
--stage-mailed	#12a06a
--stage-scored	#2a8bb0
--stage-scraped	#8a97ab
--surface	var(--color-surface)	var(--color-dark-surface)
--surface-2	#f3f0ea	#2c2f3e
--text-muted	var(--color-muted)	var(--color-dark-muted)
--text-soft	#4a4842	#c9c6c0

Typographie 15

Variable	Clair	Sombre
--font-body	"DM Sans", sans-serif
--font-display	"DM Sans", sans-serif
--font-mono	"DM Mono", monospace
--text-13	.8125rem
--text-2xl	1.5rem
--text-2xs	.6875rem
--text-3xl	2rem
--text-4xl	2.5rem
--text-5xl	3.5rem
--text-base	1rem
--text-lg	1.125rem
--text-md	.9375rem
--text-sm	.875rem
--text-xl	1.25rem
--text-xs	.75rem

Espacements et tailles 16

Variable	Clair	Sombre
--control-h	40px
--control-h-sm	32px
--radius-full	9999px
--radius-lg	14px
--radius-md	10px
--radius-sm	6px
--radius-xl	20px
--space-1	4px
--space-10	40px
--space-12	48px
--space-2	8px
--space-3	12px
--space-4	16px
--space-5	20px
--space-6	24px
--space-8	32px

Ombres et effets 3

Variable	Clair	Sombre
--focus-ring	0 0 0 3px color-mix(in srgb, var(--color-blue-500) 22%, transparent)	0 0 0 3px color-mix(in srgb, var(--color-blue-300) 30%, transparent)
--shadow-card	0 1px 2px #1a1a180a, 0 1px 1px #1a1a1805	0 1px 2px #0000004d
--shadow-pop	0 12px 32px -8px #1a1a182e, 0 2px 6px #1a1a180f	0 16px 40px -8px #0000008c, 0 2px 8px #0000004d

Mouvement 9

Variable	Clair	Sombre
--dur	.2s
--dur-fast	.15s
--duration-fast	.25s
--duration-medium	.35s
--duration-quick	.15s
--duration-very-slow	.5s
--ease-bounce	cubic-bezier(.34, 1.36, .64, 1)
--ease-out	cubic-bezier(.22, 1, .36, 1)
--ease-smooth-out	cubic-bezier(.22, 1, .36, 1)

Autres 43

Variable	Clair	Sombre
--ale-violet	#8b5cf6
--app-bottom	0px
--bg	var(--color-cream)	var(--color-dark-bg)
--content-max	1280px
--cw	200px
--edge	#2a2438
--edge-hi	#8f7db5
--edge-lo	#0a0810
--engrave	#050308
--gap	12px
--glow	#8ce1ffbf
--glow-op	.5
--glow-spin	.45
--half	calc(var(--thumb) / 2)
--m-hi	#7d6aa8
--m-lo	#141018
--m-mid	#2f2740
--overlay	#1a1a186b	#08090e99
--pos	calc(var(--half) + (100% - var(--thumb)) * var(--p) / 100)
--ptr	0px
--rail-w	72px
--row-h	56px
--safe-bottom	env(safe-area-inset-bottom,0px)
--safe-left	env(safe-area-inset-left,0px)
--safe-right	env(safe-area-inset-right,0px)
--safe-top	env(safe-area-inset-top,0px)
--scale-medium	.97
--side-active	#f0ede81f
--side-hover	#f0ede80f
--side-line	#f0ede81a
--sidebar-w	240px
--spacing-unit	4px
--state	var(--color-blue-500)
--story-analysed	var(--stage-analysed,#06b6d4)
--story-designed	var(--stage-designed,#f0883e)
--story-mailed	var(--stage-mailed,#ec4899)
--story-scored	var(--stage-scored,#3d9e8c)
--story-scraped	var(--stage-scraped,#8b5cf6)
--tabbar-h	64px
--text	var(--color-ink)	var(--color-dark-text)
--thumb	22px
--tone	var(--color-blue-500)
--topbar-h	56px

Landing

Couleurs 30

Variable	Clair	Sombre
--accent	#3d7fae	#aacadf
--accent-border	#3d7fae40	#aacadf47
--accent-foreground	#3d7fae	#aacadf
--accent-hover	#538bb7	#c5d8e8
--accent-light	#3d7fae1a	#aacadf1f
--back-clouds-color	#aacadf
--background	#f8f6f1	#343642
--bloub-c	#0a0a0c	#f5f2ec
--bloub-o	#f9f9f9	#0a0a0c
--bloub-yeux	#2b8fe0	#0a0a0c
--blue-grey	#6597bf
--border	#3d7fae1f	#969db133
--border-med	#3d7fae38	#969db152
--charcoal		#5c5d66
--charcoal-2		#494b55
--clouds-color	#f3fdff
--cream	#f8f6f1	#343642
--cream-dark	#f0ede6	#494b55
--dusty-denim	#538bb7
--ink	#1a1a18	#f5f2ec
--ink-muted	#243a4b	#c8cdd8
--ink-subtle	#304454	#969db1
--lavender-grey		#969db1
--muted	#f0ede6	#494b55
--muted-foreground	#6597bf	#c8cdd8
--shadow-grey		#1d1f2c
--spot-color	#959db1
--stars-color	#fff
--steel-blue	#75a0c3
--steel-blue-2	#3d7fae

Espacements et tailles 19

Variable	Clair	Sombre
--circle-container-diameter	3.375em
--circle-container-offset	calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1)
--circle-transition	.3s cubic-bezier(0, -.02, .35, 1.17)
--container-height	2.5em
--container-light-bg	#3d7fae
--container-night-bg	#1d1f2c
--container-radius	6.25em
--container-width	5.625em
--distance-base	8px
--distance-large	30px
--distance-medium	12px
--distance-micro	4px
--distance-small	6px
--radius-lg	10px
--radius-md	8px
--radius-sm	4px
--radius-xl	14px
--shake-distance	6px
--toggle-size	16px

Ombres et effets 10

Variable	Clair	Sombre
--blur-large	8px
--blur-medium	3px
--blur-small	2px
--check-blur-dur	.5s
--check-blur-from	10px
--neu-bg	#ebe7df	#2b2b31
--neu-ease	cubic-bezier(.32, .72, 0, 1)
--neu-shadow-dark	#b0a89799	#0000008c
--neu-shadow-light	#fffffff2	#ffffff0d
--text-swap-blur	2px

Mouvement 38

Variable	Clair	Sombre
--check-bob-dur	.5s
--check-ease-bob	cubic-bezier(.34, 1.35, .64, 1)
--check-ease-opacity	cubic-bezier(.22, 1, .36, 1)
--check-ease-out	cubic-bezier(.22, 1, .36, 1)
--check-ease-path	cubic-bezier(.22, 1, .36, 1)
--check-ease-rotate	cubic-bezier(.22, 1, .36, 1)
--check-opacity-dur	.5s
--check-path-delay	80ms
--check-path-dur	.5s
--check-rotate-dur	.5s
--check-rotate-from	80deg
--check-y-amount	40px
--duration-fast	.25s
--duration-medium	.35s
--duration-micro	80ms
--duration-quick	.15s
--duration-slow	.4s
--duration-stagger	40ms
--duration-very-slow	.5s
--ease-bounce	cubic-bezier(.34, 1.36, .64, 1)
--ease-bounce-strong	cubic-bezier(.34, 3.85, .64, 1)
--ease-in-out	ease-in-out
--ease-linear	linear
--ease-out	ease-out
--ease-smooth-out	cubic-bezier(.22, 1, .36, 1)
--learn-ease	cubic-bezier(.22, 1, .36, 1)
--learn-in	.35s
--learn-out	.35s
--learn-shift	2px
--learn-spread	8deg
--revert-dur	.28s
--shake-dur-a	80ms
--shake-dur-b	60ms
--shake-ease	cubic-bezier(.22, 1, .36, 1)
--shake-overshoot	4px
--text-swap-dur	.15s
--text-swap-ease	ease-in-out
--text-swap-translate-y	4px

Autres 17

Variable	Clair	Sombre
--foreground	#1a1a18	#f5f2ec
--gunmetal		#343642
--input	#3d7fae2e	#969db140
--moon-bg	#c4c9d1
--pale-sky	#aacadf
--popover-foreground	#1a1a18	#f5f2ec
--primary	#3d7fae	#aacadf
--primary-hover	#538bb7	#c5d8e8
--revert-hold	3s
--ring	#3d7fae	#aacadf
--scale-large	.96
--scale-medium	.97
--scale-small	.98
--scale-tiny	.99
--sun-bg	#ecca2f
--sun-moon-diameter	2.125em
--transition	.5s cubic-bezier(0, -.02, .4, 1.25)

Tenir à jour

Après un déploiement de la landing ou de l’application, relancez l’extraction puis reconstruisez la documentation : les nuanciers, les tableaux et les spécimens se mettent à jour d’eux-mêmes.