OOTB Style Guide

Fondations

Couleurs

Violet

var(--ootb-violet)

#921e6d

Orange

var(--ootb-orange)

#e7461c

Green

var(--ootb-green)

#40ad50

Blue

var(--ootb-blue)

#0890bd

Turquoise

var(--ootb-turquoise)

#69b29e

Yellow

var(--ootb-yellow)

#f9b004

Système Typographique

Hiérarchie typographique

H1 - Bebas Neue - Titres principaux

OUT OF THE BOOKS

Usage : Titres de sections principales, marque

H2 - Raleway Light Italic - Sous-titres

La plateforme des pédagogies innovantes

Usage : Taglines, descriptions principales

H3 - Caveat - Accents manuscrits

Notes et accents éducatifs

Usage : Annotations, touches personnelles

Corps de texte - Raleway Variable

Portez ce vieux whisky au juge blond qui fume

Usage : Contenu principal, descriptions

Variations Raleway

font-light

Portez ce vieux whisky au juge blond qui fume

font-normal

Portez ce vieux whisky au juge blond qui fume

font-medium

Portez ce vieux whisky au juge blond qui fume

font-semibold

Portez ce vieux whisky au juge blond qui fume

font-bold

Portez ce vieux whisky au juge blond qui fume

Grille & Layout

Largeurs standards

max-w-6xl : Sections hero et pleine largeur

max-w-6xl : Conteneur principal

max-w-4xl : Blocs de texte

  • max-w-6xl (1280px) : Sections larges comme le hero
  • max-w-6xl (1152px) : Layout principal du site
  • max-w-4xl (896px) : Optimisé pour la lecture
  • Padding horizontal : px-4 sm:px-6 lg:px-8

Layout Mission Section

Image
2/5 colonnes

Contenu
3/5 colonnes

Layout asymétrique pour mettre en avant le contenu

Layout Featured Content

En-tête flexible

Carte 1

Carte 2

Carte 3

Grille responsive : 1 colonne (mobile) → 3 colonnes (desktop)

Points clés

  • Approche mobile-first avec grid-cols-1 par défaut
  • Breakpoint principal à md: pour le passage en colonnes
  • Utilisation de gap-8 pour l'espacement uniforme
  • Ratios cohérents avec aspect-[3/4] pour les cartes
Composants

Atomes

Boutons

Variantes de base

Variantes Premium

Variante Card

Avec icônes

États

Badges

Festival Podcast Émission Appel à projets

Icônes

Navigation
Lien externe
Télécharger
Partager

Molécules

Action Badges

Festival Podcast Émission Appel à projets

Organismes

Hero Section

OUT OF THE BOOKS

La plateforme des pédagogies innovantes !

Festival Podcast Émission Appel à projets

Gradient Hero Section

                
// Dégradé vertical avec 4 points d'arrêt

bg-gradient-to-b from-[--ootb-turquoise] from-0%
via-[--ootb-turquoise] via-60%
via-[color-mix(in_srgb,var(--ootb-turquoise)_90%,white)] via-70%
via-[color-mix(in_srgb,var(--ootb-turquoise)_60%,white)] via-75%
to-[color-mix(in_srgb,var(--ootb-turquoise)_30%,white)] to-80%

Un dégradé progressif qui maintient une zone turquoise solide jusqu'à 60%, puis transite doucement vers le blanc en trois étapes (90%, 60%, puis 30% de turquoise) pour une meilleure intégration avec les nuages.

Cards

Podcast
TV

Iconographie & Éléments graphiques

Icônes fonctionnelles

tabler:book
tabler:book-2
tabler:books
tabler:notebook

Utilisation de Tabler Icons, une suite d'icônes open source minimaliste et cohérente ( tabler-icons.io )

Icônes décoratives

Éléments décoratifs

Motif de nuages

Nuages & Dégradé

Fond signature avec dégradé et motif de nuages

Violet

Turquoise

Vert

Animations

Flottement

animate-float

Rotation

hover:rotate-12

Scale

hover:scale-110

Guide Développeur

Organisation des styles

1. CustomStyles.astro

Source unique de vérité pour les couleurs de marque et styles globaux.

// src/components/CustomStyles.astro :root { /* Couleurs primaires de la marque */ --ootb-violet: #921e6d; --ootb-orange: #e7461c; --ootb-turquoise: #69b29e; --ootb-green: #40ad50; --ootb-blue: #0890bd; --ootb-yellow: #f9b004; /* Couleurs neutres */ --ootb-gray-50: #f9fafb; --ootb-gray-100: #f3f4f6; --ootb-gray-700: #374151; --ootb-gray-900: #111827; }
  • Définition des couleurs brutes de la marque
  • Une seule source de vérité pour les valeurs hexadécimales
  • Inclut les couleurs primaires et neutres
  • Pas de duplication de valeurs

2. tailwind.config.js

Mapping sémantique des couleurs et configuration Tailwind.

// tailwind.config.js export default { theme: { extend: { colors: { // Mapping des couleurs de marque 'brand': { violet: 'var(--ootb-violet)', orange: 'var(--ootb-orange)', turquoise: 'var(--ootb-turquoise)', green: 'var(--ootb-green)', blue: 'var(--ootb-blue)', yellow: 'var(--ootb-yellow)', }, // Couleurs sémantiques par type de contenu 'content': { actualite: 'var(--ootb-gray-700)', podcast: 'var(--ootb-violet)', tv: 'var(--ootb-green)', fiche: 'var(--ootb-blue)', premium: 'var(--ootb-orange)', } } } } }
  • Organisation sémantique des couleurs
  • Mapping vers les variables CSS de marque
  • Définition des couleurs par type de contenu
  • Intégration avec l'écosystème Tailwind

3. tailwind.css

