Instapane — Design System v1

Proposition de design system et document de brainstorming pour stratégie de communication du site Instapane (sur la base du travail de Corentin Escandre).

1. Marque & Identité

Nom de marque

Instapane (un seul « n »). Domaine : instapane.fr. Email : contact@instapane.fr.

Baseline

"une panne, instapane." — Cette baseline est indissociable du logo. Le logo ne peut pas être utilisé sans elle (charte p.4).

Positionnement

2. Logotype

Construction du logo

Le logo se compose de 3 éléments :

• Le pictogramme : monogramme « i » et « p » — le « p » est traité en négatif du rectangle arrondi (l'immeuble). Le « i » est entièrement arrondi pour dénoter avec le rectangle.
• Le logotype : « instapane » en All Round Gothic
• La baseline : « une panne, instapane. » — obligatoire

Variantes autorisées

Règles d'utilisation (charte p.5)

Le rectangle arrondi : ADN de la marque

Le côté rectangle arrondi est l'élément identitaire central. Il doit être respecté dans :

• Les CTA (boutons)
• Les encadrés et cartes
• Les titrages et badges de section
• Les signatures et en-têtes

3. Palette de couleurs

Couleurs officielles (charte p.9)

Couleurs dérivées (design system web)

Règle du rose pâle (charte p.9)

Le rose pâle #F5B0CC ne peut pas être utilisé comme couleur principale. Il doit représenter moins de 10% des couleurs utilisées sur tous les supports. Usage recommandé :

• CTA secondaires et boutons d'accent
• Badges et labels importants
• Focus states des champs de formulaire
• Hover effects subtils
• Fonds d'accent (version très pâle #FBDBE9)

Variables CSS

:root {
    /* Couleurs principales (charte) */
    --primary: #333233;
    --primary-light: #4d4c4d;
    --primary-dark: #222122;
    --white: #ffffff;

    /* Couleur secondaire — rose pâle (max 10%) */
    --accent: #F5B0CC;
    --accent-light: #FBDBE9;
    --accent-dark: #E89AB5;

    /* Texte */
    --text: #333233;
    --text-light: #6B6A6B;
    --text-muted: #999899;

    /* Fonds */
    --bg: #ffffff;
    --bg-light: #F9F9F9;
    --bg-warm: #FDF6F9;

    /* Bordures */
    --border: #E8E8E8;
    --border-light: #F0F0F0;
}

4. Typographie

Police officielle : All Round Gothic (charte p.8)

Toute la famille typographique peut être utilisée. Règle : écart minimum de 2 graisses entre le texte courant et les éléments de titrage.

Chaque graisse existe en variante oblique (italique).

Hiérarchie typographique

/* Hero Title (H1) */
font-family: 'All Round Gothic';
font-size: 3.5rem;
font-weight: 700;        /* Bold */
line-height: 1.1;
color: var(--primary);

/* Section Title (H2) */
font-size: 2.75rem;
font-weight: 700;        /* Bold */

/* Feature Title (H3) */
font-size: 1.35rem;
font-weight: 700;        /* Bold */

/* Body Text */
font-size: 1.05rem;
font-weight: 400;        /* Book */
line-height: 1.7;
color: var(--text-light);

/* Labels & Badges */
font-size: 0.85rem;
font-weight: 600;        /* Demi */

Stack de polices

font-family: 'All Round Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Justification : All Round Gothic est la police officielle de la marque. Le fallback sur les polices système assure la compatibilité si les fichiers OTF ne sont pas chargés.

5. Arrondis & Formes

Les formes arrondies sont l'ADN de la marque (charte p.4). Le rectangle arrondi doit être omniprésent.

Échelle d'arrondis

--radius-pill: 50px;    /* Boutons CTA, badges, labels */
--radius-lg: 20px;      /* Cartes, visuels, sections */
--radius-md: 14px;      /* Icônes, sous-composants */
--radius-sm: 10px;      /* Inputs, champs de formulaire */

Principes :

• Le « i » du logo est toujours pleinement arrondi (pill shape)
• Le rectangle/immeuble est arrondi mais pas pill (coins modérés)
• Les CTA et badges reprennent la forme pill (border-radius: 50px)
• Pas de coins vifs (border-radius: 0) nulle part dans le design

6. Composants

Boutons

.btn-primary {
    padding: 0.9rem 2rem;
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
    border-radius: var(--radius-pill);  /* 50px — forme pill */
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 600;                   /* Demi */
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(51, 50, 51, 0.08);
}

Badges / Labels de section

Les badges reprennent la forme pill (rectangle arrondi) identique aux badges du sommaire de la charte graphique (p.2). Ils servent de labels de section.

Cartes (Feature cards)

.feature-card {
    padding: 2.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);     /* 20px */
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--accent);          /* Rose pâle en accent */
    box-shadow: 0 16px 48px rgba(51, 50, 51, 0.1);
    transform: translateY(-4px);
}

