MagpieCSS/CMS Design System

Welcome to MagpieCSS/CMS

MagpieCSS/CMS is a modern, lightweight, themeable vanilla design system and components framework. In addition to being optimized for data-dense user interfaces and document libraries, it is built from the ground up to be fully readable, discoverable, and indexable by LLMs and AI agents using structured design tokens and client-side DOM-to-Markdown (CMS) content negotiation.

Methodology & Design Philosophy

MagpieCSS/CMS is guided by five core engineering principles designed to make building administrative and wiki systems fast, clean, and highly readable by both humans and AI agents:

1. Pure Vanilla CSS

No preprocessors, compilers, or complex node setups needed. MagpieCSS/CMS leverages modern CSS Custom Properties directly inside standard stylesheets for instant browser loads.

2. High Density Layouts

Optimized for data-dense dashboards, tables, and nested trees where scanning complex lists quickly is critical, avoiding bloated gaps of empty white space.

3. Zero-Emoji Integrity

To maintain professional rendering consistency across operating systems, all visual icons are styled using inline SVG vectors or native typewriter font glyphs.

4. Declarative Variable Theming

All colors, border curves, and spacing are tied to variables. Swap the root data-theme attribute to shift color variables instantly (supporting Slate, Dark, Light, High Contrast, and Terminal).

5. LLM-Friendly Legibility

DOM hierarchies, design tokens, and class naming conventions are engineered to be readable by LLMs. Includes dynamic DOM-to-Markdown (CMS) parsers for agent content negotiation.

The Three Architectural Layers

Our source code is split into three clean layers to separate global resets, layout structures, and standalone components:

Tokens & Reset (variables.css, reset.css): Defines the global spacing scales, transition durations, standard scrollbars, typewriter terminal overrides, and core theme properties.
Responsive Grids (layout.css): Binds the side-navigation desktop grid, full-viewport overrides (.layout-full-width), printer layouts, and dense Airtable list structures.
standalone Components (components.css): Hosts custom inputs, button styles, collapsible tree trees, administrative panels, modals, 3D flipping cards, color swatches, and toast alerts.

CMS (Cascading Markdown Sheets) Engine

Cascading Markdown Sheets (CMS) is a client-side compiler design pattern built into MagpieCSS/CMS. Instead of forcing AI crawlers to parse bloated DOM structures or maintaining separate sets of static markdown files, the CMS engine translates visual HTML layouts on the fly into clean, token-efficient Markdown.

How It Works

Content Negotiation: When an LLM crawler or AI agent requests a page with the header Accept: text/markdown, the server bypasses the HTML/CSS layout entirely and returns raw Markdown.
DOM Compiler: If the page is already rendered in the browser, the client-side helper MagpieCSS.cms.toMarkdown(element) recursively inspects the target elements (handling layouts, tables, and trees) while stripping away copy buttons, theme switches, and layout wrappers to deliver semantic context.

How to Implement It

Integrating content-negotiated CMS support into your web applications requires two simple steps:

1. Server-Side Routing (Content Negotiation)

Detect the incoming Accept header to dynamically serve Markdown payloads instead of HTML templates:

Node.js (Express)

app.get('/dashboard', (req, res) => {
    if (req.headers.accept && req.headers.accept.includes('text/markdown')) {
        res.type('text/markdown');
        return res.send('# System Dashboard\\n\\n- Active nodes: 12\\n- Status: OK');
    }
    res.sendFile(path.join(__dirname, 'index.html'));
});

2. Client-Side DOM-to-Markdown (MagpieCSS.cms API)

Instantly compile any rendered sub-tree of the active DOM into Markdown for dynamic clipboard copies, local agent prompts, or client-side indexing:

JavaScript

// Select the DOM container to translate
const contentNode = document.getElementById('my-document-root');

// Compile DOM to clean Markdown (strips layouts, theme styling and copy actions)
const markdown = MagpieCSS.cms.toMarkdown(contentNode);

console.log(markdown);

Active Theme Color Tokens

