Palette Tokens & Color System (Spiff Acid Synth)

Base Color & Font Tokens

Background

--spiff-bg: #000000

Panel / Card

--spiff-panel: #060814

Border / Line

--spiff-line: #181c36

Primary Text / Font

--spiff-text: #f8fafc

Muted / Body Text

--spiff-muted: #8b95b5

Primary Accent

--spiff-accent: #6366f1

Accent Ink (Text)

--spiff-accent-ink: #090a26

Secondary Accent

--spiff-accent2: #e1f727

Accent2 Ink (Text)

--spiff-accent2-ink: #1c2100

Danger Accent

--spiff-danger: #f43f5e

Success / Live Green

--spiff-success: #3ef08a

Success Ink (Text)

--spiff-success-ink: #002511

State, Hover & Interactive Component Tokens

Primary Btn Hover

filter: brightness(1.08)

Secondary Btn Hover

color-mix(accent2 15%)

Muted Btn Hover

rgba(255, 255, 255, 0.05)

Danger Btn Fill

rgba(244, 63, 94, 0.15)

Danger Btn Hover

rgba(244, 63, 94, 0.25)

Badge Sec. Fill

color-mix(accent2 20%)

Badge Accent Fill

color-mix(accent 20%)

Input Focus Ring

color-mix(accent 25%)

Glass Navbar Fill

rgba(6, 8, 20, 0.85)

Modal Backdrop

rgba(0, 0, 0, 0.85)

Table Hover / Th

rgba(255, 255, 255, 0.02)

Toast Error Border

rgba(244, 63, 94, 0.5)

:root {
  /* ---- Base Palette & Font Tokens ---- */
  --spiff-bg: #000000;          /* Background */
  --spiff-panel: #060814;       /* Panel / Card Background */
  --spiff-line: #181c36;        /* Borders / Dividers */
  --spiff-text: #f8fafc;        /* Primary Text / Heading Font Color */
  --spiff-muted: #8b95b5;       /* Muted / Secondary / Body Font Color */
  --spiff-accent: #6366f1;      /* Primary Accent (Indigo) */
  --spiff-accent-ink: #090a26;  /* Ink Color on Primary Accent Buttons */
  --spiff-accent2: #e1f727;     /* Secondary Accent (Citron Lime) */
  --spiff-accent2-ink: #1c2100; /* Ink Color on Secondary Accent Buttons */
  --spiff-success: #3ef08a;     /* Success / Live Phosphor Green Accent */
  --spiff-success-ink: #002511; /* Ink Color on Success Buttons & Badges */
  --spiff-danger: #f43f5e;      /* Danger / Alert Accent */

  /* ---- Interactive Component & Hover Color Formulas ---- */
  /* Primary Button Hover: filter: brightness(1.08); */
  /* Secondary Button Hover Fill: color-mix(in srgb, var(--spiff-accent2) 15%, transparent); */
  /* Muted Button Hover Fill: rgba(255, 255, 255, 0.05); */
  /* Danger Button Fill: rgba(244, 63, 94, 0.15); Hover Fill: rgba(244, 63, 94, 0.25); */
  /* Danger Button Border: rgba(244, 63, 94, 0.4); */
  /* Badge Sec. Fill / Border: color-mix(accent2 20%) / color-mix(accent2 45%) */
  /* Badge Accent Fill / Border: color-mix(accent 20%) / color-mix(accent 45%) */
  /* Input Focus Ring: box-shadow: 0 0 0 3px color-mix(in srgb, var(--spiff-accent) 25%, transparent); */
  /* Glass Navbar: background: rgba(6, 8, 20, 0.85); backdrop-filter: blur(12px); */
  /* Modal Backdrop: background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); */
  /* Table Hover Row / Th: background: rgba(255, 255, 255, 0.02); */
}

Buttons

<!-- Primary Button -->
<button class="spiff-btn"><i class="fa-solid fa-bolt"></i> Primary Button</button>

<!-- Secondary Button -->
<button class="spiff-btn spiff-btn--secondary">Secondary Button</button>

<!-- Muted Button -->
<button class="spiff-btn spiff-btn--muted">Muted Button</button>

<!-- Danger Button -->
<button class="spiff-btn spiff-btn--danger">Danger Button</button>

Badges

Acid Citron Badge Primary Badge Live / Success

