--- name: Atlas Drift version: "1.0" theme: editorial-spatial kit: stacklift/atlas-drift nav: horizontal-rooms cursor: magnetic colors: paper: "#e9e3d5" paper-deep: "#ddd5c2" paper-card: "#f2eee3" ink: "#1a1714" ink-soft: "#4a443c" brick: "#c0432b" brick-deep: "#9a3220" muted: "#8a8073" line: "rgba(26,23,20,0.14)" line-accent: "rgba(192,67,43,0.45)" fonts: display: "Fraunces" body: "Spline Sans Mono" spacing: "1": "4px" "2": "8px" "3": "16px" "4": "24px" "5": "40px" "6": "64px" "7": "96px" "8": "144px" radius: sm: "2px" md: "6px" lg: "14px" full: "9999px" type-scale: xs: "0.72rem" sm: "0.82rem" base: "1rem" lg: "1.25rem" xl: "1.75rem" 2xl: "2.5rem" 3xl: "3.6rem" hero: "clamp(4rem, 16vw, 15rem)" typography: heading-font: "Fraunces" heading-weight: "300" heading-italic: "used for emphasis + accent words (color brick)" heading-tracking: "-0.04em" heading-leading: "0.82" body-font: "Spline Sans Mono" body-weight: "400" body-leading: "1.7" eyebrow-tracking: "0.3em" eyebrow-transform: "uppercase" motion: navigation: "horizontal — translateX between full-viewport rooms" easing: "cubic-bezier(.76,0,.24,1)" duration: "1.05s" cursor: "magnetic — lerp follow + pull nearby [data-mag] elements within 140px" drift: "elements parallax-shift at per-element rates (--d) on room change" components: - Buttons - Badges - Cards - Form Inputs - Stat Block - Section Header - Collage Layout - Magnetic Cursor - Horizontal Room Nav - Full-Bleed Visual - Contact Form full-kit: "https://stacklift.design/kits/atlas-drift" --- # Atlas Drift — Design System ## §1 Identité Atlas Drift est l'esthétique d'un site qu'on **traverse latéralement** au lieu de le scroller verticalement. Chaque écran est une « room » pleine page, pas une section empilée. La tension : chaleur éditoriale (papier, serif Fraunces) contre rigueur d'un système (mono Spline). C'est délibérément l'anti-template : pas de hero centré classique, pas de fond sombre + accent fluo, pas de grille sage. Fond papier chaud (`--paper`), encre (`--ink`), un seul rouge brique (`--brick`). ## §2 Rôles couleurs `--paper` est le fond universel — jamais de blanc pur. `--brick` est l'action ET l'accent éditorial (mots en italique colorés, chiffres clés, CTAs) — réservé, jamais structurel. `--ink` est le texte dominant. `--muted` pour les labels longs et métadonnées. `--paper-card` pour les surfaces élevées (tiles du collage). `--line` pour toute séparation — jamais d'ombre portée. ## §3 Typographie Fraunces (`--font-display`) pour tous les titres : poids 300, `letter-spacing: -0.04em`, `line-height: 0.82`. L'italique de Fraunces est réservé aux mots d'emphase, toujours en `--brick`. Spline Sans Mono (`--font-body`) pour TOUT le reste — corps, labels, boutons, UI. Le contraste serif-éditorial × mono-technique est la signature. Eyebrow : Spline Mono, `--text-xs`, `letter-spacing: 0.3em`, uppercase, couleur `--brick-deep`. ## §4 Composants - **Boutons** : `.btn-fill` (fond `--brick`, texte `--paper`) ou `.btn-out` (border 1.5px `--ink`, hover → fill ink). Radius `--radius-full`. Marqués `[data-mag]` pour le magnétisme. - **Cards / tiles** : fond `--paper-card`, border `1px solid var(--line)`, légère rotation (`rotate(±2–4deg)`) pour casser la grille. Hover : `--line-accent` + redressement à 0deg. Jamais de box-shadow. - **Badges** : border `--line`, uppercase `--text-xs`. Variante `.on` : fill `--brick`. - **Inputs** : fond `--paper`, border `--line`. Focus : border `--brick`. - **Stat block** : chiffre en Fraunces italique `--brick`, label mono uppercase `--muted`. - **Full-bleed visual** : une room peut être occupée à 100% par une image. Photo plein cadre en `object-fit: cover` (générée via FAL.ai, 1600×1000) avec un `visual-scrim` en dégradé latéral (`--ink` 55% → 0%) pour garder le titre lisible quel que soit le visuel. Parallaxe léger sur mouvement souris (`translate` ±30px + `scale(1.04)`). Grain en `mix-blend-mode: multiply` par-dessus. Le titre éditorial chevauche l'image (débord hors-cadre), texte `--paper` avec `text-shadow`. Fallback SVG génératif si la photo est absente. - **Contact form** : grille 2 colonnes (texte à gauche, champs à droite). Labels mono uppercase `--muted`, inputs/textarea sur fond `--paper`, focus border `--brick`. Tags de catégorie en badges (`.on` = sélectionné). Un seul CTA `.btn-fill` décisif. Sur mobile : grille en 1 colonne. - **CTA** : chaque room de contenu se termine par au moins un appel à l'action. CTA primaire `.btn-fill` brique. CTA secondaire `.btn-out`. Les CTA naviguent par nom de room via `goName('contact')` / `goName('home')` — jamais d'ancre `#` (la nav est horizontale, pas par scroll). ## §5 Layout Pas de container vertical : un `.track` horizontal en `display:flex` contenant des `.room` de `100vw × 100vh`. Padding intérieur `0 7vw`. La navigation translate le track de `-idx*100vw`. Le contenu d'une room peut **déborder le cadre** (type hero qui sort à gauche/droite) — c'est voulu. Breakpoint 768px : la nav horizontale se désactive, les tiles du collage repassent en colonne verticale empilée (fallback mobile classique). ## §6 Instructions agent 1. **Navigation** : horizontale. Le track se déplace en `translateX` entre rooms pleine page. Molette verticale OU horizontale, flèches, swipe tactile → tous mappés sur l'axe horizontal. Verrouiller pendant la transition (~1.1s) pour éviter le saut multiple. 2. **Curseur magnétique** : un point `--brick` suit la souris en lerp (`+= (target-current)*0.18`). Tout élément `[data-mag]` à moins de 140px est attiré vers le curseur (force proportionnelle à la proximité). Le curseur grossit au survol des éléments interactifs. Désactiver sur `(hover:none)`. 3. **Drift structurel** : au changement de room, les éléments porteurs d'un `--d` se décalent à des vitesses différentes (`translateX(-idx * d * 40px)`) — parallaxe horizontale, pas décoratif mais narratif. 4. **Couleurs** : exclusivement les variables. Jamais `#fff`, `white`, `#000`, `black`. `--brick` reste rare — un seul moment fort par room. 5. **Titres** : Fraunces poids 300, italique `--brick` pour l'emphase uniquement. Le débord hors-cadre est encouragé sur les titres hero. 6. **Cards** : toujours `--paper-card` + border `--line` + légère rotation. Hover redresse et accentue la bordure. 7. **Espacements** : variables `--space-*` uniquement. 8. **Mobile (< 768px)** : désactiver track horizontal, curseur, dots et progress. Empiler les rooms verticalement, collage en colonne. > 💡 **Full implementation available** — This `design.md` ships with a complete interactive HTML/CSS/JS kit: horizontal room navigation, magnetic cursor, structural drift, collage component showcase, and design tokens. No setup needed. > → [stacklift.design/kits/atlas-drift](https://stacklift.design/kits/atlas-drift)