Adel ImmoConseils

Public website · Design system v1.0

A property journal, run by an operating agency.

The grotesk is the agency speaking; the serif is the journal. Everything else is drawn out of the mark's two unequal gabled volumes — near-black ink on paper, hairlines instead of shadow, one deep marine accent used at most twice a screen, and a 45° chamfer that appears exactly once.

Scope
Public site at /
Source
Supplied logo file
Languages
FR primary · AR RTL
Spec
brand-spec.md

01

Principles

Four rules that settle most arguments before they start. When a decision is not covered below, ask which of the five primary jobs it serves; if the answer is none, remove it.

01

Inventory is the hero

The homepage's job is to put a relevant property in front of someone in under three interactions. Nothing decorative may sit above the first search affordance.

02

One action per moment

Call, WhatsApp and visit request are the same intent. One of them is solid on a given screen; the other two are secondary. Three solid buttons is a failure.

03

Publish the gap

Missing data is shown as missing — Non communiqué — never rounded, guessed or quietly dropped. Transparency is the differentiator.

04

Not software

The public site is a property journal. Staff reach /app through one quiet text link in the footer — never a dashboard-shaped CTA.

02

Colour

The mark is white on black and carries no second colour, so the system is monochrome by default. One accent — vert marine — is permitted, capped at two visible uses per screen. Canonical values are OKLch; the hex is handoff only.

Paper--bg · #f9f9f8

Default field for every page.

Surface--surface · #f0f0ee

Filter bar, table zebra, recessed panels.

Ink--fg · #131311

All primary text and solid marks.

Muted--muted · #5e5e5a

Metadata and captions. 6.2:1 on paper.

Hairline--border · #d9d9d6

Structure. Never a shadow substitute.

Vert marine--accent · #235f4e

Twice per screen, no more.

Derived and dark-band tokens

Generated from the six above. The accent is never placed on --plate — it drops to 2.1:1 there. Use --accent-on-dark, which is the same hue re-lightened.

Surface hover--surface-hover

Row and ghost-button hover field.

Control edge--border-strong

Inputs and controls. 3.5:1 — meets the UI minimum.

Accent hover--accent-hover

Darker on hover, never lighter.

Accent wash--accent-wash

Active filter field only.

Plate--plate · #141412

Masthead, footer, owner band.

Accent on dark--accent-on-dark

9.5:1 on plate.

Status

Rendered as a 7px solid square plus a label — never a filled pill, which would compete with the accent.

Disponible Sous compromis Vendu

Measured contrast

PairRatioRequiredVerdict
Ink on paper17.7:14.5:1Pass
Muted on paper6.2:14.5:1Pass
Muted on surface5.7:14.5:1Pass
Accent on paper7.1:14.5:1Pass
White on accent (button rest)7.5:14.5:1Pass
White on accent hover10.5:14.5:1Pass — contrast rises
Control edge on paper3.5:13:1Pass
Plate text on plate16.7:14.5:1Pass
Plate muted on plate7.4:14.5:1Pass
Accent-on-dark on plate9.5:14.5:1Pass
Sous compromis on paper4.7:14.5:1Pass

03

Typography

Two families with a role split that is the brief made literal. Archivo is the agency — every headline, label, price and table cell. Newsreader is the journal — property narrative, advisory writing, pull quotes. A serif never appears inside a button; a grotesk never carries long-form prose.

Display 60

Annaba, bien par bien

H1 42

Villa avec vue mer, Seraïdi

H2 28

Nos biens en vente

H3 20

Appartement F4, Saint-Cloud

UI 15

Demander une visite

Prose 18 · serif

Le bien occupe le troisième étage d'un immeuble de 1958, ravalé en 2022. L'ascenseur dessert tous les niveaux. Le séjour et deux des trois chambres donnent sur la baie ; la cuisine et la salle d'eau sont orientées cour.

Caps 12

Référence & statut du bien

Small 13

Mis à jour le 4 août 2026 · Mandat simple

Mono 12

AIC-2419 · DPE non communiqué

Tracking is not optional

Two failures make a page read as machine-made: uppercase set without positive tracking, and display type set without negative tracking. Both are lint-level errors here.

ContextLetter-spacingWeightLine-height
Display ≥48px−0.03em6501.02–1.1
Heading 32–47px−0.02em6501.1
Heading 20–31px−0.01em6001.2–1.3
Body, both families04001.55–1.66
Small 12–13px0.01em4001.5
UI labels & buttons0.02em5501.4
ALL CAPS0.08em6001.4

Numerals

