01 — Brand

Design System Talyco

Référence visuelle unique pour tous les produits Talyco : site marketing, application, reporting, sales decks. Reproduis ces éléments tels quels pour garder la cohérence.

Logo

Talyco

Tagline

L'OS qui pilote vos admissions.

Ton de voix

• Direct, assumé, pas corporate
• Preuve > promesse
• Parle au CEO / DG / direction

02 — Couleurs

Palette

Nuances grises

#f8fafc

#f1f5f9

#e2e8f0

#cbd5e1

#94a3b8

#475569

Gradients signature

navy → navy-light

green → green-dark

hero gradient

03 — Typographie

Typographie

Titres

Manrope

400 / 500 / 600 / 700 / 800

Texte courant

Inter

300 / 400 / 500 / 600 / 700 / 800

Mono / tags

JetBrains Mono

400 / 500

H1 · Pilotez vos admissions.

Manrope 800 · 3rem · tracking -0.025em

H2 · Le système qui remplace 6 outils

Manrope 700 · 2.25rem

H3 · Vos équipes arrêtent de copier-coller

Manrope 700 · 1.5rem

H4 · Un seul endroit, une seule vérité

Manrope 700 · 1.25rem

Paragraphe standard en Inter. Talyco OS centralise prospects, admissions, parcours candidats et reporting direction dans une seule plateforme.

Inter 400 · 1rem · leading relaxed

Texte secondaire / légende, utilisé pour les mentions et sous-titres discrets.

Inter 400 · 0.875rem · grey-500

mono · uppercase · tag section

JetBrains Mono 500 · 0.75rem · uppercase · tracking widest

04 — Boutons

Boutons & CTA

Primaire (navy)

Demander une démo Démo — grand

Accent (green)

Voir la démo Démo live

Secondaire (outline)

En savoir plus Lien discret

Text / inline

Lire le use case Annuler

05 — Badges & tags

Badges

NOUVEAU BETA v2.1 URGENT ROADMAP PREMIUM

06 — Cards

Cards

Feature card

Bordure + hover navy. Utilisée pour les grilles de fonctionnalités.

Highlight card

Gradient navy, icône accent vert. Pour mettre en avant un point fort.

RECOMMANDÉ

Pricing card

Bordure verte, badge flottant. Utilisée dans la page Tarifs.

499€/mois

CB

« On a remplacé 6 outils par Talyco. Gain de temps immédiat pour l'équipe admissions, et enfin un reporting CEO fiable. »

Claire B. · Directrice admissions, école partenaire

07 — Formulaires

Formulaires

Nom

Email pro

Rôle

États

Format d'email invalide

✓ Email valide

08 — Tables

Tables

Programme	Candidats	Admis	Taux conv.	Tendance
GEMA Grande École	1,247	892	71.5%	+5.2%
ESI Informatique	856	623	72.8%	+3.1%
IA Intelligence Artificielle	432	298	69.0%	-1.8%
Total	2,535	1,813	71.5%	+3.2%

09 — KPI Cards

KPI Cards

Candidatures

1 284

+23% vs N-1

Taux conversion

34,2%

+4,1 pts

CAC

187€

+12€ vs N-1

10 — Visuels dashboard

Dashboard mock

talyco.app/reporting

Avril 2026

Candidatures

1 284

+23% vs N-1

Taux conversion

34,2%

+4,1 pts

CAC

187€

+12€ vs N-1

11 — Alertes

Alertes

Succès

Le rapport a été généré avec succès.

Attention

3 fiches candidat sont incomplètes.

Erreur

Impossible de se connecter au serveur.

Information

La campagne de recrutement 2025 est ouverte.

12 — Icônes

Icônes · Lucide

Librairie unique : lucide. Toujours en stroke 1.5 ou 2.

target

zap

trending-up

users

bar-chart-3

calendar

mail

msg-square

check-circle

sparkles

rocket

shield-check

eye

bot

database

workflow

13 — Élévation

Ombres & radius

shadow-sm

shadow-lg

shadow navy/20

shadow green/30

md

lg

xl

2xl

full

14 — Espacements

Espacements

space-1

0.25rem

space-2

0.5rem

space-3

0.75rem

space-4

1rem

space-6

1.5rem

space-8

2rem

space-12

3rem

space-16

4rem

15 — Catégories

Programmes & Campus

Programmes

GEMA ESI IA Cyber BIM PGE MBA BBA BTS MSc DBA

Campus

Paris Nice Thionville Online

16 — Report header

En-tête de rapport

Rapport de Performance

Campagne de recrutement 2025 — Paris

01/01/2025 — 31/03/2025

17 — Équipe

Fondateurs

Photos hébergées sur S3 public. Style card avec ring au hover.

Henri Chabbert

Marketing & Stratégie

+10 ans d'expérience en acquisition. A piloté les stratégies d'acquisition de marques leaders dans l'éducation.

Roland Basset Chercot

Data & Technologie

CTO. Architecte de Talyco OS. Expert en data engineering et automatisation.

Jean-Marin Pitrat

Sales & Business

Head of Sales. Expert en développement commercial et transformation des ventes.

URL pattern des photos : https://talyco-public.s3.eu-west-3.amazonaws.com/photos/{prenom}.jpeg

18 — Logos clients

Écoles & Clients

Logos hébergés sur S3 public.

Bucket : https://talyco-public.s3.eu-west-3.amazonaws.com/logos/ · noms non uniformes (majuscules / sans extension / .jpeg / .svg). Toujours vérifier l'URL exacte dans design-system.md.

19 — Intégrations

Logos Intégrations

Acquisition & Ads

Assets

Logos et images hébergés sur le S3 public Talyco. Ne pas les dupliquer.
https://talyco-public.s3.eu-west-3.amazonaws.com/logos/{name}.png

logos/talyco.png

favicon.svg (inline)

T

Variantes avatar

21 — Usage

Comment utiliser

Partager à un LLM

Donne le design system complet à Claude, GPT, Cursor, Copilot… Plus performant que d'envoyer le HTML rendu : c'est du markdown structuré (~10 KB).

Aussi accessible directement par URL : /showroom/design-system.md · /llms.txt

Repo design system

git@github.com:talyco/taly-design-system.git

Source unique de vérité : tokens (tokens/*.json) et variables CSS (css/variables.css).

Import CSS

/* Importer les variables dans n'importe quel projet */
@import 'taly-design-system/css/variables.css';

/* Utiliser les variables */
.my-component {
  font-family: var(--taly-font-sans);
  color: var(--taly-text-primary);
  background: var(--taly-bg-page);
  border: 1px solid var(--taly-border);
  border-radius: var(--taly-radius-lg);
  box-shadow: var(--taly-shadow-navy);
}

Tokens JSON (MUI, React...)

// Importer les tokens dans un theme MUI
import colors from 'taly-design-system/tokens/colors.json';
import typo from 'taly-design-system/tokens/typography.json';

const theme = createTheme({
  palette: { primary: { main: colors.brand.navy } },
  typography: { fontFamily: typo.fontFamily.sans },
});