<span class="spiff-badge">Acid Citron Badge</span>
<span class="spiff-badge spiff-badge--accent">Primary Accent Badge</span>
<span class="spiff-badge spiff-badge--success">Live / Success Badge</span>

Card & Page Containers

Spiff Card Title

This is a standard Spiff Card featuring the signature 135° Ambient Gradient Illumination Border.

<!-- Page Main Layout Container (Max-width: 1100px) -->
<main class="spiff-container">
  <div class="spiff-card">
    <h2>Card Title</h2>
    <p>Card content goes here.</p>
  </div>
</main>

<!-- Utility Classes -->
<div class="spiff-flex-between">
  <span class="spiff-text-muted">Label</span>
  <span class="spiff-text-success">Operational</span>
</div>

Form Controls & Inputs

Inputs & Textareas

Standard Input

Help text goes here

Textarea

Dropdowns & Toggles

Custom Select Dropdown

Toggle Switch Enable Features

Checkboxes & Radios

Checkbox Radio 1 Radio 2

Range Slider

<!-- Custom Select -->
<select class="spiff-select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Toggle Switch -->
<label class="spiff-switch">
  <input type="checkbox" checked>
  <span class="spiff-switch-slider"></span>
  <span>Label</span>
</label>

<!-- Custom Checkbox -->
<label class="spiff-checkbox">
  <input type="checkbox" checked> Checkbox Label
</label>

<!-- Range Slider -->
<input type="range" class="spiff-slider" min="0" max="100" value="50">

Tables

ID	Name	Status
#101	spiff.xyz/s/VjTrV	Active
#102	spiff.xyz/s/demo	Primary
#103	spiff.xyz/gallery	Pending

<div class="spiff-table-wrapper">
  <table class="spiff-table spiff-table--hover">
    <thead>
      <tr><th>Header 1</th><th>Header 2</th></tr>
    </thead>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>
</div>

Tabs Navigation

System Overview Panel

This is the Overview panel content. Clicking tabs triggers smooth transitions using the same spiff-page-in animation engine.

Real-Time Analytics Panel

This is the Analytics panel content. Displays live metrics, bandwidth, and traffic statistics.

Configuration Settings Panel

This is the Settings panel content. Preferences, API keys, and custom rules are managed here.

<!-- Tabs Header -->
<div class="spiff-tabs">
  <button class="spiff-tab spiff-tab--active" onclick="switchTab(this, 'tab-1')">Overview</button>
  <button class="spiff-tab" onclick="switchTab(this, 'tab-2')">Settings</button>
</div>

<!-- Tab Content Panels -->
<div id="tab-1" class="spiff-tab-panel active">Overview Content...</div>
<div id="tab-2" class="spiff-tab-panel">Settings Content...</div>

Accordion & Disclosures

What is Spiff UI Framework v2? (Native Zero-JS <details>)

Spiff UI Framework v2 is the official design system and token framework for all spiff-authored web applications. Native <details> elements work out of the box with zero JavaScript required!

This panel uses a button click handler to toggle the .active class on .spiff-accordion-item.

<!-- Option A: Native Zero-JS <details> (Recommended) -->
<details class="spiff-accordion">
  <summary class="spiff-accordion-header">
    <span>Title</span>
    <i class="fa-solid fa-chevron-down spiff-accordion-icon"></i>
  </summary>
  <div class="spiff-accordion-body">Content body goes here.</div>
</details>

<!-- Option B: Button with JS toggle -->
<div class="spiff-accordion">
  <div class="spiff-accordion-item">
    <button class="spiff-accordion-header" onclick="this.closest('.spiff-accordion-item').classList.toggle('active')">
      <span>Title</span>
      <i class="fa-solid fa-chevron-down spiff-accordion-icon"></i>
    </button>
    <div class="spiff-accordion-body">Content body goes here.</div>
  </div>
</div>

FAQ Layout & Animated Reveal Component

Smooth animated question/answer reveal component with plus/minus toggle morph and bottom-pinned slide expansion, matching the Warframe Heirloom FAQ layout. Auto-initialized by spiff-ui.js.

How does the animated FAQ reveal work?

The container uses transition: height 0.2s ease-out while the inner element is pinned to the bottom (position: absolute; bottom: 0). This creates a seamless reveal animation without content warping or jumping.