Utilitaires et variations de couleurs.

/* src/assets/styles/tailwind.css */ @layer utilities { /* Utilitaires pour les fonds avec opacité */ .bg-content-actualite { @apply bg-[color-mix(in_srgb,theme(colors.content.actualite)_10%,transparent)]; } .bg-content-podcast { @apply bg-[color-mix(in_srgb,theme(colors.content.podcast)_10%,transparent)]; } .bg-content-tv { @apply bg-[color-mix(in_srgb,theme(colors.content.tv)_10%,transparent)]; } }
  • Utilitaires personnalisés
  • Variations de couleurs (opacité, mélanges)
  • Classes composées réutilisables

Bonnes pratiques

Hiérarchie des couleurs :

1. Couleurs de marque (CustomStyles.astro)

Valeurs hexadécimales de base

2. Mapping sémantique (tailwind.config.js)

Organisation par contexte d'utilisation

3. Utilitaires (tailwind.css)

Variations et classes composées

Exemples d'utilisation :

<!-- Utilisation des couleurs de marque --> <div class="text-brand-violet"> Texte en violet de marque </div> <!-- Utilisation des couleurs de contenu --> <div class="text-content-podcast"> Texte pour le podcast </div> <!-- Utilisation des fonds avec opacité --> <div class="bg-content-podcast hover:bg-content-podcast/20"> Fond pour le podcast </div>

Points clés à retenir :

  • Une seule source de vérité pour les valeurs hexadécimales
  • Organisation sémantique des couleurs par contexte
  • Utilisation des utilitaires Tailwind pour la cohérence
  • Éviter la duplication des valeurs de couleurs
  • Préférer les classes utilitaires aux styles en ligne

Accessibilité

Principes clés

  • Contraste minimum 4.5:1
  • Support de la navigation au clavier
  • Textes alternatifs descriptifs
  • Structure sémantique HTML5

Performance

Objectifs

  • Score Lighthouse > 90
  • First Contentful Paint < 1.5s
  • Time to Interactive < 3.5s
  • Cumulative Layout Shift < 0.1

Code Snippets

Hero Section
<section class="relative bg-[--ootb-turquoise] overflow-hidden"> <!-- Fond décoratif --> <Image src={cloudsBg} alt="" class="absolute bottom-0 left-0 right-0 w-full h-auto object-cover object-bottom transform scale-105" widths={[400, 800]} sizes="100vw" loading="eager" /> <!-- Contenu --> <div class="relative z-10 max-w-6xl mx-auto px-4 py-16 md:py-24"> <h1 class="font-heading text-6xl md:text-7xl text-white mb-8"> OUT OF THE BOOKS </h1> <h2 class="font-body font-light italic text-3xl md:text-5xl text-white mb-12"> La plateforme des pédagogies <span class="relative inline-block"> <span class="text-[--ootb-yellow]">innovantes !</span> <span class="absolute bottom-0 left-0 w-[102%] h-[0.12em] bg-[--ootb-yellow] rounded-full transform -rotate-1"></span> <span class="absolute bottom-[0.1em] left-0 w-[101%] h-[0.08em] bg-[--ootb-yellow]/70 rounded-full transform rotate-[0.5deg]"></span> <span class="absolute bottom-[-0.1em] left-0 w-[103%] h-[0.1em] bg-[--ootb-yellow]/60 rounded-full transform -rotate-[1.5deg]"></span> </span> </h2> <div class="flex flex-wrap gap-3"> <ActionBadge variant="festival">Festival</ActionBadge> <ActionBadge variant="podcast">Podcast</ActionBadge> <ActionBadge variant="emission">Émission</ActionBadge> <ActionBadge variant="appel">Appel à projets</ActionBadge> </div> </div> </section>
Action Badge Component
--- interface Props { variant?: 'festival' | 'podcast' | 'emission' | 'appel'; class?: string; } const { variant = 'festival', class: className } = Astro.props; const variants = { festival: 'bg-[var(--ootb-orange)] hover:bg-[color-mix(in_srgb,var(--ootb-orange)_90%,black)]', podcast: 'bg-[var(--ootb-violet)] hover:bg-[color-mix(in_srgb,var(--ootb-violet)_90%,black)]', emission: 'bg-[var(--ootb-green)] hover:bg-[color-mix(in_srgb,var(--ootb-green)_90%,black)]', appel: 'bg-[var(--ootb-blue)] hover:bg-[color-mix(in_srgb,var(--ootb-blue)_90%,black)]' }; --- <span class:list={[ 'inline-flex items-center justify-center', 'text-white text-md font-medium', 'transform skew-x-[-16deg]', 'shadow-sm hover:shadow-md', 'transition-all duration-300', 'whitespace-nowrap max-w-[180px]', variants[variant], className ]} > <span class="transform skew-x-[16deg] font-body italic font-extrabold uppercase tracking-wide px-2 py-1"> <slot /> </span> </span>
Underline Effect
<span class="relative inline-block"> <span class="text-[--ootb-yellow]">innovantes !</span> <!-- Ligne principale --> <span class="absolute bottom-0 left-0 w-[102%] h-[0.12em] bg-[--ootb-yellow] rounded-full transform -rotate-1 translate-x-[-1%]"> </span> <!-- Ligne secondaire 1 --> <span class="absolute bottom-[0.1em] left-0 w-[101%] h-[0.08em] bg-[--ootb-yellow]/70 rounded-full transform rotate-[0.5deg] translate-x-[-2%]"> </span> <!-- Ligne secondaire 2 --> <span class="absolute bottom-[-0.1em] left-0 w-[103%] h-[0.1em] bg-[--ootb-yellow]/60 rounded-full transform -rotate-[1.5deg] translate-x-[1%]"> </span> </span>