@aexol/spectral 0.9.269 → 0.9.271

package/dist/designer/data/systems/revolut/DESIGN.md

@@ -1,188 +0,0 @@
-# Design System Inspired by Revolut
-
-> Category: Fintech & Crypto
-> Digital banking. Sleek dark interface, gradient cards, fintech precision.
-
-## 1. Visual Theme & Atmosphere
-
-Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
-
-The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
-
-What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
-
-**Key Characteristics:**
-- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
-- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
-- Universal pill buttons (9999px radius) with generous padding (14px 32px)
-- Inter for body text with positive letter-spacing (0.16px–0.24px)
-- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
-- Zero shadows detected — depth through color contrast only
-- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
-- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
-- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface
-
-### Brand / Interactive
-- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
-- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
-- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue
-
-### Semantic
-- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
-- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
-- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
-- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
-- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
-- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
-- **Green Text** (`#006400`): `--website-color-green-text`, green text
-- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
-- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
-- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text
-
-### Neutral Scale
-- **Mid Slate** (`#505a63`): Secondary text
-- **Cool Gray** (`#8d969e`): Muted text, tertiary
-- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers
-
-## 3. Typography Rules
-
-### Font Families
-- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
-- **Body / UI**: `Inter` — standard system sans
-- **Fallback**: `Arial` for specific button contexts
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
-| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
-| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
-| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
-| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
-| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
-| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
-| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
-| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
-| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
-| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
-
-### Principles
-- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
-- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
-- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary Dark Pill**
-- Background: `#191c1f`
-- Text: `#ffffff`
-- Padding: 14px 32px
-- Radius: 9999px (full pill)
-- Hover: opacity 0.85
-- Focus: `0 0 0 0.125rem` ring
-
-**Secondary Light Pill**
-- Background: `#f4f4f4`
-- Text: `#000000`
-- Padding: 14px 34px
-- Radius: 9999px
-- Hover: opacity 0.85
-
-**Outlined Pill**
-- Background: transparent
-- Text: `#191c1f`
-- Border: `2px solid #191c1f`
-- Padding: 14px 32px
-- Radius: 9999px
-
-**Ghost on Dark**
-- Background: `rgba(244, 244, 244, 0.1)`
-- Text: `#f4f4f4`
-- Border: `2px solid #f4f4f4`
-- Padding: 14px 32px
-- Radius: 9999px
-
-### Cards & Containers
-- Radius: 12px (small), 20px (cards)
-- No shadows — flat surfaces with color contrast
-- Dark and light section alternation
-
-### Navigation
-- Aeonik Pro 20px weight 500
-- Clean header, hamburger toggle at 12px radius
-- Pill CTAs right-aligned
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
-- Large section spacing: 80px–120px
-
-### Border Radius Scale
-- Standard (12px): Navigation, small buttons
-- Card (20px): Feature cards
-- Pill (9999px): All buttons
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
-| Focus | `0 0 0 0.125rem` ring | Accessibility focus |
-
-**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use Aeonik Pro weight 500 for all display headings
-- Apply 9999px radius to all buttons — pill shape is universal
-- Use generous button padding (14px 32px)
-- Keep the palette to near-black + white for marketing surfaces
-- Apply positive letter-spacing on Inter body text
-
-### Don't
-- Don't use shadows — Revolut is flat by design
-- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
-- Don't use small buttons — the generous padding is intentional
-- Don't apply semantic colors to marketing surfaces — they're for the product
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile Small | <400px | Compact, single column |
-| Mobile | 400–720px | Standard mobile |
-| Tablet | 720–1024px | 2-column layouts |
-| Desktop | 1024–1280px | Standard desktop |
-| Large | 1280–1920px | Full layout |
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Dark: Revolut Dark (`#191c1f`)
-- Light: White (`#ffffff`)
-- Surface: Light (`#f4f4f4`)
-- Blue: Revolut Blue (`#494fdf`)
-- Danger: Red (`#e23b4a`)
-- Success: Teal (`#00a87e`)
-
-### Example Component Prompts
-- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
-- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
-
-### Iteration Guide
-1. Aeonik Pro 500 for headings — never bold
-2. All buttons are pills (9999px) with generous padding
-3. Zero shadows — flat is the Revolut identity
-4. Near-black + white for marketing, semantic colors for product