Below are the current values of the design variables. Try changing the theme in the top-right header dropdown switcher to see variables adapt dynamically.

Background

--bg

#0f172a

Card/Panel

--card

#1e293b

Text

--text

#f8fafc

Accent

--accent

#3b82f6

Secondary

--secondary

#2dd4bf

Gold

--gold

#ffd700

Border

--border

#334155

Danger

--danger

#f43f5e

Custom Monospace overrides (Terminal Theme)

When using data-theme="terminal", the font stack changes to a strict typewriter monospace style, and border-radius indicators flatline to 0px, giving a blocky retro vibe automatically.

Typography Scale Preview

1.8rem (h2) Beautiful Vault Manager

1.25rem (h3) Secure Spatial Database

1.0rem Primary body text block size.

0.85rem Muted small descriptions and labels.

Integration Code

<!-- Link stylesheet in header -->
<link rel="stylesheet" href="magpie.css">

<!-- Apply specific theme: magpie (default), dark, light, hc, terminal -->
<html data-theme="magpie">
  <body>
    <!-- Your app content here -->
    <script src="magpie.js"></script>
  </body>
</html>

Responsive Grids & Airtable Transforms

MagpieCSS/CMS includes layout utilities for side-navigation dashboards and the highly optimized dense "Airtable" grid. This table automatically flattens into scrollable micro-cards on mobile devices.

The Airtable Dense Grid

Hover on rows to see highlighting. Shrink your browser window below 800px to see it collapse into an active card list.

Image	Item Name ▼	Qty	Category	Location	Value	Tags
	Vintage SLR Camera	1	Electronics	Office Shelf A	$450.00$450.00	CameraVintage
	Cordless Drill Set	2	Tools	Garage Rack 3	$180.00$180.00	PowerToolsLOW

3D Hover Image Zoom

Hover on the image below to trigger the visual 3D pop-out effect, lifting the thumbnail out of structural boundaries.

Uses custom CSS transforms and z-indexing: .gallery-img:hover. Perfect for inventory item details.

Airtable Grid HTML Code

<div class="grid-container">
  <table class="data-grid">
    <thead>
      <tr>
        <th class="col-img">Image</th>
        <th class="col-name">Item Name</th>
        <th class="col-qty">Qty</th>
        <th class="col-cat">Category</th>
        <th class="col-loc">Location</th>
        <th class="col-money">Value</th>
        <th class="col-tags">Tags</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-img cell-img">
          <img src="thumb.jpg" class="thumb-tiny">
        </td>
        <td class="col-name cell-name">SLR Camera</td>
        <td class="col-qty cell-qty">1</td>
        <td class="col-cat cell-details"><span class="hide-mobile">Electronics</span></td>
        <td class="col-loc cell-details"><span class="hide-mobile">Cabinet A</span></td>
        <td class="col-money cell-details">
          <span class="hide-mobile">$450.00</span>
          <span class="val-mobile show-mobile" style="display:none;">$450.00</span>
        </td>
        <td class="col-tags cell-tags">
          <span class="tag-pill">Gear</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

App Layout Header & User Badge

Responsive profile badges and vault text designed to condense beautifully on smaller viewports. Shrink the browser width below 768px to see the user name hide and the vault name truncate automatically.

Primary Storage Vault

D

Derek Blackburn

Dashboard Toolbars & Metric Cards

Statistics panels and dashboard toolbar components styled to display key variables, totals, and controls cleanly in dense layouts.

TOTAL VAULT VALUE $45,210.00

Space Used

74%

22.4 GB of 30 GB

Last Audited

2 Hours Ago

All items verified

Layout Utility & Print Modifiers

Utility classes to adjust layout configurations and printer visibility.

.layout-full-width: Bypasses the default responsive side-navigation menu on desktop, expanding the content frame to fill 100% of the viewport width. Ideal for map grids or full-width editor workspaces.
.hide-print: Forcefully hides elements (like action buttons, navigation sidebars, theme selectors) during print previews and PDF exports.

Dashboard Widgets HTML Code

