Denguezli Advisory — Styleguide

A boutique governance, risk and executive-search advisory in Lausanne, run by one principal
with 15+ years in international private banking. The site is set like a document, not like a
brochure — because documents are what the firm actually produces.

v2 — "Le dossier". v1 re-skinned the existing denguezli.ch too closely (same dark-hero →

white-body → four-alternating-photo-rows skeleton). See build/decisions.md for the diagnosis

and the three directions considered.

Brand DNA

during work hours, first contact often from a phone after a referral.

business is paper, hairlines, tables of figures and margin notes — *not* the compass/gears/

world-map symbolism the old site reached for.

(private banking, DIFC branch licensing, internal audit across four continents). Four narrow

practice areas rather than a generic "consulting" catch-all.

not stiff corporate-law (no columns, no scales of justice); not wellness (no cream, no sage,

no rounded everything); not the old site (no symbolic stock photography, no centred box).

Voice

opérationnels passés au crible…", "Le bon profil, au bon endroit."

exclamation points, invented credentials.

rule-of-three adjective chains, "révolutionnaire", "sur-mesure" as a crutch.

et en traçabilité, sans complexifier ce qui fonctionne déjà."

votre gouvernance d'entreprise !"

Color

| Token | Hex | Use |

|-----------------|----------------------------|------------------------------------------------------|

| bg | #fbfaf8 | Paper ground — the page |

| ink / primary | #16150f | Body text, headings, strong rules |

| muted | #56524a | Secondary prose, descriptions |

| faint | #6f6a5c | Uppercase margin labels (AA-safe at 12px) |

| line | #ddd8ce | Hairline dividers |

| line-strong | #16150f | Section-opening rules, masthead underline |

| raised | #f4f2ec | Practice-row hover |

| surface | #14130f | Dark bands — contact, footer, portrait hero |

| surface-ink | #f2efe7 | Text on dark |

| surface-muted | #b8b2a4 | Secondary text on dark |

| accent | #a8853e | Rules, CTA underline, focus ring (non-text uses) |

| accent-ink | #7d6329 | Small accent text on paper (the 01–04 indices) |

| accent-on-dark | #c6a15b | Accent on dark grounds |

Measured contrast: ink/bg 15.9:1 · muted/bg 7.5:1 · faint/bg 5.2:1 · accent-ink/bg 5.5:1 ·

accent-on-dark/surface 7.8:1 · surface-ink/surface 15.4:1. **accent (#a8853e) is 3.3:1 on

paper — decorative only, never small text.** That distinction is why accent-ink exists.

Typography

institutional, precise. Replaces v1's Playfair Display + Open Sans, which was the most

common "elegant" pairing on the web.

link to the existing serif logo.

time. No Google Fonts CDN call (also keeps the privacy policy simpler).

Scale

Display and headings are fluid (clamp) so the jump between hero and body is dramatic on

desktop and still readable on a phone.

| Token | Size | Line | Use |

|---------|-----------------------------------|------|--------------------------------------|

| display | clamp(2.9rem, 7.2vw, 5.6rem) | 0.98 | hero h1 |

| stat | clamp(2.4rem, 4.6vw, 3.4rem) | 1 | credential-band figures |

| h1 | clamp(2.2rem, 4.4vw, 3.2rem) | 1.06 | page titles |

| h2 | clamp(1.7rem, 2.8vw, 2.3rem) | 1.12 | section headings |

| h3 | clamp(1.25rem, 1.9vw, 1.6rem) | 1.2 | practice-area titles |

| lead | clamp(1.125rem, 1.5vw, 1.3rem) | 1.55 | hero subline, intro, bio opener |

| body | 1.0625rem | 1.62 | paragraphs |

| small | 0.75rem, tracking 0.16em, upper | 1.5 | margin labels, nav, CTA, footer |

Spacing & layout

(clamp(0, 11vw, 150px)) holding an uppercase label, and a main column holding the content.

Content is never centred in a box; the label column is what makes the page read as a document.

Below 768px the margin column collapses and labels sit above their section.

.section-tight 48px. Identical padding everywhere was a named v1 failure.

Shape & surface

(near-black) to open a section or underline the masthead.

the old site (compass, nodes, world map, chair) were deleted — they were both the strongest

"same as the old site" signal and rights-unverified. Any future photography is black-and-white

or near-monochrome, high-contrast, directional light.

Motion

Components

CTA (.btn)

A text link in letterspaced uppercase with a gold underline and a → — a document has links,

not buttons. Hover widens the gap and takes the underline to currentColor. .btn-solid is

the filled variant, used only for the contact form's submit.

Margin label (.label)

12px uppercase, 0.16em tracking, faint. Sits in the margin column. .label-accent is the

gold variant for the practice indices and the portrait-hero eyebrow.

Credential band (StatBand)

Four cells divided by hairlines, opened by a line-strong rule. Figures in stat size with

tabular-nums. Every number comes from content/identity.md — nothing rounded up or invented.

Collapses to 2×2 below 768px.

Practice list (PracticeList)

Hairline-separated rows: index in the margin column, title and description in a two-column

main area. No cards, no photos, no chrome. The 01–04 indices are reference numbers for four

parallel domains — not a sequence.

Portrait hero (About)

Split band: dark text panel (55%) beside a full-bleed greyscale portrait (45%), min-height 30rem.

The portrait is the firm's one genuine visual asset and is treated at scale. Stacks

image-above-text below 768px.

Nav

Paper ground, wordmark left, links + language + CTA right, single line-strong rule beneath —

a masthead. Collapses to a hamburger below 900px (links overflow before the md breakpoint).

Footer

Colophon: wordmark set large in Playfair, NAP right-aligned opposite it, legal links on a

hairline below. Sits on surface, separated from the contact band above by a line-on-dark

hairline so the two dark bands don't merge into one void.

Accessibility

Anti-patterns specific to this site