# Raneo — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.raneo.co/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:44:18.643Z at 1440×1000 — https://www.raneo.co/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The website features a clean, modern, and tech-oriented aesthetic with a strong contrast between dark and light sections. It utilizes a striking blue accent color against deep blacks and pure whites. The typography is a mix of geometric sans-serif (Google Sans) for prominent headings and a neutral sans-serif (Inter) for body copy. Layouts are spacious with thin line borders defining sections and cards, while buttons are distinctively pill-shaped.

## Classification

- Industry: technology
- Site type: Blog
- Business model: AI
- Styles: minimal, corporate, geometric, bold
- Platform: Custom code
- Technology: Astro, GSAP

## Typography

- Display: Google Sans — weight 400; size 64px; line-height 70.4px; tracking -1.3px; Regular (100% role confidence, computed values)
- Heading: Google Sans — weight 400; size 48px; line-height 52.8px; tracking -1px; Regular (95% role confidence, computed values)
- Body: Inter — weight 400; size 20px; line-height 28px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) is the primary background color for the main content body. (100% role confidence, computed values)
- Text — text #161616: color-1: computed rgb(22, 22, 22); AI role: Near black (#161616) is used for primary text on light backgrounds. (100% role confidence, computed values)
- Accent — accent #0144F5: color-4: computed rgb(1, 68, 245); AI role: Bright blue (#0144F5) is used for active states, highlighted backgrounds, and links. (100% role confidence, computed values)
- Surface — surface #F5F5F5: color-3: computed rgb(245, 245, 245); AI role: Light gray (#F5F5F5) is used for card backgrounds and subtle sections. (90% role confidence, computed values)
- Border — border #D6D6D6: color-12: computed rgb(214, 214, 214); AI role: Light gray (#D6D6D6) is used for borders around cards and divider lines. (90% role confidence, computed values)
- Muted Text — muted text #707070: color-9: computed rgb(112, 112, 112); AI role: Medium gray (#707070) is used for secondary text and icons. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "32px",
    "lineHeight": "38.4px",
    "letterSpacing": "-0.6px",
    "traits": "Regular",
    "count": 33,
    "contexts": [
      {
        "tag": "h3",
        "text": "La fin de la ressaisie des bons de commande.",
        "top": 1333,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Quelqu'un ressaisit des données d'un logiciel à un autre.",
        "top": 3176,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Un tableur partagé est devenu un outil critique.",
        "top": 3526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "48px",
    "lineHeight": "52.8px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "h2",
        "text": "Ce que ça donne, chez un client.",
        "top": 1161,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Huit façons de vous rendre du temps.",
        "top": 2056,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Vous vous reconnaissez ?",
        "top": 3037,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Raneo OS",
        "top": 8911,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "BuildSync",
        "top": 8911,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Ficelle, poste 4",
        "top": 8911,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "64px",
    "lineHeight": "70.4px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Automatisation et logiciels sur mesure.",
        "top": 172,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 79,
    "contexts": [
      {
        "tag": "span",
        "text": "Nous contacter",
        "top": 254,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "N",
        "top": 256,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "o",
        "top": 256,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 44,
    "contexts": [
      {
        "tag": "p",
        "text": "Saisie dans l’ERP",
        "top": 2377,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Relances clients",
        "top": 2417,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Contrôle des bons",
        "top": 2457,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 28,
    "contexts": [
      {
        "tag": "span",
        "text": "Découvrez notre dernier cas client",
        "top": 10,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "[ Ils nous ont fait confiance ]",
        "top": 908,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "[",
        "top": 916,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "p",
        "text": "Diagnostic · traitement des commandes",
        "top": 2302,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Quand",
        "top": 2318,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Alors",
        "top": 2441,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Une facture reçue par e-mail est lue, contrôlée puis enregistrée dans Pennylane, sans ressaisie.",
        "top": 600,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Un pont relie HubSpot et Pennylane : le devis signé part en facturation, le paiement reçu revient da",
        "top": 600,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Une application de planning se construit pour une entreprise de chauffage : les interventions s’ajou",
        "top": 600,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Agence d’automatisation et d’IA à Rennes : on construit ce qui vous manque, livré en quelques semain",
        "top": 164,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Bons de commande, factures, contacts. Si un humain copie ce qu'un logiciel a déjà, c'est automatisab",
        "top": 3364,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tout le monde en dépend, personne n'ose y toucher. C'est le moment d'en faire un outil métier solide",
        "top": 3694,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "Où part le temps, chaque semaine",
        "top": 2321,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "ERP",
        "top": 2367,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CRM",
        "top": 2372,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Mesuré sur place, avec vos équipes",
        "top": 2566,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "bons traitéssans ressaisie",
        "top": 2546,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Complet, signé par le client.",
        "top": 2452,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Bonjour, 40 pièces TL-220 à livrer le 12/11, merci.",
        "top": 2345,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "© 2026 Raneo",
        "top": 12261,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "19.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 121,
    "contexts": [
      {
        "tag": "a",
        "text": "Aller au contenu",
        "top": -42,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Services",
        "top": 60,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Cas clients",
        "top": 60,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Inter",
    "fontStack": "Inter, \"Inter Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "span",
        "text": "CEO de Raneo",
        "top": 7464,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "COO de Raneo",
        "top": 7464,
        "property": "font"
      },
      {
        "tag": "dt",
        "text": "Arrêts non planifiés",
        "top": 8272,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Google Sans",
    "fontStack": "\"Google Sans\", \"Google Sans Fallback\", system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "span",
        "text": "Diagnostic et cadrage",
        "top": 2230,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Automatisation des tâches",
        "top": 2349,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Ponts entre logiciels",
        "top": 2406,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#161616",
    "alpha": 1,
    "cssValue": "rgb(22, 22, 22)",
    "count": 193,
    "contexts": [
      {
        "tag": "a",
        "text": "Aller au contenu",
        "top": -42,
        "property": "text"
      },
      {
        "tag": "header",
        "text": "var e=3.22689,t=17.34451,n=e=>1-(1-e)**3,r=t=>`M23.7983 24H0V0H23.7983V24ZM20.5714 ${e}V20.7731H${e}",
        "top": 28,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Nous contacter",
        "top": 53,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 280,
    "contexts": [
      {
        "tag": "body",
        "text": "Aller au contenuDécouvrez notre dernier cas clientvar e=3.22689,t=17.34451,n=e=>1-(1-e)**3,r=t=>`M23",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Aller au contenu",
        "top": -42,
        "property": "control-background"
      },
      {
        "tag": "span",
        "text": "Découvrez notre dernier cas client",
        "top": 10,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F5F5F5",
    "alpha": 1,
    "cssValue": "rgb(245, 245, 245)",
    "count": 37,
    "contexts": [
      {
        "tag": "div",
        "text": "IndustrieAutomatisationLa fin de la ressaisie des bons de commande.« On retapait chaque bon de comma",
        "top": 1243,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "[Nos services]Huit façons de vous rendre du temps.Tous nos servicesDiagnostic et cadrageUne demi-jou",
        "top": 1895,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "",
        "top": 2378,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#0144F5",
    "alpha": 1,
    "cssValue": "rgb(1, 68, 245)",
    "count": 23,
    "contexts": [
      {
        "tag": "aside",
        "text": "Découvrez notre dernier cas client",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Applications sur mesure",
        "top": 352,
        "property": "control-background"
      },
      {
        "tag": "li",
        "text": "Industrie",
        "top": 1275,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#151515",
    "alpha": 0.23921568627450981,
    "cssValue": "color(srgb 0.0862745 0.0862745 0.0862745 / 0.24)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6396,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#2A2A2A",
    "alpha": 1,
    "cssValue": "rgb(42, 42, 42)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "AutomatisationsPonts entre logicielsApplications sur mesureUne facture reçue par e-mail est lue, con",
        "top": 352,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Automatisations",
        "top": 352,
        "property": "control-background"
      },
      {
        "tag": "figcaption",
        "text": "Louis ProchwiczCEO de Raneo (LinkedIn, nouvel onglet)Enzo DelamarreCOO de Raneo (LinkedIn, nouvel on",
        "top": 7423,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#2A62F7",
    "alpha": 1,
    "cssValue": "rgb(42, 98, 247)",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "Quelqu'un ressaisit des données d'un logiciel à un autre.Bons de commande, factures, contacts. Si un",
        "top": 3119,
        "property": "border"
      },
      {
        "tag": "li",
        "text": "Quelqu'un ressaisit des données d'un logiciel à un autre.Bons de commande, factures, contacts. Si un",
        "top": 3152,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#919191",
    "alpha": 1,
    "cssValue": "rgb(145, 145, 145)",
    "count": 103,
    "contexts": [
      {
        "tag": "p",
        "text": "Agence d’automatisation et d’IA à Rennes : on construit ce qui vous manque, livré en quelques semain",
        "top": 164,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Automatisations",
        "top": 364,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 364,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#707070",
    "alpha": 1,
    "cssValue": "rgb(112, 112, 112)",
    "count": 91,
    "contexts": [
      {
        "tag": "p",
        "text": "« On retapait chaque bon de commande. Aujourd'hui, on les valide. Ça n'a l'air de rien, c'est six he",
        "top": 1530,
        "property": "text"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 2346,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 2348,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.050980392156862744,
    "cssValue": "color(srgb 1 1 1 / 0.05)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2856,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#D5D5D5",
    "alpha": 0.43137254901960786,
    "cssValue": "color(srgb 0.839216 0.839216 0.839216 / 0.43)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 8442,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#D6D6D6",
    "alpha": 1,
    "cssValue": "rgb(214, 214, 214)",
    "count": 45,
    "contexts": [
      {
        "tag": "span",
        "text": "[",
        "top": 1128,
        "property": "text"
      },
      {
        "tag": "section",
        "text": "[Nos services]Huit façons de vous rendre du temps.Tous nos servicesDiagnostic et cadrageUne demi-jou",
        "top": 1895,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Diagnostic et cadrageUne demi-journée sur place pour mesurer ce qui vous coûte des heures.Automatisa",
        "top": 2207,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 23,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 352,
        "property": "background"
      },
      {
        "tag": "section",
        "text": "[Auto diagnostic]Vous vous reconnaissez ?Quelqu'un ressaisit des données d'un logiciel à un autre.Bo",
        "top": 2856,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Arrêts non planifiés÷3",
        "top": 8241,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFFFFF",
    "alpha": 0.1607843137254902,
    "cssValue": "rgba(255, 255, 255, 0.16)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "[Auto diagnostic]Vous vous reconnaissez ?Quelqu'un ressaisit des données d'un logiciel à un autre.Bo",
        "top": 2856,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#191919",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(22, 22, 22, 0.12)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Diagnostic et cadrageUne demi-journée sur place pour mesurer ce qui vous coûte des heures.Automatisa",
        "top": 2208,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#FFFFFF",
    "alpha": 0.3215686274509804,
    "cssValue": "rgba(255, 255, 255, 0.32)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "[",
        "top": 3004,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#818181",
    "alpha": 1,
    "cssValue": "rgb(129, 129, 129)",
    "count": 1,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 2376,
        "property": "svg-stroke"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between sections (likely 120px+). Internal card padding is substantial, establishing a calm, uncrowded rhythm.
- Corner style: Distinct contrast between fully rounded pill shapes for interactive elements and sharp corners for structural layout elements.
- Radius: Buttons appear to have a 9999px (pill) border-radius, while layout cards and images mostly use 0px.
- Borders: Frequent use of 1px solid borders to define edges, separate list items, and outline cards, often in light gray or semi-transparent white on dark backgrounds.
- Buttons: Solid fill (white on dark/blue backgrounds, or accent color on light backgrounds) with pill-shaped rounding and centered text.
- Content width: Content is constrained to a central column, likely around 1200px to 1400px max-width, maintaining readable line lengths.
- Density: Low density. The layout relies heavily on whitespace to separate concepts, focusing on one primary message per viewport height.
- Evidence: Observed from visual crops showing wide margins, pill-shaped 'Nous contacter' buttons, 1px line dividers in the FAQ and services sections.

## Sections

Gallery section count: 11. Each entry corresponds to one gallery capture.

1. **Features — Ce que ça donne, chez un client.** (Home)
   Reusable feature composition from Home, organized around “Ce que ça donne, chez un client.”.
   Capture: 1440×822px; page bounds 1023–1845px of 12328px; source section ID: `c6d28a90-1fb3-4570-bb18-0b965478cc1b`; image: https://media.designdetails.io/library/c4d1787525f5674453d6f44468809e3f043b3ee400161ba40ac69078333ce8d9/section-manual-c6d28a90-1fb3-4570-bb18-0b965478cc1b-1791701145308.webp
   SECTION.md v3.2: `c6d28a90-1fb3-4570-bb18-0b965478cc1b` (deterministic evidence; editorial review pending)
2. **Features — Vous vous reconnaissez ?** (Home)
   Reusable feature composition from Home, organized around “Vous vous reconnaissez ?”.
   Capture: 1440×929px; page bounds 2856–3785px of 12328px; source section ID: `1f2118f7-1d10-4673-8820-73bb563654ed`; image: https://media.designdetails.io/library/1f193a1f9ed4609c3ad3f3c14313a0d0558cb16f31b66c8be1ab61091641843c/section_crop-1f2118f7-2026-10-10T05-44-31-070Z.webp
   SECTION.md v3.2: `1f2118f7-1d10-4673-8820-73bb563654ed` (deterministic evidence; editorial review pending)
3. **Features — Des résultats, secteur par secteur.** (Home)
   Reusable feature composition from Home, organized around “Des résultats, secteur par secteur.”.
   Capture: 1440×830px; page bounds 7644–8474px of 12328px; source section ID: `38cb1ed0-5777-494b-863c-afa2224d94de`; image: https://media.designdetails.io/library/d30db102c0afda0eaefa7ffec52d6bf6f4356cf4d1bd9cf852c94c47e302abbd/section-manual-38cb1ed0-5777-494b-863c-afa2224d94de-1791701172953.webp
   SECTION.md v3.2: `38cb1ed0-5777-494b-863c-afa2224d94de` (deterministic evidence; editorial review pending)
4. **FAQ — Les questions qu’on nous pose avant de signer.** (Home)
   FAQ composition from Home, organized around “Les questions qu’on nous pose avant de signer.”.
   Capture: 1440×969px; page bounds 9990–10959px of 12328px; source section ID: `e460d909-b81d-4934-9c2d-40f3202e5ea4`; image: https://media.designdetails.io/library/fcbea121a59f74b6f0e4c76aeb964db85a68816bbc4bce099ec91a46172b7413/section_crop-e460d909-2026-10-10T05-44-36-908Z.webp
   SECTION.md v3.2: `e460d909-b81d-4934-9c2d-40f3202e5ea4` (deterministic evidence; editorial review pending)
5. **Hero — Custom Automation Agency Hero** (Home)
   AI suggestion (98% confidence): Complete hero with a strong headline, agency positioning, dual CTAs, tabbed visual showcase, and integrated client-logo proof.
   Capture: 1440×906px; page bounds 102–1008px of 12328px; source section ID: `31da2e12-c130-4edb-8809-ab27a9756582`; image: https://media.designdetails.io/library/2788223b20479ef5300feeccdbda873f33da541b96dfbab68411f43854b2da7a/31da2e12-c130-4edb-8809-ab27a9756582.webp
   SECTION.md v3.2: `31da2e12-c130-4edb-8809-ab27a9756582` (deterministic evidence; editorial review pending)
6. **Features — Eight Time-Saving Services** (Home)
   AI suggestion (96% confidence): Complete services showcase pairing an eight-item selector with a large detailed preview panel and a clear services CTA.
   Capture: 1440×927px; page bounds 1902–2829px of 12328px; source section ID: `d212506c-1820-476a-b676-1bbd98bd7cae`; image: https://media.designdetails.io/library/ac0657d2b51df8e0a297bc8d215bb55e392293e6647d5e4fc5f4f7395383320b/d212506c-1820-476a-b676-1bbd98bd7cae.webp
   SECTION.md v3.2: `d212506c-1820-476a-b676-1bbd98bd7cae` (deterministic evidence; editorial review pending)
7. **Founder — Raneo Founder Philosophy** (Home)
   AI suggestion (97% confidence): Complete, self-contained founder story panel pairing an office photograph with a prominent company philosophy quote, supporting copy, founder names and roles, and a link to learn more.
   Capture: 1440×595px; page bounds 6998–7593px of 12328px; source section ID: `e0f388bd-fe24-4c40-b534-ae41aa15558a`; image: https://media.designdetails.io/library/c785bd93fecfd28c89a4e255489e1035ce994cc356f5a1b3c7dab7527a8d6c91/section-manual-e0f388bd-fe24-4c40-b534-ae41aa15558a-1791701165994.webp
   SECTION.md v3.2: `e0f388bd-fe24-4c40-b534-ae41aa15558a` (deterministic evidence; editorial review pending)
8. **Feature Grid — Outils construits** (Home)
   AI suggestion (94% confidence): Complete, self-contained tools showcase with a heading, three consistent product cards, and a concluding call-to-action.
   Capture: 1440×744px; page bounds 8460–9204px of 12328px; source section ID: `70bbb54e-a777-4168-b4dd-0c1137767aed`; image: https://media.designdetails.io/library/5628e60fa1c44be89eef15d88e33a317922fcc31b8cc980fe0bc78b2d48ea96d/70bbb54e-a777-4168-b4dd-0c1137767aed.webp
   SECTION.md v3.2: `70bbb54e-a777-4168-b4dd-0c1137767aed` (deterministic evidence; editorial review pending)
9. **Editorial — Ressources et apprentissages** (Home)
   AI suggestion (96% confidence): Complete editorial resources section with its own heading, archive link, and a cohesive three-article card grid.
   Capture: 1440×714px; page bounds 9279–9993px of 12328px; source section ID: `0079eec9-a661-4946-8b12-83cd14389482`; image: https://media.designdetails.io/library/a68ae387ff9e4b4c1b302653ec495c37811257ce668de403cde0cd78a2fa3c0e/0079eec9-a661-4946-8b12-83cd14389482.webp
   SECTION.md v3.2: `0079eec9-a661-4946-8b12-83cd14389482` (deterministic evidence; editorial review pending)
10. **CTA — Thirty-Minute Contact CTA** (Home)
   AI suggestion (98% confidence): Complete, self-contained blue conversion banner with a clear contact label, bold value proposition, supporting copy, patterned visual field, and prominent contact button.
   Capture: 1440×401px; page bounds 10988–11389px of 12328px; source section ID: `10a979bb-4779-4ae7-beaa-4cb8ee9363d3`; image: https://media.designdetails.io/library/5a79be2d78779549684c84dd20ed36d0f7a75d01beeed2ee510dd74bd0d76af7/10a979bb-4779-4ae7-beaa-4cb8ee9363d3.webp
   SECTION.md v3.2: `10a979bb-4779-4ae7-beaa-4cb8ee9363d3` (deterministic evidence; editorial review pending)
11. **Footer — Raneo Multi-Column Footer** (Home)
   AI suggestion (99% confidence): Complete substantial footer featuring brand positioning and CTA, organized service and resource link columns, integrations, and a distinct legal bar.
   Capture: 1440×904px; page bounds 11416–12320px of 12328px; source section ID: `ffbd3dd2-7298-4c17-a299-f40594ff6bab`; image: https://media.designdetails.io/library/d2f69b83cc12db5d0a3b4b2402f87615b9f5367fcbc1dd341728f31794a4875c/ffbd3dd2-7298-4c17-a299-f40594ff6bab.webp
   SECTION.md v3.2: `ffbd3dd2-7298-4c17-a299-f40594ff6bab` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/6b15d3ace24438a7218c630ef531740e3b82a7b1ec3b0b983f1cf83735c5b04d/desktop_full-7776d2a0-2026-10-10T05-44-18-658Z.webp
- Mobile screenshot: https://media.designdetails.io/library/2a1f3d549b2a6c7902f3dc49451b5bbdb0645faa6ddce129e418d35ccbce09ec/mobile_full-7776d2a0-2026-10-10T05-45-04-839Z.webp
- Open Graph image: https://media.designdetails.io/library/b2488e65f8b620673e39306262c566b10828130b07bde8027281531f9e1a9571/og_image-7776d2a0-2026-10-10T05-44-27-474Z.webp
- Full-page video: https://media.designdetails.io/library/cfc26ae28ee4a032c1c99e9be3baa929ddc925d421895afcf10edd2604cf0ceb/motion-1791693919057.mp4
- Video poster: https://media.designdetails.io/library/88a84d149dea10f6303269093e413751a15402cd15b531495425a822285a4262/motion-poster-1791693919057.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Tabs
- Logo Strip
- Feature Card
- Primary Button
- Footer
- FAQ Accordion
- Interactive Diagnostic Scroll

## Quality rubric

Overall: 51.1/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: A clean, professionally executed black/white/blue SaaS-agency site with genuinely concrete client content and a nice hero automation metaphor, but its component vocabulary, color system, and motion are drawn almost entirely from the current generic tech-template playbook, and a structurally repetitive diagnostic section keeps it from reading as a fully resolved design system.

- Typography (15%): 58 — A disciplined two-family system (Google Sans for display/headings, Inter for body) with a clear size ladder from 64px hero down to 12px labels, consistent negative letter-spacing on larger sizes, and consistent weight usage. This is competent and legible but stays within very conventional SaaS/agency typographic conventions with no distinctive optical choices beyond the tracking tweaks.
- Color (10%): 54 — A tight black/white/blue system (#161616, #FFFFFF, #0144F5) with gray surfaces and borders (#F5F5F5, #D6D6D6) executes cleanly across dark hero, white content, and all-blue diagnostic sections, giving the page clear zoning. However bright-blue-on-black/white is an extremely common SaaS palette and the execution, while tidy, does not push beyond that template.
- Layout (20%): 55 — Spacious grid with constrained content width, consistent card/border treatment, and a logical top-to-bottom narrative (hero → logos → case study → services → diagnostic → testimonial → sector results → tools → resources → FAQ → contact → footer). The structure is legible, but the 'Vous vous reconnaissez ?' diagnostic block repeats its own section heading for each of the four numbered cards (crops show the same h2 reappearing at y≈3049, 4574, 6098, 7623 with cards 01–04), producing redundant, bloated scroll real estate rather than a single clean sticky progression.
- Motion (20%): 50 — Motion consists of a looping 3D conveyor-belt hero animation tied to tab selection, plus generic scroll-triggered opacity/translate-y entrances for text, cards, and a video-parallax section. This is pleasant but is the standard current web-template vocabulary (fade-up on scroll, slide transitions between question cards) without evidence of distinctive choreography, scroll-scrubbing, or bespoke easing.
- Originality (25%): 40 — The overall idiom — black hero, pill buttons, bright blue accent, card grids, FAQ accordion, logo strip — closely matches the dominant contemporary SaaS/agency template look (seen across many Linear/Vercel-adjacent sites). The one distinguishing idea, the tabbed 3D conveyor-belt metaphor for automation, is a genuine but singular device; everything else (diagnostic cards, sector filter tabs, resource cards) is assembled from familiar, interchangeable patterns rather than a cohesive invented system.
- Content (10%): 60 — Content is specific and purpose-built: named French client case studies with concrete metrics (÷3 arrêts non planifiés, 4h recherche évitée, 22 machines suivies), a time-loss diagnostic with real hour breakdowns, sector-specific filter tabs, and a resources section with dated articles and a calculator. This grounds the generic visual system in a believable, concrete business narrative.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A near black hero with large white type and a tabbed factory video sets a serious, technical tone, then client case studies in real photos back up the claims with named industries. Repeated royal blue panels pace the long scroll into clear chapters, so each 'Vous vous reconnaissez?' scenario reads as its own scannable problem and fix.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.