package/dist/designer/data/systems/revolut/components.html

@@ -1,342 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Revolut - reference components</title>
-    <meta
-      name="description"
-      content="Reference fixture for design-systems/revolut: premium consumer-finance surfaces with bright blue action and polished dashboard cards."
-    />
-    <style>
-      :root {
-        --bg: #f7f8fb;
-        --surface: #ffffff;
-        --surface-warm: #eef4ff;
-        --fg: #111827;
-        --fg-2: #334155;
-        --muted: #64748b;
-        --meta: #0666eb;
-        --border: #dbe3ef;
-        --border-soft: #edf2f7;
-        --accent: #0666eb;
-        --accent-on: #ffffff;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #16a34a;
-        --warn: #f59e0b;
-        --danger: #ef4444;
-        --font-display: "Inter", system-ui, sans-serif;
-        --font-body: "Inter", system-ui, sans-serif;
-        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 12px;
-        --text-sm: 14px;
-        --text-base: 16px;
-        --text-lg: 18px;
-        --text-xl: 24px;
-        --text-2xl: 36px;
-        --text-3xl: 54px;
-        --text-4xl: 76px;
-        --leading-body: 1.5;
-        --leading-tight: 1.02;
-        --tracking-display: -0.03em;
-        --space-1: 4px;
-        --space-2: 8px;
-        --space-3: 12px;
-        --space-4: 16px;
-        --space-5: 20px;
-        --space-6: 24px;
-        --space-8: 32px;
-        --space-12: 48px;
-        --section-y-desktop: 104px;
-        --section-y-tablet: 72px;
-        --section-y-phone: 52px;
-        --radius-sm: 12px;
-        --radius-md: 20px;
-        --radius-lg: 30px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 0 24px 64px rgba(17, 24, 39, 0.12);
-        --focus-ring: 0 0 0 4px rgba(6, 102, 235, 0.22);
-        --motion-fast: 150ms;
-        --motion-base: 240ms;
-        --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
-        --container-max: 1180px;
-        --container-gutter-desktop: 36px;
-        --container-gutter-tablet: 28px;
-        --container-gutter-phone: 18px;
-      }
-
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body { margin: 0; padding: 0; }
-      body {
-        min-height: 100vh;
-        background: var(--bg);
-        color: var(--fg);
-        font-family: var(--font-body);
-        font-size: var(--text-base);
-        line-height: var(--leading-body);
-        -webkit-font-smoothing: antialiased;
-      }
-      .page {
-        min-height: 100vh;
-        background: radial-gradient(circle at 80% 8%, rgba(6, 102, 235, 0.20), transparent 36%), #f7f8fb;
-      }
-      .container {
-        max-width: var(--container-max);
-        margin-inline: auto;
-        padding-inline: var(--container-gutter-desktop);
-      }
-      section { padding-block: var(--section-y-desktop); }
-      @media (max-width: 1023px) {
-        .container { padding-inline: var(--container-gutter-tablet); }
-        section { padding-block: var(--section-y-tablet); }
-      }
-      @media (max-width: 639px) {
-        .container { padding-inline: var(--container-gutter-phone); }
-        section { padding-block: var(--section-y-phone); }
-      }
-      h1, h2, h3, p { margin: 0; }
-      h1, h2, h3 {
-        font-family: var(--font-display);
-        line-height: var(--leading-tight);
-        letter-spacing: var(--tracking-display);
-      }
-      h1 { max-width: 820px; font-size: var(--text-4xl); font-weight: 700; }
-      h2 { font-size: var(--text-3xl); font-weight: 650; }
-      h3 { font-size: var(--text-xl); font-weight: 650; }
-      .eyebrow {
-        color: var(--meta);
-        font-family: var(--font-mono);
-        font-size: var(--text-xs);
-        font-weight: 700;
-        letter-spacing: 0.12em;
-        text-transform: uppercase;
-      }
-      .lead {
-        max-width: 620px;
-        color: var(--fg-2);
-        font-size: var(--text-lg);
-      }
-      .hero {
-        display: grid;
-        grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
-        gap: var(--space-8);
-        align-items: center;
-      }
-      .stack > * + * { margin-block-start: var(--space-4); }
-      .actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--space-3);
-        margin-block-start: var(--space-6);
-      }
-      .btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 44px;
-        padding: 0 var(--space-5);
-        border: 1px solid transparent;
-        border-radius: var(--radius-md);
-        font: 700 var(--text-sm) / 1 var(--font-body);
-        text-decoration: none;
-        cursor: pointer;
-        transition:
-          background-color var(--motion-fast) var(--ease-standard),
-          border-color var(--motion-fast) var(--ease-standard),
-          color var(--motion-fast) var(--ease-standard),
-          transform var(--motion-fast) var(--ease-standard),
-          box-shadow var(--motion-fast) var(--ease-standard);
-      }
-      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-      .btn-primary { background: var(--accent); color: var(--accent-on); }
-      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
-      .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
-      .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
-      .panel {
-        background: color-mix(in oklab, var(--surface), transparent 4%);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-lg);
-        box-shadow: var(--elev-raised);
-        overflow: hidden;
-      }
-      .panel-head {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--space-4);
-        padding: var(--space-5);
-        border-bottom: 1px solid var(--border-soft);
-      }
-      .status {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--space-2);
-        color: var(--meta);
-        font: 700 var(--text-xs) / 1 var(--font-mono);
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-      }
-      .status::before {
-        width: 8px;
-        height: 8px;
-        border-radius: var(--radius-pill);
-        background: var(--success);
-        content: "";
-      }
-      .metric-grid {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        border-bottom: 1px solid var(--border-soft);
-      }
-      .metric {
-        padding: var(--space-5);
-        border-right: 1px solid var(--border-soft);
-      }
-      .metric:last-child { border-right: 0; }
-      .metric strong {
-        display: block;
-        font-family: var(--font-display);
-        font-size: var(--text-2xl);
-        line-height: var(--leading-tight);
-      }
-      .metric span { color: var(--muted); font-size: var(--text-sm); }
-      .card-row {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: var(--space-4);
-        padding: var(--space-5);
-      }
-      .mini-card {
-        min-height: 148px;
-        padding: var(--space-5);
-        border: 1px solid var(--border-soft);
-        border-radius: var(--radius-md);
-        background: var(--surface-warm);
-      }
-      .mini-card p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
-      .swatches {
-        display: flex;
-        gap: var(--space-2);
-        margin-block-start: var(--space-4);
-      }
-      .swatch {
-        width: 32px;
-        height: 32px;
-        border-radius: var(--radius-sm);
-        border: 1px solid var(--border);
-      }
-      .swatch.accent { background: var(--accent); }
-      .swatch.surface { background: var(--surface); }
-      .swatch.warm { background: var(--surface-warm); }
-      .swatch.fg { background: var(--fg); }
-      .field {
-        display: grid;
-        gap: var(--space-2);
-        margin-block-start: var(--space-5);
-      }
-      label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
-      input {
-        width: 100%;
-        min-height: 46px;
-        padding: 0 var(--space-4);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-sm);
-        background: var(--surface);
-        color: var(--fg);
-        font: inherit;
-      }
-      input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
-      .lower {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: var(--space-4);
-      }
-      .tile {
-        padding: var(--space-5);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-md);
-        background: var(--surface);
-      }
-      .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
-      @media (max-width: 860px) {
-        .hero, .lower { grid-template-columns: 1fr; }
-        .metric-grid, .card-row { grid-template-columns: 1fr; }
-        .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); }
-        .metric:last-child { border-bottom: 0; }
-      }
-    </style>
-  </head>
-  <body>
-    <main class="page">
-      <section>
-        <div class="container hero">
-          <div class="stack">
-            <p class="eyebrow">Revolut design system</p>
-            <h1>Money command center</h1>
-            <p class="lead">Modern finance cards, clean white space, and electric blue movement.</p>
-            <div class="actions" aria-label="Reference actions">
-              <a class="btn btn-primary" href="#">Primary finance pill CTA</a>
-              <a class="btn btn-secondary" href="#">Secondary action</a>
-            </div>
-          </div>
-          <article class="panel" aria-label="Revolut component preview">
-            <div class="panel-head">
-              <div>
-                <p class="eyebrow">Live module</p>
-                <h3>money account card</h3>
-              </div>
-              <span class="status">online</span>
-            </div>
-            <div class="metric-grid">
-              <div class="metric"><strong>98%</strong><span>Signal quality</span></div>
-              <div class="metric"><strong>24</strong><span>Active flows</span></div>
-              <div class="metric"><strong>3.2s</strong><span>Response time</span></div>
-            </div>
-            <div class="card-row">
-              <div class="mini-card">
-                <h3>Palette</h3>
-                <p>premium consumer-finance surfaces with bright blue action and polished dashboard cards.</p>
-                <div class="swatches" aria-label="Token swatches">
-                  <span class="swatch accent"></span>
-                  <span class="swatch surface"></span>
-                  <span class="swatch warm"></span>
-                  <span class="swatch fg"></span>
-                </div>
-              </div>
-              <div class="mini-card">
-                <h3>Control</h3>
-                <p>Focus, hover, and status states share the same brand signal.</p>
-                <div class="field">
-                  <label for="revolut-input">Reference input</label>
-                  <input id="revolut-input" value="Revolut system token" />
-                </div>
-              </div>
-            </div>
-          </article>
-        </div>
-      </section>
-      <section>
-        <div class="container lower">
-          <article class="tile">
-            <p class="eyebrow">Typography</p>
-            <h2>Display rhythm</h2>
-            <p>Headlines use the brand display stack with the declared scale and leading.</p>
-          </article>
-          <article class="tile">
-            <p class="eyebrow">Surface</p>
-            <h2>Layer system</h2>
-            <p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p>
-          </article>
-          <article class="tile">
-            <p class="eyebrow">Interaction</p>
-            <h2>Motion states</h2>
-            <p>Buttons, inputs, and panels use brand-specific focus rings and easing.</p>
-          </article>
-        </div>
-      </section>
-    </main>
-  </body>
-</html>

