Visito
Design System v1.0← Landing page
Visito Design System

Design System & Style Guide

Composants, tokens visuels et identité de marque pour la plateforme Visito — visite médicale digitale B2B, Algérie.

Logo & Marque

Fond sombre (usage principal)

Visito
Visito
Visito

Fond clair (usage secondaire)

Visito
Visito
Visito

Favicon / icône seule

ANATOMIE DU MARK

Le mark Visito combine un réticule de précision médicale (anneau extérieur pointillé + anneau intérieur + noyau central + repères cardinaux) avec le wordmark en Instrument Serif. Le réticule évoque à la fois l'instrument de mesure et la cible — la rigueur scientifique appliquée à la visite médicale.

Palette de couleurs

Fonds — Couches de profondeur

--navy
#060E1A
--navy-mid
#0B1827
--navy-card
#0E1F33
--navy-raised
#112438

Azure clinique — Accent principal

--azure
#0EA5E9
--azure-dim
#0980B8
--azure-faint
rgba(14,165,233,0.08)
--azure-glow
rgba(14,165,233,0.18)

Émeraude santé — Accent secondaire

--emerald
#10B981
--emerald-dim
#0D9268
--emerald-faint
rgba(16,185,129,0.08)

Ambre laboratoire — Accent tertiaire

--amber
#F59E0B
--amber-faint
rgba(245,158,11,0.08)

Neutres

--white
#F0F4F8
--muted
#8EA2B8
--faint
#3A5068

Typographie

Display · --font-display

Instrument Serif — Google Fonts

Titres & headings
La visite médicale
enfin digitale
Comment fonctionne Visito ?
Touchez les professionnels de santé
La plateforme de référence · Algérie

UI · --font-ui

Outfit — Google Fonts

Corps de texte & UI
Le lien scientifique entre laboratoires et médecins — weight 300
Accédez à des données validées sur les compléments alimentaires — weight 400
Demander mon accès gratuit — weight 500 (CTA)
INSCRIPTION GRATUITE — weight 600

Mono · --font-mono

DM Mono — Google Fonts

Labels, codes, données
0 DZD · Toujours gratuit
Notre modèle · Pour les laboratoires
adresse@exemple.dz · Design System v1.0

Boutons

Variants

Tailles

Avec icônes

Badges & étiquettes

Couleurs

AzureÉmeraudeAmbreNeutre

Contextuels

Algérie · B2B · SantéPour les laboratoiresPour les médecinsPlateforme en lancement

Badge vérifié (signature)

Professionnel de santé vérifié

Tags inline

v1.0GratuitB2B

Cartes

Carte par défaut

Fond navy-card, border subtle, hover avec lift et glow.

default

Carte azure

Gradient azure subtil, border azure. Usage médecins & features principales.

v-card-azure

Carte ambre

Gradient ambre subtil, border ambre. Usage laboratoires & B2B features.

v-card-amber

Carte émeraude

Gradient émeraude subtil. Usage validation, succès, profils vérifiés.

v-card-emerald
Raised

Carte élevée

Navy-raised avec shadow. Usage modales, panneaux en avant-plan.

Badge Professionnel de santé vérifié

Professionnel de santé vérifié

Compte authentifié par Visito. Information médicale de qualité, sans publicité.

0 DZD
Toujours gratuit

Variantes inline

Professionnel de santé vérifié (large)Professionnel de santé vérifié (default)Professionnel de santé vérifié (small)

Formulaires

Labels de section

Notre modèle
Pour les laboratoires
Pour les médecins
Rejoindre Visito

Icônes & wrappers

lg · azure
md · amber
sm · emerald

Effets texte

Visito — La visite médicale digitale

Gradient animé azure → émeraude → azure · classe v-shimmer

Tokens CSS — référence rapide

--navy#060E1AFond principal
--navy-mid#0B1827Section alternée
--navy-card#0E1F33Fond de carte
--navy-raised#112438Carte élevée
--azure#0EA5E9Accent clinique
--emerald#10B981Accent santé
--amber#F59E0BAccent laboratoire
--white#F0F4F8Texte principal
--muted#8EA2B8Texte secondaire
--faint#3A5068Texte tertiaire
--font-displayInstrument SerifTitres
--font-uiOutfitCorps de texte
--font-monoDM MonoLabels & codes
Visito

Visito Design System v1.0 · 2026

← Retour à la landing