/* ============================================================ DOMAINE DESIGN SYSTEM Colors & Typography tokens ============================================================ */ /* ---- FONTS ----------------------------------------------- */ /* Domaine's brand sans: Suisse Int'l (Swiss Typefaces). A precise, neo-grotesk family used across display + body + UI. 18 weights/styles loaded from local OTFs in /fonts. */ @font-face { font-family: 'Suisse Intl'; font-weight: 100; font-style: normal; src: url('fonts/SuisseIntl-Thin.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 100; font-style: italic; src: url('fonts/SuisseIntl-ThinItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 200; font-style: normal; src: url('fonts/SuisseIntl-Ultralight.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 200; font-style: italic; src: url('fonts/SuisseIntl-UltralightItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 300; font-style: normal; src: url('fonts/SuisseIntl-Light.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 300; font-style: italic; src: url('fonts/SuisseIntl-LightItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 350; font-style: normal; src: url('fonts/SuisseIntl-Book.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 350; font-style: italic; src: url('fonts/SuisseIntl-BookItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 400; font-style: normal; src: url('fonts/SuisseIntl-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 400; font-style: italic; src: url('fonts/SuisseIntl-RegularItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 500; font-style: normal; src: url('fonts/SuisseIntl-Medium.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 500; font-style: italic; src: url('fonts/SuisseIntl-MediumItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 600; font-style: normal; src: url('fonts/SuisseIntl-SemiBold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 600; font-style: italic; src: url('fonts/SuisseIntl-SemiBoldItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 700; font-style: normal; src: url('fonts/SuisseIntl-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 700; font-style: italic; src: url('fonts/SuisseIntl-BoldItalic.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 900; font-style: normal; src: url('fonts/SuisseIntl-Black.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl'; font-weight: 900; font-style: italic; src: url('fonts/SuisseIntl-BlackItalic.otf') format('opentype'); font-display: swap; } /* Suisse Int'l Mono — used for eyebrows, metadata, code, tabular numbers. Three weights available: Thin (100), Regular (400), Bold (700). */ @font-face { font-family: 'Suisse Intl Mono'; font-weight: 100; font-style: normal; src: url('fonts/SuisseIntlMono-Thin.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl Mono'; font-weight: 400; font-style: normal; src: url('fonts/SuisseIntlMono-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'Suisse Intl Mono'; font-weight: 700; font-style: normal; src: url('fonts/SuisseIntlMono-Bold.otf') format('opentype'); font-display: swap; } @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- TYPE FAMILIES ----------------------------------- */ /* Suisse Int'l is used everywhere — display and body. Display uses Light/Thin weights with tight tracking for editorial presence; body uses Regular/Book. */ --font-display: 'Suisse Intl', -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-sans: 'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Suisse Intl Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- COLOR TOKENS — base (Ground & Ink) -------------- */ /* Neutral greyscale ramp — matches domaineworldwide.com. Pure black → white, cool greys, no gradients. */ --color-black: #000000; /* @kind color */ --color-grey-800: #3A3A3A; /* @kind color */ --color-grey-600: #686C6D; /* @kind color */ --color-grey-400: #A5A7A8; /* @kind color */ --color-grey-200: #DBDBDB; /* @kind color */ --color-off-white: #EDEDED; /* @kind color */ --color-white: #FFFFFF; /* @kind color */ /* Semantic neutral aliases mapped onto the ramp */ --color-ink: var(--color-black); /* primary text / inverse bg */ --color-ink-2: var(--color-grey-800); /* body text */ --color-ink-3: var(--color-grey-600); /* secondary / meta text */ --color-ink-4: var(--color-grey-400); /* tertiary / captions */ --color-paper: var(--color-white); /* primary bg (white ground) */ --color-paper-2: var(--color-off-white); /* subtle card / hover / secondary bg */ --color-paper-3: var(--color-grey-200); /* divider, inset panel */ --color-rule: var(--color-grey-200); /* hairline rules (#DBDBDB) */ /* ---- SECONDARY BRAND PALETTE ------------------------- */ /* Official secondary colors. Used as moments of emphasis — accent backgrounds, category coding, illustration. Pair each against ink or paper; never more than one per view. */ --color-studio-blue: #2749FF; /* @kind color */ /* signature electric blue */ --color-bubblegum: #F1C5D2; /* @kind color */ --color-plum: #A75C7A; /* @kind color */ --color-eggplant: #8B605D; /* @kind color */ --color-clay: #BC6445; /* @kind color */ --color-tan: #F0B285; /* @kind color */ --color-cashmere: #ECC49A; /* @kind color */ --color-beige: #FFFDDC; /* @kind color */ --color-goldenrod: #E4E2A4; /* @kind color */ --color-asparagus: #9CAE7F; /* @kind color */ --color-cyan: #9EC2B8; /* @kind color */ --color-lemongrass: #939E96; /* @kind color */ --color-boulder: #6D7D77; /* @kind color */ --color-indigo: #4963A6; /* @kind color */ --color-cloud: #A8BDD6; /* @kind color */ --color-periwinkle: #CFD9E4; /* @kind color */ --color-moondust: #D9E0DB; /* @kind color */ --color-bone: #DDDBD4; /* @kind color */ /* ---- SEMANTIC COLOR TOKENS --------------------------- */ --bg: var(--color-paper); --bg-elevated: var(--color-white); --bg-sunken: var(--color-paper-2); --bg-inverse: var(--color-ink); --fg: var(--color-ink); --fg-2: var(--color-ink-2); --fg-muted: var(--color-ink-3); --fg-subtle: var(--color-ink-4); --fg-inverse: var(--color-paper); --border: var(--color-rule); --border-strong: var(--color-ink); --focus-ring: var(--color-ink); /* ---- TYPE SCALE -------------------------------------- */ /* Editorial scale — big, generous. Used at large display sizes on the Domaine site for H1 marketing moments. */ --fs-display-xl: clamp(64px, 9vw, 140px); /* @kind font */ --fs-display-lg: clamp(48px, 6.5vw, 96px); /* @kind font */ --fs-display-md: clamp(40px, 5vw, 72px); /* @kind font */ --fs-h1: clamp(36px, 4.2vw, 56px); /* @kind font */ --fs-h2: clamp(28px, 3.2vw, 40px); /* @kind font */ --fs-h3: clamp(22px, 2.2vw, 28px); /* @kind font */ --fs-h4: 18px; /* @kind font */ --fs-eyebrow: 12px; /* @kind font */ --fs-body-lg: 20px; /* @kind font */ --fs-body: 16px; /* @kind font */ --fs-body-sm: 14px; /* @kind font */ --fs-caption: 12px; /* @kind font */ /* ---- LINE HEIGHTS ------------------------------------ */ --lh-display: 1.02; /* @kind font */ --lh-heading: 1.10; /* @kind font */ --lh-body: 1.55; /* @kind font */ --lh-tight: 1.25; /* @kind font */ /* ---- LETTER SPACING ---------------------------------- */ --ls-display: -0.02em; /* @kind font */ --ls-heading: -0.015em; /* @kind font */ --ls-body: 0; /* @kind font */ --ls-eyebrow: 0.08em; /* @kind font */ /* ---- WEIGHTS ----------------------------------------- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-display: 600; /* @kind font */ /* Display headlines: Suisse SemiBold */ --fw-semi: 600; /* @kind font */ /* ---- SPACING ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* ---- RADII ------------------------------------------- */ /* Softly rounded — matches domaineworldwide.com (sm/md/lg). Buttons + inputs use --radius-sm; --radius-pill is for circular icon buttons only. */ --radius-none: 0; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; /* ---- SHADOWS ----------------------------------------- */ /* Domaine rarely uses shadows — elevation is via white space, rules, and inversion. Reserved use only. */ --shadow-sm: 0 1px 2px rgba(15, 15, 14, 0.04); --shadow-md: 0 6px 24px rgba(15, 15, 14, 0.08); --shadow-lg: 0 24px 60px rgba(15, 15, 14, 0.12); /* ---- MOTION ------------------------------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */ --dur-fast: 180ms; /* @kind other */ --dur-base: 320ms; /* @kind other */ --dur-slow: 640ms; /* @kind other */ /* ---- LAYOUT ------------------------------------------ */ --container: 1440px; /* @kind spacing */ --gutter: max(24px, 3vw); /* @kind spacing */ /* ---- GRID & MARGINS ---------------------------------- */ /* One shared system for web + deck. 12 columns. Imagery goes full-bleed; text/UI respects the edge margin. */ --grid-columns: 12; /* @kind other */ --grid-gap: 24px; /* @kind spacing */ --margin-page: max(24px, 3vw); /* @kind spacing */ /* web edge margin */ --margin-slide: 96px; /* @kind spacing */ /* deck safe-area inset (at 1920×1080) */ --margin-slide-y: 80px; /* @kind spacing */ /* ---- DECK DISPLAY RAMP ------------------------------- */ /* Fixed sizes for the 1920×1080 canvas — NOT viewport clamped. Suisse Light, tight tracking. */ --fs-slide-cover: 200px; /* @kind font */ /* cover headline */ --fs-slide-title: 120px; /* @kind font */ /* section divider */ --fs-slide-h: 72px; /* @kind font */ /* slide heading */ --fs-slide-stat: 160px; /* @kind font */ /* big stat numeral */ --fs-slide-body: 32px; /* @kind font */ /* slide body copy */ /* ---- MICRO-LABEL (Suisse Mono) ----------------------- */ --fs-label: 11px; /* @kind font */ --ls-label: 0.12em; /* @kind font */ /* ---- SURFACES ---------------------------------------- */ /* The three approved background surfaces + inset card. */ --surface-light: var(--color-grey-200); /* primary light bg */ --surface-dark: var(--color-black); /* inverted bg */ --surface-white: var(--color-white); /* true white */ --surface-inset: var(--color-off-white); /* inset panel / quote card */ /* ---- ACCENT ------------------------------------------ */ /* Studio Blue is the one "punctuation" accent — a single high-impact surface, never decorative. */ --accent-punctuation: var(--color-studio-blue); } /* ============================================================ SEMANTIC ELEMENT TYPOGRAPHY Drop-in styles — apply automatically to bare HTML. ============================================================ */ body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display — the poster/cover treatment: Suisse SemiBold, UPPERCASE, tight tracking. This is the canonical "Display type". */ .display-xl, .display-lg, .display-md { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); color: var(--fg); text-wrap: balance; } /* Editorial headings — h1/h2 use Suisse Light, sentence case (the marketing-hero / long-form voice). Distinct from Display. */ h1 { font-family: var(--font-display); font-weight: var(--fw-light); letter-spacing: var(--ls-display); line-height: var(--lh-heading); font-size: var(--fs-h1); color: var(--fg); text-wrap: balance; } .display-xl { font-size: var(--fs-display-xl); } .display-lg { font-size: var(--fs-display-lg); } .display-md { font-size: var(--fs-display-md); } /* Secondary headings — Suisse Light for editorial display. */ h2 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; margin: 0; } h3 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); margin: 0; } h4 { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-tight); margin: 0; } p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0 0 1em 0; text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); line-height: 1.45; } .body-sm { font-size: var(--fs-body-sm); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } /* Eyebrow label — Domaine's signature: tiny uppercase tracked text above a section heading. */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-muted); line-height: 1; } /* Mono micro-label — the system-wide kicker/caption/pagination style. Suisse Mono, uppercase, tracked. Use for category kickers, corner tags (BEFORE/AFTER), metadata, page numbers. */ .label-mono { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--fg-muted); line-height: 1; } /* Numeric display — used for big stat numbers on the site (750+, $5B+, 300+) */ .stat { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md); line-height: 1; letter-spacing: var(--ls-display); } /* Mono — used sparingly, timestamps / small metadata */ code, .mono { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: 0; } a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease); } a:hover { opacity: 0.6; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; } ::selection { background: var(--color-ink); color: var(--color-paper); }