# Adel ImmoConseils — brand spec

Extracted from the supplied logo file
(`607115325_122103080841186925_4996977444579272298_n.jpg`), not invented.
This file is the source of truth for the public website (`/`). The
authenticated agency workspace (`/app`) may extend it but must not
contradict it.

**In one sentence:** a monochrome, square-cornered, hairline-ruled editorial
system built from the logo's two unequal gabled volumes — near-black ink on
paper, a single deep marine accent, and a 45° chamfer used exactly once per
screen.

---

## 1. What the logo actually says

Observed from the file, before any interpretation:

| Observation | Consequence for the system |
|---|---|
| Pure white mark on pure black field. No second colour anywhere. | The palette is monochrome by default. Colour is an exception that must earn its place. |
| Every edge is either vertical, horizontal, or a clean 45°. No curve, no radius, no taper. | `--radius: 0` everywhere. The 45° chamfer is the only diagonal allowed. |
| Two gabled volumes of **unequal width**, sharing a seam, with the negative gap between them reading as a third shape. | Layouts are asymmetric two-column: a wide content column and a narrow index column, separated by a 1px seam. |
| Wordmark is a neutral grotesk — `Adel` Bold, `ImmoConseils` Regular. Tight fit, no tracking. | Two weights carry the whole hierarchy. Weight, not size, is the primary signal. |
| The mark is drawn at a single stroke-free solid weight. It is a silhouette, not an outline. | Icons are the exception (monoline), but fills, badges and bars are solid — never outlined. |

## 2. Colour tokens

Canonical values are OKLch. sRGB hex is given for handoff to print and
third-party tooling only; do not author against the hex.

| Token | OKLch | sRGB | Role |
|---|---|---|---|
| `--bg` | `oklch(0.982 0.002 106)` | `#f9f9f8` | Paper. The default field for everything. |
| `--surface` | `oklch(0.955 0.003 106)` | `#f0f0ee` | Recessed panels, table zebra, filter bar. |
| `--fg` | `oklch(0.185 0.004 106)` | `#131311` | Ink. All primary text and all solid marks. |
| `--muted` | `oklch(0.48 0.006 106)` | `#5e5e5a` | Metadata, captions, secondary labels. 6.2:1 on `--bg`. |
| `--border` | `oklch(0.885 0.004 106)` | `#d9d9d6` | Hairline rules and card edges. |
| `--accent` | `oklch(0.44 0.068 172)` | `#235f4e` | **Vert marine.** One colour, at most twice per screen. |

### Derived (generated from the six above, not new decisions)

| Token | OKLch | sRGB | Role |
|---|---|---|---|
| `--surface-hover` | `oklch(0.905 0.004 106)` | `#e0e0dd` | Hover field for surface-level rows and ghost buttons. |
| `--border-strong` | `oklch(0.62 0.006 106)` | `#868682` | Input and control edges. 3.5:1 — the only border that meets the UI-component minimum. |
| `--accent-hover` | `oklch(0.36 0.068 172)` | `#044839` | Solid accent hover. Darker, never lighter. |
| `--accent-wash` | `oklch(0.945 0.016 172)` | `#e3f1eb` | Selected-chip and active-filter field. |
| `--plate` | `oklch(0.19 0.004 106)` | `#141412` | The brand dark band: masthead, footer, owner CTA. |
| `--plate-fg` | `oklch(0.965 0.002 106)` | `#f3f3f2` | Text on `--plate`. |
| `--plate-muted` | `oklch(0.72 0.006 106)` | `#a5a5a1` | Metadata on `--plate`. 7.4:1. |
| `--accent-on-dark` | `oklch(0.78 0.075 172)` | `#85c7b2` | The accent, re-lightened for `--plate`. Never use `--accent` on dark. |

### Status colours (semantic, ≤5% of pixels)

| Token | OKLch | sRGB | Meaning |
|---|---|---|---|
| `--status-live` | `oklch(0.50 0.09 155)` | `#33724c` | Disponible |
| `--status-offer` | `oklch(0.55 0.10 68)` | `#986528` | Sous compromis / Option en cours |
| `--status-closed` | `oklch(0.55 0.005 106)` | `#72726e` | Vendu / Loué / Retiré |

Status is always rendered as a 6px solid square + label, never as a filled
pill. A pill would compete with the accent for attention.

### Rules

- **The accent appears at most twice per screen.** Typical pair: the section
  eyebrow rule and the single primary CTA. Links are `--fg` with a 1px
  underline, not accent, whenever a CTA is also in view.
- **No gradient anywhere.** Not on the hero, not on image scrims. Image
  legibility is solved with a flat `--plate` panel at 92% opacity, not a fade.
- **WhatsApp never ships in `#25D366`.** It is a secondary button in `--fg`
  with the glyph in `currentColor`. Green would out-shout the primary CTA and
  drag the page toward a template.
- **No gold, no cream, no beige.** `--bg` carries chroma 0.002 — it is paper,
  not warmth.