<!-- Responsive Header Widgets -->
<div style="display: flex; justify-content: space-between;">
  <span class="vault-name-text">Primary Storage Vault</span>
  <div class="user-profile-badge">
    <span class="user-name">Derek Blackburn</span>
  </div>
</div>

<!-- Dashboard Stats Toolbar -->
<div class="dashboard-toolbar">
  <div class="vault-stats">
    <div class="stat-item">
      <span class="stat-label">Total Value</span>
      <span class="stat-val">$45,210.00</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">Items Stashed</span>
      <span class="stat-val gold">124</span>
    </div>
  </div>
</div>

<!-- Metric Cards -->
<div class="metric-card">
  <div class="stat-label">Space Used</div>
  <div class="metric-value">74%</div>
</div>

<!-- Full-Width Grid Layout Bypass -->
<div class="container app-layout layout-full-width">
  <!-- Side navigation will be hidden automatically -->
  <div class="app-content">Full screen canvas or page here</div>
</div>

Form Controls & Button Kits

Forms feature sleek, dark, glassmorphism-friendly inputs with animated blue focus borders. Action buttons support color variables, custom scaling, and high contrast contrast borders.

Interactive Form Sandbox

Item Title

Quantity

Bin ID	Contents	Status
B-01	Network hardware & switches	Active
B-02	Power supply adapter cabling	Idle

What is a Closure?

JavaScript Core Concept

Flip ↻

Scope Binding Lexical

Memory Persistent

A closure is the combination of a function bundled together with references to its surrounding state (the lexical environment).

Click to flip back

Flipping Card HTML Code

<!-- Grid container -->
<div class="card-grid">
  <!-- Card Perspective Wrapper (Interactive via JS toggle) -->
  <div class="card-container" onclick="this.querySelector('.card-3d').classList.toggle('flipped')">
    <div class="card-3d">
      <!-- Front Face -->
      <div class="card-front">
        <div class="card-header">
          <span class="card-badge">Topic</span>
          <div class="card-avatar-placeholder">A</div>
        </div>
        <h3 class="card-title">Question?</h3>
        <div class="card-footer">
          <span class="card-flip-prompt">Flip ↻</span>
        </div>
      </div>

      <!-- Back Face -->
      <div class="card-back">
        <div class="card-back-attributes">
          <div class="card-back-attr-row">
            <span class="card-back-attr-label">Property</span>
            <span class="card-back-attr-val">Value</span>
          </div>
        </div>
        <p class="card-back-description">Answer definition details...</p>
      </div>
    </div>
  </div>
</div>

Wiki Article Renderer & Search Previews

Components for rendering Markdown content pages, metadata editors, custom pills, and search autocomplete dropdown overlays. Perfect for wikis and document libraries.

Pill Inheritance Variations

Pill tags used to indicate status, categories, or inheritance flags.

.pill-default .pill-inherited .pill-override

Information & Callout Cards

Themed info, success, warning, and danger cards for highlighting notes, instructions, warnings, or errors.

Default Information Card

This is a default information card. It uses the primary theme accent color and is ideal for standard callouts, tips, or neutral notices.

Success Notice

The operation was completed successfully! All assets have been synced to the database.

Warning / Caution

Be careful! Overwriting the system settings can result in temporary disruption to the server.

Critical Error / Danger

Unable to connect to the cloud storage API. Please check your credentials in the settings panel.

Wiki Render Content Preview

Markdown elements styled automatically inside the .wiki-content-body wrapper class. Click the button to negotiate content and see the raw Markdown output compiled dynamically by our CMS engine for LLM requests.

Magpie Nest Development Roadmap

The development of the wiki platform (Magpie Nest) aims to integrate full spatial assets indexing alongside rich markdown documentation articles. Here is a preview of the typography and layouts:

"Organizing the physical world digitally requires bridging database structures with human-readable wikis."

Core Document Syntax

Inline code styling: Use const db = new MagpieDB() to query local records.
Nested lists: Fully supported with customized spacings.

// Example Markdown Code Block
function initializeVault() {
    console.log("Nest vault initialized.");
}

