Swiss Creative Mode Template

Name: Swiss Creative Mode Template
Author: nexu-io

nexu-io/open-design

1.8k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

A reusable, single-file HTML presentation template styled with Swiss design principles, supporting theme switching, slide navigation, and palette cycling.

About

This skill produces a premium, self-contained HTML presentation template inspired by Swiss design principles and brutalist aesthetics. It delivers a single-file artifact with bold editorial typography, high-contrast geometric cards, interactive slide navigation (prev/next + dot controls), dual theme switching (paper/dark), palette choreography cycling, and hotspot overlays for annotations. Developers use it when building creative launch pages, portfolio decks, or pitch presentations that require strong visual rhythm and meaningful micro-interactions without external dependencies. The workflow reads design system variables, validates structure against a checklist, and embeds all CSS and JavaScript inline.

Single-file self-contained HTML artifact with no external runtime dependencies
Interactive slide navigation with prev/next buttons and dot indicators
Dual theme toggle (paper/dark) and palette cycling for accent color choreography
Swiss/brutalist design system: bold typography, geometric cards, high-contrast layout
Hotspot overlay system for rich annotations and interactive details on slides

Swiss Creative Mode Template by the numbers

1,767 all-time installs (skills.sh)
+120 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #165 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

swiss-creative-mode-template capabilities & compatibility

Capabilities: generate single file html artifacts · theme switching (paper/dark modes) · slide navigation and pagination · palette cycling and color choreography · hotspot overlays for interactive annotations · swiss design system implementation
Runs: Runs locally

From the docs

What swiss-creative-mode-template says it does

Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette cho

SKILL.md

Keep output self-contained (`<!doctype html>`, inline CSS/JS, no external runtime dependency).

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill swiss-creative-mode-template

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/swiss-creative-mode-template.svg)](https://skillselion.com/skills/nexu-io/open-design/swiss-creative-mode-template)

Installs	1.8k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Generate a single-file Swiss-style presentation template with editorial typography, theme switching, and slide navigation for creative launch pages.

Who is it for?

Building creative launch pages, portfolio presentations, pitch decks, and editorial-style landing pages with Swiss/brutalist design language.

Skip if: Real-time data dashboards, complex multi-user interfaces, or applications requiring backend state management.

When should I use this skill?

User requests a premium presentation template, Swiss/brutalist design style, creative deck with theme switching, or single-file landing page HTML.

What you get

An artifact-based HTML template ready to customize and embed, featuring bold typography, geometric layout, and smooth micro-interactions for pitch decks and creative showcases.

index.html artifact
template.html reference
example.html

By the numbers

Four-step process card row structure
Dual theme modes (paper/dark)
Hotspot overlay system for rich annotations

Files

SKILL.mdMarkdownGitHub ↗

Swiss Creative Mode Template

Produce a premium Swiss/editorial-style HTML template with strong visual rhythm and meaningful interactions, then emit it as a single-file artifact.

Resource map

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

1. Read active DESIGN.md and map palette/type/layout decisions into root CSS variables. 2. Copy assets/template.html to index.html. 3. Keep this structure intact:

Hero scene with bold title and geometric frame.
Four-step process card row.
Stack/architecture diagram scene.

4. Keep these interactions working:

Prev/next slide navigation + dot nav.
Theme toggle (paper/dark).
Palette cycle button (changes accent colors across the template).
Hotspot toggle for annotations/details.

5. Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency). 6. Validate against references/checklist.md before emitting.

Output contract

One short sentence before artifact, then:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>