Champs de formulaire

input, textarea, select {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);     /* 10px */
    font-family: var(--font-family);
}

input:focus {
    border-color: var(--accent);          /* Rose pâle */
    box-shadow: 0 0 0 3px var(--accent-light);  /* #FBDBE9 */
}

7. Grille & Espacements

/* Conteneur principal */
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;

/* Espacements verticaux des sections */
padding: 7rem 2rem;        /* Desktop */
padding: 4.5rem 1.5rem;    /* Mobile */

/* Grilles */
Features : grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
Gallery  : grid-template-columns: repeat(3, 1fr); gap: 1rem;
Hero     : grid-template-columns: 1fr 1fr; gap: 4rem;

8. Animations & Interactions

Principes

• Subtilité : animations discrètes, professionnelles
• Fonctionnelles : feedback visuel pour l'utilisateur, pas de décoration gratuite
• Performances : CSS uniquement (GPU-accelerated), pas de JS pour les animations

Transitions standard

--transition-fast: 0.2s ease;   /* Focus, hover rapides */
--transition-base: 0.3s ease;   /* Hover cartes, boutons */

Micro-interactions

Animation d'entrée (Hero)

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-visual img {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

9. Responsive & Accessibilité

Breakpoints

Adaptations mobiles

• CTA empilés verticalement (flex-direction: column)
• Navigation simplifiée (liens masqués, logo seul)
• Gallery et Instagram : passage en 1-2 colonnes
• Formulaires : padding réduit

Accessibilité

• Contraste : #333233 sur blanc = ratio 12.6:1 (AAA)
• Contraste accent : #333233 sur #F5B0CC = ratio 5.1:1 (AA)
• HTML sémantique : nav, section, form, label, footer
• Focus visible : ring rose pâle sur tous les éléments interactifs
• Labels explicites : tous les champs de formulaire ont un label associé
• smooth scroll via scroll-behavior: smooth

10. Architecture du site

Structure (8 sections + nav + footer)

11. Propositions de layout

Trois propositions de layout ont été développées. Chacune respecte intégralement le design system ci-dessus (charte couleurs, typographie All Round Gothic, arrondis pill, règle des 10% rose, logo unicolore). Elles diffèrent par leur agencement spatial et leur tonalité visuelle.

Proposition 1 — Split classique

Fichier : proposition-1.html — Voir en ligne

Tonalité : Professionnelle et structurée. Approche éprouvée, lecture naturelle gauche-droite.

Proposition 2 — Bento Grid centré

Fichier : proposition-2.html — Voir en ligne

Tonalité : Moderne et dynamique. Inspirée des dashboards SaaS / fintech (Qonto). Hiérarchie visuelle forte grâce aux tailles asymétriques.

Proposition 3 — Dark Immersive

Fichier : proposition-3.html — Voir en ligne

Tonalité : Bold et immersive. Entrée en matière forte avec le dark hero. Rythme de lecture guidé par le zigzag. Le formulaire à onglets optimise l'espace.

Tableau comparatif

Retour au portail des propositions