Every price, surface area, room count and date uses font-variant-numeric: tabular-nums so figures align down a column. Prices are grouped with a thin space and end in DA; rents carry / mois.

BienSurfacePiècesPrix
Villa · Seraïdi312 m²778 500 000 DA
Appartement F4 · Saint-Cloud104 m²424 900 000 DA
Local commercial · Menadia86 m²—95 000 DA / mois
Terrain · Chetaïbi1 240 m²—Prix non communiqué

04

Form & grid

Every edge in the mark is vertical, horizontal or a clean 45°. The system inherits that literally: nothing is rounded, structure is carried by hairlines rather than shadow, and the one diagonal in the mark becomes the one flourish on the site.

RADIUS

Zero, everywhere

Cards, buttons, inputs, chips, dialogs and focus rings are square. The only circle on the site is a person's avatar. Status markers are squares.

CHAMFER

18px, once per screen

The roofline's 45° cut appears on the top-right corner of the featured card and nowhere else. Not on buttons, not on images, never twice in a viewport.

STRUCTURE

Hairline, not shadow

1px solid var(--border) divides everything. Shadow is reserved for a single case: an overlay lifted off a photograph.

GRID

8px baseline, 12 columns

1280px shell, 24px gutters. Scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Nothing lands off the 8px baseline.

The signature layout

The mark is two volumes of unequal width sharing a seam. Sections repeat that proportion: a narrow index field carrying the section number and framing, a wide content field, and a 1px seam between them. This page is built on it — the column you are reading now is the wide field.

Index field

3 of 12 columns. Section number, title, framing note. Sticky on desktop.

Content field

9 of 12 columns. Specimens, inventory grids, prose. Collapses to a single column below 900px, index field first.

Icons

Monoline, 1.6px stroke, currentColor, 20px on a 24px box, square caps to match the mark. Never an emoji, never a filled glyph, never an icon beside a heading.

05

Photography

Photography carries the whole premium claim, so it is governed harder than anything else in the system. Architectural, not lifestyle. Empty, not staged. Taken at the property, or not published.

Contemporary villa on a hillside above the bay, hard afternoon light

Extérieur

Level horizon, straight verticals, one subject, real shadow. The overlay is anchored to one corner at a 12px inset on both axes.
Empty apartment living room with a tall shuttered window onto the sea
Interiors are shot empty. Staged furniture reads as stock and breaks the transparency promise the agency is making.
Sloping land parcel with olive trees and a dry stone boundary wall above the sea
Land is photographed so the parcel boundary and the access track are both legible. A view alone does not describe a plot.

Required

  • 3:2 native, minimum 2000px wide. Cards crop 4:3, hero crops 16:9 — compose with headroom so both survive.
  • Hard directional daylight with real shadow.
  • Vertical lines vertical. Correct the lens, or reshoot.
  • Every image is of the actual property being listed.
  • Overlays: one corner, equal inset on both axes, flat --plate panel at 92%, inside the frame.

Rejected

  • Generic Algiers skylines and anonymous white apartment-block façades.
  • Gradient scrims under text. Use the flat plate panel instead.
  • Staged furniture, styled bowls of fruit, folded towels.
  • People, cars, visible signage, lens flare, the photographer's reflection.
  • Drone-cinematic teal-and-orange grading; HDR that flattens the shadow.
  • An overlay that crosses the frame edge or covers the subject.

06

Actions

Call, WhatsApp and viewing request are three routes to one intent, so only one of them is solid on a given screen. WhatsApp never ships in its brand green — it would out-shout the primary CTA and drag the page toward a template.

Hierarchy

Ajouter à ma sélection

One solid button. Two outlined. One text link. The copy never repeats word for word between them.

States, paired foreground and background

Hover moves the background along the OKLch L channel and leaves contrast equal or higher. The foreground is never shifted toward --muted. Disabled is the only state permitted to lose contrast.

Primary · rest
Primary · hover
Primary · focus
Primary · disabled
Secondary · rest
Secondary · hover
Ghost · rest
Link · restVoir le plan

Propriétaires

Confier un bien à une agence agréée par l'État

Estimation sur place sous 72 h, mandat clair, diffusion immédiate dès publication.

The owner band is the one place the primary button inverts to paper-on-plate. The accent stays out of this block entirely — on --plate it would fail contrast, and the band already owns the page's attention.

07

Inputs & search

Search is the homepage's real hero, so it is built as a first-class component rather than a hero decoration. Every control is 48px tall or more, every control has a visible label, and errors state what to do next.

Projet
Type de bien
Secteur

5 biens correspondent · achat, tous types, tout Annaba

Viewing request form

