FO Centrale Bercy: art direction, design and Webflow website for the FO union of Bercy's central administration

FO Centrale de Bercy is the Force Ouvrière trade union for staff of the central administration of France's economy and finance ministries: tenured civil servants, contract staff, apprentices and retirees, from administrative, technical and medical-social services, across every site that comes under the central administration. It supports staff with their careers, pay, working conditions and rights, and sits on the social dialogue bodies.

FO Centrale de Bercy entrusted Gemeos, a web agency for non-profits, with the art direction of its new website, its design, its Webflow development and its SEO structure.

MacBook Pro open on the FO Centrale Bercy home page, “A question, a difficulty? Don't stay alone.”, on a wooden desk next to a lamp and a cup of coffee

A site where staff feel welcome before they are informed

Staff looking for a union often have a specific question and a bit of anxiety: a disputed appraisal, a contract up for renewal, a transfer, a membership fee they don't know the amount of. The site had to speak to everyone, from a young graduate to someone at the end of their career, from secretaries to heads of department and technical teams, with a warm, welcoming tone, without overdoing it. The historic logo stayed: the site's identity had to accommodate it without being built around it.

Gemeos explored three look & feel directions, all in warm colours, around the faces of staff and the union's gestures. The site, designed and then built on Webflow, starts from a simple question, “Don't stay alone”, and points everyone to what they need: their rights, the calendar of meetings, practical tools, membership benefits and an online membership form that calculates the fee.

Industry: Services
Services: Artistic Direction; UX/UI Design; Development; SEO

The three home page directions explored for FO Centrale Bercy, side by side on a burgundy background

Warming up an administrative vocabulary, without overdoing it

Rights, statuses, pay grades, committees: the subject has everything of a service counter. The brief asked for the opposite: warm colours, people of all ages and backgrounds, a calm office atmosphere where you want to stay. The three directions share this intention and the FO red reserved for actions; they differ in how they show staff and make the page speak.

The palette sets a burgundy (#5F1E10) for backgrounds and gravity, the FO red (#D83224) for buttons and accents, an apricot (#FFCABA), a greige (#EFEFEB) for light backgrounds and an ink (#111111) for the footer. Text is set in each device's system font: no font to download, pages that display instantly, on an administration workstation as on a phone.

Two registers of images answer each other. Staff portraits are cut out by hand and outlined in red, like a sticker slapped on quickly because there is something important to say. Illustrated characters, one per mission, carry the flag, lend support, welcome people or travel with the negotiated benefits. And under the words that matter, a hand-drawn red line.

Direction 1 - The cut-out portrait
Portraits torn out with a red cut-out edge, highlighted handwriting reserved for the words that carry emotion, illustrated characters in full action, one per mission. FO red, burgundy, cream and warm ink. Intended perception: you open a door, you don't get redirected to a department.
Direction 2 - The frame
A single geometric typeface, photos cut into irregular shapes on an overflowing coloured background, hand-drawn white lines and the buildings blended into the burgundy. Intended perception: a structured organisation that inspires trust before the very first line.
Direction 3 - Presence
A large full-width editorial photograph, serif headings, the FO flag mascot running through the sections, the sites in photographs and a numbered list for the method. Intended perception: faces first, structure second.

Direction 1, The cut-out portrait: hero with a red-outlined portrait and cards for the Rouen, Chevaleret and Bercy sites

Concept 1

MacBook Pro open on the page “Joining us means no longer being alone”, on a round table with biscuits and coffee

A question first, the answer right after

The home page doesn't start with the union's structure but with the staff member's situation: “A question, a difficulty? Don't stay alone.” Then it shows how things really happen, a conversation between representatives taking a case in hand, the presence on every site, what membership brings and the team that answers.

Page	What it does for the visitor
Home	The promise “Don't stay alone”, the central administration sites, the representatives' conversation, reasons to join, support, rights and tools, the team
About us	The history since 1948, the union's independence, its place in the FO Finance Federation, the bodies it sits on and the representatives to contact
My benefits	Support throughout one's career, help in case of dispute, negotiated benefits, the four FO networks and the fee scale by pay grade
Know your rights	Career and professional path, contract staff, working conditions, diversity and inclusion: one page per topic, with the related resources
Social calendar	The calendar of committees, specialised bodies and working groups, a page per meeting and a glossary of the bodies
Toolbox	Practical guides and forms to download, filtered by type
News	Central administration news, national news, the editorial and the press review
Membership	The five-step online form, replacing the paper membership slip

Pages alternate light backgrounds and burgundy blocks, with cut-out portraits at the top and illustrated characters next to the headings. The same building blocks recur everywhere: benefit cards, a numbered accordion, site tabs, meeting cards, a “Don't face your situation alone” call-out block. Even the error page keeps the house tone: “This page is on strike”.

Pro Display XDR open on the FO Centrale Bercy membership form, “Join us, in 5 minutes.”

Joining in five minutes, with no paper form

The membership form replaces the paper slip. It moves forward in five steps (fee, identity, contact details, payment, confirmation) and starts with the question everyone asks: how much does it cost. Staff state that they are in active service, enter the pay index shown on their payslip, and the site immediately displays their annual fee, their bracket and the real cost after the 66% tax credit. The full scale stays one click away.

The site is built on Webflow. Calendar meetings, news and their categories, resources and rights topics live in CMS collections, each served by a single template: announcing a working group or publishing a guide takes no layout work. The calendar filters by body, the tools by type, and the conversation on the home page writes itself out as you scroll.

MacBook Pro open on the “News & union information” page, on a coffee table next to an armchair

Clear answers to the questions staff ask

Staff type “droits des contractuels” (contract staff rights), “comité social d'administration” (administrative social committee) or “cotisation syndicale crédit d'impôt” (union fee tax credit) before they think of a union. The site is structured for these searches: one page per rights topic, a page per meeting, a glossary of the bodies, and pages that answer a specific question rather than a brochure.

Workstream	Detail
Landing pages	One page per rights topic (career and professional path, contract staff, working conditions, diversity and inclusion), benefits and the fee scale, online membership
Content	48 meeting pages in the calendar, around forty news items in four categories, guides and forms, and a glossary of the bodies (CSAC, specialised body, working group, technical election meeting)
Tags & metadata	Title and meta description written for each main page and each hub, a single H1 per page, breadcrumb on inner pages
Domain	Canonical tag pointing to the focentrale-bercy.fr domain on every page and a sitemap generated by the CMS, ready for launch
Structured data	WorkersUnion and WebSite on the home page, main pages and hubs, with each page's type (AboutPage, CollectionPage, ContactPage) and a BreadcrumbList

Readable by search engines and AI assistants alike

The structured data describes the union unambiguously: its full name, its founding date, its address on rue de Bercy, its contact address and its membership of the Force Ouvrière Finance Federation. The calendar glossary explains in a few lines what each body does: short definitions tied to an identified organisation, which search engines and AI assistants can reuse.