Wiki Metadata Editor Block

Document Metadata

Assigned Tag Owner

Revision State Override Active

Live Autocomplete Search Preview Dropdown

Visual overlay list displayed below search boxes during user queries.

Wiki Article HTML Code

<!-- Markdown Content Container -->
<div class="wiki-content-body">
  <h1>Article Title</h1>
  <blockquote>Blockquote block</blockquote>
  <pre><code>// Code snippet</code></pre>
</div>

<!-- Autocomplete Search Dropdown -->
<div style="position: relative;">
  <input type="text" placeholder="Search...">
  <div class="search-preview-dropdown">
    <a href="#" class="search-preview-item">
      <span class="search-preview-title">Result</span>
      <span class="search-preview-type">Type</span>
    </a>
  </div>
</div>

Dialog Modals & Toast Alerts

Includes overlay system helpers for notices, delete confirmations, and multiple styled toast banners (e.g. success checkmarks, red warnings, and retro Clippy helpers).

Overlay Modal Launchers

Toast Alert Triggers

Helper JS Call Examples

// 1. Fire a Toast Notification
MagpieCSS.toast.show("Saved changes!", "success", 3000);

// 2. Fire an Assistant toast box (optional customIconHtml parameter)
MagpieCSS.toast.showClippy(
  "New Update!", 
  "We added backups.", 
  5000, 
  () => { console.log("Action clicked!"); },
  `<svg width="48" height="48">...</svg>` // Optional custom icon SVG or <img> tag
);

// 3. Fire custom confirm Modal promise
MagpieCSS.dialog.confirm("Wipe all database records?", "Caution").then(confirmed => {
  if (confirmed) {
    console.log("Database wiped!");
  }
});

Admin Warning Banners

Sleek alert panels for warning notifications and system indicators.

Warning: Cabinet Alpha is reaching maximum capacity. Plan database migration soon.

Navigation Tabs Component

Admin tabs for switching settings views. Styled with modern, layout-fitting borders.

Overview Panel Content: Node coordinates are aligned and storage indexer is fully operational.

Settings Panel Content: Custom rules can be modified. Snapping behavior enabled.

Loading Indicators & Skeleton Shimmers

CSS-based spinner icons, status-blocking loading overlays, and skeleton placeholder shimmers for mock list loading states.

Small Spinner (`.spinner.small`)

Default Spinner (`.spinner`)

Large Spinner (`.spinner.large`)

Spinners & Skeleton Loaders Markup

Code snippets to build spinner animations, skeleton shimmers, and blocking status load modals.

HTML (Spinners & Loaders)

<!-- Spinners -->
<span class="spinner small"></span>
<span class="spinner"></span>
<span class="spinner large"></span>

<!-- Skeleton Shimmer text & blocks -->
<div class="skeleton-avatar skeleton-shimmer"></div>
<div class="skeleton-title skeleton-shimmer"></div>
<div class="skeleton-text skeleton-shimmer"></div>
<div class="skeleton-block skeleton-shimmer"></div>

<!-- Fullscreen Loading Modal overlay -->
<div class="modal-overlay" style="display: flex;">
  <div class="modal-content" style="max-width: 300px; text-align: center; padding: 30px;">
    <div class="spinner large" style="margin-bottom: 15px;"></div>
    <div style="font-weight: 600;">Loading Database...</div>
  </div>
</div>

Custom Modal & Overlay Markup

Standard overlay structures used to build popups and edit frames.

<!-- Modal Overlay structure -->
<div class="modal-overlay" style="display: none;">
  <div class="modal-content">
    <h3>Edit Location</h3>
    <p>Enter details below.</p>
    <div style="display: flex; gap: 10px; justify-content: flex-end;">
      <button class="stash-btn">Save</button>
    </div>
  </div>
</div>

Code Snippet Cards

MagpieCSS/CMS includes a premium, theme-aware code card layout optimized for sharing code blocks, markdown text, or configuration settings. It automatically includes copy-to-clipboard actions and interactive state transitions.

