@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,188 @@
+# 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

@@ -0,0 +1,342 @@
+<!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

@@ -0,0 +1,64 @@
+/* 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;
+}