SPEC · v{{ version }} · BUILT ON KTHEME + LINKPOINT-DESIGN

CleverFerret theme system

A theme is three layers that combine freely: a layout pack (shape, navigation, type), a colour pack (MD3 roles, metal, status, reader pages) and an effect pack (sheen, glow, glass, pattern, motion). Any layout works with any colour and any effect: {{ comboFormula }}. Media modes then adjust chrome density for browsing, reading, listening and watching, and library-management patterns cover matching, repairing, filing and tagging.

Live preview

{{ themeId }}

Phone previews are the real interactive prototype, embedded and kept in sync with the controls. Tap around inside them.

{{ ph.cap }}
CLEVERFERRET
LIBRARY
BOOKS412SYNC2MHFY+8
{{ r.code }}{{ r.label }}
SYNC OK · 4 SOURCES3,696 ITEMS
BROWSE
{{ fm.count }}{{ fm.name }}
CONTINUE
{{ it.kindU }}{{ it.pct }}
{{ it.title }}
SOURCES
{{ so.label }}{{ so.stateU }}
CF
{{ n.label }}
Library · {{ themeName }}
CleverFerret
Browse
Tap to drill into any format
{{ fm.name }} {{ fm.count }}
Continue
Pick up where you left off
{{ it.kindU }}
{{ it.title }}
{{ it.author }}
{{ it.subtitle }}
TABLET · expanded width · {{ navLabelT }}
CleverFerret
{{ n.label }}
RESUME
The Three-Body Problem
Liu Cixin · Ch. 7 · 4h 12m left
Resume
Continue
{{ it.title }}
TV · 10-foot · D-pad focus: 3px ink ring + 1.06 scale + effect glow

Foundations

Shared scales from CFTheme.kt (type) and DesignTokensV1 (spacing, radius, motion, contrast). Specimens use the active layout pack's typefaces.

Type scale · {{ fontName }}
{{ t.label }} {{ t.sample }} {{ t.metrics }}
Spacing · 4dp grid
{{ s.name }}{{ s.v }}
{{ gutters }}
Radius · {{ layoutName }} pack
{{ r.name }}
{{ r.v }}
Core scale: {{ coreRadius }}
Motion · {{ motionLabel }}
{{ m.name }}{{ m.v }}
{{ m.use }}
{{ easing }}
Contrast targets · WCAG 2.2
{{ c.name }}{{ c.v }}
Primary used as text (labels, links, counts) is lifted to 4.5:1 on every surface as --priText.

1 · Layout packs

Geometry, navigation, type and card treatment. No colour. Every value is a token that the colour and effect layers consume.

PACKNAV (phone → tablet)TYPERADII lg/panel/tile/ctlRULE
{{ l.navSpec }}{{ l.fontName }}{{ l.radii }}{{ l.note }}

Sweep Console · LCARS conformance

Sweep Console follows the canonical LCARS split frame (reference wallpaper). The header column swoops down into the divider bar, and the content bar swoops down into the rail below it. Anything that breaks LCARS conventions is listed as a deviation, with the reason it is kept.

Conventions followed

{{ r.name }}{{ r.body }}

Deviations from LCARS design standards

{{ d.status }}{{ d.name }}
{{ d.body }}

2 · Colour pack · {{ palName }}

{{ wcagStatusText }}

Thirteen MD3 roles per pack plus a metal brush, status colours, player tokens and three reader pages. Every pack is corrected to WCAG 2.2 AA: text 4.5:1, UI and large text 3:1.

Palette audit{{ paletteAuditSummary }}{{ auditMode }}
Active pack{{ activeScore }}{{ activeScoreSub }}
Corrections{{ correctionsCount }}{{ correctionsSub }}
Aa{{ r.short }}
{{ r.label }}{{ r.hex }}{{ r.raw }}
PAIRSAMPLERATIOMINRESULT
{{ p.label }}Aa 12{{ p.ratio }}{{ p.min }}{{ p.badge }}

Status colours

From CFStatusColors, lifted to 4.5:1 on surface. Status is never colour alone: always an icon and a label too.

{{ s.label }}{{ s.hex }} · {{ s.ratio }}

Player controls

From CFPlayerControls, derived from the pack roles.

{{ p.name }}

Metal brush

