Anime Scenic Surfaces

# Anime Scenic Surfaces

## Philosophy

Anime Scenic Surfaces treats interface containers as if they were painted background cels from a contemplative animation frame rather than neutral product boxes. The interface is built from scenic planes: misted sky washes, veranda shadows, foliage silhouettes, tiled roofs, stucco walls, and sun-faded paper layers that suggest place before function. Every card or panel feels like a fragment of an environment with light, weather, and depth already inside it. The result should evoke the stillness and emotional specificity of hand-painted background art where texture, atmosphere, and spatial layering carry as much meaning as typography or iconography. This language values environmental storytelling over chrome, depth by overlap over drop-shadow excess, and pigment behavior over sterile gradients. Surfaces should feel absorbent and touched by brushes: edges can feather, color can pool near seams, and paper tooth should remain visible beneath content. Motion should reinforce the sensation of camera drift through layered painted planes instead of app-like snapping. The interface should feel like a quiet station platform, a school corridor at dusk, a hillside shrine path after rain, or a corner café window with trees outside — specific, calm, and inhabited by weather. In practice, the language is neither nostalgic skeuomorphism nor fantasy illustration pasted behind UI. It is a disciplined system where scenic atmosphere becomes the surface model for interaction. Containers remain readable and structured, but their identity comes from environmental layering, silhouetted motifs, and painterly materiality. The user should feel they are moving through scenes, not browsing modules.

### Values

- Environmental storytelling: every major surface should imply a place, season, or hour of day.
- Painterly tactility: paper grain, brush drag, and pigment pooling must remain visible enough to matter.
- Layered depth: foreground, midground, and background planes create spatial hierarchy before borders do.
- Quiet emotion: interfaces should favor calm, wistful, observant moods over energetic spectacle.
- Readable softness: atmospheric surfaces must never erase text contrast or interaction clarity.
- Silhouette memory: foliage, railings, rooflines, and window frames act as compositional anchors.
- Temporal light: color palettes should imply sunrise haze, overcast diffusion, dusk amber, or rainy bloom rather than abstract brand color.
- Scene continuity: transitions should feel like panning between painted vignettes, not changing tabs.

### Anti-Values

- Sterile flat rectangles with no material cue or environmental identity.
- Glossy sci-fi glassmorphism that feels synthetic rather than absorbent and painted.
- Loud neon saturation without atmospheric modulation or paper softness.
- Over-detailed illustration that competes with content instead of supporting it.
- Mechanical microinteraction patterns that break the slow scenic mood.

### Visual Character

- fibrous paper grain visible across major surfaces and backgrounds
- pigment bloom concentrated near panel seams, corners, and divider lines
- soft silhouettes of foliage, eaves, utility wires, and window frames embedded into cards
- stacked painted parallax planes that separate sky, architecture, and foreground shadows
- scene-like card backgrounds with local light shifts rather than uniform fills

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#566f8c` |
| secondary | `#8aa2b8` |
| accent | `#de8f63` |
| background | `#edf0eb` |
| surface | `#f7f1e4` |
| text | `#293241` |
| muted | `#6f7b82` |
| border | `#8e816e` |
| error | `#b55a4b` |
| success | `#5b7a57` |
| warning | `#c79b57` |
| info | `#6f93b4` |
| sky_mist | `#dbe5ea` |
| sun_wash | `#f2d8b6` |
| foliage_ink | `#62745d` |
| roof_tile | `#8d6c68` |
| pond_blue | `#84a8b8` |
| paper_shadow | `#d8cdbf` |

### Typography

- **Heading Font**: Alegreya SC
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.22
- **Line Height**: 1.68
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap
- **Weights**: {"body":"400,500,700","heading":"400,500,700","mono":"400,500"}

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,20,24,32,40,56,72]

### Radii

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

### Shadows

- **Sm**: 0 6px 16px rgba(82, 73, 63, 0.08)
- **Md**: 0 14px 30px rgba(82, 73, 63, 0.12)
- **Lg**: 0 28px 60px rgba(82, 73, 63, 0.16)

### Surfaces

- **Treatment**: paper
- **Card Style**: Layered watercolor planes with translucent washes, grain overlays, and illustrated silhouette bands that frame content instead of boxy neutral fills.
- **Bg Pattern**: noise
- **Panel Underpainting**: Use sky-mist to sun-wash gradients beneath content, then anchor edges with muted architecture strokes and shadow veils.
- **Texture Notes**: Grain should be subtle but omnipresent; pigment pooling can darken seams by 6-12 percent.

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Borders are quiet pencil-and-ink contour lines softened by paper bleed; they should feel drawn, slightly weathered, and secondary to painted planes.

### Motion

- **Duration**: 420ms
- **Easing**: cubic-bezier(0.22, 0.8, 0.2, 1)
- **Philosophy**: deliberate
- **Behavior**: Use drifting parallax, slow opacity weathering, and gentle vertical settle as if layers are sliding under a multiplane camera.

