Skeleton Design System.

Skeleton Design System CSS Foundations and Framework Layers

Choose the layer that actually runs

The reading desk uses @skeletonlabs/skeleton 5.0.1, its Tailwind CSS utilities and three shipped themes. It does not load skeleton-svelte or skeleton-react. The buttons, badge, chip, card and disclosure presentation are genuine CSS utilities; the theme selector and saved-state logic are original JavaScript. That boundary lets the complete example run as a small Vite page without implying a framework component runtime.

Compile the utilities instead of importing raw CSS into a browser

Skeleton’s source contains Tailwind directives such as @utility and @variant. The provided Vite configuration includes @tailwindcss/vite, and the stylesheet imports Tailwind before Skeleton and the chosen themes. A raw link to the source package would not reproduce the compiled styles. The full build source is included so the preview is not dependent on hidden generated CSS.

1. Import Tailwind CSS.
2. Import Skeleton utilities.
3. Import each theme you want to select.
4. Compile the stylesheet with the Tailwind Vite plugin.

Skeleton Design System Theme Selection and Actual Values

Import each available theme explicitly

Cerberus, Mint and Rose are each imported from the package’s themes path. Selecting a name changes data-theme on the root, which selects the corresponding variable declarations. The reference lists real primary palette samples, surface extremes, spacing, radius and font declarations for each theme. These values are read from the pinned files rather than generated by swapping one accent color.

• Cerberus is the initial presentation.
• Mint and Rose are actual separately imported themes.
• Theme selection changes data-theme, not a copied content tree.

Keep the same complete content during comparison

The reading card, checklist and saved state remain intact when the theme changes. The side panel reads computed variables from the root after each selection, showing what the browser actually resolved. This makes the comparison useful: typography, shape and palette can change while the reader judges the same content and state.

Skeleton Design System Dark Appearance and Color-Scheme

Wire the dark variant to the actual control

The stylesheet defines a class-based dark variant matching .dark on the root or its descendants. Skeleton’s global rules use that variant to set color-scheme. The appearance button therefore changes the conditions used by light-dark() surface pairings. A toggle that changes a class but leaves Tailwind’s default media-based variant untouched can report Dark while the actual surfaces remain light.

Use a preset that remains legible

The appearance action uses preset-tonal-primary, and the reading action uses preset-filled-primary-500. Presets control the relationship between surface and foreground; a color token alone does not establish readable contrast. The actual dark rendered state was inspected after switching to Rose, including the control text and disclosure, rather than assuming a successful class change proved visual correctness.

Skeleton Design System Typography, Shape and Layout

Separate theme declarations from original hierarchy

Cerberus declares a system font, while Rose includes a different fallback stack. No remote font is fetched by this study; the browser uses available fonts in the selected stack. The original layout assigns a 36px page heading and 28px reading heading explicitly. Those composition choices remain distinct from the theme’s own family and weight declarations.

Let radius and spacing come from the theme

Skeleton Design System Reading State and Presentation Reset

Keep saving local and reversible

The reading action toggles aria-pressed, changes its label and updates a readable status message. It saves only an in-memory boolean for this page. There is no account, persistence or network request. The same state remains visible after changing themes, allowing readers to compare an active state across palettes.

Reset presentation without deleting reading state

Reset presentation returns to Cerberus and light appearance but deliberately leaves the saved boolean unchanged. Its label describes that scope. A separate action can remove the reading card from the local desk. Conflating these two actions would make a harmless visual reset unexpectedly discard a user’s current choice.

Skeleton Design System Native Disclosure and Real Content

Use a browser details element

The supporting explanation is a real details/summary structure with the disclosure utility. Keyboard and pointer opening are provided by the browser, while Skeleton supplies its presentation. This is not the Skeleton Svelte Accordion component, and no component API or event is fabricated. The paragraph contains a concrete explanation of what changes and what stays fixed.

Inspect the open state after its transition

The stylesheet can animate disclosure sizing. The visual check waits for the transition before capturing the open state; an immediate screenshot can catch the content partway through expansion. Layout validation includes the opened paragraph and the long computed font stack so the side panel cannot pass only while its substantial content is hidden.

Skeleton Design System Responsive Theme Inspection

Keep values readable on narrow screens

The workbench stacks below 720px, and outer padding reduces to 16px. Each computed token name and value occupies its own row, allowing long font stacks and OKLCH strings to wrap rather than force horizontal scrolling. The five color samples remain visible in a compact grid, and theme controls wrap onto additional lines.

Test theme and state combinations

The browser test saves the reading card, switches through Mint and Rose, enables dark appearance, opens the disclosure and then resets presentation. The saved state must survive throughout. This sequence was checked down to 280px, so the test covers the real long values and expanded content instead of a single initial theme screenshot.

Skeleton Design System Complete Vite Source

Save all four source files

The example includes index.html, style.css, main.js and vite.config.mjs. Install the pinned Skeleton, Tailwind and Vite dependencies, then run Vite in that directory. The explicit @source points to the HTML containing the utility classes, ensuring the compiled output includes the classes used by the reading desk. There is no missing framework scaffold.

Choose framework components separately when needed

Skeleton Design System Component Examples

<!doctype html><html lang="en" data-theme="cerberus"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme reading desk</title></head><body><main><header><div><p class="text-sm font-bold">SKELETON / THEME READING DESK</p><h1>The same content, three themes.</h1><p class="intro">Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.</p></div><span class="badge preset-tonal-primary">Original OpenDesign study</span></header><div class="controls"><label for="theme">Theme<select id="theme" class="select"><option value="cerberus">Cerberus</option><option value="mint">Mint</option><option value="rose">Rose</option></select></label><button id="mode" class="btn preset-tonal-primary">Use dark appearance</button><button id="reset" class="btn preset-tonal-surface">Reset presentation</button></div><div class="workbench"><article class="card preset-outlined-surface-200-800 reading"><span class="chip preset-tonal-primary">Reading / 4 minutes</span><h2 class="mt-6">Make the next step easier to see</h2><p>A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.</p><ul><li>Keep the heading clear in both appearances.</li><li>Use a supporting surface to group related information.</li><li>Repeat an important state in text, not color alone.</li></ul><button id="bookmark" class="btn preset-filled-primary-500 bookmark" aria-pressed="false">Save to this reading desk</button><p id="message" role="status">This reading card is not saved.</p></article><aside class="card preset-tonal-surface side"><h2 class="text-xl font-bold">Current theme values</h2><div class="palette" aria-label="Primary palette samples"><div class="swatch" style="background:var(--color-primary-100)"></div><div class="swatch" style="background:var(--color-primary-300)"></div><div class="swatch" style="background:var(--color-primary-500)"></div><div class="swatch" style="background:var(--color-primary-700)"></div><div class="swatch" style="background:var(--color-primary-900)"></div></div><dl class="tokens" id="tokens"></dl><details class="disclosure mt-6"><summary class="preset-tonal-primary">What changes with the theme?</summary><p>The imported theme changes palette, typography declarations and shape variables. The reading text and local saved state stay the same. Dark appearance changes surface pairings; it is not a second copy of the content.</p></details></aside></div><p class="scope">Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.</p></main><script type="module" src="./main.js"></script></body></html>

@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mint';
@import '@skeletonlabs/skeleton/themes/rose';
@source './index.html';
@custom-variant dark (&:where(.dark, .dark *));
body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}}

.workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal}

import './style.css';
const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect();

import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}});