Digits Fintech Swiss Template

Name: Digits Fintech Swiss Template
Author: nexu-io

nexu-io/open-design

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

A premium, self-contained HTML template that implements Swiss grid design for fintech data decks with modular cards, high contrast, and keyboard/click navigation.

About

Digits Fintech Swiss Template is a self-contained HTML template for building premium data-storytelling presentations with Swiss grid design principles, high-contrast lime accents, and modular numeric cards. Developers use it when crafting financial strategy decks or analytics dashboards that require strict visual hierarchy, restrained animation, and accessibility-first navigation (keyboard arrows, dot indicators, prev/next buttons). The template maintains a three-slide structure with inline CSS/JS, allowing rapid customization of copy and metrics without external dependencies.

Swiss grid layout with modular data card hierarchy for financial metrics
High-contrast black/warm paper/neon-lime color scheme for visual emphasis
Keyboard navigation (ArrowLeft/ArrowRight) plus click-based prev/next and dot controls
Self-contained single HTML file with inline CSS and JavaScript, no external APIs
Subtle fade and hover-lift motion preserves restraint and professionalism

Digits Fintech Swiss Template by the numbers

1,780 all-time installs (skills.sh)
+119 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #159 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

digits-fintech-swiss-template capabilities & compatibility

Capabilities: three slide template with swiss grid layout · modular numeric data cards with hierarchy · high contrast black/warm paper/neon lime color s · keyboard navigation (arrow keys) plus click cont · subtle fade and hover lift motion · self contained single file output · customizable copy and metric values
Platforms: macOS · Windows · Linux
Runs: Runs locally
Pricing: Free

From the docs

What digits-fintech-swiss-template says it does

Swiss-grid fintech deck template in black / warm paper / neon-lime contrast.

SKILL.md

