# Mori design kit — Apricot / Midnight

Approved direction: A's rounded layouts, original coral origami fox, and bookshelf. C contributes dark theme COLORS ONLY. No moth, layout, or typography swap.

Open `preview.html` for font specimens, functional theme switching, hover/focus states, a responsive shelf example, downloadable assets, and all 12 screen references. This is a design handoff, not the TanStack Start application.

## Font

The image generator rendered lettering, not an actual font file. Its original prompt requested a Nunito-like rounded humanist sans. Nunito is the selected implementation match, not a forensic identification. The official variable font and OFL license are bundled in `fonts/`.

- Wordmark and H1: Nunito 900. Wordmark 32–40px; H1 30/36px mobile and 44/50px desktop.
- H2 and story titles: 800, 24/30px.
- Buttons, navigation, labels: 700, 16/22px.
- Supporting copy: 600, 14/20px minimum.
- Body: 400, 16/24px.
- Keep input text at least 16px; do not bake UI labels into images.

Source: https://github.com/googlefonts/nunito and https://raw.githubusercontent.com/google/fonts/main/ofl/nunito/METADATA.pb

## Theme and spacing

Canonical tokens live in `tokens.css`. `shadcn-theme.css` maps them to Tailwind v4 utilities; enable `tailwind.cssVariables: true` in the eventual components.json. Themes live in CSS, not as a list of hex values inside components.json. Do not initialize a second app from this folder.

| Token | Apricot | Midnight |
|---|---|---|
| Page | #FFF8ED | #102C32 |
| Card | #FFFCF6 | #1B3D43 |
| Text | #352C29 | #FFF4DA |
| Secondary text | #786459 | #A9C1C2 |
| Primary | #E96B50 | #F3BD64 |
| Primary text | #261D19 | #102C32 |
| Primary hover | #F17C63 | #FFD18B |
| Primary pressed | #E5684D | #EAB257 |
| Ghost/card hover | #FFE4CC | #315A60 |
| Border | #E8CDB7 | #426269 |
| Focus ring | #AE412C | #F3BD64 |

The generated references sometimes use white labels on bright coral. The implementation uses dark cocoa labels to improve contrast. Normal-text contrast: light primary 5.25:1, light hover 6.13:1, light pressed 5.05:1, dark primary 8.59:1. Muted text is 5.28:1 on light page and 6.18:1 on dark card. Tokens override incidental generated colors.

Radius scale: 8px tiny badges, 12px fields, 16px buttons, 24px cards/covers, 32px sheets/navigation shell, 9999px circles only. Same in both themes. Radius mapping in shadcn-theme.css is deliberately customized: `rounded-sm` fields, `rounded-md` buttons, `rounded-lg` cards, `rounded-xl` sheets. Remove duplicate stock radius declarations when integrating.

Spacing: 4px base; 8/12/16/20/24/32/40/48px. Mobile page gutter 20px; content gaps 24px; 16px within cards; minimum target 44×44px, primary action height 52px. Borders 1px for decorative containers, 2px for selected states/inputs. Focus ring 3px with 4px offset. Do not rely on hover to expose actions.

## Assets

- `assets/fox-illustration.png`: generated textured mascot, true alpha, 1254px.
- `assets/fox.svg` and `fox.png`: editable geometric brand redraw and matching 1024px raster. SVG contains paths, not an embedded PNG. It is a simplified interpretation, not a pixel-identical auto-trace.
- `assets/favicon.svg`, `.ico`, and `favicon-{16,32,48,180,192,512}.png`: simplified head mark for small sizes. ICO contains 16/32/48px entries. 180px PNG can be the Apple touch icon.
- `assets/library.svg` and `create.svg`: custom filled book / quill. Inline SVG uses currentColor; set `--icon-detail` to the surrounding surface. PNG exports are fallback previews; inline SVG is preferred for theme-aware icons.
- `assets/add-story-light.svg` / `.png` and `add-story-dark.svg` / `.png`: true transparent 2:3 tile assets, fox and dimensional plus included, NO label text. PNG exports 640×960.
- `assets/tile-*-art-reference.png`: richer generated texture references ONLY. These have opaque/checkerboard backgrounds; do not ship them as transparent assets.
- `assets/lantern-keeper-hero.png`: fresh standalone landscape manga illustration, no lettering; position around 70% center on mobile crops.
- `assets/clockwork-garden-cover.png`: fresh standalone 2:3 cover illustration, no lettering.

The fox remains coral in both themes. The small favicon is an optical simplification of that identity. Keep full-body mascot for header/empty states and head mark for favicon.

## Shelf construction

Use the provided `shelf.css` and the working example in preview.html. Two equal columns align their bottoms. The ledge is made from ::before (top plane) and ::after (front edge), with theme-aware wood colors and shadows. This allows the shelf to stretch to any screen width. The two actual cards sit above it.

The Add a story image is decorative inside ONE accessible button. The plus in the artwork is not a separate nested button. Put its label in a span at the bottom; it remains readable, localizable, and screen-reader accessible. Default label position is 14% from the bottom, inside the deliberately empty image region. Keyboard focus gets a ring. Hover uses a ring rather than a bitmap recolor. Do not dim the whole artwork to indicate text contrast.

## Screen flow

1. `01-create-mobile.png`: paste story or upload text.
2. `02-style-mobile.png`: choose among three illustrated color styles.
3. `03-characters-mobile.png`: review Mara and Pip, optionally request another look.
4. `04-generating-mobile.png`: generation stages, safe to return to library.
5. `05-ready-mobile.png`: open first chapter.
6. `06-retry-mobile.png`: recoverable failure, retain inputs and retry.
7. `07-create-desktop.png`: desktop Create.
8. `08-generating-desktop.png`: desktop generation.
9. `09-library-dark.png`: A layout and fox in C-inspired colors.
10. `a-library.png`, `a-desktop.png`, `a-reader.png`: approved initial references.

Progress stages must be derived from real job state, never fake timers or percentages. Add an indeterminate preparing state while extracting characters before step 3; the illustration and status pattern from screen 4 can be reused. Character editing is a small optional choice, not a full editor. What-if story extension remains future scope.

Reader: continuous downward scrolling; right-to-left ordering when manga panels share a row. No pagination. Full-color panels with clean gutters; hide large navigation chrome while reading. No generation implementation or Cloudflare/Modal deployment was performed in this design task.

## Verification

PNG metadata and alpha checked; SVGs rendered with resvg; favicon generated at six sizes; theme text pair contrasts calculated. Font is locally bundled. All local preview links checked. Reference images remain image-generated approximations; tokens and live specimens are authoritative for typography and control colors.

Image generation used the built-in tool. No CLI image API was used. See `prompts.json` for available generation prompts and provenance.

Official theming reference: https://ui.shadcn.com/docs/theming

Browser verification: WebKit at 390px and 1440px; Nunito loaded, no horizontal overflow, theme toggle and shelf dialog worked.