CleverFerretApp prototype
Twenty navigable screens with real state: playback and queue, reader with page colours and type size, video, stats, onboarding, and a Theme Studio that previews before it applies.
Launch the prototype →
Design system · v2.0.0
Your whole library,
A themeable interface for books, audio, comics, podcasts, film and web serials that catalogues like Calibre and files like Plex. Explore the working phone app, then inspect the tokens, components and library-management patterns behind it.
- App screens
- 20
- Layout packs
- 7
- Colour packs
- 26
- Effect packs
- 8
Explore
Everything is static HTML driven by one token module,
cf-system.js, and one component stylesheet,
cf-ui.css.
Theme system
Layout, colour and effect packs, foundations, a WCAG audit of every pack, LCARS conformance notes, components and portable theme JSON.
Open the theme spec →Catalogue like Calibre, file like Plex
An import inbox that matches against metadata sources, repairs badly formatted files, renames to server-ready paths and tags with provenance. Covers Fix match, File repair, Sort rules and Tag explorer.
Open the import inbox →Calibre plugins on a phone
All nine plugins in Kaleaon/calibre_plugins keep their logic free of calibre and Qt, so it can run on-device under Python with a small calibre shim, behind mobile screens built from a manifest.
Read the feasibility note →Design principles
The rules every screen, pack and component follows.
Three independent layers
Layout, colour and effect packs combine freely. A layout never locks a palette, and a palette never decides navigation.
Metal is the signature
Each pack has one four-stop brush (shadow, base, highlight, shimmer), used only on the wordmark, primary CTAs, chips and progress.
Content wins in media modes
The reader canvas never gets pattern, grain or glow. Video drops every effect except the progress and focus accent.
Catalogue like Calibre, file like Plex
Matches are confidence-gated, repairs are reversible, and filed paths follow Calibre's library layout or Plex and Jellyfin naming, so servers scan them first time.
Accessible by default
Every pack is corrected to WCAG 2.2 AA, primary used as text is lifted to 4.5:1, status is never colour alone, motion follows the system, and there are E-Ink and High Contrast packs.
Honest about its references
Packs that quote a visual canon say where they break it. Sweep Console lists each LCARS deviation and the reason it is kept.
Colour packs
Each swatch shows the pack's background and metal brush. Select one to open the app in that pack.
The palette list needs JavaScript. The full set is in the theme spec.
Screen map
Every prototype screen and the source it was built from in
Kaleaon/CleverFerret
(paths under
CleverFerret/src/main/java/com/universalmedialibrary/).
| Screen | Source |
|---|---|
The screen map needs JavaScript. See
design-notes/sync-log.md.
|
|