Design System
DG Carrelage
Direction «Showroom» — Angles vifs (0px) comme le carrelage, fond gris chaud + blanc casse, rouge vif en accent. DM Serif Display + 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)
Shadows & Profondeur
shadow-card
Etat par defaut. Relief subtil comme un carreau.
shadow-card-hover
Hover. Ombre portee fine, elevation legere.
shadow-dramatic
Modales, popovers. Profondeur marquee.
Composants UI
Boutons — Variantes
Boutons — Hover Effects
Les effets hover sont integres par defaut selon la variante. Survolez pour voir.
Mapping automatique :
Primary, Secondary, Danger → btn-slide-fill
Outline → btn-swipe
Ghost, Link → btn-underline
Badges
Formulaire
Cartes specialisees
CollectionCard — Catalogue produits
Survolez pour voir l'overlay + CTA qui glisse.
Marbre Calacatta
60x120 cm
Chene Blanchi
190x1900 mm
Terrazzo Milano
80x80 cm
FeatureCard — Expertise & services
Survolez pour voir la bordure rouge + transition icone.
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
Survolez pour voir la ligne d'accent + guillemet anime.
Un accompagnement exemplaire du choix a la pose. Le resultat depasse nos attentes.
— Marie & Pierre D.
Renovation villa, Sion
Excellent choix de carrelages, et des conseils vraiment pertinents pour notre salle de bain.
— Laurent M.
Appartement, Martigny
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.
sm (24px)
md (40px)
lg (60px)
xl (80px)
Neutre sur clair
Rouge sur clair
Clair sur sombre
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
Photo collection
Effet Marbre
Decouvrir →
Photo collection
Chene Blanchi
Decouvrir →
Photo collection
Terrazzo Milano
Decouvrir →
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.