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

The site has a full motion system (added at the operator's request; v2's original

"no entrance animations" rule is superseded). The register is the brand's: precise and

quick, never bouncy or playful. Nothing bounces, nothing overshoots, nothing loops.

Tokens. easing-entrance (easeOutQuint — decisive, settles fast) for reveals,

easing-rule for hairlines, easing-default for hovers. duration-reveal 620ms ·

duration-rule 760ms · duration-slow 320ms · duration-base 200ms ·

duration-fast 120ms · stagger 70ms · rise 18px · nudge 4px.

The vocabulary:

data-anim-group to stagger its direct children by stagger.

than appearing: the stat band's top rule, each practice row, each process step. This

design is built on rules, so the rules are what animate.

tabular-nums so nothing reflows mid-count.

CTA arrows widen their gap.

reload. Component scripts must re-bind on astro:page-load, not DOMContentLoaded.

Robustness — content must never be lost to a failed animation. Four guards, all

verified:

1. The hidden state is gated behind :where(.js-anim), a class an inline head script

adds only when IntersectionObserver exists. No JS → nothing is ever hidden.

2. navigator.webdriver → reveal everything immediately. Headless renderers capture the

full page without scrolling, so the observer would never fire and the page would

photograph half-empty.

3. Elements jumped over (a #hash landing, a restored scroll position, Cmd+End) never

cross the observer's threshold, so a scroll sweep reveals anything already passed.

4. If the observer delivers nothing at all within 3s it is dead — show everything.

Still don't: parallax, autoplay, scroll-jacking, looping ambient motion, animation on

anything the visitor is trying to read.

Everything above is inert under prefers-reduced-motion: reduce, which resolves to the

arrived state rather than to hidden content.

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