Manga-Panel UI

# Manga-Panel UI

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#121212` |
| secondary | `#F7F3E8` |
| accent | `#FF5A36` |
| background | `#FCFAF5` |
| surface | `#FFFDF8` |
| text | `#121212` |
| muted | `#6D655B` |
| border | `#171717` |
| error | `#D72638` |
| success | `#1E8E5A` |
| warning | `#F2A900` |
| info | `#2F6BFF` |
| ink_blue | `#223A70` |
| panel_yellow | `#FFE27A` |
| panel_pink | `#F8B4C7` |
| panel_mint | `#BFE7D1` |
| shadow | `rgba(18,18,18,0.14)` |
| shadow_heavy | `rgba(18,18,18,0.24)` |

### Typography

- **Heading Font**: 'Archivo Black', 'Arial Black', sans-serif
- **Body Font**: 'IBM Plex Sans JP', 'Inter', sans-serif
- **Mono Font**: 'Azeret Mono', monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Black&family=Azeret+Mono:wght@400;600&family=IBM+Plex+Sans+JP:wght@400;500;600;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,20,24,32,40,48,64,80]

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 28px
- **Full**: 9999px

### Shadows

- **Sm**: 4px 4px 0 rgba(18,18,18,0.08)
- **Md**: 8px 8px 0 rgba(18,18,18,0.12)
- **Lg**: 14px 14px 0 rgba(18,18,18,0.18)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with local halftone fields, occasional solid accent fills, and heavy inset framing
- **Bg Pattern**: dots

### Borders

- **Default Width**: 3px
- **Accent Width**: 5px
- **Style**: solid
- **Character**: inked, assertive, editorial borders that feel drawn with a technical pen rather than soft product chrome

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy

## Rules

### Composition

Compose the page as a readable sequence of panels with deliberate interruption points. Major panels may span multiple rows or columns, but adjacency should imply narrative flow. Gutters are structural, not decorative, and should remain visually obvious at every breakpoint.

### Hierarchy

Use panel scale first, then caption strips, then weighty headings, then annotation marks to establish importance. Important regions should look framed and authored before they look interactive.

### Density

Alternate dense utility panels with open breathing panels. Never place high-detail panels edge-to-edge across the whole canvas; at least one region per view should provide visual release.

### Signature Patterns

- Every major panel uses a 3px solid border plus an offset shadow block that makes the frame feel printed and stacked.
- Caption strips attach to the top edge or corner of panels as small uppercase mono labels on contrasting fills.
- Feature panels use asymmetric grid spans, including at least one tall portrait panel and one wide panoramic panel.
- Selected emphasis zones use halftone dot or speed-line textures clipped inside the frame rather than behind the whole page.
- Guidance appears as a single speech-bubble or margin-note component with a pointed tail, never as a repeated motif.

## Layout

### Grid

Desktop uses a 12-column asymmetrical composition with mixed spans; tablet collapses to 8 columns while preserving one hero panel; mobile becomes a stacked panel reel with maintained gutter rhythm and reordered narrative priority.

### Breakpoints

large desktop at 1200px+, tablet at 768px-1199px, mobile below 768px with additional tightening below 520px.

### Whitespace

Reserve oversized gutters and selective blank or low-detail regions to create pacing. White space is a narrative beat, not leftover emptiness.

## Guidance

### Do

- Frame every major region clearly and let gutters stay visibly wide.
- Use captions to tell the user what mode, scene, or context they are entering.
- Mix tall, wide, and compact panels to control pacing.
- Keep accent colors localized to labels, alerts, and focal actions so the page stays readable.
- Use one annotation element to add personality or guidance without turning the page into a gimmick.

### Don't

- Do not turn the interface into a generic component gallery with labeled sections like a design system catalog.
- Do not apply halftone or comic texture to every surface until text contrast suffers.
- Do not use speech bubbles for routine labels, placeholders, or repeated navigation items.
- Do not equalize all panel sizes or remove the gutters on smaller screens.
- Do not substitute soft glassmorphism, vague gradients, or borderless cards for the defined framing system.