Does it support keyboard navigation and custom CSS variables?

Yes! It is fully accessible with ARIA attributes, keyboard support (Enter/Space), and customizable via tokens like --faq-background, --faq-background-hover, --faq-border, --faq-border-hover, and --faq-color-toggle-active.

<div class="FAQLayout">
  <div class="FAQLayout-grid">
    <div class="CollapsibleFAQ">
      <div class="CollapsibleFAQ-header">
        <div class="CollapsibleFAQ-toggle">
          <div class="CollapsibleFAQ-open"></div>
          <div class="CollapsibleFAQ-close"></div>
        </div>
        <div class="CollapsibleFAQ-question">Your Question Title</div>
      </div>
      <div class="CollapsibleFAQ-answer">
        <div class="CollapsibleFAQ-answerInner">
          <p>Your answer text goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Signature Progress Bar

<div class="spiff-progress">
  <div class="spiff-progress__fill" style="width: 68%;"></div>
</div>

Modals & Toast Notifications

Action completed successfully

Failed to process request

Standard Modal Size Modifiers

All modals feature 12px backdrop blur, background scroll lock (body.spiff-modal-open), zero-jiggle scrollbar gutters, and automatic media pausing when closed.

.spiff-modal--sm (400px) .spiff-modal--md (600px default) .spiff-modal--lg (900px) .spiff-modal--full (95vw)

Launch Live Demo:

<!-- Toast Notification -->
<div class="spiff-toast spiff-toast--success">
  <i class="fa-solid fa-circle-check"></i>
  <span>Success message</span>
</div>

<!-- Modal Dialog Structure (Sizes: .spiff-modal--sm | --md | --lg | --full) -->
<div class="spiff-modal-backdrop" id="demo-modal" style="display: none;">
  <div class="spiff-modal spiff-modal--md">
    <div class="spiff-modal-header">
      <h3 class="spiff-modal-title">Modal Title</h3>
      <button class="spiff-modal-close" onclick="closeSpiffModal('demo-modal')"><i class="fa-solid fa-xmark"></i></button>
    </div>
    <div class="spiff-modal-body">Modal body text...</div>
    <div class="spiff-modal-footer">
      <button class="spiff-btn spiff-btn--muted" onclick="closeSpiffModal('demo-modal')">Cancel</button>
      <button class="spiff-btn">Confirm</button>
    </div>
  </div>
</div>

Loading Skeletons

<div class="spiff-skeleton" style="width: 100%; height: 24px;"></div>
<div class="spiff-skeleton" style="width: 75%; height: 16px;"></div>

Native Page View Transitions

Spiff UI Framework v2 includes native W3C cross-document CSS View Transitions out of the box. Any page linking spiff-ui.css automatically performs smooth transitions between pages without needing any single-page application framework or JavaScript libraries.

Test Transition to Home Automatic @view-transition

<!-- Built into spiff-ui.css -- simply link spiff-ui.css and use spiff-root on <body> -->
<body class="spiff-root">
  <!-- Cross-document navigation automatically animates with smooth spiff-page-in/out transitions -->
  <a href="/v1/components.html" class="spiff-btn">Navigate</a>
</body>

Header & Attached Sub-Navigation

Shortener Gallery Analytics System Config

<!-- Optional Sticky Wrapper: add class "spiff-header--sticky" to <header> -->
<header class="spiff-header spiff-header--sticky">
  <!-- Main Navbar -->
  <nav class="spiff-navbar">
    <div class="spiff-navbar-container">
      <a href="/" class="spiff-nav-brand"><i class="fa-solid fa-cube"></i> App Title</a>
      <ul class="spiff-nav-links">
        <li><a href="#" class="spiff-nav-link spiff-nav-link--active">Overview</a></li>
      </ul>
    </div>
  </nav>
  <!-- Optional Attached Sub-Navigation Header -->
  <div class="spiff-subnav">
    <div class="spiff-subnav-container">
      <a href="#" class="spiff-subnav-link spiff-subnav-link--active">Sub-Section 1</a>
      <a href="#" class="spiff-subnav-link">Sub-Section 2</a>
    </div>
  </div>
</header>

Standardized Footer

