Visual identity
Brand guidelines
The visual rules of the EnerTchad website, as they are live: colours, typefaces, layout and components. Every example on this page is rendered with the site’s own code, in the light theme as in the dark theme.
01 · Principles
A company in formation that writes like a major.
Four rules hold the whole together. They apply to every page, in French, English and Arabic.
Large serif on a light ground, airy text, one idea per block. The page reads like an annual report, not like an advertisement.
Every pole and business page opens on a full-width photograph; reference and help pages open on a plain hero, without an image.
Sections are flat, separated by thin hairlines and by the white / mist alternation. No drop shadow, no rounded corners, no decorative gradient.
Gold is used for hairlines, eyebrows and figures. It never colours running text; the poles are told apart by image and title, not by colour.
02 · Colours
Ink, mist, gold.
A short palette, defined by variables: the dark theme only changes their values. The eight per-pole accents of earlier versions are no longer used.
Light theme
The default theme.
Ink text on paper; gold ink carries eyebrows and figures.
- Paper#FFFFFF · --pp-papersection ground
- Mist#F4F5F7 · --pp-mistevery other section, boxes
- Ink#0A1A2F · --pp-inkheadings and text
- Second ink#4B5870 · --pp-ink2leads, descriptions
- Hairline#E3E6EB · --pp-lineseparators
- Gold#B8913A · --pp-goldhairlines and bullets, never text
- Gold ink#7A5A12 · --pp-gold-inkeyebrows, figures, links on hover
Dark theme
Same roles, other values.
Follows the system setting or the theme button; gold lightens to stay legible.
- Paper#0A1422 · --pp-paperground
- Mist#0F1B2C · --pp-mistalternation
- Ink#F1F3F6 · --pp-inkheadings and text
- Second ink#A9B4C4 · --pp-ink2secondary text
- Hairline#22314A · --pp-lineseparators
- Gold#D9B567 · --pp-goldhairlines, eyebrows, figures
Night
The hero and the call to action.
The only dark ground of the light theme: under hero photographs, in the plain hero and in the closing chapter.
- Night#07111Fheroes and call to action
- Night ink#F3F1EC · --pp-night-inktext on night
- Second night ink#B4BDCB · --pp-night-2secondary text
- Night gold#D9B567 · --pp-gold-nightbuttons and hairlines on night
03 · Typefaces
A serif for the voice, a sans for the text.
Two families only. Instrument Serif, in regular weight, carries headings and figures; Inter carries text, eyebrows and the interface. Headings are never bold.
- Instrument Serifheadings and figures; falls back to Iowan Old Style, then Georgia. Latin file preloaded, “swap” display.
- Intertext and interface in 400, 500 and 600; falls back to the system font.
- Fluid sizespage and section titles scale with the screen width (clamp function); body text stays at 17 px.
04 · Layout
A wide grid, a slow rhythm.
The page moves forward in flat sections; white space sets the hierarchy before colour does.
- Widthcontent capped at 1,200 px, centred; side margins from 16 to 40 px depending on the screen.
- Rhythmsections spaced 72 to 128 px apart; section heading limited to 780 px wide, text to about 72 characters.
- Alternationevery other section on a mist ground; sections are separated by the change of ground, with no extra hairline.
- Blocksinside a section, a block puts the title on the left (one third) and the text on the right; on mobile, the title moves above.
- Breakpointstwo breakpoints: 1,000 px (two-column grids) and 760 px (one column).
Full-width photograph darkened on the left and at the bottom, breadcrumb, eyebrow, page title, lead, one white button and one link, then up to three figures. For poles, businesses and commercial pages.
Same composition on a night ground, without a photograph, underlined by a gold hairline; more compact. For help, reference, governance and legal pages.
05 · Components
Simple pieces, reused everywhere.
The examples below are rendered with the site’s classes: what the guidelines show is what the visitor sees. Interactive tools (calculators, forms, shop) keep their own styling and are inserted as they are.
Actions
Buttons and links
At most one solid button per screen; other actions are gold-underlined links, the arrow is drawn by the stylesheet.
Grid
Cards
Comparable items: short title, two lines of text, top hairline. Three or four per row.
Enhanced recovery with local inputs.
Corridor, depots, pipeline integrity.
Mini-refineries, stations, regulated price.
Figures
Counters
Figure in serif, label below; always dated and qualified (target, sector, in formation).
Box
Note
Gold hairline on the left, mist ground: warnings, notes on method.
Labels
Tags and mentions
Tags for keywords, mentions separated by a middle dot for dates and categories.
List
Label and value
- Legal formPublic limited company under OHADA law, in formation.
- Registered officeN’Djamena, Chad.
Sequence
Steps
Navigation
Navigation cards
Questions
Collapsible question
01 What is EnerTchad S.A.?
A public limited company under OHADA law, Chadian-owned, in formation.
02 Does EnerTchad already produce oil?
No: no asset is in operation to date.
Data
Table
| Product | Standard | Price |
|---|---|---|
| Diesel | EN 590 | 800 FCFA/L |
| Petrol | NF EN 228 | 700 FCFA/L |
On mobile, the table scrolls on its own without widening the page.
06 · Accessibility
Legible for all, in both themes.
Every release is checked automatically on all premium pages, in the light theme on a large screen and in the dark theme on mobile.
- Contrast, light themeink on paper 17.5:1; second ink 7.2:1 (on mist 6.6:1); gold ink 6.4:1. Gold (2.9:1) is used for hairlines only.
- Contrast, dark themeink 16.6:1; second ink 8.8:1; gold 9.5:1.
- Contrast, nightnight ink 16.8:1; second night ink 10.0:1. Every text pair exceeds level AA (4.5:1).
- Keyboardevery active element gets a 2 px gold outline on focus; a skip link leads to the main content.
- Targetslinks, buttons and tags are at least 44 px tall.
- Motionanimations are switched off when the system asks for reduced motion.
- Imagesevery photograph carries descriptive alternative text; decorative images are hidden from screen readers.
- Themeslight by default; dark follows the system setting or the theme button, and the choice is remembered.
07 · Arabic
The Arabic mini-site, right to left.
Same colours and same components; only direction, typefaces and image framing change.
- Reading directionArabic pages are written right to left (dir="rtl" attribute); grids, hairlines and arrows follow that direction.
- TypefacesNoto Naskh Arabic (weight 500) for headings and figures, Noto Sans Arabic for text, at 17 px with a 1.85 line height.
- LoadingArabic files are preloaded and displayed without late substitution (“optional”); the fallback serif is Georgia, to avoid any layout shift.
- Photographshero photographs are flipped horizontally, so the dark area holds the text on the right.
- Own stylesheetthe mini-site has its own stylesheet (home-inline-ar-premium.css), which reuses the variables and components of these guidelines.
08 · Page template
How many sections, how many words.
A page that overflows its template reads badly and indexes badly. The norm below is calibrated on the majors’ reference pages, measured as rendered — main content only, excluding the navigation bar, the footer, the call-to-action band and the related-content boxes.
Beyond eight sections, the page carries an “In this page” index listing its own markers and tracking position on scroll — the device the majors put on their long pages.