<!doctype html>
<html lang="en" data-theme="paper">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Swiss Creative Mode Template</title>
  <style>
    :root {
      --paper: #f3efe4;
      --ink: #0b0b0b;
      --accent-a: #f28cc2;
      --accent-b: #f1cb3c;
      --accent-c: #188f5a;
      --accent-d: #ff7f2a;
      --card-shadow: 8px 8px 0 var(--ink);
    }
    html[data-theme="dark"] {
      --paper: #111216;
      --ink: #f3efe4;
      --accent-a: #ff9ad0;
      --accent-b: #ffd84f;
      --accent-c: #2fbf7a;
      --accent-d: #ff9852;
      --card-shadow: 8px 8px 0 #000;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 100%; min-height: 100%; }
    body {
      font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
      background: var(--paper);
      color: var(--ink);
    }
    .app {
      width: min(1320px, 94vw);
      margin: 24px auto 34px;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: var(--card-shadow);
      padding: 18px 18px 24px;
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      border-bottom: 2px dashed var(--ink);
      padding-bottom: 14px;
      margin-bottom: 16px;
    }
    .kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    .controls { display: flex; gap: 8px; flex-wrap: wrap; }
    button {
      border: 2px solid var(--ink);
      background: #fff;
      color: var(--ink);
      padding: 7px 12px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
    }
    button:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 2px; }
    .viewport {
      position: relative;
      min-height: 660px;
      border: 2px solid var(--ink);
      background: var(--paper);
      overflow: hidden;
    }
    .scene {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateX(40px);
      pointer-events: none;
      transition: opacity .4s ease, transform .4s ease;
      padding: 28px;
    }
    .scene.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .hero-grid,
    .stack-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      height: 100%;
      align-items: center;
    }
    .display {
      margin: 0 0 16px;
      font-size: clamp(40px, 7vw, 98px);
      line-height: .95;
      text-transform: uppercase;
      letter-spacing: -.03em;
      font-weight: 900;
    }
    .display span { color: var(--accent-d); }
    .lead {
      max-width: 580px;
      font-size: 18px;
      line-height: 1.45;
      font-weight: 600;
    }
    .art-board {
      border: 3px solid var(--ink);
      min-height: 440px;
      background: var(--accent-c);
      position: relative;
      box-shadow: var(--card-shadow);
    }
    .layer {
      position: absolute;
      width: 56%;
      height: 56%;
      border: 3px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      left: 22%;
      top: 18%;
    }
    .layer.l1 { background: var(--accent-a); transform: translate(-26px, -24px); }
    .layer.l2 { background: var(--accent-d); transform: translate(18px, 16px); }
    .layer.l3 { background: var(--paper); transform: rotate(-6deg); }
    .steps-title { margin: 0 0 16px; font-size: clamp(38px, 6vw, 88px); font-weight: 900; text-transform: uppercase; line-height: .94; }
    .step-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .card {
      border: 3px solid var(--ink);
      padding: 14px;
      min-height: 320px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 5px 5px 0 var(--ink);
    }
    .card:nth-child(1) { background: #fff; }
    .card:nth-child(2) { background: var(--accent-a); }
    .card:nth-child(3) { background: var(--accent-b); }
    .card:nth-child(4) { background: var(--accent-c); color: var(--paper); }
    .num { font-size: 56px; font-weight: 900; line-height: 1; }
    .title { font-size: 30px; text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
    .body { font-size: 16px; line-height: 1.4; font-weight: 600; }
    .legend { display: grid; gap: 10px; }
    .row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
    .swatch { width: 22px; height: 22px; border: 2px solid var(--ink); flex: 0 0 auto; }
    .stack-board {
      border: 3px solid var(--ink);
      background: var(--accent-c);
      min-height: 440px;
      box-shadow: var(--card-shadow);
      display: grid;
      place-items: center;
    }
    .stack { width: min(420px, 88%); display: grid; gap: 10px; }
    .stack-item {
      border: 3px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      padding: 14px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      background: #fff;
    }
    .stack-item:nth-child(1) { background: var(--accent-a); width: 76%; }
    .stack-item:nth-child(2) { background: var(--accent-b); width: 84%; margin-left: 8%; }
    .stack-item:nth-child(3) { background: var(--accent-d); width: 90%; margin-left: 12%; }
    .stack-item:nth-child(4) { background: var(--paper); width: 96%; margin-left: 16%; }
    .hotspot {
      margin-top: 16px;
      border: 2px solid var(--ink);
      background: #fff;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .hotspot p { margin: 0; font-size: 14px; font-weight: 700; }
    .hotspot .dot { width: 13px; height: 13px; border-radius: 999px; background: var(--accent-d); border: 2px solid var(--ink); }
    .footer {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .dots { display: flex; gap: 8px; }
    .dot-btn {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      padding: 0;
      line-height: 1;
      background: #fff;
    }
    .dot-btn.active { background: var(--ink); color: var(--paper); }
    .meta { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    @media (max-width: 980px) {
      .hero-grid, .stack-grid { grid-template-columns: 1fr; }
      .step-row { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .step-row { grid-template-columns: 1fr; }
      .viewport { min-height: 980px; }
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="topbar">
      <div class="kicker">Swiss Creative Mode / Template</div>
      <div class="controls">
        <button id="prevBtn" type="button">Prev</button>
        <button id="nextBtn" type="button">Next</button>
        <button id="themeBtn" type="button">Theme</button>
        <button id="paletteBtn" type="button">Palette</button>
        <button id="hotspotBtn" type="button">Hotspot</button>
      </div>
    </div>

    <div class="viewport">
      <section class="scene active" data-scene="0">
        <div class="hero-grid">
          <div>
            <p class="kicker">Vol. 01 / Edition 2026</p>
            <h1 class="display">Creative <span>Mode</span></h1>
            <p class="lead">A premium editorial template for launch narratives, strategy decks, and visual system storytelling. Replace copy and labels while preserving rhythm and interaction.</p>
          </div>
          <div class="art-board">
            <div class="layer l1"></div>
            <div class="layer l2"></div>
            <div class="layer l3"></div>
          </div>
        </div>
      </section>

      <section class="scene" data-scene="1">
        <p class="kicker">How it works</p>
        <h2 class="steps-title">A Four-Step Process.</h2>
        <div class="step-row">
          <article class="card"><div class="num">01</div><div class="title">Discover</div><div class="body">Capture constraints and map opportunities.</div></article>
          <article class="card"><div class="num">02</div><div class="title">Define</div><div class="body">Frame the problem and lock system rules.</div></article>
          <article class="card"><div class="num">03</div><div class="title">Develop</div><div class="body">Prototype interactions and visual hierarchy.</div></article>
          <article class="card"><div class="num">04</div><div class="title">Deliver</div><div class="body">Ship polished artifacts ready for decision flow.</div></article>
        </div>
      </section>

      <section class="scene" data-scene="2">
        <div class="stack-grid">
          <div>
            <p class="kicker">System diagram</p>
            <h2 class="display">A Stack Of Moving Parts.</h2>
            <div class="legend">
              <div class="row"><span class="swatch" style="background: var(--accent-a)"></span>Layer Alpha - Interface</div>
              <div class="row"><span class="swatch" style="background: var(--accent-b)"></span>Layer Beta - Orchestration</div>
              <div class="row"><span class="swatch" style="background: var(--accent-d)"></span>Layer Gamma - Services</div>
              <div class="row"><span class="swatch" style="background: var(--paper)"></span>Layer Delta - Substrate</div>
            </div>
            <div class="hotspot" id="hotspotPanel">
              <p id="hotspotText">Hotspot: orchestration rail is currently pinned for annotation.</p>
              <span class="dot"></span>
            </div>
          </div>
          <div class="stack-board">
            <div class="stack">
              <div class="stack-item">Layer / 01</div>
              <div class="stack-item">Layer / 02</div>
              <div class="stack-item">Layer / 03</div>
              <div class="stack-item">Layer / 04</div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="footer">
      <div class="dots" id="dots"></div>
      <div class="meta" id="meta">Scene 01 · 03</div>
    </div>
  </div>

  <script>
    (function () {
      var palettes = [
        { a: "#f28cc2", b: "#f1cb3c", c: "#188f5a", d: "#ff7f2a" },
        { a: "#b8a2ff", b: "#ffd166", c: "#3aaed8", d: "#ff7b54" },
        { a: "#ff7eb6", b: "#d9ef8b", c: "#22a06b", d: "#ff9966" }
      ];
      var sceneIndex = 0;
      var hotspotAlt = false;
      var paletteIndex = 0;
      var scenes = Array.prototype.slice.call(document.querySelectorAll(".scene"));
      var dotsWrap = document.getElementById("dots");
      var meta = document.getElementById("meta");
      var hotspotText = document.getElementById("hotspotText");
      var root = document.documentElement;

      function renderDots() {
        dotsWrap.innerHTML = "";
        scenes.forEach(function (_, i) {
          var btn = document.createElement("button");
          btn.type = "button";
          btn.className = "dot-btn" + (i === sceneIndex ? " active" : "");
          btn.textContent = String(i + 1);
          btn.setAttribute("aria-label", "Go to scene " + (i + 1));
          btn.addEventListener("click", function () {
            sceneIndex = i;
            render();
          });
          dotsWrap.appendChild(btn);
        });
      }

      function render() {
        scenes.forEach(function (scene, i) {
          scene.classList.toggle("active", i === sceneIndex);
        });
        meta.textContent = "Scene " + String(sceneIndex + 1).padStart(2, "0") + " · 03";
        renderDots();
      }

      function setPalette(next) {
        root.style.setProperty("--accent-a", next.a);
        root.style.setProperty("--accent-b", next.b);
        root.style.setProperty("--accent-c", next.c);
        root.style.setProperty("--accent-d", next.d);
      }

      document.getElementById("prevBtn").addEventListener("click", function () {
        sceneIndex = (sceneIndex - 1 + scenes.length) % scenes.length;
        render();
      });

      document.getElementById("nextBtn").addEventListener("click", function () {
        sceneIndex = (sceneIndex + 1) % scenes.length;
        render();
      });

      document.getElementById("themeBtn").addEventListener("click", function () {
        var current = root.getAttribute("data-theme");
        root.setAttribute("data-theme", current === "paper" ? "dark" : "paper");
      });

      document.getElementById("paletteBtn").addEventListener("click", function () {
        paletteIndex = (paletteIndex + 1) % palettes.length;
        setPalette(palettes[paletteIndex]);
      });

      document.getElementById("hotspotBtn").addEventListener("click", function () {
        hotspotAlt = !hotspotAlt;
        hotspotText.textContent = hotspotAlt
          ? "Hotspot: subsystem handoff expanded — replace with your own system note."
          : "Hotspot: orchestration rail is currently pinned for annotation.";
      });

      document.addEventListener("keydown", function (event) {
        if (event.key === "ArrowRight") {
          sceneIndex = (sceneIndex + 1) % scenes.length;
          render();
        } else if (event.key === "ArrowLeft") {
          sceneIndex = (sceneIndex - 1 + scenes.length) % scenes.length;
          render();
        }
      });

      render();
    })();
  </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Swiss Creative Mode Example</title>
  <style>
    body { margin: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; background: #f3efe4; color: #0b0b0b; }
    .wrap { width: min(1120px, 94vw); margin: 24px auto; border: 3px solid #0b0b0b; background: #f3efe4; padding: 20px; box-shadow: 8px 8px 0 #0b0b0b; }
    .kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    h1 { margin: 12px 0 18px; font-size: clamp(42px, 8vw, 102px); line-height: .92; text-transform: uppercase; letter-spacing: -.03em; }
    h1 span { color: #ff7f2a; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .card { border: 3px solid #0b0b0b; min-height: 220px; padding: 14px; box-shadow: 6px 6px 0 #0b0b0b; }
    .c1 { background: #fff; }
    .c2 { background: #f28cc2; }
    .c3 { background: #f1cb3c; }
    .c4 { background: #188f5a; color: #f3efe4; }
    .num { font-size: 52px; font-weight: 900; line-height: 1; }
    .ttl { font-size: 28px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
    .txt { font-size: 16px; line-height: 1.45; font-weight: 600; margin-top: 10px; }
    .stack { margin-top: 18px; border: 3px solid #0b0b0b; padding: 16px; background: #188f5a; box-shadow: 8px 8px 0 #0b0b0b; }
    .bar { border: 3px solid #0b0b0b; padding: 12px; margin: 10px 0; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; box-shadow: 6px 6px 0 #0b0b0b; }
    .b1 { width: 68%; background: #f28cc2; }
    .b2 { width: 78%; background: #f1cb3c; margin-left: 6%; }
    .b3 { width: 86%; background: #ff7f2a; margin-left: 10%; }
    .b4 { width: 92%; background: #f3efe4; margin-left: 14%; }
    .foot { margin-top: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
    @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <main class="wrap">
    <p class="kicker">Swiss Creative Mode / Example</p>
    <h1>Creative <span>Mode</span></h1>
    <div class="grid">
      <article class="card c1">
        <div class="num">01</div>
        <div class="ttl">Discover</div>
        <p class="txt">Scan constraints and define the opportunity window with factual context.</p>
      </article>
      <article class="card c2">
        <div class="num">02</div>
        <div class="ttl">Define</div>
        <p class="txt">Choose narrative structure, visual hierarchy, and interaction assumptions.</p>
      </article>
      <article class="card c3">
        <div class="num">03</div>
        <div class="ttl">Develop</div>
        <p class="txt">Compose responsive sections, feedback states, and micro-interactions.</p>
      </article>
      <article class="card c4">
        <div class="num">04</div>
        <div class="ttl">Deliver</div>
        <p class="txt">Ship a reusable template with credible content and presentation polish.</p>
      </article>
    </div>
    <section class="stack">
      <div class="bar b1">Layer / 01</div>
      <div class="bar b2">Layer / 02</div>
      <div class="bar b3">Layer / 03</div>
      <div class="bar b4">Layer / 04</div>
    </section>
    <div class="foot">
      <span>Template preview only</span>
      <span>01 · 08</span>
    </div>
  </main>
</body>
</html>