## 3. Type stacks

Two families. The split is not decorative — it is the brief's thesis made
literal: **the grotesk is the agency speaking, the serif is the journal
speaking.**

```css
--font-display: "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
--font-body:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
--font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
```

| Stack | Where it is used | Where it is banned |
|---|---|---|
| `--font-display` (Archivo) | Headlines, all UI — nav, buttons, labels, filters, prices, areas, tables, form fields. | Never in long-form prose. |
| `--font-body` (Newsreader) | Property narrative, advisory articles, pull quotes, the agency story, testimonial text. | Never in a button, label, price, or table cell. |
| `--font-mono` | Reference codes only (`AIC-2419`), at 12px / `0.02em`. | Everywhere else. |

Archivo is chosen because it sits in the same neutral-grotesk lineage as the
wordmark while holding up at 72px with negative tracking, which Helvetica
does not. Newsreader is a working newspaper face with optical sizes — it
gives the journal register without the luxury-estate-agent serif cliché.

### Tracking — non-negotiable

| Context | Letter-spacing |
|---|---|
| Display ≥48px | `-0.03em` |
| Headings 32–47px | `-0.02em` |
| Headings 20–31px | `-0.01em` |
| Body, both families | `0` |
| Small 12–13px | `0.01em` |
| UI labels, buttons | `0.02em` |
| **ALL CAPS (eyebrows, table heads)** | **`0.08em`** |

Weights: 400 (read) · 550 (emphasise, all UI) · 650 (announce, headlines).
Nothing above 650.

## 4. Form, space and layout

- **Radius: `0`.** Cards, buttons, inputs, chips, badges, dialogs and focus
  rings are all square-cornered. The single exception is a person's avatar,
  which is a circle. Status markers are squares, not dots.
- **The 45° chamfer** — an 18px corner cut lifted straight off the roofline —
  is the system's single flourish. It appears on **one element family only**:
  the featured / à la une property card, on its top-right corner. Never on a
  button, never on an image, never twice in a viewport.
- **Hairlines carry structure**, not shadows. `1px solid var(--border)`.
  Shadow is used only for an overlay lifted off a photograph.
- **Baseline grid: 8px.** Space scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 ·
  96 · 128.
- **Container: 1280px max, 24px gutters, 12 columns.** The signature layout
  is the mark's proportion: an 8-column content field beside a 3-column index
  field, with a 1px seam in the gap.
- **Measure: 62–68 characters** for serif prose. Sans body caps at 72.

## 5. Photography

Three specimens ship with this spec and define the rule, in
`assets/photo-villa-seraidi.png`, `assets/photo-apartment-interior.png`,
`assets/photo-land-parcel.png`.

- Level horizon, straight verticals, one clear subject. Architectural, not
  lifestyle.
- Hard directional daylight and real shadow. No HDR flattening, no evening
  glow, no drone-cinematic colour grading.
- Interiors are **shot empty**. Staged furniture reads as stock and breaks the
  transparency promise.
- No people, no cars, no visible signage, no lens flare, no reflections of the
  photographer.
- 3:2, minimum 2000px wide. Cards crop to 4:3, hero crops to 16:9 — compose
  with headroom so both crops survive.
- **What this rules out:** generic Algiers skylines, anonymous white
  apartment-block façades, brochure-blue swimming pools, and any image not
  taken at the actual property.

## 6. Logo usage

| Asset | File | Use |
|---|---|---|
| Lockup, black | `assets/logo-lockup-black.png` | On `--bg` and `--surface`. |
| Lockup, white | `assets/logo-lockup-white.png` | On `--plate` and over photography panels. |
| Mark, black / white | `assets/logo-mark-black.png` / `-white.png` | Favicon, app icon, and the sticky nav below 720px. |

- Clear space on all four sides = the height of the mark's chimney element
  (≈ 0.14 × mark height). Nothing enters it.
- Minimum lockup width 132px; below that use the mark alone.
- Never recolour to the accent, never place on a photograph without a
  `--plate` panel behind it, never stretch, never add a tagline inside the
  clear space.

## 7. Voice

French is the site's primary language; Arabic is a first-class second
language, not a translation afterthought (see the RTL section of
`design-system.html`).

- **Say the fact, then stop.** "Vue mer, 3e étage, ascenseur." Not "un
  emplacement d'exception offrant une vue imprenable."
- **Never publish a number the agency cannot stand behind.** No invented
  volumes, no "n°1 à Annaba", no fabricated satisfaction rates. If a figure
  is not in the CRM, it does not go on the page.
- **Name the neighbourhood, not the wilaya.** "Saint-Cloud", "Les Caroubiers",
  "Menadia" — local specificity is the trust signal.
- **Absent information is stated, not hidden.** "DPE non communiqué" is
  published as such.
- Buttons are verbs with an object: *Demander une visite*, *Confier mon bien*.
  Never *En savoir plus*, never *Cliquez ici*.