Design System
DG Carrelage
Direction «Showroom» — Angles vifs (0px) comme le carrelage, fond gris chaud + blanc casse, rouge vif en accent. Bauhaus 93 + DM Sans, bento grid, shadows plates.
Design DNA
Layout
Bento Grid
Asymetrique, cards mixtes
Hero
Split 60/40
Image + texte asymetrique
Shadows
Plates
Relief subtil, ombre portee fine
Animations
400ms
Ease luxury + stagger
Radius
0px
Angles vifs comme le carrelage
Grid gap
4px
Joints de carrelage uniformes
Effets
Glass subtil
Backdrop-blur sur filtres
Separateurs
Lignes 1px
Joints horizontaux precis
Palette de couleurs
Primary — Rouge vif
primary-50
#FEF2F2
primary-100
#FDE8E8
primary-500
#CC3333
primary-600
#B52D2D
primary-700
#9A2525
primary-950
#3D0F0F
Neutrals — Gris chaud
background
#F5F3F0
card
#FDFCFA
secondary
#E8E4DF
muted
#EDEAE6
border
#DDD8D3
foreground
#1A1A1A
Semantique
accent
#FEF0EE
destructive
#EF4444
success
#22C55E
warning
#F59E0B
info
#3B82F6
Typographie
.display
Carrelage
.title
Nos collections
h1
Showroom Martigny
h2
Parquet & Carrelage
h3
Collection Minerale
h4
Formats disponibles
.subtitle
Decouvrez notre selection de carrelages et parquets pour donner vie a vos espaces.
Paragraphe
Depuis notre showroom a Martigny, nous vous accompagnons dans le choix de vos revetements de sol et de mur. Notre equipe vous conseille parmi nos collections selectionnees aupres des meilleurs fournisseurs europeens. Chaque carrelage est choisi pour sa qualite, son esthetique et sa durabilite.
Tailles
text-xs — Mention legale (12px)
text-sm — Label, caption (14px)
text-base — Corps de texte (16px)
text-lg — Intro, lead (18px)
text-xl — Sous-titre (20px)
Pattern fondateur
Tile System
Chaque element rectangulaire du site = un carreau pose. Au repos, les tiles sont plats, au meme niveau, sans ombre — un carreau ne flotte pas. Le joint entre tiles herite toujours du fond de la section parente. L'animation au hover est exclusivement portee par UN seul tile (le raised).
Layout OVERLAP — pattern signature des cards
Toutes les cards metier (CollectionCard, FeatureCard, TestimonialCard, MediaCard) utilisent ce layout exclusivement. Le prop offset="left" ou offset="right" contrôle le sens du decalage. Au repos : tile signature superpose (48px) + plus etroit (24px) + debordant (12px) + bordure 4px couleur du fond. Au hover : scale 1.03 + ombre legere + bordure → 0.
offset="left"
Survolez
Bordure → 0, scale
offset="right"
Survolez
Bordure → 0, scale
Joint = fond de la section
La meme card sur 4 fonds differents. La bordure de jointure suit toujours la couleur du parent — jamais une couleur fixe.
background
titre
format
card
titre
format
muted
titre
format
secondary
titre
format
Composants UI
Boutons — Variantes
Boutons — Hover Effects
Les effets hover sont integres par defaut selon la variante. Survolez pour voir.
Mapping automatique :
Primary, Secondary, Outline, Danger → btn-slide-fill (fond + text swap)
Ghost, Link → btn-underline
Badges
Formulaire
Cartes specialisees
CollectionCard — Catalogue produits
Layout OVERLAP toujours. Alterner offset="left"et offset="right" pour rythmer une grille.
Marbre Calacatta
60x120 cm
Chene Blanchi
190x1900 mm
Terrazzo Milano
80x80 cm
FeatureCard — Expertise & services
Tile icone primary (carre rouge) + tile contenu noir raised.
Qualite garantie
Tous nos produits proviennent de fournisseurs europeens certifies et reconnus.
Conseil personnalise
Notre equipe vous accompagne dans le choix des materiaux adaptes a votre projet.
Showroom 350m2
Decouvrez nos collections en situation reelle dans notre espace d'exposition.
TestimonialCard — Avis clients
Citation + signature rouge calee bord-a-bord dans le coin bas-droit. Exception volontaire au pattern Tile System (pas d'OVERLAP, pas de LIFT).
Un accompagnement exemplaire du choix a la pose. Le resultat depasse nos attentes.
Excellent choix de carrelages, et des conseils vraiment pertinents pour notre salle de bain.
MediaCard — Image + texte (À propos, showroom, histoire)
Image en haut + signature noire raised. Caption optionnelle dans l'image. Memes 2 configurations (offset = layout + animation).
350 m² d'exposition
Decouvrez nos collections en situation reelle a Martigny.
20 ans d'experience
Au service des particuliers et professionnels en Valais.
Conseil personnalise
Une equipe passionnee qui vous accompagne de A a Z.
BentoGrid — Composant reutilisable
Gap 4px = joints de carrelage. grid-auto-flow: dense. Spans responsives.
Collection vedette
Marbre Calacatta
Carrelage
Effet beton
Parquet
Chene naturel
Showroom
Visitez-nous a Martigny
Mosaique
Hexagonale
20+
CollectionsCarrelage & Parquet
Besoin d'un conseil personnalise ?
Chevron Pattern — Signe distinctif
Motif herringbone declinable sur tout le site. Evoque la pose de carrelage et parquet.
section-chevron
Fond de section avec pattern subtil (3.5% opacite)
Utiliser sur les sections alternees du site.
chevron-hover
Survolez — le chevron rouge se revele
Pour les cards et zones interactives.
md (40px) — défaut
lg (60px) — accent
Neutre — sections, fonds, hover
Rouge — accents ponctuels
divider-chevron
Apercu contextuel
Mini-site preview
Simulation d'une page reelle avec le design system complet — chevron integre.
L'art du carrelage,
au coeur du Valais
Decouvrez nos collections selectionnees aupres des meilleurs fabricants europeens. Un conseil expert pour chaque projet, du sol au mur.
Photo showroom
Collections phares
Les tendances selectionnees pour vous
Effet Marbre
60x120 cm
Chene Blanchi
190x1900 mm
Terrazzo Milano
80x80 cm
Temoignage
«Un accompagnement exemplaire du choix a la pose. Le resultat depasse nos attentes.»
— Marie & Pierre D., renovation villa a Sion
Votre projet commence ici
Visitez notre showroom a Martigny ou demandez un conseil personnalise. Notre equipe est a votre disposition.