Interactive Component Preview

Click the "Copy" button in the card below to test the clipboard copy and micro-animation success states.

Javascript

// Initialize MagpieCSS Framework Components
const config = {
    theme: "magpie",
    density: "high",
    emojiSupport: false
};
MagpieCSS.ui.initCodeBlocks();

HTML Structure & Markup

Wrap code within .code-block, providing a .code-block-header containing the language label and copy button. The framework handles binding automatically.

HTML

<div class="code-block">
  <div class="code-block-header">
    <span class="code-block-lang">CSS</span>
    <button class="code-block-copy">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
      </svg>
      <span class="copy-label">Copy</span>
    </button>
  </div>
  <pre><code>.my-selector { color: var(--accent); }</code></pre>
</div>

Spatial Canvas Designer Layout

The layout styles used to build interactive floor plans, map visualizers, and node editing drawing pads. This includes absolute tool palettes, fullscreen canvas overrides, and flat selection widgets.

Interactive Canvas Designer View

Click the gear icon in the canvas tool palette to expand options, or click the fullscreen button in the bottom right corner.

Map Editor

Grid

Interactive Canvas Workspace

[ 2D grid coordinates relative to viewport ]

Designer Canvas HTML Code

<div class="mapping-container">
  <!-- Floating Header -->
  <div class="floating-header">
    <div class="map-title-box">
      <span class="label-3d">Spatial</span>
      <select class="flat-select">
        <option>Floor 1</option>
      </select>
    </div>
  </div>

  <!-- Side Palette -->
  <div class="tool-palette expanded">
    <button class="tool-btn active">
      <span class="icon-wrap">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
      </span>
      <span class="tool-label">Pins</span>
    </button>
  </div>
  
  <!-- Fullscreen Button -->
  <button class="fullscreen-btn">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
  </button>
</div>

Canvas Tool Color Pickers

Drawing palette widgets that contain input selectors and quick-select color swatches.

Draw Color:

Mobile Floating Action Button (FAB)

Responsive layout classes to handle mobile action controls. These trigger floating action buttons and tool visibility controls on devices under 768px wide.

.mobile-fab: A fixed floating action button that appears in the bottom right corner on mobile screens. It defaults to the theme accent color with a subtle drop shadow.
.mobile-controls-toggle: A layout container helper to toggle the display of complex tools list on mobile viewports.

Canvas Colors & FAB HTML Code

<!-- Color Picker Wrapper -->
<div class="color-picker-wrapper">
  <input type="color" value="#3b82f6">
  <div class="recent-colors-palette">
    <div class="color-swatch" style="background-color: #3b82f6;"></div>
    <div class="color-swatch" style="background-color: #2dd4bf;"></div>
  </div>
</div>

<!-- Mobile Floating Action Button -->
<button class="mobile-fab">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>

PDF & Print Report Styles

Clean, high-contrast, light-themed layouts optimized for exporting catalog indices, invoices, inventories, and audits into physical print or PDF formats.

Print Layout Preview

Below is a preview of the print-formatted structure (uses high-contrast borders and tabular-numeric fonts).

VALUATION REPORT INDEX

Stash Vault Inventory Audit

Date: May 23, 2026
Operator: Derek

Total Stashed Items 142

Calculated Value $12,450.00

ITEM	LOCATION	VALUE
Vintage SLR Camera	Office Shelf A	$450.00
Archival Storage Locker	Server Room 102	$1,200.00

Report Layout HTML Code

<!-- Apply print-mode class on body during print trigger -->
<body class="print-mode">
  <div class="header-container">
    <div class="header-left">
      <h1>VALUATION REPORT</h1>
      <span class="meta">Audit Index</span>
    </div>
  </div>

  <div class="summary-boxes">
    <div class="summary-box">
      <span class="summary-label">Total Items</span>
      <span class="summary-value">142</span>
    </div>
  </div>
  
  <!-- Table uses separate border collapse to allow rounded header corners -->
  <table style="border-collapse: separate; border-spacing: 0;">
    <thead>
      <tr>
        <th>ITEM</th>
        <th>VALUE</th>
      </tr>
    </thead>
  </table>
