Core surfaces
--ink--ink-2--surface--surface-2--surface-3--line--line-hi--line-strongWolf Cloud / Style System / v2.4.0
The interface layer for calm infrastructure.
A living atlas of the Wolf Cloud design system: tokens, components, iconography, and the small behaviors that make a technical product feel considered. New in 2.4.0: a full set of maps-navigation primitives — map shell, floating controls, search, markers, an info window, directions, and a mobile bottom sheet.
01 / Foundations
Tokens that carry the atmosphere.
The palette, surfaces, type, dimensions, and motion values are all exposed as CSS custom properties. Toggle the theme in the header to see the same system move from midnight glass to a pale interface.
Brand + status
--brand--brand-2--brand-soft--brand-pale--ok--deg--err--infoType + layout
--font-sansIBM Plex Sans--font-monoIBM Plex Mono--page-width820px--gutter20px → 64px--radius-sm → pill6px → 999px--dur-fast → slow150ms → 450ms--blur-card20px--grid-size48px02 / Voice
Technical, warm, and easy to scan.
Typography utilities pair a quiet sans-serif body with a precise mono voice for labels, controls, and system metadata.
wc-eyebrowA small signal before the thought
wc-titleBuilt for the long night.
wc-leadA lead is lighter and wider, giving the headline room to breathe before the work begins.
wc-monoSTATUS / NOMINAL / 14:32:08 UTC
color utilitiesmuted · soft · subtle · gradient
03 / Components
The controls, states, and surfaces.
Small primitives stay composable: pair the base button with a modifier, choose a badge state, or reach for a plain card before a more opinionated service card.
The header theme switch and launcher above are the same icon-button primitive with JS attached.
Badges communicate a known state; live reachability dots appear on service cards below.
Example validation message — this field needs attention.
04 / Patterns
From a single surface to a whole service map.
These patterns show how the primitives scale into the dashboard structures used across Wolf Cloud.
wc-card / wc-panel / wc-surface
The three aliases share a padded, blurred glass surface with a quiet inset highlight and soft depth.
wc-card-sm
A compact version for dense admin layouts and supporting metadata.
wc-surface-soft
A lighter surface without the heavier card shadow.
Uptime
99.98%
Services
12
Regions
04
Last deploy
18m
wc-section-heading / wc-service-grid
Services
Everything with a place to go.
A service card is a distinct composite: icon, title, description, host, and a live client-side reachability dot.
Container registryVersioned images, deployment history, and a clean path to production.Object storageDurable storage for the files, snapshots, and quiet background work.Edge gatewayThe illustrative offline state makes the status system easy to inspect.
Checking Reachable Unreachable
wc-architecture
01Several servers, one infrastructure
A numbered feature row gives a complex system a legible sequence: infrastructure first, then the service layer that makes it useful.
02Docker per service
Each workload has a clear boundary, a small surface area, and enough metadata to know what is happening without opening another screen.
03A calm route to the edge
The same pattern works for marketing pages, admin panels, and operational overviews without losing its technical character.
05 / Video platform (new in 2.3.0)
Purpose-built for the self-hosted video platform.
Thirteen new component modules for video artwork, cards, the player shell, content rails, processing status, and admin list views — all built from the same tokens as everything above. No playback logic lives here; only the visual language around it.
12:34Ready
Building a home media pipeline, end to end
04:12
Shaka Packager, CENC, and ClearKey basics
Processing
Untitled upload — thumbnail pending
Compact horizontal variant (.is-compact) — used in the watch-page queue/related rail below.
wc-player — visual shell only (no playback logic)
Toggle .wc-player-state-loading / -buffering / -error from application JS as the real player (Shaka Player) reports events.
wc-rail — touch-scrollable content rail
Continue watching
See allsunset-timelapse.mp4Transcoding
64%~2 min remaining
- Uploading
- Queued
- Transcoding
- Packaging
- Encrypting
- Ready
DraftProcessingReadyPrivateScheduledFailedWarningProtected
Upload complete — processing has started.
wc-tabs / wc-table — admin editor and video list
| Status | Duration | ||
|---|---|---|---|
Q3 product update | Ready | 12:34 | |
Studio tour, unedited | Packaging | 31:02 | |
Failed encode — bad source codec | Failed | — |
Processing queue is empty
New uploads will appear here once they start transcoding.
Unopinionated shell — labels, icons, and routes are supplied by the consuming app.
07 / Behaviors
Small scripts, fully optional.
Every JavaScript module is standalone and self-guarding. This page includes all eleven so their contracts are visible and testable in context.
theme.jsHeader toggle persists dark/light mode in localStorage.
particles.jsAmbient dots fill the fixed background above.
launcher.jsOpen the header grid, then close it with Escape or an outside click.
portal-transition.jsThe Portal link uses the branded veil before leaving the page.
status-check.jsLive dots on the service cards probe from the visitor’s browser.
button-feedback.jsCheckmark + label swap on a button flagged with a server-rendered flash — see the demo card.
map-search.jsKeyboard nav + open/close for the map search results dropdown above.
bottom-sheet.jsDrag-to-resize + tap-to-cycle for the mobile bottom sheet above.
button-feedback.js
Plays a checkmark + label swap on any [data-feedback-success] button — reload the page to see it fire again.
confirm-submit.js + form-loading.js
Submitting asks for confirmation, then disables and relabels the button. No real navigation happens in this demo.
sidebar-collapse.js
Accessibility built in
Skip link, semantic landmarks, focus-visible states, reduced-motion handling, and live status labels are all part of the demonstration.
08 / Icon library
One visual language, eighty-four small signals.
The SVG partials are designed to be inlined so surrounding text color can drive them. This gallery uses the same files as CSS masks to keep the full set visible in a compact atlas. The 26 from play through shield are the video-platform set added in 2.3.0; the last 14 (map-pin through flag) are the maps-navigation set added in 2.4.0 — same 24×24 stroke style as everything before them.
Appendix / aliases
Small compatibility details, made visible.
The system keeps a few naming aliases for different product surfaces. They resolve to the same visual language and are safe to use in existing consumers.
wc-header / wc-kickerA simple flex header row
wc-panel
Plain padded surface alias.
wc-surface
Same foundation, same tokens.
wc-page / wc-shell-section
Ready-made content wrappers, for pages that skip a custom shell like this atlas's own. wc-page centers a narrow column for docs, forms, and admin screens; wc-shell-section centers a wider column with generous vertical rhythm for marketing pages.