Votre marque. Votre thème.
Transformez la couleur de votre marque en un thème complet clair et sombre. Essayez-le sur de vrais composants PyColors, puis prenez les tokens dans votre application.
Espace de travail thématique
Personnaliser, prévisualiser, exporter.
Northstar
L'espace de travail d'Avery
Espace de travail Vue d’ensemble
Tableau de bord
La livraison de votre équipe, la capacité et le travail à venir.
Projets actifs
12
+2 cette année
3 livraisons cette semaine
Tâches achevées
148
+17.5% vs previous
7 derniers jours
Capacité de l'équipe
86%
4 places disponibles
8 membres actifs de l'équipe
Livraison santé
98%
+4% ce mois-ci
Jalons livrés à temps
Activité de livraison
Tâches accomplies — 7 derniers jours
Prochains jalons
Ce qui nécessite votre attention ensuite.
- DemainRéexamen
Passage de la plate-forme
Plateforme Atlas
- En 2 joursEn danger
Préparation au lancement
Pulse launch
- En 3 joursSur la bonne voie
Onboarding release
Onboarding en orbite
Tableau de livraison
Projets récents dans votre espace de travail.
| Projet | Statut | Propriétaire | Progrès accomplis | Attendu |
|---|---|---|---|---|
Onboarding en orbite Orbit Labs | Sur la bonne voie | Avery Kim | 28 des 36 tâches78% | En 3 jours |
Plateforme Atlas Atlas Finance | En révision | Sam Patel | 46 des 50 tâches92% | Demain |
Pulse launch Pulse Health | En danger | Morgan Lee | 18 des 40 tâches45% | En 2 jours |
Système de conception Nova Nova Studio | Sur la bonne voie | Jordan Chen | 16 des 25 tâches64% | La semaine prochaine |
Activité en direct
Sam Patel a demandé une révision
Plateforme Atlas
Il y a 12 min
Avery Kim 4 tâches accomplies
Onboarding en orbite
Il y a 38 min
Morgan Lee Mise à jour du calendrier
Pulse launch
Il y a 1 heure
Jordan Chen Nouveaux composants publiés
Système de conception Nova
Il y a 2 heures
États constituants — Formes, états vides et focus
Validation du formulaire
Testez les étiquettes de champs, les erreurs et le texte d'aide.
Utilisez un nom d'hôte public avant d'inviter des clients.
État vide
Testez les surfaces silencieuses sans perdre la hiérarchie.
Pas de révisions en attente
Les commentaires des nouveaux clients apparaîtront ici.
Focus-ready action
Testez le traitement de focus clavier visible.
Mise à jour d'utilisation
Lisibilité des couleursVérifie le texte, les contours des champs et la focus clavier en mode clair et sombre.4 contrôles à vérifier
30 sur 34 les contrôles atteignent leur cible de contraste.
Le contraste est la quantité de texte ou de contrôle qui se démarque de son arrière-plan. Les éléments ci-dessous peuvent être plus difficiles à lire ou à trouver. Examinez-les avant d'utiliser ce thème.
Mode lumière
15 passé — 2 à réviser
Frontières des composants
Vérifiez les frontières qui identifient les contrôles interactifs. Les séparateurs décoratifs peuvent rester subtils.
Plans des champs d'entrée
Les champs peuvent se fondre dans la page. Renforcez le schéma si nécessaire pour identifier le domaine.
Mode sombre
15 passé — 2 à réviser
Frontières des composants
Vérifiez les frontières qui identifient les contrôles interactifs. Les séparateurs décoratifs peuvent rester subtils.
Plans des champs d'entrée
Les champs peuvent se fondre dans la page. Renforcez le schéma si nécessaire pour identifier le domaine.
Essayez un autre préréglage pour comparer. Pour des ajustements précis, modifiez les variables CSS listées ci-dessous après l'exportation. Ce contrôle porte sur les couleurs générées. Vérifiez également les textes et les états de survol, de désactivation et de focus au clavier dans votre application.
Détails techniques
Un ratio plus élevé signifie plus de contraste. Chaque ligne montre le ratio mesuré et sa cible pour cette utilisation. Ces résultats décrivent les couleurs exportées; ils ne certifient pas une interface complète comme accessible.
Frontières des composants · Clair
--border / --background
Mesurée 1.20:1 — Cible 3:1
Plans des champs d'entrée · Clair
--input / --background
Mesurée 1.56:1 — Cible 3:1
Frontières des composants · Sombre
--border / --background
Mesurée 1.19:1 — Cible 3:1
Plans des champs d'entrée · Sombre
--input / --background
Mesurée 2.03:1 — Cible 3:1
Exporter votre thème
tokens de couleur pour les deux modes, avec police et rayon CSS séparés. Copiez ou téléchargez vos fichiers. Rien n'est téléchargé.
Variables CSS pour :root et .dark. Collez après votre importation de tokens PyColors.
Liste de contrôle d'intégration
- 1Conservez l'importation du token PyColors dans votre feuille de style globale.
- 2Collez le remplacement généré après cette importation afin qu'il gagne de manière prévisible.
- 3Passez en revue une lumière et un écran de produit sombre avant de vous engager.
CSS
Sortie complète pour les modes clair et sombre.
:root {
--background: #ffffff;
--background: oklch(1.0000 0.0000 0.00);
--foreground: #171717;
--foreground: oklch(0.2046 0.0000 0.00);
--card: #fafafa;
--card: oklch(0.9851 0.0000 0.00);
--card-foreground: #171717;
--card-foreground: oklch(0.2046 0.0000 0.00);
--popover: #ffffff;
--popover: oklch(1.0000 0.0000 0.00);
--popover-foreground: #171717;
--popover-foreground: oklch(0.2046 0.0000 0.00);
--primary: #171717;
--primary: oklch(0.2046 0.0000 0.00);
--primary-foreground: #ffffff;
--primary-foreground: oklch(1.0000 0.0000 0.00);
--secondary: #f5f5f5;
--secondary: oklch(0.9702 0.0000 0.00);
--secondary-foreground: #171717;
--secondary-foreground: oklch(0.2046 0.0000 0.00);
--muted: #fafafa;
--muted: oklch(0.9851 0.0000 0.00);
--muted-foreground: #666666;
--muted-foreground: oklch(0.5103 0.0000 0.00);
--accent: #f5f5f5;
--accent: oklch(0.9702 0.0000 0.00);
--accent-foreground: #171717;
--accent-foreground: oklch(0.2046 0.0000 0.00);
--destructive: #e7000b;
--destructive: oklch(0.5830 0.2387 28.48);
--destructive-foreground: #fafafa;
--destructive-foreground: oklch(0.9851 0.0000 0.00);
--success: #16a34a;
--success: oklch(0.6271 0.1699 149.21);
--success-foreground: #09120b;
--success-foreground: oklch(0.1704 0.0199 150.85);
--warning: #e5c057;
--warning: oklch(0.8202 0.1299 89.81);
--warning-foreground: #201a09;
--warning-foreground: oklch(0.2201 0.0305 90.39);
--border: #eaeaea;
--border: oklch(0.9370 0.0000 0.00);
--border-subtle: #f2f2f2;
--border-subtle: oklch(0.9612 0.0000 0.00);
--border-strong: #cfcfcf;
--border-strong: oklch(0.8545 0.0000 0.00);
--input: #cfcfcf;
--input: oklch(0.8545 0.0000 0.00);
--ring: #737373;
--ring: oklch(0.5555 0.0000 0.00);
--surface: #ffffff;
--surface: oklch(1.0000 0.0000 0.00);
--surface-foreground: #171717;
--surface-foreground: oklch(0.2046 0.0000 0.00);
--surface-muted: #fafafa;
--surface-muted: oklch(0.9851 0.0000 0.00);
--surface-elevated: #ffffff;
--surface-elevated: oklch(1.0000 0.0000 0.00);
--surface-inverted: #171717;
--surface-inverted: oklch(0.2046 0.0000 0.00);
--surface-inverted-foreground: #ffffff;
--surface-inverted-foreground: oklch(1.0000 0.0000 0.00);
}
.dark {
--background: #000000;
--background: oklch(0.0000 0.0000 0.00);
--foreground: #fafafa;
--foreground: oklch(0.9851 0.0000 0.00);
--card: #070707;
--card: oklch(0.1286 0.0000 0.00);
--card-foreground: #fafafa;
--card-foreground: oklch(0.9851 0.0000 0.00);
--popover: #111111;
--popover: oklch(0.1776 0.0000 0.00);
--popover-foreground: #fafafa;
--popover-foreground: oklch(0.9851 0.0000 0.00);
--primary: #fafafa;
--primary: oklch(0.9851 0.0000 0.00);
--primary-foreground: #000000;
--primary-foreground: oklch(0.0000 0.0000 0.00);
--secondary: #171717;
--secondary: oklch(0.2046 0.0000 0.00);
--secondary-foreground: #fafafa;
--secondary-foreground: oklch(0.9851 0.0000 0.00);
--muted: #111111;
--muted: oklch(0.1776 0.0000 0.00);
--muted-foreground: #a1a1a1;
--muted-foreground: oklch(0.7090 0.0000 0.00);
--accent: #1f1f1f;
--accent: oklch(0.2393 0.0000 0.00);
--accent-foreground: #fafafa;
--accent-foreground: oklch(0.9851 0.0000 0.00);
--destructive: #ff6467;
--destructive: oklch(0.7022 0.1892 22.23);
--destructive-foreground: #0a0a0a;
--destructive-foreground: oklch(0.1448 0.0000 0.00);
--success: #22c55e;
--success: oklch(0.7227 0.1920 149.58);
--success-foreground: #040b06;
--success-foreground: oklch(0.1385 0.0182 154.80);
--warning: #e5c057;
--warning: oklch(0.8202 0.1299 89.81);
--warning-foreground: #201a09;
--warning-foreground: oklch(0.2201 0.0305 90.39);
--border: #191919;
--border: oklch(0.2134 0.0000 0.00);
--border-subtle: #0f0f0f;
--border-subtle: oklch(0.1684 0.0000 0.00);
--border-strong: #404040;
--border-strong: oklch(0.3715 0.0000 0.00);
--input: #404040;
--input: oklch(0.3715 0.0000 0.00);
--ring: #a1a1a1;
--ring: oklch(0.7090 0.0000 0.00);
--surface: #070707;
--surface: oklch(0.1286 0.0000 0.00);
--surface-foreground: #fafafa;
--surface-foreground: oklch(0.9851 0.0000 0.00);
--surface-muted: #111111;
--surface-muted: oklch(0.1776 0.0000 0.00);
--surface-elevated: #111111;
--surface-elevated: oklch(0.1776 0.0000 0.00);
--surface-inverted: #fafafa;
--surface-inverted: oklch(0.9851 0.0000 0.00);
--surface-inverted-foreground: #0a0a0a;
--surface-inverted-foreground: oklch(0.1448 0.0000 0.00);
}
Typographie et rayon
Geist · 0.25rem rayon — Copiez séparément de vos tokens de couleur.
Enregistrer la police dans public/fonts/geist/Geist-Variable.woff2, puis ajoutez ce CSS après vos importations de tokens. Télécharger la police · Licence de police
Voir la typographie CSS
/* Save the font file to public/fonts/geist/Geist-Variable.woff2 first. */
@font-face {
font-family: "Geist";
src: url("/fonts/geist/Geist-Variable.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
:root {
--font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-brand: var(--font-sans);
}
body {
font-family: var(--font-sans);
}
:root {
--radius: 0.25rem;
}
Utilisation dans Starter Pro
Remplacer config/appearance.ts avec ce fichier, redémarrez votre application, puis réinitialisez Personnaliser pour appliquer les valeurs par défaut du produit. Les couleurs, la typographie et les paramètres du tableau de bord sont inclus.
De la prévisualisation au produit
Faites-en partie de votre app.
- Installer
@pycolors/tokenset d'importation@pycolors/tokens/tokens.cssune fois dans votre feuille de style globale. - Collez vos remplacements générés après cette importation. Conservez le Tailwind v4 existant
@theme inlinepont. - Utiliser des utilitaires sémantiques et publics
@pycolors/uiimporte, puis vérifiez vos écrans dans les deux modes.
Avant la mise en production
Revoyez-le dans son contexte.
Theme Builder tient compte des contrastes, sans certifier l’accessibilité de votre interface. Vérifiez les valeurs générées dans votre application avant de la publier.
- Perception de la marque à travers votre produit et votre public.
- Composant complet et contexte de page.
- Déficiences de la vision des couleurs et indices non colorés.
- Les États ne communiquent que par la couleur.
- États réels de focus, de survol et de désactivation.