<footer class="spiff-footer">
  <div class="spiff-footer-container">
    <div>
      <div class="spiff-footer-brand"><i class="fa-solid fa-cube"></i> Site Title</div>
      <div class="spiff-footer-meta">
        <span>© 2026 spiff.xyz</span>
        <span>•</span>
        <span>Status: <span style="color: var(--spiff-success);">Operational</span></span>
      </div>
    </div>
    <ul class="spiff-footer-links">
      <li><a href="#" class="spiff-footer-link">Docs</a></li>
      <li><a href="#" class="spiff-footer-link">Privacy</a></li>
    </ul>
  </div>
</header>

Floating Scroll Up Asset

Appears automatically in the bottom-right corner when scrolling down (window.scrollY > 300px). Can be dropped directly into any site by including the CDN script asset:

<script src="https://assets.spff.dev/scripts/scroll-top.js" defer></script>

<!-- Option A: Standalone CDN Script Asset (Auto-injects button & smooth scroll) -->
<script src="https://assets.spff.dev/scripts/scroll-top.js" defer></script>

<!-- Option B: Manual HTML Button (Included automatically with spiff-ui.js) -->
<button class="spiff-scroll-top" aria-label="Scroll to top">
  <i class="fa-solid fa-arrow-up"></i>
</button>

Hero & Page Header

Spiff UI Framework v2

Vibrant dark-mode design system with curated typography, OLED black background, and high-contrast accents.

Get Started Read Docs

<div class="spiff-hero">
  <h1 class="spiff-hero-title">Hero Title Text</h1>
  <p class="spiff-hero-subtitle">Subtitle explaining the app feature or goal.</p>
  <div style="display: flex; gap: 12px; justify-content: center;">
    <a href="#" class="spiff-btn">Action</a>
  </div>
</div>

Alert Callouts

Info: System maintenance scheduled for 02:00 UTC.

Success: Link shortener updated with Spiff UI Framework v2.

Warning: High bandwidth usage detected on /gallery uploads.

Danger: Unauthorized API key specified. Access denied.

<!-- Info Alert -->
<div class="spiff-alert spiff-alert--info"><i class="fa-solid fa-circle-info"></i> Info text</div>

<!-- Success Alert -->
<div class="spiff-alert spiff-alert--success"><i class="fa-solid fa-circle-check"></i> Success text</div>

<!-- Warning Alert -->
<div class="spiff-alert spiff-alert--warning"><i class="fa-solid fa-triangle-exclamation"></i> Warning text</div>

<!-- Danger Alert -->
<div class="spiff-alert spiff-alert--danger"><i class="fa-solid fa-circle-xmark"></i> Danger text</div>

Breadcrumb Navigation

<ul class="spiff-breadcrumb">
  <li class="spiff-breadcrumb-item"><a href="/" class="spiff-breadcrumb-link">Home</a></li>
  <li class="spiff-breadcrumb-item"><a href="/tools" class="spiff-breadcrumb-link">Tools</a></li>
  <li class="spiff-breadcrumb-item spiff-breadcrumb-item--active">Current Page</li>
</ul>

Pagination Controls

1
2
3

<ul class="spiff-pagination">
  <li><a href="#" class="spiff-page-link">&laquo;</a></li>
  <li><a href="#" class="spiff-page-link spiff-page-link--active">1</a></li>
  <li><a href="#" class="spiff-page-link">2</a></li>
  <li><a href="#" class="spiff-page-link">&raquo;</a></li>
</ul>

Standard Page Layout Templates

Dashboard Layout

Header + Subnav + Stats Grid + Card Table + Footer

header.spiff-header--sticky
└ nav.spiff-navbar
└ div.spiff-subnav
main.spiff-container
└ div.stats-grid
└ div.spiff-card
footer.spiff-footer

Landing Page Layout

Navbar + Hero Banner + Feature Grid + CTA + Footer

nav.spiff-navbar
div.spiff-hero
main.spiff-container
└ div.demo-grid
footer.spiff-footer

Tool / Workspace Layout

Header + Breadcrumb + Alert Callout + Card Form + Scroll Top

header.spiff-header
main.spiff-container
└ ul.spiff-breadcrumb
└ div.spiff-alert
└ div.spiff-card
button.spiff-scroll-top

Stat Cards & Dashboard Metrics

1,420

Total Short Links

98.4k

Redirect Clicks

99.9%

Uptime Reliability