Four fields is the ceiling. Anything the CRM can derive is not asked for. The reference is carried in, never retyped.

Indiquez le nom sous lequel vous souhaitez être rappelé.

Utilisé uniquement pour convenir d'un créneau.

Un numéro algérien à 10 chiffres est attendu.

08

Inventory

Three card forms, one information order: reference and status, then title, then locality, then the three specs that decide a click, then price. Never reorder it — the scan pattern is the product.

Specimen content. The values below are placeholders for layout testing, not live inventory. Prices, surfaces and references come from the CRM.

Villa contemporaine à Seraïdi, vue sur la baie
AIC-2419À la une

Villa contemporaine, vue baie

Seraïdi · Route de la corniche

312 m²
7 pièces
Terrain 900 m²
78 500 000 DAVente
Immeuble contemporain à Saint-Cloud
AIC-2388Disponible

Appartement F4, 3e étage

Saint-Cloud · Rue des Frères Bouhired

104 m²
4 pièces
Ascenseur
24 900 000 DAVente
Séjour vide avec porte-fenêtre donnant sur la mer
AIC-2401Sous option

F3 rénové, façade mer

Les Caroubiers · Boulevard du 1er Novembre

78 m²
3 pièces
Meublé
85 000 DA/ mois
Local commercial vide avec vitrine sur rue
AIC-2377Disponible

Local commercial, vitrine sur rue

Menadia · Face au marché couvert

86 m²
Rez-de-chaussée
Rideau métallique
95 000 DA/ mois
Terrain en pente planté d'oliviers, en surplomb de la mer
AIC-2350Disponible

Terrain constructible, oliveraie

Chetaïbi · Piste du Cap

1 240 m²
Accès carrossable
Viabilisé
Prix non communiquéVente

List row — the same data at a third of the height

Used on the search results page below the fold, and in the "biens similaires" rail. Identical information order.

Immeuble à Saint-Cloud
AIC-2388 Disponible

Appartement F4, 3e étage

Saint-Cloud · 104 m² · 4 pièces · Ascenseur

24 900 000 DAVente
Terrain à Chetaïbi
AIC-2350 Disponible

Terrain constructible, oliveraie

Chetaïbi · 1 240 m² · Accès carrossable · Viabilisé

Prix non communiquéVente

Specification table — fiche bien

Unknown values are published as unknown. This is the transparency principle made mechanical.

Surface habitable104 m²
Surface terrain—
Étage3e sur 5, avec ascenseur
Année de construction1958, ravalé en 2022
Charges mensuellesNon communiqué
Type de mandatMandat simple
RéférenceAIC-2388

09

Editorial

The journal register. Property narrative, market notes and advisory writing are set in Newsreader at a 62–68 character measure. This is the only place the serif appears, and it is what separates the site from a listings portal.

Saint-Cloud n'est pas un quartier homogène. La bande qui longe le boulevard a été construite entre 1954 et 1961, avec des hauteurs sous plafond de 3,10 m et des cages d'escalier larges ; les immeubles édifiés après 1980, deux rues en arrière, offrent des surfaces comparables pour un prix au mètre carré inférieur d'environ un cinquième.

La différence tient moins à la vue qu'à l'ascenseur et au ravalement. Un acheteur qui cherche un F4 familial a donc deux marchés distincts dans un rayon de trois cents mètres, et les visiter dans le désordre fait perdre du temps à tout le monde.

Nous publions les deux, séparément, avec l'année de construction en clair.

« Une annonce qui cache une information la remplace par une visite inutile. » Note de méthode · Adel ImmoConseils

Pull quotes sit in the index field, rule above, 26px serif. One per article. Never centred, never in quotation-mark graphics.

10

Page patterns

Five pages carry the five jobs. Each is specified as an ordered block list so a build cannot silently reorder it. Deviations need a reason written into the ticket.

Job 1 · find something fast

Accueil

  1. Masthead on plate, logo left, one text link to /app far right
  2. Search bar — projet, type, secteur. Above any image.
  3. Featured card with the chamfer, plus five current listings
  4. Market note — serif, one paragraph, links to the journal
  5. Owner band on plate
  6. Footer — agrément number, address, staff link

Job 1 · narrow it down

Recherche

  1. Filter bar, sticky under the masthead
  2. Result line — count, active filters, clear-all
  3. Grid above the fold, rows below it
  4. Empty state that widens the sector rather than apologising
  5. Alert signup — one field, not a modal

Job 2 · convert

Fiche bien

  1. Gallery 16:9, counter overlay bottom-left
  2. Header — title, locality, price, status
  3. Narrative in serif, 64ch
  4. Spec table with gaps published
  5. Contact rail — sticky, one solid CTA, call and WhatsApp secondary
  6. Similar — three rows, same sector