</body>

Dashboard & Landing Layouts

Advanced workspace frameworks, Kanban panels, checkout carts, and landing heroes designed to arrange dense dashboard blocks, detail cards, and subscription grids cleanly.

1. Interactive Project Workspace & Checkout Cart

A multi-pane layout featuring project lists, metric cards, and a side-anchored cart checkout. Shrink your viewport width below 900px to see the panes stack vertically.

Active Stash Projects

Automation Server Rack B2

Procuring network switches and cable management modules.

$3,450.00

Updated 10m ago

Locker Room Audit Plan

Auditing vintage hardware, cameras, and physical keys.

$890.00

Updated 2h ago

Office Shelf Redesign

Shelving units, document files, and storage containers.

$1,200.00

Updated yesterday

Archived Projects

No archived stash projects found.

Checkout Stash Cart

Item Name	Qty	Action
Gigabit Network Switch
Cat6 Ethernet Cable (100ft)

2. Layout Detail Card & Action Bar

Large viewport detail container displays rich meta info, data tables, and interactive action buttons.

Project: Archival Vault Upgrade

Allocating high-density storage nodes and setting up multi-factor hardware security key lockers.

Due: June 15, 2026

Item Code	Description	Unit Value
NODE-S3-12TB	Archival Storage Server Module	$1,200.00
LOCK-BIOMETRIC	Biometric Hardware Security Locker	$450.00

Subtotal Valuation: $1,650.00

3. Landing Hero & Pricing Tiers

Landing page headlines, features listings, and grid columns showcasing subscription tiers.

Stash Assets with Pixel Perfection

Responsive grids, native theme switches, and zero-dependency scripts.

MagpieCSS/CMS is designed for high-density document rendering and complex administrative workspaces, maintaining visual fidelity and performance without bloat.

High Density

Designed for administrative databases, lists, and dense trees where scanning is critical.

Spatial Workspaces

Native support for 2D mapping layout tools and 3D architectural node placement.

Theming Engine

Dynamically shifts color properties, border radii, and type families inside a single DOM selector.

Simple, Transparent Pricing

Free Sandbox

$0 / month

Perfect for testing and personal workflows.

Up to 50 active inventory items
Standard high-density grids
3 theme presets

Stash Pro

$29 / month

For engineers, technicians, and organizers.

Unlimited inventory items
Spatial floorplan mapping designer
All 5 premium visual themes
PDF/Print audit report exports

4. Themed Corner Triangles

Fixed or absolute corner badges to highlight repository status, version numbers, or primary calls to action. Supports all four corners with automatic text orientation and responsive theme transitions.

TOP_LEFT

Top-Left Class

TOP_RIGHT

Top-Right Class

BTM_LEFT

Bottom-Left Class

BTM_RIGHT

Bottom-Right Class

5. Integration & Layout Markup Code

Code patterns for dashboards, item detail grids, and landing pricing blocks. Copy these configurations to construct data workspaces quickly.

HTML (Dashboard Workspace)

<div class="projects-layout">
  <!-- Main Content Feed -->
  <div>
    <div class="panel-card">
      <div class="panel-title">Active Projects</div>
      <div class="project-row">
        <div class="project-info">
          <h4>Server Rack Installation</h4>
          <p>Adding networking hardware.</p>
        </div>
        <div class="project-meta">
          <div class="project-cost">$3,450.00</div>
        </div>
      </div>
    </div>
  </div>
</div>

HTML (Checkout Cart)

<div class="panel-card">
  <div class="panel-title">Stash Cart</div>
  <table class="cart-table">
    <thead>
      <tr>
        <th>Item</th>
        <th>Qty</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Switch</td>
        <td><input type="number" class="cart-qty-input" value="1"></td>
      </tr>
    </tbody>
  </table>
</div>

HTML (Pricing Grid)