<div class="spiff-stat-grid">
  <div class="spiff-stat-card">
    <div class="spiff-stat-icon"><i class="fa-solid fa-link"></i></div>
    <div>
      <div class="spiff-stat-value">1,420</div>
      <div class="spiff-stat-label">Total Short Links</div>
    </div>
  </div>
</div>

Interactive Tooltips

<span class="spiff-tooltip" data-tooltip="Hover hint text goes here">
  <button class="spiff-btn spiff-btn--secondary">Hover Me</button>
</span>

Action Dropdown Menus

<!-- Option A: Native Zero-JS Click Dropdown (<details>) -->
<details class="spiff-dropdown">
  <summary class="spiff-btn spiff-btn--secondary">
    Click Actions <i class="fa-solid fa-chevron-down"></i>
  </summary>
  <div class="spiff-dropdown-menu">
    <a href="#" class="spiff-dropdown-item"><i class="fa-solid fa-pen" style="color: var(--spiff-accent);"></i> Edit</a>
    <a href="#" class="spiff-dropdown-item spiff-dropdown-item--danger"><i class="fa-solid fa-trash" style="color: var(--spiff-danger);"></i> Delete</a>
  </div>
</details>

<!-- Option B: Hover Dropdown (Opens on hover, closes on mouse-out) -->
<div class="spiff-dropdown">
  <button class="spiff-btn">Hover Menu <i class="fa-solid fa-chevron-down"></i></button>
  <div class="spiff-dropdown-menu">
    <a href="#" class="spiff-dropdown-item"><i class="fa-solid fa-share" style="color: var(--spiff-accent);"></i> Share</a>
    <a href="#" class="spiff-dropdown-item spiff-dropdown-item--danger"><i class="fa-solid fa-fire" style="color: var(--spiff-danger);"></i> Purge</a>
  </div>
</div>

Empty State Containers

No Uploaded Files Yet

Drag and drop images, videos, or documents anywhere to get started.

<div class="spiff-empty-state">
  <div class="spiff-empty-icon"><i class="fa-solid fa-folder-open"></i></div>
  <h3 class="spiff-empty-title">No Items Found</h3>
  <p class="spiff-empty-text">Upload items to display them here.</p>
</div>

Code Subclasses & Keyboard Badges

Press Ctrl + A to select all files, or Esc to close any active modal.

Interactive Code Subclasses (Try Clicking!)

Clicking selects all text (without copying): git clone https://github.com/spiff/spiff-ui.git

Clicking copies text directly to clipboard: npm install @spiff/ui-framework

Keyboard Shortcut Badges (`kbd.spiff-kbd`)

Use <kbd class="spiff-kbd"> to render key bindings and hotkey combinations with elevated 3D keycaps and monospace type.

Command Palette: Ctrl + K

Save Document: Ctrl + S

Close Modal: Esc

Standard Code Block (No Interactive Subclasses)

Standard inline code https://assets.spff.dev/v1/spiff-ui.css behaves as plain text with standard mouse text highlighting.

// Standard multi-line block code (No auto-select or auto-copy)
const config = {
  theme: "oled-black",
  version: 2
};

<!-- Keyboard Shortcut Badges -->
<kbd class="spiff-kbd">Ctrl</kbd> + <kbd class="spiff-kbd">K</kbd>

<!-- Standard Inline Code -->
<code class="spiff-code">https://assets.spff.dev/v1/spiff-ui.css</code>

<!-- Standard Block Code -->
<code class="spiff-code spiff-code--block">// Standard multi-line code...</code>

<!-- Select-All on Click -->
<code class="spiff-code spiff-code-select-all">git clone repo_url</code>

<!-- Auto-Copy on Click -->
<code class="spiff-code spiff-code-auto-copy">npm install pkg_name</code>

Quote Style Box

"Consistency is key. Design systems work best when every component communicates with clarity and beauty."
— Spiff Design System Principles

<blockquote class="spiff-quote">
  <p>"Consistency is key. Design systems work best when every component communicates..."</p>
  <span class="spiff-quote-author">— Spiff Design Principles</span>
</blockquote>

Size Class	Max Width	Backdrop Filter	Status
`.spiff-modal--sm`	400px	12px Blur	Active
`.spiff-modal--md`	600px	12px Blur	Default
`.spiff-modal--lg`	900px	12px Blur	Live

Component Cookbook