Philosophie Générale
La direction artistique est ultra-moderne, minimaliste et premium. L'accent est mis sur l'espace, la typographie à fort impact et une expérience utilisateur fluide grâce à des animations subtiles. Le design évoque le luxe, la précision et la technologie, tout en restant centré sur l'humain et l'émotion.
1. Logo & Iconographie
Logo Principal
Le logo "Kuma" est une construction typographique minimaliste et géométrique. Il est basé sur la lettre 'K', stylisée pour évoquer un plan d'architecte, une structure en coupe ou une perspective. Sa simplicité assure une excellente lisibilité et renforce l'image premium et technique de l'atelier.
Iconographie
Les icônes doivent suivre le même principe de minimalisme. Utiliser un style linéaire (outline) avec une épaisseur de trait fine et constante. L'objectif est la clarté et l'élégance, en parfaite harmonie avec le logo. Des bibliothèques comme "Feather Icons" ou "Lucide" sont des références idéales.
2. Palette de Couleurs
#0A0A0A
Arrière-plan principal
#111111
Arrière-plan secondaire
#EAEAEA
Titres et textes importants
#A0A0A0
Texte courant
#00A3FF
Couleur d'accentuation
3. Typographie
Police des titres : Syne
Police sans-serif à fort caractère, utilisée en graisse "ExtraBold" (800) pour les titres principaux. Elle apporte un impact visuel et un sentiment de modernité.
Créateurs d'espaces
Police de texte : Inter
Police sans-serif très lisible, utilisée pour les paragraphes et les textes d'interface. Elle offre un excellent confort de lecture sur tous les écrans.
Nous imaginons des lieux de vie où la lumière, la matière et la fonction entrent en parfaite symbiose.
4. Composants & Interactions
Boutons
Les boutons sont arrondis ("pill-shape"), avec un contraste élevé. Les appels à l'action principaux utilisent la couleur d'accentuation pour attirer l'œil.
Éléments Interactifs (Ex: Carte Projet)
Villa Séquoia
Une maison de verre et de bois.
Résidence privée | Varennes-Jarcy
Les interactions au survol (:hover) sont clés. Elles se manifestent par :
- Changement de couleur du titre vers la teinte d'accentuation.
- Léger zoom (
scale) sur l'image. - Apparition d'icônes ou d'indicateurs (comme une flèche).
- Changement subtil de la couleur de fond de l'élément.
5. Animations & Mouvement
Le mouvement est utilisé pour guider l'utilisateur et ajouter une touche de sophistication. Il doit rester fluide et discret.
- Animations d'entrée : Les textes et les blocs apparaissent progressivement au défilement (fade in + slide up).
- Transitions : Les changements d'état (survol) sont fluides grâce à des transitions CSS (
transition-property). - Éléments dynamiques : Utilisation d'éléments comme la barre de progression ou le bandeau défilant ("marquee") pour ajouter de la vie à la page sans distraire.