# Understand Brand System

This branded track is no longer a lightly styled wireframe. It is the visual foundation for Understand: a serious audio-first library for difficult books and user-added texts.

## Brand Thesis

Understand should feel like a modern public library with a listening instrument inside it. The product is calm and trustworthy, but not plain. Its identity comes from three things:

- difficult books treated as real owned material
- audio progress treated as a precise instrument
- retellings treated as faithful assistance, never novelty

Avoid cozy beige reading-app language, generic SaaS minimalism, productivity dashboards, and decorative bookish nostalgia.

## Palette

Use a cool, ink-led system with restrained book colors.

- App background: cool library mist, near-white with a faint blue cast.
- Surface: clean white with a small amount of ink tint.
- Ink: deep blue-black, not brown-black.
- Muted text: slate grey-blue.
- Border: cool hairline grey-blue.
- Primary action: deep listening blue.
- Audio progress: same listening blue unless a book owns the surface.
- Book colors: oxblood, indigo, moss, ochre, and slate. These represent books in the Library, not random decoration.
- Warning / danger: muted red-clay only for blocked or destructive states.
- Success: restrained green only for complete or ready states.

Color rule: one page can use the listening blue plus one book color. Do not stack many accents in the Reader.

## Type

- Display: serif for the wordmark, book titles, source identity, and major reading moments.
- Body: system sans for controls, lists, settings, drawer copy, and anything repeated.
- Mono: only for small labels, time, progress, and technical metadata.

Typography should feel literary but operational. Big serif belongs to source identity, not every card title.

## Signature

The brand signature is the listening line: a thin ruled mark that behaves like a bookmark, waveform, or active reading position depending on context.

- In Library, it appears as a colored book spine or active progress rule.
- In Reader, it appears as the sentence highlight and playback progress.
- In Contents, it appears as row-local rewrite progress.
- In Settings, it should almost disappear; Settings is utilitarian.

Do not add a mascot, decorative illustration, stock image, or ornamental icon system.

## Page Standards

- Library: the real collection. One dominant active source, included public-domain books, user-added texts, visible progress, and Add to Library. No sample, starter, demo, example, or passage labels for included books.
- Reader: the core instrument. Passage surface, playback, Original / Retelling, and retelling settings must feel like one focused listening environment.
- Contents: table-of-contents as action list. Rewrite is row-local with inline status and ETA. No separate queue.
- Paste / Import: intake should feel like adding to the Library, not a throwaway onboarding step.
- Settings: quiet control room. Dense, clear, and grouped by what users understand: voice, reading, accessibility, language, plan, storage.

## Component Rules

- Prefer hairline borders, flat surfaces, and exact spacing over shadows.
- Use squared-soft radii: 8-16px for controls, 18-22px only for large panels.
- Buttons are literal verbs. Keep one primary action per panel.
- Status labels are small and factual.
- Hit targets stay at least 44px.
- Focus states must be visible.
- Keep the active source or active sentence visually dominant on every page.

## Anti-Patterns

- Beige / brown cozy-reader palette.
- Generic green accent on every control.
- Document-manager terms: loaded map, selected document, section counts.
- Trust badges on Library cards.
- "Original nearby."
- Starter/sample/demo/example language for Library inventory.
- Separate rewrite queue panels.
- Decorative gradients, emoji, fake illustrations, or icons beside every heading.

## Implementation Scope

1. Preserve `wireframes/index.html`.
2. Rebuild `branded/index.html` tokens and shared chrome.
3. Use Library as the first proof screen.
4. Carry the same visual grammar through Reader, Contents, Paste / Import, and Settings.
5. Keep interactions intact unless a current interaction violates the product model.