Job 3 · win a mandate

Confier un bien

  1. Plate hero, one sentence, one CTA
  2. Three steps — estimation, mandat, diffusion — numbered, no icons
  3. Proof — agrément, years in Annaba, mandate types. Verifiable facts only.
  4. Form — four fields maximum

Jobs 4 & 5 · trust and staff

L'agence

  1. Serif opener — who the agency is, in prose
  2. Team — name, role, direct line. Circular avatars, the one round shape.
  3. Credentials — state approval, registration, office hours
  4. Staff access — a single text link, footer weight, never a button

11

Bilingual

French is primary; Arabic is a first-class second language, not a bolted-on translation. Mirroring is structural — the whole component flips, including the spec dividers and the price row — while numerals, references and the logo stay in their reading direction.

Direction · live
AIC-2388Disponible

Appartement F4, 3e étage

Saint-Cloud · Rue des Frères Bouhired

104 m²
4 pièces
Ascenseur
24 900 000 DAVente

Mirrors

  • Column order, card internals, spec dividers, price row, nav, breadcrumbs.
  • Text alignment, list markers, form label position, the focus ring's travel order.
  • Directional icons: chevrons and arrows flip.

Never mirrors

  • The logo lockup — it is a fixed asset in both directions.
  • Numerals, prices, surface areas and reference codes: always LTR runs.
  • Phone numbers, and the m² and DA units.
  • Photographs, and the 45° chamfer, which stays on the card's top-right corner.

12

State contract

Foreground and background are defined as a pair for every state. Contrast after a state change is equal or higher than at rest, with one exception. This table is the acceptance criteria, not a suggestion.

ElementStateBackgroundForegroundContrast
Primary buttonRest--accent#fff7.5:1
Hover--accent-hover#fff10.5:1
Focus--accent#fff7.5:1 + 2px ring
Disabled--surface--muted5.7:1 — the only permitted drop
Secondary buttonResttransparent--fg17.7:1
Hover--surface-hover--fg14.0:1
Inverted primary
on --plate only		Restoklch(0.90 …)--plate13.9:1
Hover--bg--plate17.4:1 — ΔL +0.08
Filter chipRest--bg--fg17.7:1
Selected--fg--bg17.7:1 — inverted as a pair
Text inputRest--bg--border-strong3.5:1 edge
Focus--bg--accent7.1:1 edge, 2px
Error--bg--status-offer4.7:1 + message
Property cardRest--bg--borderhairline
Hover--bg--fgedge darkens, −2px lift

Enforced

  • Hover moves the background by 0.06–0.12 on the OKLch L channel.
  • Every focusable element has a visible :focus-visible ring, 2px, 3px offset.
  • Touch targets are 48px minimum — 44px is the floor, 48 is the house rule.
  • On --plate the ring switches to --accent-on-dark.
  • prefers-reduced-motion collapses every transition.

Rejected on sight

  • Hover that greys the label toward --muted.
  • A solid button that inverts its background without inverting its text in the same rule.
  • Opacity used as a hover state — it drags every layer, including the border.
  • Placeholder text used instead of a label.
  • outline:none without a replacement ring.

13

Do / Don't

The brief's word was restraint. These are the specific failures that would read as a template, a luxury cliché, or a piece of software — the three things this site must not be.

Premium here means

  • One accent, twice. Everything else is ink, paper and hairline.
  • Empty rooms, hard light, straight verticals.
  • A number the agency can defend, or no number.
  • The neighbourhood named, not the wilaya.
  • Square corners and one 45° cut, taken from the mark.

Premium here never means

  • Gold, cream, beige, or any gradient — including a photo scrim.
  • Glassmorphism, blur panels, or a frosted nav.
  • Serif italic headlines and wide-tracked capitals as "luxury".
  • Stock skylines, brochure pools, staged interiors.
  • Emoji as icons, or an icon beside every heading.

Reads as an agency

  • Search is the first thing on the page.
  • One solid CTA per screen; call and WhatsApp outlined beside it.
  • Missing data published as Non communiqué.
  • Staff reach /app via one footer text link.
  • Empty states widen the search instead of apologising.

Reads as software

  • A dashboard-shaped "Espace agent" button in the header.
  • Filter counts, facet trees and sort menus above the first listing.
  • Toasts, skeleton shimmer, and modal newsletter interrupts.
  • Three solid buttons chasing the same conversion.
  • Invented proof — "n°1 à Annaba", "98 % de satisfaction".