Juste des Stores Style Guide

Brand design system for custom window blinds e-commerce

Color Palette

Brand Primary (Pink/Red)

#D91B53

RGB(217, 27, 84)

Used for CTAs, sale banners, accent elements

Brand Secondary (Dark Teal)

#0F2E39

RGB(15, 46, 57)

Headings, text links, navigation

Alternate Teal

#073D4C

RGB(7, 61, 76)

Alternative dark teal shade

White

#FFFFFF

RGB(255, 255, 255)

Backgrounds, cards

Black

#000000

RGB(0, 0, 0)

Text, borders

Gray Text

#6E7172

RGB(110, 113, 114)

Body text, secondary info

Light Gray

#DBDBDB

RGB(219, 219, 219)

Borders, dividers

Background Gray

#F6F5F5

RGB(246, 245, 245)

Alternate backgrounds

Typography

H1 Heading - Stores en Ligne Fabriqués sur Mesure

halcom, sans-serif | 24px | Weight 400 | Uppercase | 2px letter-spacing

H2 Heading - La Qualité Haut de Gamme

halcom, sans-serif | 24px | Weight 400 | Uppercase | 2px letter-spacing

H3 Heading - Store Alterné

halcom, sans-serif | 20px | Weight 500 | Normal case

H4 Heading - Tissu translucide

halcom, sans-serif | 18px | Weight 400

Body Text - Combinez style et intimité avec nos stores alternés sur mesure, parfaits pour contrôler la lumière à votre goût.

halcom, sans-serif | 14px | Weight 400 | 21px line-height (1.5)

Link Text - MAGASINEZ

halcom, sans-serif | 16px | Weight 400 | Used for CTAs and buttons

Small Text - À partir de / Prix spécial

halcom, sans-serif | 12px | Weight 400 | Metadata, labels

Buttons & CTAs

Primary CTA Button (Pink/Red)

Background: #D91B53 | Color: #FFFFFF | No border-radius

Text Link Buttons

Color: #0F2E39 | No background | Arrow icon on right (optional)

Navigation Arrow Buttons

Icon only | No background | Dark teal color

Secondary Button (Outlined)

Border: 1px solid #0F2E39 | No background | No border-radius

Spacing Scale

XS - 8px (0.8rem) - Tight spacing
SM - 16px (1.6rem) - Default gap
MD - 24px (2.4rem) - Card padding
LG - 32px (3.2rem) - Section spacing
XL - 48px (4.8rem) - Large sections
XXL - 64px (6.4rem) - Page sections