Directives de la marque tSL Design
Bienvenue
dans les directives de la marque timeSensor LEGAL. Ces directives s'appliquent à tous chez timeSensor LEGAL.
Si vous êtes designer, rédacteur, producteur ou une agence qui soutient notre équipe, ces directives sont des règles stylistiques pour l'utilisation de notre logo et une des nombreuses ressources qui forment la base de notre marque et la définissent.
Vous trouverez ici notre voix et personnalité de marque actuelles, les couleurs et la typographie ainsi que des liens vers des ressources utiles telles que les fichiers de logo et des informations détaillées. Ainsi, vous créerez rapidement des contenus conformes à la marque en ligne et dans le monde réel.
Voix et ton
Ici, nous expliquons comment nous communiquons par écrit.
Logo
En tant que pilier de notre identité, le logo timeSensor LEGAL est un symbole de confiance, de qualité et un signe distinctif important pour nos clients. Pour reproduire fidèlement notre logo dans divers médias, il existe quelques règles simples à respecter afin d'assurer clarté et cohérence à tout moment.
Logo
Couleurs originales
Noir (utilisé uniquement dans des cas exceptionnels)
Blanc (utilisé uniquement dans des cas exceptionnels)
Zones d'exclusion
La zone d'exclusion garantit la lisibilité et l'impact du logo en l'isolant des éléments visuels concurrents tels que le texte, les graphiques et les images. L'image ci-dessous montre la taille correcte de l'espace qui doit entourer le logo. Aucun texte ou logo accompagnant ne doit apparaître dans cette zone.
Veuillez ne pas déformer le logo ni appliquer d'effets.
Placement
Le logo est toujours placé dans un coin de la zone de travail.
Il n'y a pas de taille maximale pour les logos timeSensor. Veillez cependant à ce que le logo ne soit pas trop petit.
Sur un élément de 300 x 250 pixels, un logo à 10 % ne ferait que 30 pixels de large.
Remplacez-le par un logo de 90 pixels de large pour garantir la lisibilité.
Typographie
La seule police pouvant être utilisée pour la communication d'entreprise est Myriad Pro.
Pour maintenir un ton uniforme, nous faisons preuve de retenue dans les styles et types de police utilisés. La police Myriad Pro Regular est préférée à toutes les autres, tandis que Myriad Pro Bold est utilisée pour les titres ou les informations importantes. La police Myriad Pro Italic Regular est utilisée pour de courtes données et apparaît rarement dans notre système d'identité.
Utilisation de la police
Nous utilisons la police de manière claire, calme et confiante. Avec le moins de styles possible, nous alignons le texte à gauche, faisons attention au « rivières » et évitons toujours les « orphelins » (première ligne d'un paragraphe en fin de colonne) et les « veuves » (dernière ligne d'un paragraphe en début de colonne).
Polices système
Il peut arriver que nos polices ne soient pas disponibles dans certaines situations (par exemple, lorsque les polices web sont bloquées ou indisponibles, dans les newsletters numériques, etc.). Dans ces cas, la police web-safe Open Sans en « Bold », « Regular » et « Italic » peut être utilisée.
Tableau d'utilisation
Le tableau d'utilisation montre une série de réglages pour une conception efficace et lisible de la police. Il doit être considéré comme un guide..
Écran | Taille | Hauteur de ligne | Approche | Approche |
00–15 px | 140 % | Métriques | +1 % | |
15–20 px | 140 % | Métriques | +0 % | |
20–30 px | 125 % | Métriques | +0 % | |
30–45 px | 115 % | Métriques | -1 % | |
45–70 px | 110 % | Métriques | -1,5 % | |
70 px+ | 100 % | Métriques | -4 % |
| Impression | Taille | Hauteur de ligne | Approche | Approche |
| 00–8 px | 125 % | Métriques | +1 % | |
| 8–15 px | 120 % | Métriques | +0 % | |
| 15–25 px | 115 % | Métriques | +0 % | |
| 25–40 px | 110 % | Métriques | -1 % | |
| 40–70 px | 105 % | Métriques | -1,5 % | |
| 70 px+ | 100 % | Métriques | -4 % |
Couleur
Notre palette de couleurs se caractérise par une gamme vive de couleurs riches et sérieuses, soutenues par une série de tons gris et neutres sophistiqués.
Sélection des couleurs et logiciels de conception
Impression
Pour la conception destinée à l'impression, nous utilisons des valeurs CMJN dans des logiciels qui prennent en charge ces valeurs, comme Adobe Illustrator ou InDesign.
Écran
Pour la conception destinée à l'écran, nous utilisons des valeurs RVB ou HEX dans un logiciel qui prend en charge ces valeurs, par exemple Figma, Adobe Illustrator, InDesign, Canva, Keynote ou tout autre logiciel de motion disponible.
Remarque
Les valeurs de couleur imprimées ne s'affichent pas correctement à l'écran. Les couleurs à l'écran ne sont pas imprimées avec précision.
Valeurs de couleur
CMJN
Cyan, magenta, jaune et noir. Les quatre couleurs utilisées en offset et en impression numérique.
RVB
Rouge, vert et bleu, les couleurs composantes qui produisent toutes les couleurs à l'écran.
HEX
Une représentation hexadécimale des couleurs rouge, vert et bleu de l'écran.
Veuillez noter :
Divers facteurs peuvent influencer la reproduction des couleurs. Un test est toujours conseillé avant toute impression grand format.
Couleurs primaires :
Les couleurs primaires sont l'expression distillée de la marque timeSensor LEGAL. Elles accueillent les clients dans notre univers.
tSL Bleu
HEX : #00B5F0
tSL Bleu clair
HEX : #87CFEB
Tons noir et blanc tSL
A HEX : #FFFFFF
B HEX : #FCFCFC
C HEX : #F8F8F8
D HEX : #DDDDDD
E HEX : #AAAAAA
F HEX : #919191
G HEX : #575756
H HEX : #333333
tSL Bleu foncé
HEX : #003366
Couleurs d'accent :
Outre le bleu timeSensor, ces couleurs sont utilisées pour créer des accents.
tSL Bordeaux
HEX : #590007
tSL Or
HEX : #D3AF45
tSL Beige
HEX : #997300
Couleurs tertiaires :
Dans les cas où de plus grands volumes de données doivent être différenciés, on peut utiliser les couleurs tertiaires.
I HEX : #FFCCE5
J HEX : #FFFACC
K HEX : #FFE2CC
L HEX : #EBFFCC
M HEX : #EDD0FB
N HEX : #FBFFCC
O HEX : #D0FBF3
P HEX : #F3E3D8
Q HEX : #D6CCFF
R HEX : #FFD5CC
Aperçu des univers visuels
timeSensor utilise différents médias pour communiquer efficacement. Les formats les plus importants sont les photos, les illustrations, les blockframes du logiciel et les icônes.
Illustration
Les illustrations servent à transmettre des idées complexes.
Dans ce document Figmavous trouverez des ressources pour créer d'autres illustrations.
Blockframes
Les blockframes sont des illustrations de produit qui illustrent les capacités et fonctionnalités de timeSensor LEGAL. Ils racontent des histoires complexes de manière simplifiée et informative, diffusée à travers nos points de contact : expériences produit, présentations, vidéos et publicités numériques.
Les images produit informent et aident les prospects et clients à comprendre tout le potentiel de timeSensor LEGAL.
Les niveaux de fidélité illustrent le produit réel, la fonction produit et l'espace de travail de l'agent en expliquant, par le storytelling, comment les fonctions fonctionnent.
Haute fidélité
Capture d'écran de tSL. Doit être agrandie pour être lisible.
Utilisation pour :Sites web, vidéos de démonstration, démos interactives, visites produit.
Basse fidélité
Ces blockframes ne contiennent pas de texte. Ils sont principalement utilisés pour la formation à la navigation lors de l'intégration, afin de concevoir l'expérience visuelle qui guide les utilisateurs à travers différentes fonctionnalités du produit. Utilisez-les pour les points de contact avec une localisation complexe, l'intégration dans l'expérience produit interne et certains decks de présentation produit.
Utilisation pour :Intégration, expériences produit, présentations
Simplifié
Représentation illustrative du logiciel.
Utiliser pour : vidéos explicatives, dans un contexte plus large
Photographie
Toutes nos photographies doivent paraître aussi naturelles que possible. Respectez les principes de style suivants :
Naturel
Utilisez la lumière naturelle, pas de flashs durs ni de contrastes extrêmes.
Décontracté
Choisissez des prises non posées et limitez les prises mises en scène qui semblent forcées.
Les motifs récurrents sont les bureaux, les bâtiments de bureaux et les personnes d'affaires travaillant sur ordinateur.
Iconographie
Nos icônes sont basées sur la bibliothèque "Simple Small" que l'on trouve sur icons8.com. Si une icône nécessaire n'est pas trouvée, elle peut être dessinée dans ledocument Figma suivant Dessiner.
Elles sont utilisées soit dans l'interface utilisateur, soit dans les présentations pour mieux transmettre les idées :
Related Articles
[113.x] Contrôle du temps de travail
Contenu Ce rapport présente, pour une période et les collaborateurs sélectionnés, une représentation mensuelle des temps de connexion/logoff, des temps de présence saisis, du travail effectué, ainsi que des temps de congé. Heures de login/logoff: ...[110.x] Calcul de l'excédent de revenus
Contenu Le rapport génère un calcul de l'excédent de revenu pour la période sélectionnée. La liste montre toutes les dépenses engagées et les revenus reçus au cours de la période et indique la taxe de vente respective. La déclaration anticipée de la ...[128.x] Relevé de compte
Contenu Le rapport affiche pour un client sélectionnable un relevé de compte avec un aperçu chronologique de toutes les opérations commerciales qui ont eu lieu pour ce client pendant la période choisie. Le rapport montre à gauche les différentes ...[111.x] Déclaration de TVA
Contenu Le rapport génère une déclaration de TVA pour la période sélectionnée. Les dettes fiscales sont indiquées sur la première feuille de calcul : toutes les transactions sont répertoriées selon le code TVA et totalisées. après La deuxième feuille ...[114.x] Ventes par centre de coûts
Contenu Ce rapport affiche les revenus imputés aux centres de coûts pour une période dans un relevé mensuel. Cliquez sur "Exécuter le script" pour lancer le script contenu dans le rapport. La requête est basée sur la période d'évaluation. Saisissez ...