Keep the file self-contained (inline CSS/JS) with no sandbox-hostile APIs.

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill digits-fintech-swiss-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/digits-fintech-swiss-template.svg)](https://skillselion.com/skills/nexu-io/open-design/digits-fintech-swiss-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

Create financial presentation decks with Swiss grid layout, modular data cards, and keyboard navigation in a single HTML file.

Who is it for?

Financial analysts, product managers, and developers building data-storytelling presentations with premium visual design and accessibility requirements.

Skip if: Marketing campaigns, blog content, slide decks requiring animation libraries, or presentations needing third-party integration.

When should I use this skill?

User requests a Swiss-grid fintech template, data-driven finance deck, or high-contrast strategy slides with strict modular layout.

What you get

Create a polished, interactive fintech strategy deck in minutes by editing copy and metrics within a pre-designed three-slide HTML template.

index.html (primary artifact)
template.html (customizable scaffold)
example.html (reference implementation)

By the numbers

3-slide structure standard
Inline CSS and JavaScript only
Single HTML file deployment

Files

SKILL.mdMarkdownGitHub ↗

Digits Fintech Swiss Template

A premium three-slide live-artifact template for data-storytelling in a Swiss grid language.

Resource map

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

Workflow

1. Start from assets/template.html and keep the three-slide structure intact. 2. Replace copy and metric values while preserving card hierarchy and reading order. 3. Keep interactions:

Prev / Next buttons
keyboard navigation (ArrowLeft / ArrowRight)
dot navigation

4. Keep motion subtle (slide fade + tiny hover lift only). 5. Keep the file self-contained (inline CSS/JS) with no sandbox-hostile APIs.

Output contract

Emit one concise orientation sentence and then one HTML artifact:

<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Digits Fintech Swiss Template</title>
  <style>
    :root { --paper:#f2f2ed; --ink:#0a0a0a; --lime:#e2ff41; --line:rgba(10,10,10,.12); }
    * { box-sizing: border-box; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; min-height:100vh; }
    .deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
    .toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
    .btns { display:flex; gap:8px; }
    button { border:1px solid var(--line); background:transparent; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; }
    .slides { position:relative; height:760px; }
    .slide { position:absolute; inset:0; opacity:0; transform:translateX(20px); transition:.35s ease; pointer-events:none; padding:32px; }
    .slide.active { opacity:1; transform:none; pointer-events:auto; }
    .s1 { display:grid; grid-template-columns:120px 1fr 320px; grid-template-rows:1fr 180px; gap:14px; }
    .dark { background:radial-gradient(circle at 50% 38%, #202020 0%, #000 65%); position:relative; }
    .meta { position:absolute; left:14px; bottom:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); }
    .lime { background:var(--lime); position:relative; }
    .headline { display:flex; align-items:center; padding:0 30px; background:var(--lime); font-size:56px; font-weight:900; line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; }
    .copyright { border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px 20px; font-size:12px; letter-spacing:.06em; }
    .s2 { display:grid; grid-template-columns:160px 1fr 1fr; gap:0; height:100%; }
    .rail { background:var(--lime); padding:24px 18px; display:flex; flex-direction:column; justify-content:space-between; }
    .rail .big { font-size:56px; font-weight:900; letter-spacing:-.04em; }
    .rail .lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; }
    .main { border-right:1px solid var(--line); padding:28px 34px; }
    .kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; }
    .title { font-size:86px; line-height:.92; letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 18px; }
    .body { font-size:20px; line-height:1.42; max-width:560px; opacity:.85; }
    .cards { padding:24px 32px 36px 0; display:flex; flex-direction:column; gap:12px; }
    .row { display:flex; gap:12px; }
    .card { flex:1; border:1px solid var(--line); background:#fff; min-height:120px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; }
    .hero { background:var(--lime); min-height:190px; }
    .num { font-size:42px; font-weight:900; letter-spacing:-.03em; }
    .hero .num { font-size:72px; }
    .tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
    .s3 { display:grid; grid-template-columns:1fr 320px; grid-template-rows:1fr 1fr; gap:14px; height:100%; }
    .next { background:var(--lime); padding:30px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
    .next .sub { font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
    .next .mega { font-size:122px; line-height:.9; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; }
    .art { background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:6px; padding:18px; }
    .art span { background:var(--lime); }
    .art span.off { background:transparent; }
    .cols { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
    .col { border:1px solid var(--line); background:#fafaf7; padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
    .col.dark { background:var(--ink); color:#fff; border-color:#222; }
    .col h3 { margin:0; font-size:26px; line-height:1.05; text-transform:uppercase; }
    .col p { margin:0; font-size:16px; line-height:1.4; opacity:.9; flex:1; }
    .dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; }
    .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); background:transparent; }
    .dot.active { background:var(--ink); transform:scale(1.25); }
    .slide .hover { transition:transform .2s ease; }
    .slide .hover:hover { transform:translateY(-2px); }
  </style>
</head>
<body>
  <main class="deck">
    <header class="toolbar"><span>Digits / Strategy Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
    <section class="slides">
      <article class="slide s1 active" data-slide="0">
        <div class="dark"><div class="meta">Portrait / B&W</div></div>
        <div class="lime"></div>
        <div class="dark"><div class="meta">Portrait / B&W</div></div>
        <div class="headline">The Future of Data-Driven Finance</div>
        <div class="copyright">©2026 DIGITS · All rights reserved.</div>
      </article>
      <article class="slide s2" data-slide="1">
        <aside class="rail"><div class="big">+98.7%</div><div class="lbl">Market<br />penetration</div></aside>
        <section class="main"><div class="kicker">Operating readout</div><div class="title">Digits in Numbers</div><p class="body">Precision finance needs precise interfaces. Pipelines, models, and decisions become one coherent operating layer.</p></section>
        <section class="cards">
          <div class="row"><div class="card hover"><div class="num">12.8M</div><div class="tag">Transactions processed</div></div><div class="card hover"><div class="num">41M</div><div class="tag">Total revenue impacted ($)</div></div></div>
          <div class="row"><div class="card hover"><div class="num">15.4M</div><div class="tag">Users engaged</div></div></div>
          <div class="row"><div class="card hero hover"><div class="tag">Data points analyzed</div><div class="num">85.6M</div></div></div>
        </section>
      </article>
      <article class="slide s3" data-slide="2">
        <section class="next"><div class="sub">Take three things away</div><div class="mega">Next Steps</div></section>
        <section class="art"><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span></section>
        <section class="cols">
          <article class="col hover"><div class="tag">01 · Today</div><h3>Pilot one workflow</h3><p>Pick one recurring decision and prove value with measurable output.</p><div class="tag">= 2 weeks</div></article>
          <article class="col hover"><div class="tag">02 · Next month</div><h3>Scale the wedge</h3><p>Expand coverage to adjacent teams and lock quality thresholds.</p><div class="tag">= 6 weeks</div></article>
          <article class="col dark hover"><div class="tag">03 · This quarter</div><h3>Make it the default</h3><p>Retire the legacy loop and promote this as the standard operating mode.</p><div class="tag">→</div></article>
        </section>
      </article>
    </section>
    <nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
  </main>
  <script>
    (function () {
      const slides = Array.from(document.querySelectorAll(".slide"));
      const dots = Array.from(document.querySelectorAll(".dot"));
      let idx = 0;
      const max = slides.length - 1;
      function show(next) {
        idx = Math.max(0, Math.min(max, next));
        slides.forEach((el, i) => el.classList.toggle("active", i === idx));
        dots.forEach((el, i) => el.classList.toggle("active", i === idx));
      }
      document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
      document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
      dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowLeft") show(idx - 1);
        if (event.key === "ArrowRight") show(idx + 1);
      });
    })();
  </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Digits Fintech Swiss Example</title>
  <style>
    :root { --paper:#f2f2ed; --ink:#0a0a0a; --lime:#e2ff41; --line:rgba(10,10,10,.12); }
    * { box-sizing: border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; min-height:100vh; }
    .deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
    .toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
    .btns { display:flex; gap:8px; } button { border:1px solid var(--line); background:transparent; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; }
    .slides { position:relative; height:760px; } .slide { position:absolute; inset:0; opacity:0; transform:translateX(20px); transition:.35s ease; pointer-events:none; padding:32px; } .slide.active { opacity:1; transform:none; pointer-events:auto; }
    .s1 { display:grid; grid-template-columns:120px 1fr 320px; grid-template-rows:1fr 180px; gap:14px; } .dark { background:radial-gradient(circle at 50% 38%, #202020 0%, #000 65%); position:relative; } .meta { position:absolute; left:14px; bottom:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); } .lime { background:var(--lime); } .headline { display:flex; align-items:center; padding:0 30px; background:var(--lime); font-size:56px; font-weight:900; line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; } .copyright { border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px 20px; font-size:12px; letter-spacing:.06em; }
    .s2 { display:grid; grid-template-columns:160px 1fr 1fr; gap:0; height:100%; } .rail { background:var(--lime); padding:24px 18px; display:flex; flex-direction:column; justify-content:space-between; } .rail .big { font-size:56px; font-weight:900; letter-spacing:-.04em; } .rail .lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; } .main { border-right:1px solid var(--line); padding:28px 34px; } .kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; } .title { font-size:86px; line-height:.92; letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 18px; } .body { font-size:20px; line-height:1.42; max-width:560px; opacity:.85; } .cards { padding:24px 32px 36px 0; display:flex; flex-direction:column; gap:12px; } .row { display:flex; gap:12px; } .card { flex:1; border:1px solid var(--line); background:#fff; min-height:120px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; } .hero { background:var(--lime); min-height:190px; } .num { font-size:42px; font-weight:900; letter-spacing:-.03em; } .hero .num { font-size:72px; } .tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
    .s3 { display:grid; grid-template-columns:1fr 320px; grid-template-rows:1fr 1fr; gap:14px; height:100%; } .next { background:var(--lime); padding:30px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; } .next .sub { font-size:12px; letter-spacing:.2em; text-transform:uppercase; } .next .mega { font-size:122px; line-height:.9; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; } .art { background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:6px; padding:18px; } .art span { background:var(--lime); } .art span.off { background:transparent; } .cols { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .col { border:1px solid var(--line); background:#fafaf7; padding:22px 24px; display:flex; flex-direction:column; gap:12px; } .col.dark { background:var(--ink); color:#fff; border-color:#222; } .col h3 { margin:0; font-size:26px; line-height:1.05; text-transform:uppercase; } .col p { margin:0; font-size:16px; line-height:1.4; opacity:.9; flex:1; }
    .dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; } .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); background:transparent; } .dot.active { background:var(--ink); transform:scale(1.25); } .hover { transition:transform .2s ease; } .hover:hover { transform:translateY(-2px); }
  </style>
</head>
<body>
  <main class="deck">
    <header class="toolbar"><span>Digits / Strategy Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
    <section class="slides">
      <article class="slide s1 active" data-slide="0"><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="lime"></div><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="headline">The Future of Data-Driven Finance</div><div class="copyright">©2026 DIGITS · All rights reserved.</div></article>
      <article class="slide s2" data-slide="1"><aside class="rail"><div class="big">+98.7%</div><div class="lbl">Market<br />penetration</div></aside><section class="main"><div class="kicker">Operating readout</div><div class="title">Digits in Numbers</div><p class="body">With 10M+ users and 75M analyzed datapoints, the platform reshapes real-time financial decision loops.</p></section><section class="cards"><div class="row"><div class="card hover"><div class="num">12.8M</div><div class="tag">Transactions processed</div></div><div class="card hover"><div class="num">41M</div><div class="tag">Total revenue impacted ($)</div></div></div><div class="row"><div class="card hover"><div class="num">15.4M</div><div class="tag">Users engaged</div></div></div><div class="row"><div class="card hero hover"><div class="tag">Data points analyzed</div><div class="num">85.6M</div></div></div></section></article>
      <article class="slide s3" data-slide="2"><section class="next"><div class="sub">Take three things away</div><div class="mega">Next Steps</div></section><section class="art"><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span></section><section class="cols"><article class="col hover"><div class="tag">01 · Today</div><h3>Pilot one workflow</h3><p>Wire a single weekly decision through the platform and benchmark against baseline.</p><div class="tag">= 2 weeks</div></article><article class="col hover"><div class="tag">02 · Next month</div><h3>Scale the wedge</h3><p>Expand into adjacent workflows and package reusable instrumentation patterns.</p><div class="tag">= 6 weeks</div></article><article class="col dark hover"><div class="tag">03 · This quarter</div><h3>Make it the default</h3><p>Move budget from legacy tooling and adopt this stack as the default operating layer.</p><div class="tag">→</div></article></section></article>
    </section>
    <nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
  </main>
  <script>
    (function () {
      const slides = Array.from(document.querySelectorAll(".slide"));
      const dots = Array.from(document.querySelectorAll(".dot"));
      let idx = 0;
      const max = slides.length - 1;
      function show(next) { idx = Math.max(0, Math.min(max, next)); slides.forEach((el, i) => el.classList.toggle("active", i === idx)); dots.forEach((el, i) => el.classList.toggle("active", i === idx)); }
      document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
      document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
      dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
      document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") show(idx - 1); if (event.key === "ArrowRight") show(idx + 1); });
    })();
  </script>
</body>
</html>

Related skills

Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k

Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k

Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k

Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470

Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k

Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109k

FAQ

Can I customize colors and layout?

Yes. Edit the inline CSS in the template.html file to adjust colors, spacing, and card dimensions while preserving the three-slide structure and navigation logic.

Does it require external libraries or APIs?

No. The template is fully self-contained with inline CSS and vanilla JavaScript. No sandbox-hostile APIs or external dependencies.

What keyboard shortcuts are available?

ArrowLeft and ArrowRight navigate between slides. Dot indicators and Prev/Next buttons provide click-based navigation alongside keyboard control.

Is Digits Fintech Swiss Template safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Design & UI/UXuibranding

Digits Fintech Swiss Template

About

Digits Fintech Swiss Template by the numbers

digits-fintech-swiss-template capabilities & compatibility

What digits-fintech-swiss-template says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Digits Fintech Swiss Template

Resource map

Workflow

Output contract

Checklist

P0

P1

P2

Related skills

FAQ

Can I customize colors and layout?

Does it require external libraries or APIs?

What keyboard shortcuts are available?

Is Digits Fintech Swiss Template safe to install?

About

Digits Fintech Swiss Template by the numbers

digits-fintech-swiss-template capabilities & compatibility

What digits-fintech-swiss-template says it does

Add your badge

What it does

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

Digits Fintech Swiss Template

Resource map

Workflow

Output contract

Checklist

P0

P1

P2

Related skills

FAQ

Can I customize colors and layout?

Does it require external libraries or APIs?

What keyboard shortcuts are available?

Is Digits Fintech Swiss Template safe to install?

This week in AI coding