## Rules

### Composition

Compose each screen as a scenic slice rather than a dashboard. Major containers should occupy foreground, midground, or background roles with visible overlap. Reserve one broad atmospheric wash for the page, then let cards carry local environmental variation such as shadow from leaves or warm light from a window. Use asymmetry to imply viewpoint: one edge can carry architecture silhouettes while the opposite side remains open like sky. Group controls into sheltered strips or ledges, never floating randomly. Let dividers behave like painted horizon lines or veranda beams. Keep illustration abstract enough to remain infrastructural. High-priority content belongs on the calmest plane with the least silhouette interference.

### Hierarchy

Hierarchy is established first by depth plane, second by temperature contrast, third by linework density, and only then by type size. Page titles sit on the most open atmospheric field, often with wide breathing room. Primary cards receive cleaner washes and stronger contour seams. Secondary cards can accept more foliage or architectural texture. Metadata should live in muted bands or small label chips that resemble stamped production notes. Calls to action are not glossy buttons; they are pigment-rich seals or lacquered tabs emerging from the scene. Alerts should appear as weather changes in the painting — warmer dusk bloom for warning, cool storm haze for information.

### Density

Moderate density with generous breathing room around key scenic surfaces. Content can cluster within panels, but outer composition must feel spacious like a frame from a film background. Avoid tight widget packing. Use dense detail only in localized silhouette bands or metadata rails so the main reading field stays calm.

### Signature Patterns

- Every major card uses a double background stack: an underpainting wash plus a grain overlay blended through multiple layered gradients.
- Section edges receive silhouette bands made from radial and linear gradients that imply foliage, rooflines, or window frames without literal illustrations.
- Containers are arranged in depth with translated overlap so at least one plane visibly tucks behind another like a painted multiplane shot.
- Important seams use pigment pooling via inset shadows and darker corner blooms rather than heavy mechanical borders.
- Scene transitions and hover states use slow parallax shifts where background-position and transform move at different rates.

## Layout

### Density

Moderate-open. Interior modules may hold several controls, but page architecture should privilege atmosphere and scene framing over widget count. This language should never feel cramped because environmental reading is part of the interaction model.

### Grid

Desktop uses a 12-column grid with 80px outer margins, 24px gutters, and a soft max-width of 1440px. Primary scenic panels often span 7-8 columns while supporting rails occupy 4-5. Tablet collapses to 8 columns with 20px gutters. Mobile uses a 4-column stack with 14px gutters and preserved overlap through negative margins only where legibility stays intact.

### Breakpoints

Mobile: 0-767px. Tablet: 768-1100px. Desktop: 1101px and above. Scenic overlaps should reduce as the viewport narrows, but texture, contour, and parallax identity must remain visible at every size.

### Whitespace

Whitespace behaves like air and weather. Leave open sky fields around headings and between major groups. Use larger top padding than bottom padding to create horizon-like settling. Empty areas are not waste; they hold light, distance, and implied motion.

### Responsive

On smaller screens, collapse lateral scenic rails below main content and turn deep overlaps into stacked terraces. Preserve one atmospheric hero panel, one silhouette-bearing edge, and one pigment-rich call-to-action region so the language remains identifiable on phone. Avoid inline layout styles so breakpoints can fully reshape the composition.

## Guidance

### Do

- Do build each screen around a plausible place such as a station concourse, alley storefront, classroom window wall, shrine steps, or tram interior.
- Do keep grain and pigment effects subtle enough that body copy stays highly legible.
- Do vary local color temperature between panels so each container feels like a distinct scenic plane.
- Do use silhouette motifs as framing devices along edges, corners, and footer bands rather than centered decoration.
- Do create depth with overlap, offset shadows, and parallax-backed surfaces before adding more borders.
- Do style controls as painted tabs, paper labels, or inked fields that still satisfy accessibility.
- Do let calm panels host complex reading tasks while more atmospheric panels carry navigation or ambient information.
- Do maintain visible contour logic so surfaces feel intentionally drawn, not muddy.
- Do use motion sparingly and slowly, like a camera drift or settling cel.
- Do preserve a sense of season, weather, or time-of-day in the palette and surface transitions.

### Don't

- Do not use glossy 3D bevels, glass blur shells, or neon cyberpunk effects.
- Do not place literal character art inside UI chrome; this language is about backgrounds, not mascots.
- Do not flood every surface with equal texture intensity.
- Do not use generic neutral cards with a scenic wallpaper only on the page background.
- Do not center all content symmetrically; the viewpoint should feel observed and slightly off-axis.
- Do not rely on pure black borders or sterile one-pixel grids.
- Do not make motion snappy, bouncy, or game-like.
- Do not let silhouette motifs overlap core input text or critical metrics.
- Do not default to modern SaaS typography; the heading and body system should feel editorial and atmospheric.
- Do not collapse the scene logic on mobile into a plain stacked list without painterly cues.