book-serif-index

---
name: book-serif-index
description: Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.
license: MIT
---

# Book Serif Index Skill

## Use When
- Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

## Workflow

## Scope
- Apply this as a full design-system direction when the interface should feel like a curated archival reader, manuscript viewer, or premium literary catalog.
- Use it for editorial experiences, story-driven product pages, archives, research interfaces, lore systems, or reading-centric layouts that need bookish structure and index navigation.
- This is not generic blog styling; it should combine immersive book surfaces with a technical or catalog-like outer frame.

## Visual target
- Create a central reading surface that feels like an open book, folio spread, or archival document laid within a darker surrounding interface shell.
- Let typography lead the experience: display serif or gothic-inspired headings, readable serif body text, and mono utility labels for navigation, metadata, and indexing.
- Use aged paper tones, subtle texture, crease shadows, edge shading, and light wear so the main content surface feels tactile and collected.
- Surround the reading area with restrained index or catalog UI: sidebar sections, chapter markers, section lists, archive labels, or mono navigation rails.
- Keep the palette restrained and atmospheric: dark outer shell, warm paper interior, muted ink tones, and one selective accent color derived from the design. If no brand accent exists, a subdued oxblood, bronze, or antique gold is acceptable.

## Implementation guidance
- Prefer a two-zone composition: a darker outer interface frame plus a lighter book-like content surface centered inside it.
- Use serif body copy with generous line height for readability, then pair it with mono labels, tracking-heavy section names, and quiet metadata for contrast.
- Build the book surface with gradients, inset shadows, subtle center crease treatment, edge shadows, and light paper texture so it reads as layered material rather than a flat beige card.
- Include index-like navigation patterns such as chapter lists, section trees, archive groupings, or sidebar entries with active states and small markers.
- Add scholarly details like drop caps, marginalia boxes, block labels, annotations, citations, folio markers, or footer metadata to reinforce the editorial system.
- Motion should stay calm and literary: masked text reveals, gentle entrance motion, slow ambient background drift, and restrained hover cues.

## Recommended patterns
- Outer shell: dark full-screen container with thin frame lines, subtle vertical rails, and muted corner markers.
- Book spread: two-page or dual-panel reading region with center crease, paper gradients, soft edge shadows, and slight tonal variation between pages.
- Index navigation: mono sidebar with grouped headings, active bullets, archive sections, or chapter entries arranged like a catalog.
- Reading details: drop caps, pull quotes, annotation cards, marginal notes, image plates with thin framed borders, and bottom folio labels.
- Typography system: decorative serif display, highly readable serif body, and mono metadata used sparingly for structure.

## Tuning knobs
- Antiquity: increase or reduce the amount of paper texture, warm tint, and wear depending on how historical versus contemporary the interface should feel.
- Technical overlay: add or remove catalog rails, index labels, and metadata so the design can lean more archival or more system-like.
- Book realism: tune crease depth, page shadows, and paper contrast so the surface feels tactile without becoming skeuomorphic overload.
- Accent use: keep accent color concentrated in headings, active index states, callouts, or notes instead of spreading it across the whole spread.
- Density: choose between airy museum-like composition or denser scholarly indexing depending on the content.

## Avoid
- Flat cream cards with serif text but no convincing book or archive structure.
- Generic publishing layouts that omit index rails, metadata, and material depth.
- Bright modern SaaS color systems that break the archival tone.
- Excessive distressed effects that make the interface dirty or hard to read.
- Overly ornate fantasy styling without the disciplined catalog and editorial framework.