shadow 0 → base .45 → highlight .85 → shimmer 1 · {{ metalSrc }}

{{ metalHex }}
{{ metalLegibility }}

Reader pages

Pack-tinted. The text canvas never gets pattern, grain or glow.

Aa{{ s.name }} {{ s.ratio }}

All colour packs

PACKFAMILYPREVIEWLOWEST TEXTLOWEST UIROLES CORRECTEDAA
{{ m.family }}Aa{{ m.text }}{{ m.ui }}{{ m.fixed }}{{ m.badge }}

3 · Effect packs

Named presets that fill fixed component slots and upgrade any layout: Neon on Metro Tiles gives glowing tiles; Architect on Sweep Console gives patterned consoles with a crystal pulse. Animated slots follow the motion setting. Accessibility packs pin this axis: E-Ink locks effects to Flat and motion to Off, and High Contrast locks effects to Flat.

PACKCTA · WORDMARKSURFACESBACKGROUNDACTIVE / FOCUSBORDERSANIMATED
{{ e.s1 }}{{ e.s2 }}{{ e.s3 }}{{ e.s4 }}{{ e.s5 }}{{ e.s6 }}

Library management patterns

CleverFerret catalogues like Calibre and files like Plex. New media passes a five-stage pipeline: it is matched against metadata sources, repaired if badly formatted, renamed to a server-ready path, and tagged. These patterns appear in the Import inbox, Fix match, File repair, Sort rules, Tag explorer and Calibre plugins screens.

Cataloging pipeline · services/pipeline
  1. {{ p.label }}{{ p.enum }}
{{ p.label }} · {{ p.desc }}
Match confidence
{{ c.range }}{{ c.label }} · {{ c.rule }}
Issue severity
{{ s.name }}{{ s.desc }}
Naming conventions · Calibre for books, Plex and Jellyfin for video and music
{{ n.name }}
{{ n.conv }} {{ p.text }}{{ n.example }}
Repair catalogue · {{ fixCount }} fixes
{{ x.problem }}{{ x.before }} → {{ x.after }}
Tags · hierarchy and provenance
{{ t.crumb }}{{ t.leaf }}{{ t.count }}
{{ s.name }}
Calibre tags keep their dotted hierarchy (shown with ›); Plex and Jellyfin genres and collections arrive flat and are mapped by auto-tag rules. Provenance follows TagType.
Calibre plugins · manifest field → component
{{ m.qt }}{{ m.pattern }}
{{ pluginLine }} See design-notes/calibre-plugins.md.

Components

The shared UI kit (cf-ui.css) rendered in the active theme. The app uses these classes too, so what you see here is what ships in the prototype.

Wordmark and headers
CleverFerret

Continue

Pick up where you left off

Buttons
Chips and badges
ResumeHard SF96% · Strong match2 fixes
Selection
Fiction ›Gothic17
Progress and status
Downloading · 64%FailedOngoing
Empty state

Inbox zero

Every file is matched, repaired and sorted into /Media.

Loading state
Error state
Jellyfin · DenCouldn’t reach 192.168.1.40
Removed Saga · Vol. 11 from device

Media modes

Media mode is not a theme choice. Each surface sets its own chrome density and controls; the colour pack stays the same and effects are limited to the listed slots.

{{ m.name }}

{{ m.body }}

{{ m.rule }}Open {{ m.screen }} →

Composed theme · portable JSON

Stored as three IDs plus motion and reader page, and resolved at runtime into CFTokens + MD3 ColorScheme. This replaces CleverFerretTheme (22 enums), MediaThemes and CFLayout, so the layout is no longer locked to a palette. 

{{ json }}
Legacy → colour packNAVY_GOLD → navy-gold, EMERALD_SILVER → emerald-silver … PAPER_INK → paper-ink. COPPER_BRONZE, STEEL_TITANIUM and COBALT_CHROME move to the metal brush of the nearest pack. EInkTokens and HighContrastTokens become the Accessibility family.
Legacy → effect packANCIENT_BRONZE, SILVER_ARCHITECT and OBSIDIAN_TECH become Architect on Royal Bronze, Royal Silver and Slate Cyan. Patterns, crystal glow and shimmer carry over.
DefaultCompose / Navy Gold with Sheen, which matches today's modern surface. Motion defaults to System.