package/dist/designer/data/systems/revolut/tokens.css

@@ -1,64 +0,0 @@
-/* design-systems/revolut/tokens.css
- *
- * Structured token bindings for Revolut.
- * premium consumer-finance surfaces with bright blue action and polished dashboard cards.
- */
-
-:root {
-  --bg: #f7f8fb;
-  --surface: #ffffff;
-  --surface-warm: #eef4ff;
-  --fg: #111827;
-  --fg-2: #334155;
-  --muted: #64748b;
-  --meta: #0666eb;
-  --border: #dbe3ef;
-  --border-soft: #edf2f7;
-  --accent: #0666eb;
-  --accent-on: #ffffff;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #16a34a;
-  --warn: #f59e0b;
-  --danger: #ef4444;
-  --font-display: "Inter", system-ui, sans-serif;
-  --font-body: "Inter", system-ui, sans-serif;
-  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 24px;
-  --text-2xl: 36px;
-  --text-3xl: 54px;
-  --text-4xl: 76px;
-  --leading-body: 1.5;
-  --leading-tight: 1.02;
-  --tracking-display: -0.03em;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-  --section-y-desktop: 104px;
-  --section-y-tablet: 72px;
-  --section-y-phone: 52px;
-  --radius-sm: 12px;
-  --radius-md: 20px;
-  --radius-lg: 30px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 24px 64px rgba(17, 24, 39, 0.12);
-  --focus-ring: 0 0 0 4px rgba(6, 102, 235, 0.22);
-  --motion-fast: 150ms;
-  --motion-base: 240ms;
-  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
-  --container-max: 1180px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 28px;
-  --container-gutter-phone: 18px;
-}