Styleguide
Ketya Un
Direction artistique: Pétales & Sérénité
Généré le 18 avril 2026
Identité visuelle
Label + Titre avec accent
Ce qu'ils en disent
Label Telma italic + motif 3 petales en haut a droite du mot accent
Decorations de section — Presets
decor="preset" — raccourcis preconfigures avec parallax 3D au scroll.
decor="lotus" — fleur-trait + 3-petales
decor="blobs" — blob-4 + blob-2
decor="petals" — halos flous
decor="lotus-watermark" — lotus SVG watermark
Decorations — Elements au choix + layouts
decor={['element1', 'element2']} + decorLayout="spread|diagonal|scattered"
decor={['papillon', 'blob-5']} decorLayout="diagonal"
decor={['fleur-trait', 'lotus-ouverte', 'blob-3']} decorLayout="scattered"
decor={['femme-fleur', '3-petales']} — layout "spread" par defaut
Pattern botanique (prop pattern)
Ce que ca donne
pattern="botanical" + decor="petals" — les deux se combinent en layers additifs.
pattern="botanical" ajoute des gradients radiaux CSS. Combinable avec n'importe quelle variante decor.
Listes avec puces pétale
- Accompagnement empathique et bienveillant
- Respect de la confidentialité absolue
- Approches thérapeutiques modernes et éprouvées
- Espace sécurisé et accueillant
Puces en forme de petale (border-radius 50% 50% 50% 8%) — couleur primary-300
Formes decoratives
Blobs organiques
<Blob variant={n} className="text-primary-200 w-28" /> — couleur via text-*, taille via w-/h-
Blobs — couleurs et opacites
Blob — arriere-plan portrait
Blob positionne en absolute derriere un element — ideal pour hero avec portrait
Illustrations inline (animables)
<InlineIllustration name="papillon" className="h-28 text-primary-300" /> — couleur via text-*, taille via h-/w-
Illustrations inline — animees (scroll into view)
<InlineIllustration name="papillon" animated className="h-28 text-primary-400" /> — prop animated pour l'animation au scroll
Illustrations inline — couleurs dynamiques
Meme illustration, couleurs differentes via text-* — impossible avec <img>
Illustrations lotus (img, statiques)
<Illustration name="fleur-lotus" className="h-28 opacity-60" /> — fichiers SVG complexes, rendus en <img>
Illustrations — decoration de section
Decoration de section
Les illustrations se dessinent au scroll, couleur via text-*, positionnement en absolute.
Cadres organiques (OrganicFrame)
<OrganicFrame variant={n}><img ... /></OrganicFrame> — memes blobs Haikei que le composant Blob, en masque clipPath
Composition — tous les elements ensemble
Ketya Un
Composition utilisant blobs, illustrations et cadre organique pour creer une mise en page riche et chaleureuse.
Blob + InlineIllustration + OrganicFrame combines — positionnement absolu pour la profondeur
Palette de couleurs
Primary — Violet lavande (identite)
primary-50
#F5F2F8
primary-100
#E8E1F0
primary-200
#D5CCE3
primary-300
#C4B5D6
primary-400
#A99ABD
primary-500
#7D6FA3
primary-600
#6B5E8E
primary-700
#5A4F79
Secondary — Perle beige (complement chaud)
secondary-100
#F5F2EF
secondary
#E6DDD6
secondary-600
#C2B5AC
secondary-950
#403A37
Base
background (crème)
#FAF7F5
foreground
#2A2438
card
#ffffff
muted
#F3EEF6
muted-foreground
#7A6B85
border
#E0D6E8
Typographie
Display (Hero)
Retrouvez votre équilibre
Telma Regular 400 + italic accent | Taille: fluid-7xl (48px → 96px)
Title (Section)
Nos services
Telma Regular 400 + motif petales au-dessus de l'accent | Taille: fluid-5xl (36px → 64px)
Subtitle (Description)
Accompagnement professionnel en counseling et thérapie pour votre bien-être émotionnel et relationnel.
Polices: Inter (body) | Taille: fluid-lg (18px → 21px) | Couleur: muted-foreground
Body Text
Ceci est un texte body standard utilisant la police Inter avec une taille fluide de base. La ligne height et l'espacement sont optimisés pour une bonne lisibilité sur tous les appareils.
Polices: Inter | Taille: fluid-base (16px → 18px) | Line-height: 1.625
Section Label
ServicesPolices: Telma italic 400 | Taille: fluid-sm | Sans decoration
Boutons
Boutons Primary
Effet: Glow doux lavande + micro-élévation au survol
Boutons Ghost
Effet: Soulignement gradient qui se déploie lentement
Boutons avec composant Button
Cartes
Cartes Service (.card-service)
Thérapie individuelle
Un espace sécurisé pour explorer vos émotions, surmonter vos difficultés et retrouver un équilibre durable.
En savoir plus→Thérapie de couple
Renforcer la communication, résoudre les conflits et retrouver une connexion authentique avec votre partenaire.
En savoir plus→Gestion du stress
Des outils concrets pour apaiser l'anxiété, cultiver la résilience et retrouver votre sérénité au quotidien.
En savoir plus→Effet: gradient vers primary-50, pétale décoratif en coin, élévation douce + ombre colorée
Cartes Témoignage (.card-testimonial)
“Ketya m'a vraiment aidée à retrouver confiance en moi. Une thérapeute bienveillante, à l'écoute et profondément humaine.”
M.P.
Thérapie individuelle
“Les séances ont transformé notre relation. Nous avons appris à nous écouter et à nous comprendre. Merci infiniment.”
J.D. & L.D.
Thérapie de couple
Effet: barre gauche permanente + glow doux au survol
Composants additionnels
BrandList — Listes a puces petale
- Accompagnement empathique et bienveillant
- Respect de la confidentialite absolue
- Approches therapeutiques modernes
- Espace securise et accueillant
<BrandList animated>...</BrandList> — prop animated pour FadeIn au scroll
Accordion — FAQ
La premiere seance est un moment d'echange ou nous faisons connaissance. Je vous ecoute et nous definissons ensemble vos objectifs therapeutiques.
Les seances durent environ 1h30. Cette duree permet un travail en profondeur tout en respectant votre rythme.
Certaines assurances complementaires prennent en charge une partie des seances. Je vous invite a vous renseigner aupres de votre assureur.
<AccordionGroup><AccordionItem title="...">contenu</AccordionItem></AccordionGroup> — variante "card" disponible pour items independants
CTABanner — Section appel a l'action
Pret(e) a faire le premier pas ?
Contactez-moi pour discuter de votre situation et trouver ensemble la meilleure approche therapeutique.
<CTABanner title="..." buttonLabel="..." buttonHref="..." bgColor="primary|gradient" /> — compose Section + SectionHeader + Button
Composant Section — Mise en contexte
Toutes les sections ci-dessous utilisent le composant <Section> avec ses differentes variantes.
Hero
bgColor="lavender"
Services
bgColor="background" dividerTop
Temoignages
bgColor="lavender" pattern="botanical" decor="petals" dividerTop
A propos
bgColor="cream"
CTA
bgColor="primary"
Gradient
bgColor="gradient"
Retrouvez votre sérénité
Accompagnement professionnel en counseling et thérapie pour votre bien-être émotionnel et relationnel.
Mes services
Thérapie individuelle
Un espace sécurisé pour explorer vos émotions, surmonter vos difficultés et retrouver un équilibre durable.
En savoir plus→Thérapie de couple
Renforcer la communication, résoudre les conflits et retrouver une connexion authentique avec votre partenaire.
En savoir plus→Gestion du stress
Des outils concrets pour apaiser l'anxiété, cultiver la résilience et retrouver votre sérénité au quotidien.
En savoir plus→Ce qu'ils en disent
“Ketya m'a vraiment aidée à retrouver confiance en moi. Une thérapeute bienveillante, à l'écoute et profondément humaine.”
M.P.
Thérapie individuelle
“Les séances ont transformé notre relation. Nous avons appris à nous écouter et à nous comprendre. Merci infiniment.”
J.D. & L.D.
Thérapie de couple
Mon approche
Je crois en une thérapie chaleureuse, bienveillante et adaptée à chaque personne. Mon objectif est de vous offrir un espace sécurisé pour explorer vos émotions.
Prêt(e) à faire le premier pas ?
Contactez-moi pour discuter de votre situation et trouver ensemble la meilleure approche thérapeutique.
Section gradient
Variante gradient avec dégradé du primary vers primary-700.
À propos de ce styleguide
Ce guide présente tous les composants, couleurs et patterns utilisés dans le design de Ketya Un. Direction artistique: Pétales & Sérénité — violet lavande + beige crème, typographie élégante Telma + Inter, animations douces organiques.
Page générée le 18 avril 2026 | Non indexée par les moteurs de recherche