Marque
Logos, couleurs et typographie, prêts à l'emploi
Tout ce qu'il faut pour parler de Scintillar, y faire un lien ou le créditer dans ce que vous avez bâti : les fichiers du logo, nos couleurs et notre typographie, et un court guide pour bien les utiliser. Prenez ce dont vous avez besoin.
Logos SVG et PNG, icônes et jetons de couleur (ZIP)
Logos
Le logo sous toutes ses formes
Trois dispositions, chacune en vert et en mono, pour fonds clairs et foncés. Chaque fichier est offert en SVG et en PNG à trois tailles.
Horizontal
Par défaut. En-têtes, pieds de page, documents et présentations.
Vert, pour fonds clairs
Vert, pour fonds foncés
Mono, pour fonds clairs
Mono, pour fonds foncés
Vertical
Mises en page centrées : diapositives titres, affiches, états vides.
Vert, pour fonds clairs
Vert, pour fonds foncés
Mono, pour fonds clairs
Mono, pour fonds foncés
Symbole
Petits espaces : avatars, profils sociaux, états de chargement.
Vert, pour fonds clairs
Vert, pour fonds foncés
Mono, pour fonds clairs
Mono, pour fonds foncés
Quelle version?
- Utilisez le logo vert sur des fonds clairs ou foncés unis. C'est le cas la plupart du temps.
- Utilisez le mono sur des photos, des fonds colorés, ou pour une impression à une couleur.
- Choisissez le fichier fait pour votre fond : « pour fonds clairs » a une encre foncée, « pour fonds foncés » une encre claire.
Icônes
Icônes d'application et favicons
Le symbole sur une tuile, pour les onglets du navigateur, les icônes d'application et partout où l'on attend une forme carrée ou ronde. Les tuiles pleines ressortent; les tuiles en contour restent discrètes dans une liste.
Pour interfaces claires
Pleine, ronde, verte
Pleine, carrée, verte
Pleine, ronde, mono
Pleine, carrée, mono
Contour, ronde, verte
Contour, carrée, verte
Contour, ronde, mono
Contour, carrée, mono
Pour interfaces foncées
Pleine, ronde, verte
Pleine, carrée, verte
Pleine, ronde, mono
Pleine, carrée, mono
Contour, ronde, verte
Contour, carrée, verte
Contour, ronde, mono
Contour, carrée, mono
Utilisation
Donnez-lui de l'espace, gardez-le intact
Utilisez les fichiers tels quels. Ne redessinez pas, ne retapez pas, ne recolorez pas, n'étirez pas, ne faites pas pivoter et n'animez pas le logo.
Zone de protection
Gardez libre, de chaque côté, un espace au moins aussi large qu'un des anneaux latéraux du symbole. Mesurez à partir du dessin, pas du bord du fichier.
Taille minimale
Sous ces tailles, les anneaux se referment. Utilisez plutôt l'icône.
- Horizontal
- 120 px de large
- Vertical
- 80 px de large
- Symbole
- 24 px de haut
- Icône
- 16 px (favicon)
À éviter
L'étirer ou l'écraser
Le faire pivoter ou l'incliner
Changer ses couleurs
Ajouter des ombres, lueurs ou effets
L'utiliser sans assez de contraste
Retaper le nom dans une autre police
À faire
- Utiliser les fichiers téléchargés sans les modifier.
- Choisir la version faite pour votre fond.
- Lier le logo à scintillar.com quand il représente Scintillar.
Couleur
Du vert jade sur des neutres calmes
Le vert signale ce qui compte : actions, liens, focus et logo. Des neutres teintés de vert portent tout le reste. Chaque thème a son propre vert, ajusté pour le contraste.
Thème clair
background
Fond de page
foreground
Titres et texte courant
card
Cartes et panneaux
primary
Boutons, liens, anneaux de focus
primary-foreground
Texte sur vert
muted
Zones discrètes et pastilles
muted-foreground
Texte secondaire
border
Séparateurs et contours
Thème foncé
background
Fond de page
foreground
Titres et texte courant
card
Cartes et panneaux
primary
Boutons, liens, anneaux de focus
primary-foreground
Texte sur vert
muted
Zones discrètes et pastilles
muted-foreground
Texte secondaire
border
Séparateurs et contours
Vert du logo
Les fichiers du logo utilisent leurs propres verts : #005E3E sur fond clair et #5CD6AD sur fond foncé. Utilisez les fichiers plutôt que de reproduire ces couleurs à la main.
Contraste
Chaque paire ci-dessous respecte le niveau WCAG AAA pour le texte courant (7:1 ou plus).
- Texte sur fondThème clair17.5:1AAA
- Vert sur fondThème clair7.3:1AAA
- Texte sur vertThème clair7.1:1AAA
- Texte secondaire sur fondThème clair7.6:1AAA
- Texte sur fondThème foncé18.8:1AAA
- Vert sur fondThème foncé8.5:1AAA
- Texte sur vertThème foncé8.4:1AAA
- Texte secondaire sur fondThème foncé14.0:1AAA
Jetons pour le code et les outils de design
Les mêmes couleurs et la même typographie en variables CSS et au format de jetons de design du W3C, que la plupart des outils de design peuvent importer.
Typographie
JetBrains Mono, pour tout
Une seule famille pour les titres, le texte courant et le code. Gras pour les titres, fin pour le texte.
Titre 1
Gras 700 · 48 px
Des outils en libre-service
Titre 2
Gras 700 · 36 px
Hébergez-le vous-même
Titre 3
Gras 700 · 18 px
Un petit outil à la fois
Texte
Fin 300 · 16 px
Chaque outil prend votre logo, vos couleurs et votre domaine.
Surtitre
Gras 700 · 12 px · majuscules
Qu'est-ce que Scintillar?
Composer le texte
- Titres avec une majuscule initiale seulement. Les noms d'outils gardent leurs majuscules.
- Gardez les lignes de texte sous environ 70 caractères.
- N'utilisez pas d'autres polices à côté, même pour le code.
Nom
Écrire le nom
Scintillar s'écrit en un mot, avec un S majuscule. Les outils ont leurs propres noms, écrits comme des noms.
Scintillar
SCINTILLAR, scintillar, ScintilarDocs Shell, Scintillar UI, Status Pages
docs-shell, le scintillar ui, outil de page de statutles outils de Scintillar
les projets de Scintillar, la plateforme Scintillar@sntlr/docs-shell (dans le code et les commandes)
Sntlr, SNTLR (dans le texte)
Nos deux domaines
- scintillar.com est notre maison : ce site, le catalogue d'outils et comment nous joindre.
- sntlr.app est là où les choses tournent : la documentation de chaque outil et notre propre instance, à <outil>.sntlr.app.
Les outils et votre marque
Votre marque d'abord
Chaque outil Scintillar est en marque blanche : il prend votre logo, vos couleurs et votre domaine, et fonctionne sous votre marque. Notre logo reste en retrait.
Aucun logo Scintillar requis
Un outil que vous hébergez affiche votre marque, pas la nôtre. Vous n'avez jamais à afficher notre logo ou notre nom.
N'utilisez pas le nôtre comme le vôtre
N'utilisez pas le logo Scintillar comme logo de votre instance, et ne laissez pas entendre que Scintillar exploite ou approuve votre site.
Nos propres instances
Nos instances sur sntlr.app portent la marque Scintillar, avec le nom de l'outil à côté du symbole.
Envie de nous créditer?
C'est facultatif et toujours apprécié. Une petite ligne dans le pied de page ou la documentation suffit.
<a href="https://scintillar.com">Conçu avec Scintillar</a>Ton
Des mots clairs, des promesses simples
Nous écrivons comme un mainteneur sympathique : utile, direct et honnête sur ce qu'un outil est et n'est pas.
Commencer par ce qu'on obtient
Décrivez ce que l'outil fait pour les gens, pas avec quoi il est bâti.
DireMettez votre documentation en ligne, avec versions, recherche et deux langues.
PasUn framework de documentation MDX pour Next.js.
Honnête sur la portée
Nos outils sont fournis tels quels, pour les passionnés et les petits projets. Ne promettez ni support, ni disponibilité, ni feuille de route.
DireGratuit, fourni tel quel. L'aide se fait au mieux, sur GitHub.
PasPlateforme de niveau entreprise avec support dédié.
Les outils au centre
Parlez des outils. Mentionnez la communauté derrière eux avec légèreté.
DireStatus Pages réunit l'état de vos services sur une seule page publique.
PasNotre équipe incroyable révolutionne les pages de statut!
Une question qui n'est pas couverte ici?
Posez-la sur GitHub et nous répondrons dès que possible.