# Sebel Signature — Design System
> **Sebel Signature** est une conciergerie haut de gamme dédiée à la gestion complète de locations saisonnières de biens immobiliers — accueil voyageurs, conciergerie sur-mesure, gestion locative, entretien.
>
> Sebel Signature is a high-end concierge service that takes care of every step of short-term rental management for property owners — guest welcome, bespoke concierge services, rental management, and upkeep.
This design system contains the brand foundations, visual language, components, and patterns used across all Sebel Signature surfaces (marketing site, owner / guest dashboards, printed deliverables).
---
## Sources
The system was built from the following materials provided by the client:
| Source | Contents |
| --- | --- |
| `uploads/Logo SEBEL …svg` (×5) | Vertical wordmark in Vert / Vert Foncé / Noir / Blanc / Blanc cassé |
| `uploads/Logo SEBEL HORZT …svg` (×5) | Horizontal wordmark, same 5 colorways |
| `uploads/Picto SEBEL …svg` (×5) | Standalone monogram pictogram, same 5 colorways |
| `uploads/Inter-*.ttf` (×9) | Inter font family, weights 100–900 |
| `uploads/Sebel Colors contrasts.pdf` | Brand palette + contrast pairs |
**Brand brief (verbatim, FR):** « Les titres sont dans la typographie *Sebel Display*, tous les autres textes dans la typographie *Inter*. Appuie-toi sur le fichier *Sebel Colors contrasts.pdf* pour la gamme colorimétrique et les contrastes. Ajoute deux couleurs *secondary*. Le logo a une version principale en vertical qui s'appelle *Logo SEBEL*, et il a une version horizontale pour les compositions qui le nécessitent, elle s'appelle *Logo SEBEL HORZT*. Le pictogramme peut être utilisé comme motif. »
> ⚠️ **Substitution flagged: Sebel Display.** The brand brief calls for a custom display family called *Sebel Display*, but no font file was delivered. As a stand-in we use **Cormorant Garamond** (Google Fonts) — a high-contrast didone-leaning serif that visually matches the wordmark used in the brand assets. Please send the actual Sebel Display file(s) and we'll swap the `@font-face` source in `colors_and_type.css`.
---
## Index — what's in this folder
```
README.md ← you are here
SKILL.md ← Agent-Skills compatible entrypoint
colors_and_type.css ← single source of truth for tokens
fonts/ ← Inter .ttf files (all 9 weights)
assets/ ← logos, picto, pattern motif
preview/ ← swatch / specimen cards for the Design System tab
ui_kits/
└── website/ ← Sebel Signature marketing site recreation
slides/ ← (none — no deck template was provided)
```
The **preview/** folder contains small standalone HTML cards used to populate this project's Design System tab — typography specimens, color swatches, the logo lockups, button states, etc. They double as a printable reference.
The **ui_kits/website/** folder contains a click-through prototype of the Sebel Signature concierge marketing site, built directly on the tokens in `colors_and_type.css` and the assets in `assets/`.
---
## CONTENT FUNDAMENTALS
Sebel Signature's voice is **discreet, confident, and warmly French**. It speaks the language of premium hospitality — concierge, *clé en main*, *accueil*, *sérénité* — without falling into hotel-brochure cliché.
### Tone & register
- **Discreet, never loud.** No exclamation marks except in literal greetings (« Bienvenue ! »). Adjectives are restrained: *raffiné*, *soigné*, *attentif* — not *incroyable*, *exclusif*, *unique*.
- **Confident, factual.** State what is done, not what is promised. « Nous prenons en charge l'intégralité de votre location saisonnière. » beats « Nous vous garantissons une expérience exceptionnelle. »
- **Service-first.** The owner / guest is the subject of most sentences. The brand is the verb.
- **French first.** All copy is written in French. English translations are provided side-by-side only where the audience is explicitly international (e.g. guest welcome packets in Saint-Tropez).
### Voice rules
- **Vous, not tu.** Always. Even in chat / SMS confirmations.
- **« Nous » for the brand.** Plural, never « je » or « notre équipe ». Implies a team without bragging about size.
- **No emoji in product or marketing copy.** Acceptable inside internal owner-facing messages or on a guest-welcome WhatsApp where context permits — but as a rule, the system is emoji-free.
- **Sentence case for body, Title Case for headlines.** ALL CAPS is reserved for the lockup eyebrow (« SEBEL / SIGNATURE », « EXPÉRIENCES ») with wide letter-spacing.
- **French typography.** Non-breaking thin spaces before « ; : ! ? », « guillemets français » with thin spaces inside, em-dashes — not hyphens — for asides.
### Vocabulary palette
**Use:** conciergerie, accueil, sérénité, sur-mesure, signature, soin, attention, expérience, séjour, hôtes, voyageurs, propriétaires, biens, gestion.
**Avoid:** premium (overused), exclusif (cliché), luxe (we *are* it, we don't say it), 5-star, ultra-, hyper-, AI/IA buzz, "expérience client" (B2B-speak).
### Example copy
> **Eyebrow:** EXPÉRIENCES SUR-MESURE
> **Headline:** Votre bien, entre des mains attentives.
> **Body:** Sebel Signature prend en charge l'intégralité de votre location saisonnière. De la mise en ligne à l'accueil des voyageurs, en passant par l'entretien quotidien, vous gardez la sérénité, nous gardons la maison.
> **CTA:** Confier mon bien → / Découvrir nos services
> **Bad** (avoid): « Découvrez l'expérience ultime de location de luxe ! Notre équipe d'experts est là pour transformer votre bien en machine à cash 🚀✨ »
---
## VISUAL FOUNDATIONS
The system is **editorial, calm, warm**. It draws from the printed-magazine and luxury-hospitality vocabulary — generous whitespace, a high-contrast display serif, off-white pages, the green of olive groves and shaded courtyards — rather than the bright SaaS / web vocabulary.
### Color
A five-colour brand palette extracted from `Sebel Colors contrasts.pdf` (v2 — the greens deepened, the light tone shifted from sage to a warm olive, the off-white warmed into a cream, and a new *Vert Foncé* was added):
| Token | Hex | Role |
| --- | --- | --- |
| Sebel Noir | `#242424` | Primary text, inverse surfaces |
| Sebel Vert Foncé | `#0C261F` | Deepest brand green — inverse hero blocks, dense type on cream |
| Sebel Vert | `#144738` | Brand primary, CTAs, links |
| Sebel Vert clair | `#ACB197` | Warm olive — soft surfaces, secondary backgrounds |
| Sebel Blanc cassé | `#F6F2E0` | Warm cream — default page background |
Two **secondary** colours extend the palette toward warm hospitality accents:
| Token | Hex | Use |
| --- | --- | --- |
| Sable (champagne) | `#D8BE7E` | Premium tags, season highlights, paper accents |
| Argile (terracotta) | `#C9784D` | Mediterranean warmth, badge accents, photography pairing |
Full nine-step scales (`--vert-50` → `--vert-900`, `--neutral-0` → `--neutral-900`, etc.) live in `colors_and_type.css`.
### Type
- **Headings:** Sebel Display (Cormorant Garamond as fallback) — a high-contrast didone serif. Used at 500 weight by default; 400 for the largest display sizes for elegance.
- **Body, UI, captions:** Inter, weights 300 → 700 depending on hierarchy.
- **Eyebrow / signature lockup:** Inter Medium, UPPERCASE, `letter-spacing: 0.22em`. The wordmark itself uses this lockup style.
- **Numerical / monospaced:** Inter tabular figures where present; JetBrains Mono fallback for code blocks.
### Spacing & layout
- 4px base grid; tokens `--space-1 … --space-12`.
- Long-form pages target a **640–720px measure** for readable line length.
- Marketing sections rely on a **12-column grid with 80–96px section padding** vertically. Use `--space-10` / `--space-11` for top-level rhythm.
- The page **never feels full**. Generous negative space is a brand feature, not an oversight.
### Backgrounds, imagery, motifs
- **Default surface:** `--sebel-blanc-casse` (`#F6F2E0`). Never pure white outside elevated cards.
- **Inverse / hero:** `--sebel-noir` or `--sebel-vert` full-bleed sections, often holding a single overlaid photograph.
- **Photography style:** warm natural light, no heavy filters, low saturation, southern-French / Mediterranean atmosphere (terracotta, olive, linen). Grain optional, never digital sharpening. No stock-y people-on-laptops imagery. **Reference set:** four approved direction images live in `assets/photography/` (salon vue port, séjour vue Monaco, chambre lin & sauge, détail clé/velours) — see the *Brand · Photographie* card in `preview/brand-photography.html`.
- **The picto-as-motif.** The Sebel monogram can be used as a *very low-contrast repeating motif* (≤ 8% alpha on light, ≤ 14% alpha on dark) for hero backgrounds, footer fields, and printed stationery. See `preview/preview-picto-motif.html`.
- **No gradients.** Solid fields only. The brand mood is paper, not glass.
- **No drop-shadow on photography.** Hard edges, occasional 2px hairline border for cards.
### Animation
- **Restrained.** Fades, slow upward translates (8–12px), opacity crossfades. No bounce, no spring overshoot.
- **Easing:** `cubic-bezier(.2, .6, .2, 1)` — gentle ease-out — tokenised as `--transition-base`.
- **Duration:** 140ms for hover (`--transition-fast`), 240ms for state changes, 480ms for hero entrances.
- **Reduce-motion is respected.** All transitions disabled under `prefers-reduced-motion`.
### States
- **Hover:** primary buttons darken to `--vert-600`; text links drop to `opacity: 0.65`; cards lift via shadow + 1px translateY.
- **Press / active:** scale `0.98`, no color flash, 80ms.
- **Focus:** 2px `--sebel-vert` outline + 2px offset; never the browser default.
- **Disabled:** 40% opacity, no shadow, no pointer events.
### Borders, shadows, elevation
- **Borders** are typically hairline (`1px solid var(--color-border)`) — quiet, almost paper-fold.
- **Shadow system** is paper-soft (`--shadow-xs/sm/md/lg`). Long, low-spread shadows. No glassmorphism, no inner glow, no neon.
- **Corner radii:** small. `--radius-sm` (4px) for inputs, `--radius-md` (8px) for cards, `--radius-pill` for badges. Hero photography uses `--radius-lg` (14px) at most.
### Transparency & blur
- Used sparingly. The only standard blurred surface is the **sticky nav background**: `rgba(247,245,245,0.72)` + `backdrop-filter: blur(14px)`. No glass cards in content.
### Cards
- Background `--neutral-0`, border `1px solid var(--color-border)`, radius `--radius-md`, shadow `--shadow-xs` at rest, `--shadow-md` on hover. Padding `--space-6`.
---
## ICONOGRAPHY
Sebel Signature has **no proprietary icon set**. We use **Lucide Icons** (CDN) as the system-wide icon library — its hairline 2px stroke, rounded line-caps, and editorial feel align with the brand's restraint.
- **Library:** [Lucide](https://lucide.dev) (open-source, MIT). Loaded from `https://unpkg.com/lucide-static@latest` or inline as SVG.
- **Default size:** 20px. UI affordances 16px. Hero / feature icons 28–32px.
- **Stroke:** 1.5–1.75px on small sizes, 2px on large. Color inherits `currentColor`.
- **The Sebel Picto** is treated as a **logomark / pattern**, not a UI icon — never inline in body text, never sized below 24px.
- **Emoji: never** in product UI, marketing, or owner-facing materials. (Internal WhatsApp / SMS to guests is the only out-of-scope context where they may appear, and that's editorial discretion, not a system rule.)
- **Unicode glyphs as icons:** allowed for typographic accents only — `→` `←` `↗` for navigation, `•` for separators, `–` `—` for dashes. Never `★` or other decorative symbols.
If a future product surface needs an icon Lucide doesn't cover, draw a new one in the same style (24px viewBox, 2px stroke, round caps & joins, no fills) and add it to `assets/icons/`.
---
## How to use
```html
Conciergerie haut de gamme
Votre bien, entre des mains attentives.
Sebel Signature prend en charge l'intégralité de votre location saisonnière.
```
All tokens are CSS custom properties on `:root` and can be remapped per surface (dark mode, print, etc.) by overriding `--color-bg` / `--color-fg` on an ancestor.
---
## Caveats & open questions
- **Sebel Display** is substituted with Cormorant Garamond. Please send the actual font.
- **Photography direction set** — four reference images are now in `assets/photography/` and documented in `preview/brand-photography.html`. They fix the art-direction (warm light, linen, olive, brass); production shoots should match this mood. Additional approved imagery still welcome for specific surfaces.
- **No deck template** was attached, so `slides/` is not populated. Ask if you'd like editorial-style slide layouts in this same vocabulary.
- **Secondary colors are an interpretive proposal.** Sable + Argile feel right for the Mediterranean hospitality space, but if the brand has a different secondary direction in mind we'll happily swap.