<div class="pricing-grid">
  <div class="tier-card featured">
    <h3>Stash Pro</h3>
    <div class="cost-font">$29 <span>/ month</span></div>
    <ul>
      <li>Unlimited inventory items</li>
    </ul>
    <button class="stash-btn">Upgrade</button>
  </div>
</div>

HTML (Empty Placeholder)

<div class="empty-placeholder">
  No archived stash projects found.
</div>

HTML (Features Grid)

<div class="features">
  <div class="feature-card">
    <h3>High Density</h3>
    <p>Designed for administrative databases, lists, and dense trees.</p>
  </div>
</div>

HTML (Corner Triangle CTA)

<!-- Position Modifiers: top-left, top-right, bottom-left, bottom-right -->
<div class="corner-triangle top-right hide-print">
  <a href="https://github.com/..." target="_blank">
    <span class="corner-triangle-text">Use Magpie CSS!</span>
  </a>
</div>

SVG Icon Gallery & Vector Library

Following our Zero Emojis design standard, MagpieCSS/CMS uses clean, scale-independent, theme-aware inline SVGs for all graphics and user-interface elements. Click any icon card below to instantly copy the pure SVG markup to your clipboard.

Using Icons via CSS Classes

Instead of manually copy-pasting raw SVG inline markup everywhere, MagpieCSS/CMS includes built-in stylesheet classes for all icons. Simply assign the base class m-icon and the specific icon name class. These classes leverage CSS masks, allowing them to dynamically inherit the active theme color and scale cleanly alongside text.

1. Standard Usage

To render an icon, use a span or i element with the base and name class:

<span class="m-icon m-icon-home"></span>

2. Custom Color & Sizing

Customize size or color directly via standard styles or utility classes:

<span class="m-icon m-icon-settings" 
      style="color: var(--gold); 
             width: 32px; 
             height: 32px;">
</span>

General Interface

home Copy Vector

user Copy Vector

settings Copy Vector

folder Copy Vector

file Copy Vector

database Copy Vector

map Copy Vector

cart Copy Vector

search Copy Vector

trash Copy Vector

edit Copy Vector

lock Copy Vector

plus Copy Vector

check Copy Vector

warning Copy Vector

github Copy Vector

fullscreen Copy Vector

envelope Copy Vector

at-sign Copy Vector

Social Platforms

twitter / x Copy Vector

discord Copy Vector

youtube Copy Vector

linkedIn Copy Vector

reddit Copy Vector

Scripting & Languages

javascript Copy Vector

python Copy Vector

ruby Copy Vector

PHP Copy Vector

bash Copy Vector

powershell Copy Vector

Web & Developer Tooling

HTML Copy Vector

CSS Copy Vector

git Copy Vector

npm Copy Vector

link Copy Vector

Navigation & Directions

arrow-up Copy Vector

arrow-down Copy Vector

arrow-left Copy Vector

arrow-right Copy Vector

chevron-up Copy Vector

chevron-down Copy Vector

chevron-left Copy Vector

chevron-right Copy Vector

Documentation & UI Layouts

layout-grid Copy Vector

layout-columns Copy Vector

map-pin Copy Vector

shield Copy Vector

layers Copy Vector

message-square Copy Vector

code Copy Vector

compass Copy Vector

CMS & Administrative Vectors

zap Copy Vector

target Copy Vector

camera Copy Vector

upload Copy Vector

paperclip Copy Vector

image Copy Vector

log-out Copy Vector

activity Copy Vector

book-open Copy Vector

help-circle Copy Vector

info Copy Vector

alert-circle Copy Vector

alert-triangle Copy Vector

calendar Copy Vector

sliders Copy Vector

inbox Copy Vector

trophy Copy Vector

eye Copy Vector

moon Copy Vector

sun Copy Vector

refresh-cw Copy Vector

folder-minus Copy Vector

LLM Accept: text/markdown View

Agent view active! Below is the semantic Markdown compiled on-the-fly by the MagpieCSS.cms engine. This matches what an AI agent receives via Content Negotiation when requesting the active page with the header Accept: text/markdown.

Markdown Representation