RingUp / Bibliothèque d’interfaceTokens JSON

01 / LE SOCLE RINGUP

Le design system RingUp.

Une identité commune. Des gestes simples, de la cour au ring.

Version 10.0
RINGUP / DESIGN SYSTEM 8.0

Avant le ring,
tout se prépare.

Un espace calme pour valoriser les chevaux et accompagner chaque présentation.

Une plateforme, plusieurs haras.
Une même exigence de présentation.
Agafay, photographié de profil dans le document du haras
LOT 476 / VENTE DE NOVEMBRE

Agafay

Saint des Saints × Ramina

Sélection du haras
Présentation confirméeUne information partagée, au bon moment.
LA DIRECTION

Des tons naturels. Une navigation légère. Le cheval au premier plan.

Inspiration : Nestly / BayFi Studio ↗
01

La marque rassemble

RingUp identifie la plateforme. Le haras actif conserve son nom dans l’espace de travail.

02

L’action reste évidente

Un vert profond, une hiérarchie nette et des commandes confortables au toucher.

03

Le statut se lit

Chaque couleur est accompagnée d’un libellé ou d’une icône. Rien ne dépend du vert seul.

02 / IDENTITÉ

Un symbole, tous les haras.

Le R-cheval et son lettrage composent une identité commune aux deux langues.

Télécharger le logo
Logo RingUp sur fond clair
Logo RingUp ivoire sur fond forêt
Monogramme RingUp

Les marges de protection sont intégrées aux SVG. Ne pas déformer le logo ni remplacer son lettrage. Dans l’application, le logo du haras reste distinct de celui de RingUp.

03 / COULEURS

Olive, sauge et surfaces lumineuses.

La marque RingUp conserve son vert forêt. Les actions et surfaces reprennent l’olive et la sauge de la référence Nestly.

Cliquer une couleur pour copier son code

Les rôles dans l’interface

Surfaces, textes et interactions

Contrastes contrôlés

Consulter les 19 contrôles

Le cuivre souligne. Il ne pilote pas.

Le cuivre #B18461 accompagne la marque et les détails décoratifs. Pour les petits textes, utiliser sa variante sombre #795337.

Coup de cœur du harasFavori personnel

Deux intentions distinctes, deux icônes et deux libellés.

04 / TYPOGRAPHIE & GRILLE

Manrope, une écriture plus légère.

Manrope remplace Inter pour retrouver les formes géométriques et la finesse des captures. Police intégrée localement, titres à 400 et informations métier à 400–500.

Manrope variable · 400–600
Aa

Agafay, lot 476.
Every presentation matters.

Éé · Àà · Œœ · 0123456789 · € £
PAGE / 36 · 400Préparer la vente
SECTION / 20 · 400Les chevaux du haras
CORPS / 14 · 400Retrouvez les demandes et les présentations du jour.
LIBELLÉ / 12 · 600VENTE DE NOVEMBRE · DEAUVILLE
DONNÉES / TABULAIRES476   10:42   45 000 €   1,65 m

Espacements

Échelle commune : 4 / 8 / 12 / 16 / 24 / 32 px

Des formes accueillantes

Champ · 12
Panneau · 20
Cadre · 28

Un cadre constant

Navigation
Horizontale
Contrôle tactile
44 px min.
Marge extérieure
16–48 px
Icône utilitaire
20 px

05 / COMPOSANTS

Des composants à manipuler.

Des exemples interactifs pour vérifier les états, le clavier et les retours d’action.

Démonstration locale

Boutons & actions

Une action principale par contexte

Formulaire de réaction

Équipe haras
Visible au propriétaire autorisé. Les notes internes restent séparées.

Sélections & préférences

Vue de la liste

Vue Liste sélectionnée dans ce démonstrateur.

Canaux de notification

Ces contrôles illustrent leur comportement visuel ; les trois canaux prévus restent dans le périmètre de l’application.

Catalogue & tableau

Recherche, tri et densité. Présentation suivie pour un courtier identifié.

Courtier : Alex Martin · exemple
ChevalDisponibilitéPrésentationVisites / venteAction

06 / ÉTATS MÉTIER

Un sens précis derrière chaque état.

La disponibilité du cheval, sa présentation et les appréciations sont trois informations différentes.

Présentation à un courtier

Non vuEn attenteVu

État par cheval, courtier et vente. Une demande « full show » n’est pas une présentation confirmée.

Disponibilité du cheval

DisponibleIndisponibleÀ renseigner

L’indisponibilité conserve les visites passées et s’affiche avec une explication, par exemple « préparation au ring ».

Réactions & sélections

+ Aime bien= Moyen− Pas aimé
Coup de cœur du harasFavori du courtier

Le coup de cœur est choisi par le responsable. La notation et les favoris du courtier lui appartiennent.

Visites répétées

2
Deuxième visiteAlex Martin revient voir Agafay.

Comptage sur toute la vente. Alerte à la deuxième puis à la troisième visite, avec le nom et le lot concernés.

Chargement, absence de données et erreurs

Des états utiles, sans ambiguïté
Chargement des présentations…

Conserver le contexte et annoncer le chargement une seule fois.

Aucune présentation

Les présentations confirmées apparaîtront ici.

Enregistrement impossible

Vos informations sont conservées. Réessayez dans un instant.

Haras · 17 avant le passage

Préparez votre cheval. Une nouvelle alerte intervient à 10.

Courtier · 8 avant le passage

Votre favori approche du ring. Uniquement les chevaux en favori.

07 / ÉCRANS D’APPLICATION

Le système prend vie.

Quatre profils, une identité. Données de démonstration, sans connexion à Arqana. Ouvrir le démonstrateur ↗

Profils de démonstration

Les employés gèrent les demandes, présentations, réactions, notes et disponibilités. Le responsable gère aussi les fiches, coups de cœur et données financières.

Fiche cheval

Ordinateur & mobile
Agafay, cheval bai foncé, dans l’exemple fourni par le harasCoup de cœur du haras

LOT 476

Agafay

Saint des Saints × Ramina

Naissance
22/04/2023
Sexe
Hongre
Robe
Bai foncé
Taille
1,65 m
Scope disponibleRepository disponible

Piroplasmose : positif, selon la fiche fournie.

La disponibilité d’un examen ne constitue pas un résultat médical.

En déplacement

Écran étroit
RingUp

ESPACE COURTIER

Mes favoris

Vente de novembre · exemple

Agafay approche

8 chevaux avant son passage.

476
AgafaySaint des Saints × Ramina
Aime bien

Rappel application, push et email.

ChevauxFavorisCompte

08 / RESSOURCES

Prêt à servir de référence.

Version 10.0 · sources, tokens et règles d’usage pour intégrer cette direction dans l’application.

Direction Nestly, identité RingUp

Fond dégradé sauge vers blanc cassé, panneaux translucides et contours blancs, navigation centrale en capsule, grille asymétrique à trois colonnes et photo verticale avec cartouche de verre. Le logo et les couleurs RingUp sont conservés. Les compositions sont adaptées aux usages des haras, sans reprendre les visuels ou le logo Nestly.

Un socle métier conservé

Identité R-cheval, palette forêt / ivoire / cuivre, états de présentation, favoris distincts des coups de cœur, contexte multi-haras et exemples pour les différents profils.

Catalogue local : les interactions sont simulées et réinitialisées au rechargement. Les contrôles d’accès, les notifications et la connexion Arqana seront intégrés à l’application. La charte ne vaut pas validation de ces fonctions.

DÉMONSTRATION

Confirmer une présentation

476
AgafayAlex Martin · courtier
Démonstration locale · aucune notification envoyée.
Guide du design system ↗