QuatreCentQuatre

How it’s built

Layout

A broad coral-red panel sits inside a substantial pale lavender margin, with rounded outer corners. A three-part pill/block wordmark anchors upper left and four nav labels sit upper right. Oversized French headline spans two lines and almost the full width. A cartoon hand emerging from a phone rises from the lower-left edge and overlaps the headline area; two small smiling/star stickers punctuate the field. Lower right contains a prompt and five vertically stacked response controls, one highlighted lavender. The composition uses strong diagonal opposition between the hand illustration and choice stack, with broad red negative space between them.

Type

The headline uses thin, oversized, black sans letters with generous open counters. Choice labels and navigation use much smaller rounded-looking sans text. The label/question and choices form a consistent secondary tier; active selection receives emphasis by fill and arrow, not larger type. No font name or exact size can be established from the gallery still.

Color and surface

Coral fills the panel, lavender frames it and marks the selected response. Black outlines make the white pill and rounded-rectangle controls crisp; the hand and phone use peach, yellow, pale blue, and pink fills with thick dark outlines and offset shadow strokes. The colored surfaces are flat, with little tonal shading or material texture.

Components

Compact brand lockup, four-link navigation, oversized statement, a hand/phone illustration, small sticker-like marks, a question prompt, and a five-choice stack with one selected state. The choices form the main actionable cluster; only their visible active styling is established.

What makes it work

• Flat color field with strong panel-to-margin contrast.
• Display-scale statement, smaller prompt, and compact choice labels.
• One selection state differentiated through color and arrow cue.

Prompts

Live behavior

Today

The opening is a coral-red full-screen hero with a small three-part 4/c/4 mark at upper left, compact desktop links at upper right, and a very large thin black French headline across two lines. A cutout phone-and-hand illustration anchors the lower left; a question and six white outlined pill links sit at the right. Small smiley and star graphics overlap the field. The first white section begins with a small uppercase eyebrow and oversized light-weight French copy.

Responsive

At 768px the desktop navigation and mark remain, the headline wraps to three lines, and the illustration sits below-left of the prompt and pill links. At 390px the navigation becomes a menu control, the headline takes four lines, the prompt and links stack, and the coral section ends around y=712 while the last links continue into the white field. Decorative graphics overlap the copy and buttons. These three sampled widths do not establish all breakpoints.

Scroll

The desktop-scroll measurement records actual scrollY 750. The viewport shows the clipped tail of the coral hero above the next white section, its small BIENVENUE eyebrow, and several lines of oversized explanatory text. The brand mark and a compact menu control remain at the top; only text visible in this saved viewport is sampled. This position does not establish the remaining page flow.